Mercurial > eldonilo > barbecue

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