Mercurial > eldonilo > barbecue

annotate script.js @ 1:eb3679d92996

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
put JS and CSS code in separated files
author Sonny Piers <sonny.piers@gmail.com>
date Sun, 18 Dec 2011 19:49:32 +0100
parents
children 683f56999fb3
Ignore whitespace changes - Everywhere: Within whitespace: At end of lines:
rev   line source
1
eb3679d92996 put JS and CSS code in separated files
Sonny Piers <sonny.piers@gmail.com>
parents:
diff changeset
1 // - Mutation Events:
eb3679d92996 put JS and CSS code in separated files
Sonny Piers <sonny.piers@gmail.com>
parents:
diff changeset
2 // - https://developer.mozilla.org/en/XUL/Events#Mutation_DOM_events
eb3679d92996 put JS and CSS code in separated files
Sonny Piers <sonny.piers@gmail.com>
parents:
diff changeset
3
eb3679d92996 put JS and CSS code in separated files
Sonny Piers <sonny.piers@gmail.com>
parents:
diff changeset
4 var gBreadCrumb = null;
eb3679d92996 put JS and CSS code in separated files
Sonny Piers <sonny.piers@gmail.com>
parents:
diff changeset
5 function updateBreadCrumb(node, action) {
eb3679d92996 put JS and CSS code in separated files
Sonny Piers <sonny.piers@gmail.com>
parents:
diff changeset
6 if (!gBreadCrumb || !node || (node == document.body)) return;
eb3679d92996 put JS and CSS code in separated files
Sonny Piers <sonny.piers@gmail.com>
parents:
diff changeset
7 var
eb3679d92996 put JS and CSS code in separated files
Sonny Piers <sonny.piers@gmail.com>
parents:
diff changeset
8 body = document.body,
eb3679d92996 put JS and CSS code in separated files
Sonny Piers <sonny.piers@gmail.com>
parents:
diff changeset
9 text = node.nodeName,
eb3679d92996 put JS and CSS code in separated files
Sonny Piers <sonny.piers@gmail.com>
parents:
diff changeset
10 tmp = node.parentNode;
eb3679d92996 put JS and CSS code in separated files
Sonny Piers <sonny.piers@gmail.com>
parents:
diff changeset
11 while (tmp && tmp != body) {
eb3679d92996 put JS and CSS code in separated files
Sonny Piers <sonny.piers@gmail.com>
parents:
diff changeset
12 text = tmp.nodeName + " > " + text;
eb3679d92996 put JS and CSS code in separated files
Sonny Piers <sonny.piers@gmail.com>
parents:
diff changeset
13 tmp = tmp.parentNode;
eb3679d92996 put JS and CSS code in separated files
Sonny Piers <sonny.piers@gmail.com>
parents:
diff changeset
14 }
eb3679d92996 put JS and CSS code in separated files
Sonny Piers <sonny.piers@gmail.com>
parents:
diff changeset
15 text = action + ": " + text;
eb3679d92996 put JS and CSS code in separated files
Sonny Piers <sonny.piers@gmail.com>
parents:
diff changeset
16 gBreadCrumb.innerHTML = text;
eb3679d92996 put JS and CSS code in separated files
Sonny Piers <sonny.piers@gmail.com>
parents:
diff changeset
17 console.log(text);
eb3679d92996 put JS and CSS code in separated files
Sonny Piers <sonny.piers@gmail.com>
parents:
diff changeset
18 }
eb3679d92996 put JS and CSS code in separated files
Sonny Piers <sonny.piers@gmail.com>
parents:
diff changeset
19
eb3679d92996 put JS and CSS code in separated files
Sonny Piers <sonny.piers@gmail.com>
parents:
diff changeset
20 // retrieve the startContainer of the current selection
eb3679d92996 put JS and CSS code in separated files
Sonny Piers <sonny.piers@gmail.com>
parents:
diff changeset
21 var gLastFocusNode = null;
eb3679d92996 put JS and CSS code in separated files
Sonny Piers <sonny.piers@gmail.com>
parents:
diff changeset
22 function getSelectionStart() {
eb3679d92996 put JS and CSS code in separated files
Sonny Piers <sonny.piers@gmail.com>
parents:
diff changeset
23 var node = document.getSelection().anchorNode;
eb3679d92996 put JS and CSS code in separated files
Sonny Piers <sonny.piers@gmail.com>
parents:
diff changeset
24 return (node.nodeName == "#text" ? node.parentNode : node);
eb3679d92996 put JS and CSS code in separated files
Sonny Piers <sonny.piers@gmail.com>
parents:
diff changeset
25 }
eb3679d92996 put JS and CSS code in separated files
Sonny Piers <sonny.piers@gmail.com>
parents:
diff changeset
26 function onCaretMove(event, action) {
eb3679d92996 put JS and CSS code in separated files
Sonny Piers <sonny.piers@gmail.com>
parents:
diff changeset
27 var selection = document.getSelection();
eb3679d92996 put JS and CSS code in separated files
Sonny Piers <sonny.piers@gmail.com>
parents:
diff changeset
28 var node = selection.isCollapsed ? selection.focusNode
eb3679d92996 put JS and CSS code in separated files
Sonny Piers <sonny.piers@gmail.com>
parents:
diff changeset
29 : selection.getRangeAt(0).commonAncestorContainer;
eb3679d92996 put JS and CSS code in separated files
Sonny Piers <sonny.piers@gmail.com>
parents:
diff changeset
30 if (node != gLastFocusNode) {
eb3679d92996 put JS and CSS code in separated files
Sonny Piers <sonny.piers@gmail.com>
parents:
diff changeset
31 updateBreadCrumb(node, action);
eb3679d92996 put JS and CSS code in separated files
Sonny Piers <sonny.piers@gmail.com>
parents:
diff changeset
32 gLastFocusNode = node;
eb3679d92996 put JS and CSS code in separated files
Sonny Piers <sonny.piers@gmail.com>
parents:
diff changeset
33 }
eb3679d92996 put JS and CSS code in separated files
Sonny Piers <sonny.piers@gmail.com>
parents:
diff changeset
34 }
eb3679d92996 put JS and CSS code in separated files
Sonny Piers <sonny.piers@gmail.com>
parents:
diff changeset
35
eb3679d92996 put JS and CSS code in separated files
Sonny Piers <sonny.piers@gmail.com>
parents:
diff changeset
36 window.addEventListener("DOMContentLoaded", function() {
eb3679d92996 put JS and CSS code in separated files
Sonny Piers <sonny.piers@gmail.com>
parents:
diff changeset
37 gBreadCrumb = document.querySelector("#breadcrumb");
eb3679d92996 put JS and CSS code in separated files
Sonny Piers <sonny.piers@gmail.com>
parents:
diff changeset
38
eb3679d92996 put JS and CSS code in separated files
Sonny Piers <sonny.piers@gmail.com>
parents:
diff changeset
39 function onAttrModified(event) { updateBreadCrumb(event.target, "keypress"); }
eb3679d92996 put JS and CSS code in separated files
Sonny Piers <sonny.piers@gmail.com>
parents:
diff changeset
40 function onNodeInserted(event) { updateBreadCrumb(event.target, "inserted"); }
eb3679d92996 put JS and CSS code in separated files
Sonny Piers <sonny.piers@gmail.com>
parents:
diff changeset
41 function onNodeRemoved(event) { updateBreadCrumb(event.target, "removed "); }
eb3679d92996 put JS and CSS code in separated files
Sonny Piers <sonny.piers@gmail.com>
parents:
diff changeset
42
eb3679d92996 put JS and CSS code in separated files
Sonny Piers <sonny.piers@gmail.com>
parents:
diff changeset
43 function onKeyUp(event) { onCaretMove(event, "keyup"); }
eb3679d92996 put JS and CSS code in separated files
Sonny Piers <sonny.piers@gmail.com>
parents:
diff changeset
44 function onClick(event) { onCaretMove(event, "click"); }
eb3679d92996 put JS and CSS code in separated files
Sonny Piers <sonny.piers@gmail.com>
parents:
diff changeset
45
eb3679d92996 put JS and CSS code in separated files
Sonny Piers <sonny.piers@gmail.com>
parents:
diff changeset
46 // listening to mutation events on 'document' freezes Firefox :-/
eb3679d92996 put JS and CSS code in separated files
Sonny Piers <sonny.piers@gmail.com>
parents:
diff changeset
47 var i, editors = document.querySelectorAll("*[contenteditable]");
eb3679d92996 put JS and CSS code in separated files
Sonny Piers <sonny.piers@gmail.com>
parents:
diff changeset
48 for (i = 0; i < editors.length; i++) {
eb3679d92996 put JS and CSS code in separated files
Sonny Piers <sonny.piers@gmail.com>
parents:
diff changeset
49 // mutation events -- do we really need them?
eb3679d92996 put JS and CSS code in separated files
Sonny Piers <sonny.piers@gmail.com>
parents:
diff changeset
50 editors[i].addEventListener("DOMAttrModified", onAttrModified, false);
eb3679d92996 put JS and CSS code in separated files
Sonny Piers <sonny.piers@gmail.com>
parents:
diff changeset
51 editors[i].addEventListener("DOMNodeInserted", onNodeInserted, false);
eb3679d92996 put JS and CSS code in separated files
Sonny Piers <sonny.piers@gmail.com>
parents:
diff changeset
52 editors[i].addEventListener("DOMNodeRemoved", onNodeRemoved, false);
eb3679d92996 put JS and CSS code in separated files
Sonny Piers <sonny.piers@gmail.com>
parents:
diff changeset
53 // caret movements
eb3679d92996 put JS and CSS code in separated files
Sonny Piers <sonny.piers@gmail.com>
parents:
diff changeset
54 //editors[i].addEventListener("textinput", onKeyUp, false);
eb3679d92996 put JS and CSS code in separated files
Sonny Piers <sonny.piers@gmail.com>
parents:
diff changeset
55 editors[i].addEventListener("keyup", onKeyUp, false);
eb3679d92996 put JS and CSS code in separated files
Sonny Piers <sonny.piers@gmail.com>
parents:
diff changeset
56 editors[i].addEventListener("mouseup", onClick, false);
eb3679d92996 put JS and CSS code in separated files
Sonny Piers <sonny.piers@gmail.com>
parents:
diff changeset
57 }
eb3679d92996 put JS and CSS code in separated files
Sonny Piers <sonny.piers@gmail.com>
parents:
diff changeset
58 }, false);
eb3679d92996 put JS and CSS code in separated files
Sonny Piers <sonny.piers@gmail.com>
parents:
diff changeset
59
eb3679d92996 put JS and CSS code in separated files
Sonny Piers <sonny.piers@gmail.com>
parents:
diff changeset
60
eb3679d92996 put JS and CSS code in separated files
Sonny Piers <sonny.piers@gmail.com>
parents:
diff changeset
61
eb3679d92996 put JS and CSS code in separated files
Sonny Piers <sonny.piers@gmail.com>
parents:
diff changeset
62 // editor
eb3679d92996 put JS and CSS code in separated files
Sonny Piers <sonny.piers@gmail.com>
parents:
diff changeset
63
eb3679d92996 put JS and CSS code in separated files
Sonny Piers <sonny.piers@gmail.com>
parents:
diff changeset
64 var
eb3679d92996 put JS and CSS code in separated files
Sonny Piers <sonny.piers@gmail.com>
parents:
diff changeset
65 gActiveEditor = null, // active editing host
eb3679d92996 put JS and CSS code in separated files
Sonny Piers <sonny.piers@gmail.com>
parents:
diff changeset
66 gCommandDump = null; // command dump field
eb3679d92996 put JS and CSS code in separated files
Sonny Piers <sonny.piers@gmail.com>
parents:
diff changeset
67 function ExecCommand(toolbarElement) {
eb3679d92996 put JS and CSS code in separated files
Sonny Piers <sonny.piers@gmail.com>
parents:
diff changeset
68 var argVal, argStr,
eb3679d92996 put JS and CSS code in separated files
Sonny Piers <sonny.piers@gmail.com>
parents:
diff changeset
69 type = toolbarElement.getAttribute("type"),
eb3679d92996 put JS and CSS code in separated files
Sonny Piers <sonny.piers@gmail.com>
parents:
diff changeset
70 command = toolbarElement.getAttribute("data-command");
eb3679d92996 put JS and CSS code in separated files
Sonny Piers <sonny.piers@gmail.com>
parents:
diff changeset
71 switch (type) { // get the execCommand argument according to the button type
eb3679d92996 put JS and CSS code in separated files
Sonny Piers <sonny.piers@gmail.com>
parents:
diff changeset
72 case "button": // toolbar button: no argument
eb3679d92996 put JS and CSS code in separated files
Sonny Piers <sonny.piers@gmail.com>
parents:
diff changeset
73 argVal = argStr = false;
eb3679d92996 put JS and CSS code in separated files
Sonny Piers <sonny.piers@gmail.com>
parents:
diff changeset
74 break;
eb3679d92996 put JS and CSS code in separated files
Sonny Piers <sonny.piers@gmail.com>
parents:
diff changeset
75 case "checkbox": // styleWithCSS: boolean argument
eb3679d92996 put JS and CSS code in separated files
Sonny Piers <sonny.piers@gmail.com>
parents:
diff changeset
76 argVal = argStr = "" + toolbarElement.checked + "";
eb3679d92996 put JS and CSS code in separated files
Sonny Piers <sonny.piers@gmail.com>
parents:
diff changeset
77 break;
eb3679d92996 put JS and CSS code in separated files
Sonny Piers <sonny.piers@gmail.com>
parents:
diff changeset
78 default: // <select> menu: string argument
eb3679d92996 put JS and CSS code in separated files
Sonny Piers <sonny.piers@gmail.com>
parents:
diff changeset
79 if (!toolbarElement.selectedIndex) return;
eb3679d92996 put JS and CSS code in separated files
Sonny Piers <sonny.piers@gmail.com>
parents:
diff changeset
80 argVal = toolbarElement.value;
eb3679d92996 put JS and CSS code in separated files
Sonny Piers <sonny.piers@gmail.com>
parents:
diff changeset
81 argStr = "'" + argVal.replace("<", "&lt;").replace(">", "&gt;") + "'";
eb3679d92996 put JS and CSS code in separated files
Sonny Piers <sonny.piers@gmail.com>
parents:
diff changeset
82 toolbarElement.selectedIndex = 0; // reset drop-down list
eb3679d92996 put JS and CSS code in separated files
Sonny Piers <sonny.piers@gmail.com>
parents:
diff changeset
83 }
eb3679d92996 put JS and CSS code in separated files
Sonny Piers <sonny.piers@gmail.com>
parents:
diff changeset
84 document.execCommand(command, false, argVal); // send requested action
eb3679d92996 put JS and CSS code in separated files
Sonny Piers <sonny.piers@gmail.com>
parents:
diff changeset
85 if (gActiveEditor) gActiveEditor.focus(); // re-focus the editable element
eb3679d92996 put JS and CSS code in separated files
Sonny Piers <sonny.piers@gmail.com>
parents:
diff changeset
86 gCommandDump.innerHTML = "document.execCommand('" + command + "', false, '" + argStr + "');";
eb3679d92996 put JS and CSS code in separated files
Sonny Piers <sonny.piers@gmail.com>
parents:
diff changeset
87 }
eb3679d92996 put JS and CSS code in separated files
Sonny Piers <sonny.piers@gmail.com>
parents:
diff changeset
88 window.addEventListener("DOMContentLoaded", function() {
eb3679d92996 put JS and CSS code in separated files
Sonny Piers <sonny.piers@gmail.com>
parents:
diff changeset
89 var i,
eb3679d92996 put JS and CSS code in separated files
Sonny Piers <sonny.piers@gmail.com>
parents:
diff changeset
90 buttons = document.querySelectorAll("*[data-command]"),
eb3679d92996 put JS and CSS code in separated files
Sonny Piers <sonny.piers@gmail.com>
parents:
diff changeset
91 editors = document.querySelectorAll("*[contenteditable]");
eb3679d92996 put JS and CSS code in separated files
Sonny Piers <sonny.piers@gmail.com>
parents:
diff changeset
92 for (i = 0; i < buttons.length; i++) {
eb3679d92996 put JS and CSS code in separated files
Sonny Piers <sonny.piers@gmail.com>
parents:
diff changeset
93 buttons[i].onclick = function() { ExecCommand(this); };
eb3679d92996 put JS and CSS code in separated files
Sonny Piers <sonny.piers@gmail.com>
parents:
diff changeset
94 buttons[i].onchange = function() { ExecCommand(this); };
eb3679d92996 put JS and CSS code in separated files
Sonny Piers <sonny.piers@gmail.com>
parents:
diff changeset
95 }
eb3679d92996 put JS and CSS code in separated files
Sonny Piers <sonny.piers@gmail.com>
parents:
diff changeset
96 for (i = 0; i < editors.length; i++)
eb3679d92996 put JS and CSS code in separated files
Sonny Piers <sonny.piers@gmail.com>
parents:
diff changeset
97 editors[i].onfocus = function() { gActiveEditor = this; };
eb3679d92996 put JS and CSS code in separated files
Sonny Piers <sonny.piers@gmail.com>
parents:
diff changeset
98 gCommandDump = document.querySelector("#execCommand");
eb3679d92996 put JS and CSS code in separated files
Sonny Piers <sonny.piers@gmail.com>
parents:
diff changeset
99 ExecCommand(document.querySelector("#useCSS"));
eb3679d92996 put JS and CSS code in separated files
Sonny Piers <sonny.piers@gmail.com>
parents:
diff changeset
100 }, false);