Utilisateur:Zelda/todo-list.js
Note : après avoir enregistré la page, vous devrez forcer le rechargement complet du cache de votre navigateur pour voir les changements.
Mozilla / Firefox / Konqueror / Safari : maintenez la touche Majuscule (Shift) en cliquant sur le bouton Actualiser (Reload) ou pressez Maj-Ctrl-R (Cmd-R sur Apple Mac) ;
Chrome / Internet Explorer / Opera : maintenez la touche Ctrl en cliquant sur le bouton Actualiser ou pressez Ctrl-F5./**
* Simple todo list docked on the right side of the page to take rapid notes.
* The list is saved and survives over a browser restart.
* This script uses client side storage which is currently only
* available on Firefox 2, and will NOT work on other non gecko browsers (IE, Opera, ...)
* Some wiki syntax is rendered for :
* - links and templates (e.g. [[foo]] and {{bar}})
* - bold and italic text (e.g. ''foo'' and '''bar''')
* Author : Zelda for fr.wikipedia.org
*/
/**
* Creates and restore the todo list
*/
function initTodoList() {
if (typeof globalStorage == "undefined") {
alert("This todo list requires client side persistent storage features which are currently available on Firefox 2.0 only");
return;
}
// retrieve stored text
var textContent = globalStorage[location.hostname].getItem("todo-list.content");
if (! textContent) textContent = "";
var todoList = document.createElement("table");
todoList.id = "todo-list";
todoList.setAttribute("style", "height:60%; position:fixed; top:20%; right:0; z-index:10; opacity:.8; background:white; border:1px solid grey; border-spacing:0; -moz-border-radius-topleft: 5px; -moz-border-radius-bottomleft: 5px; border-right:none");
todoList.innerHTML = '<tr>' +
'<td style="font-weight:bold; font-variant:small-caps; width:.5em; text-align:center; border-right: 1px dashed grey; cursor:pointer;height:100%; line-height:200%" id="todo-list-bar">t<br/>o<br/>d<br/>o<br/> <br/>l<br/>i<br/>s<br/>t</td>' +
'<td><div style="width:100%; height:100%; overflow:auto; border:none; white-space:pre; font-size:120%; padding:.2em" id="todo-list-content" ondblclick="editTodoList()" title="Double-click to edit"></div><textarea style="width:100%; height:99%; overflow:auto; border:none" id="todo-list-edit" onchange="saveTodoList()" onblur="renderTodoList()">' + textContent + '</textarea></td>' +
'</tr>';
document.body.appendChild(todoList);
renderTodoList();
var visible = sessionStorage.getItem("todo-list.visible");
if (visible == "true") {
showTodoList();
} else {
hideTodoList();
}
}
/**
* Show the todo list
*/
function showTodoList() {
var todoList = document.getElementById("todo-list");
var listContent = document.getElementById("todo-list-content");
var todoListBar = document.getElementById("todo-list-bar");
listContent.parentNode.style.display = "";
todoList.style.width="40%";
todoListBar.onclick = hideTodoList;
sessionStorage.setItem("todo-list.visible", "true");
}
/**
* Hide the todo list
*/
function hideTodoList() {
var todoList = document.getElementById("todo-list");
var listContent = document.getElementById("todo-list-content");
var todoListBar = document.getElementById("todo-list-bar");
listContent.parentNode.style.display = "none";
todoList.style.width="auto";
todoListBar.onclick = showTodoList;
sessionStorage.setItem("todo-list.visible", "false");
}
/**
* Save the todo list (each time the content changes)
*/
function saveTodoList() {
globalStorage[location.hostname].setItem("todo-list.content", document.getElementById("todo-list-edit").value);
}
/**
* Shows a textarea to edit the todo list
*/
function editTodoList() {
var div = document.getElementById("todo-list-content");
var textarea = document.getElementById("todo-list-edit");
div.innerHTML = textarea.value;
div.style.display = "none";
textarea.style.display = "";
textarea.focus();
}
/**
* Renders the todo list interpreting some wiki syntax (links, templates, bold, italic)
*/
function renderTodoList() {
var div = document.getElementById("todo-list-content");
var textarea = document.getElementById("todo-list-edit");
var content = textarea.value;
if (!content || content == "") {
content = "''Empty list... Double click to edit.''";
}
// Escape HTML characters
content = content.replace(/&/g, "&").replace(/</g, "<").replace(/>/g, ">");
// Render wiki links
content = content.replace(/\[\[:?([^\|\]]*)(?:\|([^\|\]]+))?\]\]/g, function(match, article, title, offset, s) {
return "<a href=\"" + mw.config.get('wgServer') + "/wiki/" + article + "\">[[" + ((title) ? title : article) + "]]</a>";
});
// Render wiki templates
content = content.replace(/\{\{([^\}\|]+)(\|[^\}]+)?\}\}/g, "<a href=\"" + mw.config.get('wgServer') + "/wiki/Template:$1\">{{$1$2}}</a>");
// Render bold
content = content.replace(/'''((?:[^']|'(?!''))+)'''/g, "<b>$1</b>");
// Render italic
content = content.replace(/''((?:[^']|'(?!'))+)''/g, "<i>$1</i>");
div.innerHTML = content;
div.style.display = "";
textarea.style.display = "none";
}
$(initTodoList);