# HG changeset patch # User Fabien Cazenave # Date 1324317006 -3600 # Node ID 683f56999fb35cc12124aaa256dd6e0c1290fab3 # Parent eb3679d929965276fb45de9be5f85260a2bac8ae 'DOMNodeFocused' pseudo-event + Mutation Event Demo diff --git a/index.xhtml b/index.xhtml --- a/index.xhtml +++ b/index.xhtml @@ -1,11 +1,10 @@ - + barbecue - -
@@ -85,7 +84,7 @@ 
   
-  
+  
 
   

     
 Go ahead, edit away! 

diff --git a/script.js b/script.js
--- a/script.js
+++ b/script.js
@@ -1,100 +1,173 @@
-//    -  Mutation Events:
-//    -  https://developer.mozilla.org/en/XUL/Events#Mutation_DOM_events
+/** Copyright (c) 2010-2011 Fabien Cazenave and Sonny Piers.
+  *
+  * Permission is hereby granted, free of charge, to any person obtaining a copy
+  * of this software and associated documentation files (the "Software"), to
+  * deal in the Software without restriction, including without limitation the
+  * rights to use, copy, modify, merge, publish, distribute, sublicense, and/or
+  * sell copies of the Software, and to permit persons to whom the Software is
+  * furnished to do so, subject to the following conditions:
+  *
+  * The above copyright notice and this permission notice shall be included in
+  * all copies or substantial portions of the Software.
+  *
+  * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+  * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+  * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+  * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+  * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+  * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS
+  * IN THE SOFTWARE.
+  */
 
-var gBreadCrumb = null;
-function updateBreadCrumb(node, action) {
-  if (!gBreadCrumb || !node || (node == document.body)) return;
+/**
+  * File          : barbecue.js
+  * Author        : Fabien Cazenave 
+  * Version       : 0.1
+  * License       : MIT
+  * Last Modified : 2011-12-19
+  */
+
+/** wysiwyg Editor
+  * expected compatibility: all browsers except IE<9.
+  * 
+  * This HTML content editor is not intended to compete with CKEditor or
+  * TinyMCE: it is designed to *test* the various implementations of
+  * contentEditable and execCommand in modern browsers.
+  *
+  * Note: a specific micro-format is expected for the format toolbar.
+  */
+!function(window, document, undefined) {
   var
-    body = document.body,
-    text = node.nodeName,
-    tmp  = node.parentNode;
-  while (tmp && tmp != body) {
-    text = tmp.nodeName + " > " + text;
-    tmp = tmp.parentNode;
+    gActiveEditor = null, // active editing host
+    gCommandDump  = null; // command dump field (debug)
+
+  function ExecCommand(toolbarElement) {
+    var argVal, argStr,
+      type    = toolbarElement.getAttribute("type"),
+      command = toolbarElement.getAttribute("data-command");
+
+    // get the execCommand argument according to the button type
+    switch (type) {
+      case "button":   // toolbar button: no argument
+        argVal = argStr = false;
+        break;
+      case "checkbox": // styleWithCSS: boolean argument
+        argVal = argStr = "" + toolbarElement.checked + "";
+        break;
+      default:         //  menu: string argument
-      if (!toolbarElement.selectedIndex) return;
-      argVal = toolbarElement.value;
-      argStr = "'" + argVal.replace("<", "<").replace(">", ">") + "'";
-      toolbarElement.selectedIndex = 0; // reset drop-down list
-  }
-  document.execCommand(command, false, argVal); // send requested action
-  if (gActiveEditor) gActiveEditor.focus();     // re-focus the editable element
-  gCommandDump.innerHTML = "document.execCommand('" + command + "', false, '" + argStr + "');";
-}
-window.addEventListener("DOMContentLoaded", function() {
-  var i,
-    buttons = document.querySelectorAll("*[data-command]"),
-    editors = document.querySelectorAll("*[contenteditable]");
-  for (i = 0; i < buttons.length; i++) {
-    buttons[i].onclick  = function() { ExecCommand(this); };
-    buttons[i].onchange = function() { ExecCommand(this); };
-  }
-  for (i = 0; i < editors.length; i++)
-    editors[i].onfocus = function() { gActiveEditor = this; };
-  gCommandDump = document.querySelector("#execCommand");
-  ExecCommand(document.querySelector("#useCSS"));
-}, false);
diff --git a/style.css b/style.css
--- a/style.css
+++ b/style.css
@@ -1,15 +1,3 @@
-.attrModified { border: 1px dashed red; }
-.nodeModified { border: 1px dashed navy; }
-.nodeInserted { border: 1px dotted brown; }
-
-
-
-
-
-
-
-
-
 html {
   background: #111;
   color: #eee;