Mercurial > eldonilo > barbecue

annotate script.js @ 4:95c6fa5f4715

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
readme
author Fabien Cazenave <fabien@cazenave.cc>
date Mon, 19 Dec 2011 19:00:47 +0100
parents 683f56999fb3
children
Ignore whitespace changes - Everywhere: Within whitespace: At end of lines:
rev   line source
2
683f56999fb3 'DOMNodeFocused' pseudo-event + Mutation Event Demo
Fabien Cazenave <fabien@cazenave.cc>
parents: 1
diff changeset
1 /** Copyright (c) 2010-2011 Fabien Cazenave and Sonny Piers.
683f56999fb3 'DOMNodeFocused' pseudo-event + Mutation Event Demo
Fabien Cazenave <fabien@cazenave.cc>
parents: 1
diff changeset
2 *
683f56999fb3 'DOMNodeFocused' pseudo-event + Mutation Event Demo
Fabien Cazenave <fabien@cazenave.cc>
parents: 1
diff changeset
3 * Permission is hereby granted, free of charge, to any person obtaining a copy
683f56999fb3 'DOMNodeFocused' pseudo-event + Mutation Event Demo
Fabien Cazenave <fabien@cazenave.cc>
parents: 1
diff changeset
4 * of this software and associated documentation files (the "Software"), to
683f56999fb3 'DOMNodeFocused' pseudo-event + Mutation Event Demo
Fabien Cazenave <fabien@cazenave.cc>
parents: 1
diff changeset
5 * deal in the Software without restriction, including without limitation the
683f56999fb3 'DOMNodeFocused' pseudo-event + Mutation Event Demo
Fabien Cazenave <fabien@cazenave.cc>
parents: 1
diff changeset
6 * rights to use, copy, modify, merge, publish, distribute, sublicense, and/or
683f56999fb3 'DOMNodeFocused' pseudo-event + Mutation Event Demo
Fabien Cazenave <fabien@cazenave.cc>
parents: 1
diff changeset
7 * sell copies of the Software, and to permit persons to whom the Software is
683f56999fb3 'DOMNodeFocused' pseudo-event + Mutation Event Demo
Fabien Cazenave <fabien@cazenave.cc>
parents: 1
diff changeset
8 * furnished to do so, subject to the following conditions:
683f56999fb3 'DOMNodeFocused' pseudo-event + Mutation Event Demo
Fabien Cazenave <fabien@cazenave.cc>
parents: 1
diff changeset
9 *
683f56999fb3 'DOMNodeFocused' pseudo-event + Mutation Event Demo
Fabien Cazenave <fabien@cazenave.cc>
parents: 1
diff changeset
10 * The above copyright notice and this permission notice shall be included in
683f56999fb3 'DOMNodeFocused' pseudo-event + Mutation Event Demo
Fabien Cazenave <fabien@cazenave.cc>
parents: 1
diff changeset
11 * all copies or substantial portions of the Software.
683f56999fb3 'DOMNodeFocused' pseudo-event + Mutation Event Demo
Fabien Cazenave <fabien@cazenave.cc>
parents: 1
diff changeset
12 *
683f56999fb3 'DOMNodeFocused' pseudo-event + Mutation Event Demo
Fabien Cazenave <fabien@cazenave.cc>
parents: 1
diff changeset
13 * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
683f56999fb3 'DOMNodeFocused' pseudo-event + Mutation Event Demo
Fabien Cazenave <fabien@cazenave.cc>
parents: 1
diff changeset
14 * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
683f56999fb3 'DOMNodeFocused' pseudo-event + Mutation Event Demo
Fabien Cazenave <fabien@cazenave.cc>
parents: 1
diff changeset
15 * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
683f56999fb3 'DOMNodeFocused' pseudo-event + Mutation Event Demo
Fabien Cazenave <fabien@cazenave.cc>
parents: 1
diff changeset
16 * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
683f56999fb3 'DOMNodeFocused' pseudo-event + Mutation Event Demo
Fabien Cazenave <fabien@cazenave.cc>
parents: 1
diff changeset
17 * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
683f56999fb3 'DOMNodeFocused' pseudo-event + Mutation Event Demo
Fabien Cazenave <fabien@cazenave.cc>
parents: 1
diff changeset
18 * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS
683f56999fb3 'DOMNodeFocused' pseudo-event + Mutation Event Demo
Fabien Cazenave <fabien@cazenave.cc>
parents: 1
diff changeset
19 * IN THE SOFTWARE.
683f56999fb3 'DOMNodeFocused' pseudo-event + Mutation Event Demo
Fabien Cazenave <fabien@cazenave.cc>
parents: 1
diff changeset
20 */
1
eb3679d92996 put JS and CSS code in separated files
Sonny Piers <sonny.piers@gmail.com>
parents:
diff changeset
21
2
683f56999fb3 'DOMNodeFocused' pseudo-event + Mutation Event Demo
Fabien Cazenave <fabien@cazenave.cc>
parents: 1
diff changeset
22 /**
683f56999fb3 'DOMNodeFocused' pseudo-event + Mutation Event Demo
Fabien Cazenave <fabien@cazenave.cc>
parents: 1
diff changeset
23 * File : barbecue.js
683f56999fb3 'DOMNodeFocused' pseudo-event + Mutation Event Demo
Fabien Cazenave <fabien@cazenave.cc>
parents: 1
diff changeset
24 * Author : Fabien Cazenave <fabien@cazenave.cc>
683f56999fb3 'DOMNodeFocused' pseudo-event + Mutation Event Demo
Fabien Cazenave <fabien@cazenave.cc>
parents: 1
diff changeset
25 * Version : 0.1
683f56999fb3 'DOMNodeFocused' pseudo-event + Mutation Event Demo
Fabien Cazenave <fabien@cazenave.cc>
parents: 1
diff changeset
26 * License : MIT
683f56999fb3 'DOMNodeFocused' pseudo-event + Mutation Event Demo
Fabien Cazenave <fabien@cazenave.cc>
parents: 1
diff changeset
27 * Last Modified : 2011-12-19
683f56999fb3 'DOMNodeFocused' pseudo-event + Mutation Event Demo
Fabien Cazenave <fabien@cazenave.cc>
parents: 1
diff changeset
28 */
683f56999fb3 'DOMNodeFocused' pseudo-event + Mutation Event Demo
Fabien Cazenave <fabien@cazenave.cc>
parents: 1
diff changeset
29
683f56999fb3 'DOMNodeFocused' pseudo-event + Mutation Event Demo
Fabien Cazenave <fabien@cazenave.cc>
parents: 1
diff changeset
30 /** wysiwyg Editor
683f56999fb3 'DOMNodeFocused' pseudo-event + Mutation Event Demo
Fabien Cazenave <fabien@cazenave.cc>
parents: 1
diff changeset
31 * expected compatibility: all browsers except IE<9.
683f56999fb3 'DOMNodeFocused' pseudo-event + Mutation Event Demo
Fabien Cazenave <fabien@cazenave.cc>
parents: 1
diff changeset
32 *
683f56999fb3 'DOMNodeFocused' pseudo-event + Mutation Event Demo
Fabien Cazenave <fabien@cazenave.cc>
parents: 1
diff changeset
33 * This HTML content editor is not intended to compete with CKEditor or
683f56999fb3 'DOMNodeFocused' pseudo-event + Mutation Event Demo
Fabien Cazenave <fabien@cazenave.cc>
parents: 1
diff changeset
34 * TinyMCE: it is designed to *test* the various implementations of
683f56999fb3 'DOMNodeFocused' pseudo-event + Mutation Event Demo
Fabien Cazenave <fabien@cazenave.cc>
parents: 1
diff changeset
35 * contentEditable and execCommand in modern browsers.
683f56999fb3 'DOMNodeFocused' pseudo-event + Mutation Event Demo
Fabien Cazenave <fabien@cazenave.cc>
parents: 1
diff changeset
36 *
683f56999fb3 'DOMNodeFocused' pseudo-event + Mutation Event Demo
Fabien Cazenave <fabien@cazenave.cc>
parents: 1
diff changeset
37 * Note: a specific micro-format is expected for the format toolbar.
683f56999fb3 'DOMNodeFocused' pseudo-event + Mutation Event Demo
Fabien Cazenave <fabien@cazenave.cc>
parents: 1
diff changeset
38 */
683f56999fb3 'DOMNodeFocused' pseudo-event + Mutation Event Demo
Fabien Cazenave <fabien@cazenave.cc>
parents: 1
diff changeset
39 !function(window, document, undefined) {
1
eb3679d92996 put JS and CSS code in separated files
Sonny Piers <sonny.piers@gmail.com>
parents:
diff changeset
40 var
2
683f56999fb3 'DOMNodeFocused' pseudo-event + Mutation Event Demo
Fabien Cazenave <fabien@cazenave.cc>
parents: 1
diff changeset
41 gActiveEditor = null, // active editing host
683f56999fb3 'DOMNodeFocused' pseudo-event + Mutation Event Demo
Fabien Cazenave <fabien@cazenave.cc>
parents: 1
diff changeset
42 gCommandDump = null; // command dump field (debug)
683f56999fb3 'DOMNodeFocused' pseudo-event + Mutation Event Demo
Fabien Cazenave <fabien@cazenave.cc>
parents: 1
diff changeset
43
683f56999fb3 'DOMNodeFocused' pseudo-event + Mutation Event Demo
Fabien Cazenave <fabien@cazenave.cc>
parents: 1
diff changeset
44 function ExecCommand(toolbarElement) {
683f56999fb3 'DOMNodeFocused' pseudo-event + Mutation Event Demo
Fabien Cazenave <fabien@cazenave.cc>
parents: 1
diff changeset
45 var argVal, argStr,
683f56999fb3 'DOMNodeFocused' pseudo-event + Mutation Event Demo
Fabien Cazenave <fabien@cazenave.cc>
parents: 1
diff changeset
46 type = toolbarElement.getAttribute("type"),
683f56999fb3 'DOMNodeFocused' pseudo-event + Mutation Event Demo
Fabien Cazenave <fabien@cazenave.cc>
parents: 1
diff changeset
47 command = toolbarElement.getAttribute("data-command");
683f56999fb3 'DOMNodeFocused' pseudo-event + Mutation Event Demo
Fabien Cazenave <fabien@cazenave.cc>
parents: 1
diff changeset
48
683f56999fb3 'DOMNodeFocused' pseudo-event + Mutation Event Demo
Fabien Cazenave <fabien@cazenave.cc>
parents: 1
diff changeset
49 // get the execCommand argument according to the button type
683f56999fb3 'DOMNodeFocused' pseudo-event + Mutation Event Demo
Fabien Cazenave <fabien@cazenave.cc>
parents: 1
diff changeset
50 switch (type) {
683f56999fb3 'DOMNodeFocused' pseudo-event + Mutation Event Demo
Fabien Cazenave <fabien@cazenave.cc>
parents: 1
diff changeset
51 case "button": // toolbar button: no argument
683f56999fb3 'DOMNodeFocused' pseudo-event + Mutation Event Demo
Fabien Cazenave <fabien@cazenave.cc>
parents: 1
diff changeset
52 argVal = argStr = false;
683f56999fb3 'DOMNodeFocused' pseudo-event + Mutation Event Demo
Fabien Cazenave <fabien@cazenave.cc>
parents: 1
diff changeset
53 break;
683f56999fb3 'DOMNodeFocused' pseudo-event + Mutation Event Demo
Fabien Cazenave <fabien@cazenave.cc>
parents: 1
diff changeset
54 case "checkbox": // styleWithCSS: boolean argument
683f56999fb3 'DOMNodeFocused' pseudo-event + Mutation Event Demo
Fabien Cazenave <fabien@cazenave.cc>
parents: 1
diff changeset
55 argVal = argStr = "" + toolbarElement.checked + "";
683f56999fb3 'DOMNodeFocused' pseudo-event + Mutation Event Demo
Fabien Cazenave <fabien@cazenave.cc>
parents: 1
diff changeset
56 break;
683f56999fb3 'DOMNodeFocused' pseudo-event + Mutation Event Demo
Fabien Cazenave <fabien@cazenave.cc>
parents: 1
diff changeset
57 default: // <select> menu: string argument
683f56999fb3 'DOMNodeFocused' pseudo-event + Mutation Event Demo
Fabien Cazenave <fabien@cazenave.cc>
parents: 1
diff changeset
58 if (!toolbarElement.selectedIndex) return;
683f56999fb3 'DOMNodeFocused' pseudo-event + Mutation Event Demo
Fabien Cazenave <fabien@cazenave.cc>
parents: 1
diff changeset
59 argVal = toolbarElement.value;
683f56999fb3 'DOMNodeFocused' pseudo-event + Mutation Event Demo
Fabien Cazenave <fabien@cazenave.cc>
parents: 1
diff changeset
60 argStr = "'" + argVal.replace("<", "&lt;").replace(">", "&gt;") + "'";
683f56999fb3 'DOMNodeFocused' pseudo-event + Mutation Event Demo
Fabien Cazenave <fabien@cazenave.cc>
parents: 1
diff changeset
61 toolbarElement.selectedIndex = 0; // reset drop-down list
683f56999fb3 'DOMNodeFocused' pseudo-event + Mutation Event Demo
Fabien Cazenave <fabien@cazenave.cc>
parents: 1
diff changeset
62 }
683f56999fb3 'DOMNodeFocused' pseudo-event + Mutation Event Demo
Fabien Cazenave <fabien@cazenave.cc>
parents: 1
diff changeset
63
683f56999fb3 'DOMNodeFocused' pseudo-event + Mutation Event Demo
Fabien Cazenave <fabien@cazenave.cc>
parents: 1
diff changeset
64 // send requested action and re-focus the editable element
683f56999fb3 'DOMNodeFocused' pseudo-event + Mutation Event Demo
Fabien Cazenave <fabien@cazenave.cc>
parents: 1
diff changeset
65 document.execCommand(command, false, argVal);
683f56999fb3 'DOMNodeFocused' pseudo-event + Mutation Event Demo
Fabien Cazenave <fabien@cazenave.cc>
parents: 1
diff changeset
66 if (gActiveEditor) gActiveEditor.focus();
683f56999fb3 'DOMNodeFocused' pseudo-event + Mutation Event Demo
Fabien Cazenave <fabien@cazenave.cc>
parents: 1
diff changeset
67
683f56999fb3 'DOMNodeFocused' pseudo-event + Mutation Event Demo
Fabien Cazenave <fabien@cazenave.cc>
parents: 1
diff changeset
68 // debug
683f56999fb3 'DOMNodeFocused' pseudo-event + Mutation Event Demo
Fabien Cazenave <fabien@cazenave.cc>
parents: 1
diff changeset
69 gCommandDump.innerHTML = "document.execCommand('" + command + "', false, '" + argStr + "');";
1
eb3679d92996 put JS and CSS code in separated files
Sonny Piers <sonny.piers@gmail.com>
parents:
diff changeset
70 }
2
683f56999fb3 'DOMNodeFocused' pseudo-event + Mutation Event Demo
Fabien Cazenave <fabien@cazenave.cc>
parents: 1
diff changeset
71
683f56999fb3 'DOMNodeFocused' pseudo-event + Mutation Event Demo
Fabien Cazenave <fabien@cazenave.cc>
parents: 1
diff changeset
72 window.addEventListener("DOMContentLoaded", function() {
683f56999fb3 'DOMNodeFocused' pseudo-event + Mutation Event Demo
Fabien Cazenave <fabien@cazenave.cc>
parents: 1
diff changeset
73 var i,
683f56999fb3 'DOMNodeFocused' pseudo-event + Mutation Event Demo
Fabien Cazenave <fabien@cazenave.cc>
parents: 1
diff changeset
74 buttons = document.querySelectorAll("*[data-command]"),
683f56999fb3 'DOMNodeFocused' pseudo-event + Mutation Event Demo
Fabien Cazenave <fabien@cazenave.cc>
parents: 1
diff changeset
75 editors = document.querySelectorAll("*[contenteditable]");
1
eb3679d92996 put JS and CSS code in separated files
Sonny Piers <sonny.piers@gmail.com>
parents:
diff changeset
76
2
683f56999fb3 'DOMNodeFocused' pseudo-event + Mutation Event Demo
Fabien Cazenave <fabien@cazenave.cc>
parents: 1
diff changeset
77 // initialize all toolbar buttons
683f56999fb3 'DOMNodeFocused' pseudo-event + Mutation Event Demo
Fabien Cazenave <fabien@cazenave.cc>
parents: 1
diff changeset
78 for (i = 0; i < buttons.length; i++) {
683f56999fb3 'DOMNodeFocused' pseudo-event + Mutation Event Demo
Fabien Cazenave <fabien@cazenave.cc>
parents: 1
diff changeset
79 buttons[i].onclick = function() { ExecCommand(this); };
683f56999fb3 'DOMNodeFocused' pseudo-event + Mutation Event Demo
Fabien Cazenave <fabien@cazenave.cc>
parents: 1
diff changeset
80 buttons[i].onchange = function() { ExecCommand(this); };
683f56999fb3 'DOMNodeFocused' pseudo-event + Mutation Event Demo
Fabien Cazenave <fabien@cazenave.cc>
parents: 1
diff changeset
81 }
683f56999fb3 'DOMNodeFocused' pseudo-event + Mutation Event Demo
Fabien Cazenave <fabien@cazenave.cc>
parents: 1
diff changeset
82
683f56999fb3 'DOMNodeFocused' pseudo-event + Mutation Event Demo
Fabien Cazenave <fabien@cazenave.cc>
parents: 1
diff changeset
83 // remember last-focused editable element
683f56999fb3 'DOMNodeFocused' pseudo-event + Mutation Event Demo
Fabien Cazenave <fabien@cazenave.cc>
parents: 1
diff changeset
84 for (i = 0; i < editors.length; i++)
683f56999fb3 'DOMNodeFocused' pseudo-event + Mutation Event Demo
Fabien Cazenave <fabien@cazenave.cc>
parents: 1
diff changeset
85 editors[i].onfocus = function() { gActiveEditor = this; };
683f56999fb3 'DOMNodeFocused' pseudo-event + Mutation Event Demo
Fabien Cazenave <fabien@cazenave.cc>
parents: 1
diff changeset
86
683f56999fb3 'DOMNodeFocused' pseudo-event + Mutation Event Demo
Fabien Cazenave <fabien@cazenave.cc>
parents: 1
diff changeset
87 // debug
683f56999fb3 'DOMNodeFocused' pseudo-event + Mutation Event Demo
Fabien Cazenave <fabien@cazenave.cc>
parents: 1
diff changeset
88 gCommandDump = document.querySelector("#execCommand");
683f56999fb3 'DOMNodeFocused' pseudo-event + Mutation Event Demo
Fabien Cazenave <fabien@cazenave.cc>
parents: 1
diff changeset
89 ExecCommand(document.querySelector("#useCSS"));
683f56999fb3 'DOMNodeFocused' pseudo-event + Mutation Event Demo
Fabien Cazenave <fabien@cazenave.cc>
parents: 1
diff changeset
90 }, false);
683f56999fb3 'DOMNodeFocused' pseudo-event + Mutation Event Demo
Fabien Cazenave <fabien@cazenave.cc>
parents: 1
diff changeset
91 } (this, document);
683f56999fb3 'DOMNodeFocused' pseudo-event + Mutation Event Demo
Fabien Cazenave <fabien@cazenave.cc>
parents: 1
diff changeset
92
683f56999fb3 'DOMNodeFocused' pseudo-event + Mutation Event Demo
Fabien Cazenave <fabien@cazenave.cc>
parents: 1
diff changeset
93 /** DOMNodeFocused
683f56999fb3 'DOMNodeFocused' pseudo-event + Mutation Event Demo
Fabien Cazenave <fabien@cazenave.cc>
parents: 1
diff changeset
94 * expected compatibility: all browsers except IE<9.
683f56999fb3 'DOMNodeFocused' pseudo-event + Mutation Event Demo
Fabien Cazenave <fabien@cazenave.cc>
parents: 1
diff changeset
95 *
683f56999fb3 'DOMNodeFocused' pseudo-event + Mutation Event Demo
Fabien Cazenave <fabien@cazenave.cc>
parents: 1
diff changeset
96 * This custom (non-standard) event is fired when a node in an editable element
683f56999fb3 'DOMNodeFocused' pseudo-event + Mutation Event Demo
Fabien Cazenave <fabien@cazenave.cc>
parents: 1
diff changeset
97 * gets the user focus.
683f56999fb3 'DOMNodeFocused' pseudo-event + Mutation Event Demo
Fabien Cazenave <fabien@cazenave.cc>
parents: 1
diff changeset
98 */
683f56999fb3 'DOMNodeFocused' pseudo-event + Mutation Event Demo
Fabien Cazenave <fabien@cazenave.cc>
parents: 1
diff changeset
99 !function(window, document, undefined) {
683f56999fb3 'DOMNodeFocused' pseudo-event + Mutation Event Demo
Fabien Cazenave <fabien@cazenave.cc>
parents: 1
diff changeset
100 var gLastFocusNode = null;
683f56999fb3 'DOMNodeFocused' pseudo-event + Mutation Event Demo
Fabien Cazenave <fabien@cazenave.cc>
parents: 1
diff changeset
101
683f56999fb3 'DOMNodeFocused' pseudo-event + Mutation Event Demo
Fabien Cazenave <fabien@cazenave.cc>
parents: 1
diff changeset
102 function onCaretMove(event) {
683f56999fb3 'DOMNodeFocused' pseudo-event + Mutation Event Demo
Fabien Cazenave <fabien@cazenave.cc>
parents: 1
diff changeset
103 var selection = document.getSelection();
683f56999fb3 'DOMNodeFocused' pseudo-event + Mutation Event Demo
Fabien Cazenave <fabien@cazenave.cc>
parents: 1
diff changeset
104 var node = selection.isCollapsed ? selection.focusNode
683f56999fb3 'DOMNodeFocused' pseudo-event + Mutation Event Demo
Fabien Cazenave <fabien@cazenave.cc>
parents: 1
diff changeset
105 : selection.getRangeAt(0).commonAncestorContainer;
683f56999fb3 'DOMNodeFocused' pseudo-event + Mutation Event Demo
Fabien Cazenave <fabien@cazenave.cc>
parents: 1
diff changeset
106 if (node != gLastFocusNode) {
683f56999fb3 'DOMNodeFocused' pseudo-event + Mutation Event Demo
Fabien Cazenave <fabien@cazenave.cc>
parents: 1
diff changeset
107 gLastFocusNode = node;
683f56999fb3 'DOMNodeFocused' pseudo-event + Mutation Event Demo
Fabien Cazenave <fabien@cazenave.cc>
parents: 1
diff changeset
108 // fire a 'DOMNodeFocused' mutation event with bubbling to set the .target
683f56999fb3 'DOMNodeFocused' pseudo-event + Mutation Event Demo
Fabien Cazenave <fabien@cazenave.cc>
parents: 1
diff changeset
109 //var evtObject = document.createEvent("MutationEvent");
683f56999fb3 'DOMNodeFocused' pseudo-event + Mutation Event Demo
Fabien Cazenave <fabien@cazenave.cc>
parents: 1
diff changeset
110 //evtObject.initMutationEvent("DOMNodeFocused", true, false, node, "", "", "", 0);
683f56999fb3 'DOMNodeFocused' pseudo-event + Mutation Event Demo
Fabien Cazenave <fabien@cazenave.cc>
parents: 1
diff changeset
111 // note that a standard event works fine, too :-)
683f56999fb3 'DOMNodeFocused' pseudo-event + Mutation Event Demo
Fabien Cazenave <fabien@cazenave.cc>
parents: 1
diff changeset
112 var evtObject = document.createEvent("Event");
683f56999fb3 'DOMNodeFocused' pseudo-event + Mutation Event Demo
Fabien Cazenave <fabien@cazenave.cc>
parents: 1
diff changeset
113 evtObject.initEvent("DOMNodeFocused", true, false);
683f56999fb3 'DOMNodeFocused' pseudo-event + Mutation Event Demo
Fabien Cazenave <fabien@cazenave.cc>
parents: 1
diff changeset
114 node.dispatchEvent(evtObject);
683f56999fb3 'DOMNodeFocused' pseudo-event + Mutation Event Demo
Fabien Cazenave <fabien@cazenave.cc>
parents: 1
diff changeset
115 }
1
eb3679d92996 put JS and CSS code in separated files
Sonny Piers <sonny.piers@gmail.com>
parents:
diff changeset
116 }
eb3679d92996 put JS and CSS code in separated files
Sonny Piers <sonny.piers@gmail.com>
parents:
diff changeset
117
2
683f56999fb3 'DOMNodeFocused' pseudo-event + Mutation Event Demo
Fabien Cazenave <fabien@cazenave.cc>
parents: 1
diff changeset
118 // trigger a 'DOMNodeFocused' event when the user moves the caret
683f56999fb3 'DOMNodeFocused' pseudo-event + Mutation Event Demo
Fabien Cazenave <fabien@cazenave.cc>
parents: 1
diff changeset
119 window.addEventListener("DOMContentLoaded", function() {
683f56999fb3 'DOMNodeFocused' pseudo-event + Mutation Event Demo
Fabien Cazenave <fabien@cazenave.cc>
parents: 1
diff changeset
120 var i, editors = document.querySelectorAll("*[contenteditable]");
683f56999fb3 'DOMNodeFocused' pseudo-event + Mutation Event Demo
Fabien Cazenave <fabien@cazenave.cc>
parents: 1
diff changeset
121 for (i = 0; i < editors.length; i++) {
683f56999fb3 'DOMNodeFocused' pseudo-event + Mutation Event Demo
Fabien Cazenave <fabien@cazenave.cc>
parents: 1
diff changeset
122 editors[i].addEventListener("keyup", onCaretMove, false);
683f56999fb3 'DOMNodeFocused' pseudo-event + Mutation Event Demo
Fabien Cazenave <fabien@cazenave.cc>
parents: 1
diff changeset
123 editors[i].addEventListener("mouseup", onCaretMove, false);
683f56999fb3 'DOMNodeFocused' pseudo-event + Mutation Event Demo
Fabien Cazenave <fabien@cazenave.cc>
parents: 1
diff changeset
124 }
683f56999fb3 'DOMNodeFocused' pseudo-event + Mutation Event Demo
Fabien Cazenave <fabien@cazenave.cc>
parents: 1
diff changeset
125 }, false);
683f56999fb3 'DOMNodeFocused' pseudo-event + Mutation Event Demo
Fabien Cazenave <fabien@cazenave.cc>
parents: 1
diff changeset
126 } (this, document);
1
eb3679d92996 put JS and CSS code in separated files
Sonny Piers <sonny.piers@gmail.com>
parents:
diff changeset
127
2
683f56999fb3 'DOMNodeFocused' pseudo-event + Mutation Event Demo
Fabien Cazenave <fabien@cazenave.cc>
parents: 1
diff changeset
128 /** Mutation Events -- demo!
683f56999fb3 'DOMNodeFocused' pseudo-event + Mutation Event Demo
Fabien Cazenave <fabien@cazenave.cc>
parents: 1
diff changeset
129 * expected compatibility: Firefox Aurora, possibly other modern browsers.
683f56999fb3 'DOMNodeFocused' pseudo-event + Mutation Event Demo
Fabien Cazenave <fabien@cazenave.cc>
parents: 1
diff changeset
130 * reference: https://developer.mozilla.org/en/XUL/Events#Mutation_DOM_events
683f56999fb3 'DOMNodeFocused' pseudo-event + Mutation Event Demo
Fabien Cazenave <fabien@cazenave.cc>
parents: 1
diff changeset
131 * http://help.dottoro.com/ljifcdwx.php
683f56999fb3 'DOMNodeFocused' pseudo-event + Mutation Event Demo
Fabien Cazenave <fabien@cazenave.cc>
parents: 1
diff changeset
132 *
683f56999fb3 'DOMNodeFocused' pseudo-event + Mutation Event Demo
Fabien Cazenave <fabien@cazenave.cc>
parents: 1
diff changeset
133 * SXE requires these (standard) mutation events:
683f56999fb3 'DOMNodeFocused' pseudo-event + Mutation Event Demo
Fabien Cazenave <fabien@cazenave.cc>
parents: 1
diff changeset
134 * - 'new': DOMNodeInserted
683f56999fb3 'DOMNodeFocused' pseudo-event + Mutation Event Demo
Fabien Cazenave <fabien@cazenave.cc>
parents: 1
diff changeset
135 * - 'remove': DOMNodeRemoved
683f56999fb3 'DOMNodeFocused' pseudo-event + Mutation Event Demo
Fabien Cazenave <fabien@cazenave.cc>
parents: 1
diff changeset
136 * - 'set': DOMSubtreeModified, DOMAttrModified, DOMCharacterDataModified
683f56999fb3 'DOMNodeFocused' pseudo-event + Mutation Event Demo
Fabien Cazenave <fabien@cazenave.cc>
parents: 1
diff changeset
137 *
683f56999fb3 'DOMNodeFocused' pseudo-event + Mutation Event Demo
Fabien Cazenave <fabien@cazenave.cc>
parents: 1
diff changeset
138 * Note: webkit doesn't support DOMAttrModified
683f56999fb3 'DOMNodeFocused' pseudo-event + Mutation Event Demo
Fabien Cazenave <fabien@cazenave.cc>
parents: 1
diff changeset
139 * https://bugs.webkit.org/show_bug.cgi?id=8191
683f56999fb3 'DOMNodeFocused' pseudo-event + Mutation Event Demo
Fabien Cazenave <fabien@cazenave.cc>
parents: 1
diff changeset
140 */
683f56999fb3 'DOMNodeFocused' pseudo-event + Mutation Event Demo
Fabien Cazenave <fabien@cazenave.cc>
parents: 1
diff changeset
141 window.addEventListener("DOMContentLoaded", function() {
683f56999fb3 'DOMNodeFocused' pseudo-event + Mutation Event Demo
Fabien Cazenave <fabien@cazenave.cc>
parents: 1
diff changeset
142 var breadcrumb = document.querySelector("#breadcrumb");
683f56999fb3 'DOMNodeFocused' pseudo-event + Mutation Event Demo
Fabien Cazenave <fabien@cazenave.cc>
parents: 1
diff changeset
143 function updateBreadCrumb(event) {
683f56999fb3 'DOMNodeFocused' pseudo-event + Mutation Event Demo
Fabien Cazenave <fabien@cazenave.cc>
parents: 1
diff changeset
144 if (!breadcrumb || !event || !event.target) return;
683f56999fb3 'DOMNodeFocused' pseudo-event + Mutation Event Demo
Fabien Cazenave <fabien@cazenave.cc>
parents: 1
diff changeset
145 var
683f56999fb3 'DOMNodeFocused' pseudo-event + Mutation Event Demo
Fabien Cazenave <fabien@cazenave.cc>
parents: 1
diff changeset
146 body = document.body,
683f56999fb3 'DOMNodeFocused' pseudo-event + Mutation Event Demo
Fabien Cazenave <fabien@cazenave.cc>
parents: 1
diff changeset
147 node = event.target,
683f56999fb3 'DOMNodeFocused' pseudo-event + Mutation Event Demo
Fabien Cazenave <fabien@cazenave.cc>
parents: 1
diff changeset
148 text = node.nodeName,
683f56999fb3 'DOMNodeFocused' pseudo-event + Mutation Event Demo
Fabien Cazenave <fabien@cazenave.cc>
parents: 1
diff changeset
149 tmp = node.parentNode;
683f56999fb3 'DOMNodeFocused' pseudo-event + Mutation Event Demo
Fabien Cazenave <fabien@cazenave.cc>
parents: 1
diff changeset
150 while (tmp && tmp != body) {
683f56999fb3 'DOMNodeFocused' pseudo-event + Mutation Event Demo
Fabien Cazenave <fabien@cazenave.cc>
parents: 1
diff changeset
151 text = tmp.nodeName + " > " + text;
683f56999fb3 'DOMNodeFocused' pseudo-event + Mutation Event Demo
Fabien Cazenave <fabien@cazenave.cc>
parents: 1
diff changeset
152 tmp = tmp.parentNode;
683f56999fb3 'DOMNodeFocused' pseudo-event + Mutation Event Demo
Fabien Cazenave <fabien@cazenave.cc>
parents: 1
diff changeset
153 }
683f56999fb3 'DOMNodeFocused' pseudo-event + Mutation Event Demo
Fabien Cazenave <fabien@cazenave.cc>
parents: 1
diff changeset
154 text = event.type + ": " + text;
683f56999fb3 'DOMNodeFocused' pseudo-event + Mutation Event Demo
Fabien Cazenave <fabien@cazenave.cc>
parents: 1
diff changeset
155 breadcrumb.innerHTML = text;
683f56999fb3 'DOMNodeFocused' pseudo-event + Mutation Event Demo
Fabien Cazenave <fabien@cazenave.cc>
parents: 1
diff changeset
156 console.log(text);
683f56999fb3 'DOMNodeFocused' pseudo-event + Mutation Event Demo
Fabien Cazenave <fabien@cazenave.cc>
parents: 1
diff changeset
157 }
1
eb3679d92996 put JS and CSS code in separated files
Sonny Piers <sonny.piers@gmail.com>
parents:
diff changeset
158
eb3679d92996 put JS and CSS code in separated files
Sonny Piers <sonny.piers@gmail.com>
parents:
diff changeset
159 // 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
160 var i, editors = document.querySelectorAll("*[contenteditable]");
eb3679d92996 put JS and CSS code in separated files
Sonny Piers <sonny.piers@gmail.com>
parents:
diff changeset
161 for (i = 0; i < editors.length; i++) {
2
683f56999fb3 'DOMNodeFocused' pseudo-event + Mutation Event Demo
Fabien Cazenave <fabien@cazenave.cc>
parents: 1
diff changeset
162 // set
683f56999fb3 'DOMNodeFocused' pseudo-event + Mutation Event Demo
Fabien Cazenave <fabien@cazenave.cc>
parents: 1
diff changeset
163 editors[i].addEventListener("DOMAttrModified", updateBreadCrumb, false);
683f56999fb3 'DOMNodeFocused' pseudo-event + Mutation Event Demo
Fabien Cazenave <fabien@cazenave.cc>
parents: 1
diff changeset
164 editors[i].addEventListener("DOMSubtreeModified", updateBreadCrumb, false);
683f56999fb3 'DOMNodeFocused' pseudo-event + Mutation Event Demo
Fabien Cazenave <fabien@cazenave.cc>
parents: 1
diff changeset
165 editors[i].addEventListener("DOMCharacterDataModified", updateBreadCrumb, false);
683f56999fb3 'DOMNodeFocused' pseudo-event + Mutation Event Demo
Fabien Cazenave <fabien@cazenave.cc>
parents: 1
diff changeset
166 // new, remove
683f56999fb3 'DOMNodeFocused' pseudo-event + Mutation Event Demo
Fabien Cazenave <fabien@cazenave.cc>
parents: 1
diff changeset
167 editors[i].addEventListener("DOMNodeInserted", updateBreadCrumb, false);
683f56999fb3 'DOMNodeFocused' pseudo-event + Mutation Event Demo
Fabien Cazenave <fabien@cazenave.cc>
parents: 1
diff changeset
168 editors[i].addEventListener("DOMNodeRemoved", updateBreadCrumb, false);
683f56999fb3 'DOMNodeFocused' pseudo-event + Mutation Event Demo
Fabien Cazenave <fabien@cazenave.cc>
parents: 1
diff changeset
169 // focus (non-standard but can be useful)
683f56999fb3 'DOMNodeFocused' pseudo-event + Mutation Event Demo
Fabien Cazenave <fabien@cazenave.cc>
parents: 1
diff changeset
170 editors[i].addEventListener("DOMNodeFocused", updateBreadCrumb, false);
1
eb3679d92996 put JS and CSS code in separated files
Sonny Piers <sonny.piers@gmail.com>
parents:
diff changeset
171 }
eb3679d92996 put JS and CSS code in separated files
Sonny Piers <sonny.piers@gmail.com>
parents:
diff changeset
172 }, false);
eb3679d92996 put JS and CSS code in separated files
Sonny Piers <sonny.piers@gmail.com>
parents:
diff changeset
173