Utilisateur:Zelda/todo-list.js
Un article de Wikipédia, l'encyclopédie libre.
Note : Après avoir publié la page, vous devrez forcer son rechargement pour voir les changements : Mozilla / Konqueror / Firefox : Shift-Ctrl-R, Internet Explorer / Opera : Ctrl-F5, Safari : Cmd-R.
/** * 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=\"" + wgServer + "/wiki/" + article + "\">[[" + ((title) ? title : article) + "]]</a>"; }); // Render wiki templates content = content.replace(/\{\{([^\}\|]+)(\|[^\}]+)?\}\}/g, "<a href=\"" + 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"; } addLoadEvent(initTodoList);