Utilisateur:Stef48/todo.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''')
 */
 
/**
 * 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, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
  // 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);