annotate index.xhtml @ 8:7b2ca4d5af6d

Add a resend-whole-state button and make it works.
author Emmanuel Gil Peyrot <linkmauve@linkmauve.fr>
date Thu, 02 Feb 2012 15:45:25 +0100
parents 853dcbe8f06f
children
Ignore whitespace changes - Everywhere: Within whitespace: At end of lines:
rev   line source
0
891d16fda2e2 initial push
Sonny Piers <sonny.piers@gmail.com>
parents:
diff changeset
1 <!DOCTYPE html>
5
03ef53b969bd Add XMPP support.
Emmanuel Gil Peyrot <linkmauve@linkmauve.fr>
parents: 2
diff changeset
2 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
0
891d16fda2e2 initial push
Sonny Piers <sonny.piers@gmail.com>
parents:
diff changeset
3 <head>
2
683f56999fb3 'DOMNodeFocused' pseudo-event + Mutation Event Demo
Fabien Cazenave <fabien@cazenave.cc>
parents: 1
diff changeset
4 <meta charset="UTF-8" />
1
eb3679d92996 put JS and CSS code in separated files
Sonny Piers <sonny.piers@gmail.com>
parents: 0
diff changeset
5 <title> barbecue </title>
eb3679d92996 put JS and CSS code in separated files
Sonny Piers <sonny.piers@gmail.com>
parents: 0
diff changeset
6 <link type="text/css" href="style.css" rel="stylesheet" />
2
683f56999fb3 'DOMNodeFocused' pseudo-event + Mutation Event Demo
Fabien Cazenave <fabien@cazenave.cc>
parents: 1
diff changeset
7 <script type="text/javascript" src="script.js"></script>
5
03ef53b969bd Add XMPP support.
Emmanuel Gil Peyrot <linkmauve@linkmauve.fr>
parents: 2
diff changeset
8 <script type="text/javascript" src="lightstring/md5.js"></script>
03ef53b969bd Add XMPP support.
Emmanuel Gil Peyrot <linkmauve@linkmauve.fr>
parents: 2
diff changeset
9 <script type="text/javascript" src="lightstring/lightstring.js"></script>
03ef53b969bd Add XMPP support.
Emmanuel Gil Peyrot <linkmauve@linkmauve.fr>
parents: 2
diff changeset
10 <script type="text/javascript" src="lightstring/stanza.js"></script>
03ef53b969bd Add XMPP support.
Emmanuel Gil Peyrot <linkmauve@linkmauve.fr>
parents: 2
diff changeset
11 <script type="text/javascript" src="lightstring/jid.js"></script>
7
853dcbe8f06f Make barbecue work with latest Lightstring.
Emmanuel Gil Peyrot <linkmauve@linkmauve.fr>
parents: 6
diff changeset
12 <script type="text/javascript" src="lightstring/plugins/DIGEST-MD5.js"></script>
5
03ef53b969bd Add XMPP support.
Emmanuel Gil Peyrot <linkmauve@linkmauve.fr>
parents: 2
diff changeset
13 <script type="text/javascript" src="lightstring/plugins/presence.js"></script>
03ef53b969bd Add XMPP support.
Emmanuel Gil Peyrot <linkmauve@linkmauve.fr>
parents: 2
diff changeset
14 <script type="text/javascript" src="lightstring/plugins/disco.js"></script>
03ef53b969bd Add XMPP support.
Emmanuel Gil Peyrot <linkmauve@linkmauve.fr>
parents: 2
diff changeset
15 <script type="text/javascript" src="record.js"></script>
03ef53b969bd Add XMPP support.
Emmanuel Gil Peyrot <linkmauve@linkmauve.fr>
parents: 2
diff changeset
16 <script type="text/javascript" src="sxe-document.js"></script>
03ef53b969bd Add XMPP support.
Emmanuel Gil Peyrot <linkmauve@linkmauve.fr>
parents: 2
diff changeset
17 <script type="text/javascript" src="config.js"></script>
0
891d16fda2e2 initial push
Sonny Piers <sonny.piers@gmail.com>
parents:
diff changeset
18 </head>
891d16fda2e2 initial push
Sonny Piers <sonny.piers@gmail.com>
parents:
diff changeset
19 <body>
6
24aa8dccb170 Make XMPP actually work.
Emmanuel Gil Peyrot <linkmauve@linkmauve.fr>
parents: 5
diff changeset
20 <div id="state"/>
24aa8dccb170 Make XMPP actually work.
Emmanuel Gil Peyrot <linkmauve@linkmauve.fr>
parents: 5
diff changeset
21 <button id="host">Host</button>
8
7b2ca4d5af6d Add a resend-whole-state button and make it works.
Emmanuel Gil Peyrot <linkmauve@linkmauve.fr>
parents: 7
diff changeset
22 <button id="resend-state">Resend the whole state</button>
0
891d16fda2e2 initial push
Sonny Piers <sonny.piers@gmail.com>
parents:
diff changeset
23 <form id="toolbar">
891d16fda2e2 initial push
Sonny Piers <sonny.piers@gmail.com>
parents:
diff changeset
24 <dl>
891d16fda2e2 initial push
Sonny Piers <sonny.piers@gmail.com>
parents:
diff changeset
25 <dt> edit: </dt>
891d16fda2e2 initial push
Sonny Piers <sonny.piers@gmail.com>
parents:
diff changeset
26 <dd>
891d16fda2e2 initial push
Sonny Piers <sonny.piers@gmail.com>
parents:
diff changeset
27 <input type="button" value=" " data-command="undo" />
891d16fda2e2 initial push
Sonny Piers <sonny.piers@gmail.com>
parents:
diff changeset
28 <input type="button" value=" " data-command="redo" />
891d16fda2e2 initial push
Sonny Piers <sonny.piers@gmail.com>
parents:
diff changeset
29 |
891d16fda2e2 initial push
Sonny Piers <sonny.piers@gmail.com>
parents:
diff changeset
30 <input type="button" value=" " data-command="cut" disabled="" />
891d16fda2e2 initial push
Sonny Piers <sonny.piers@gmail.com>
parents:
diff changeset
31 <input type="button" value=" " data-command="copy" disabled="" />
891d16fda2e2 initial push
Sonny Piers <sonny.piers@gmail.com>
parents:
diff changeset
32 <input type="button" value=" " data-command="paste" disabled="" />
891d16fda2e2 initial push
Sonny Piers <sonny.piers@gmail.com>
parents:
diff changeset
33 |
891d16fda2e2 initial push
Sonny Piers <sonny.piers@gmail.com>
parents:
diff changeset
34 <input type="checkbox" id="useCSS" data-command="styleWithCSS" checked="" />
891d16fda2e2 initial push
Sonny Piers <sonny.piers@gmail.com>
parents:
diff changeset
35 <label for="useCSS">style with CSS</label>
891d16fda2e2 initial push
Sonny Piers <sonny.piers@gmail.com>
parents:
diff changeset
36 </dd>
891d16fda2e2 initial push
Sonny Piers <sonny.piers@gmail.com>
parents:
diff changeset
37 <dt> inline: </dt>
891d16fda2e2 initial push
Sonny Piers <sonny.piers@gmail.com>
parents:
diff changeset
38 <dd>
891d16fda2e2 initial push
Sonny Piers <sonny.piers@gmail.com>
parents:
diff changeset
39 <select data-command="fontName">
891d16fda2e2 initial push
Sonny Piers <sonny.piers@gmail.com>
parents:
diff changeset
40 <option value="" disabled="" selected=""> Font </option>
891d16fda2e2 initial push
Sonny Piers <sonny.piers@gmail.com>
parents:
diff changeset
41 <option value="serif"> serif </option>
891d16fda2e2 initial push
Sonny Piers <sonny.piers@gmail.com>
parents:
diff changeset
42 <option value="sans-serif"> sans-serif </option>
891d16fda2e2 initial push
Sonny Piers <sonny.piers@gmail.com>
parents:
diff changeset
43 <option value="monospace"> monospace </option>
891d16fda2e2 initial push
Sonny Piers <sonny.piers@gmail.com>
parents:
diff changeset
44 <option value=" " disabled=""> - </option>
891d16fda2e2 initial push
Sonny Piers <sonny.piers@gmail.com>
parents:
diff changeset
45 <option value="Arial"> Arial </option>
891d16fda2e2 initial push
Sonny Piers <sonny.piers@gmail.com>
parents:
diff changeset
46 <option value="Courier New"> Courier New </option>
891d16fda2e2 initial push
Sonny Piers <sonny.piers@gmail.com>
parents:
diff changeset
47 <option value="Times New Roman"> Times New Roman </option>
891d16fda2e2 initial push
Sonny Piers <sonny.piers@gmail.com>
parents:
diff changeset
48 <option value="Verdana"> Verdana </option>
891d16fda2e2 initial push
Sonny Piers <sonny.piers@gmail.com>
parents:
diff changeset
49 </select>
891d16fda2e2 initial push
Sonny Piers <sonny.piers@gmail.com>
parents:
diff changeset
50 <select data-command="fontSize">
891d16fda2e2 initial push
Sonny Piers <sonny.piers@gmail.com>
parents:
diff changeset
51 <option value="" disabled="" selected=""> Size </option>
891d16fda2e2 initial push
Sonny Piers <sonny.piers@gmail.com>
parents:
diff changeset
52 <option value="1"> 1 </option>
891d16fda2e2 initial push
Sonny Piers <sonny.piers@gmail.com>
parents:
diff changeset
53 <option value="2"> 2 </option>
891d16fda2e2 initial push
Sonny Piers <sonny.piers@gmail.com>
parents:
diff changeset
54 <option value="3"> 3 </option>
891d16fda2e2 initial push
Sonny Piers <sonny.piers@gmail.com>
parents:
diff changeset
55 <option value="4"> 4 </option>
891d16fda2e2 initial push
Sonny Piers <sonny.piers@gmail.com>
parents:
diff changeset
56 <option value="5"> 5 </option>
891d16fda2e2 initial push
Sonny Piers <sonny.piers@gmail.com>
parents:
diff changeset
57 <option value="6"> 6 </option>
891d16fda2e2 initial push
Sonny Piers <sonny.piers@gmail.com>
parents:
diff changeset
58 <option value="7"> 7 </option>
891d16fda2e2 initial push
Sonny Piers <sonny.piers@gmail.com>
parents:
diff changeset
59 </select>
891d16fda2e2 initial push
Sonny Piers <sonny.piers@gmail.com>
parents:
diff changeset
60 <input type="button" value="-" data-command="decreaseFontSize" />
891d16fda2e2 initial push
Sonny Piers <sonny.piers@gmail.com>
parents:
diff changeset
61 <input type="button" value="+" data-command="increaseFontSize" />
891d16fda2e2 initial push
Sonny Piers <sonny.piers@gmail.com>
parents:
diff changeset
62 |
891d16fda2e2 initial push
Sonny Piers <sonny.piers@gmail.com>
parents:
diff changeset
63 <input type="button" value=" " data-command="bold" />
891d16fda2e2 initial push
Sonny Piers <sonny.piers@gmail.com>
parents:
diff changeset
64 <input type="button" value=" " data-command="italic" />
891d16fda2e2 initial push
Sonny Piers <sonny.piers@gmail.com>
parents:
diff changeset
65 <input type="button" value=" " data-command="underline" />
891d16fda2e2 initial push
Sonny Piers <sonny.piers@gmail.com>
parents:
diff changeset
66 <input type="button" value=" " data-command="strikeThrough" />
891d16fda2e2 initial push
Sonny Piers <sonny.piers@gmail.com>
parents:
diff changeset
67 |
891d16fda2e2 initial push
Sonny Piers <sonny.piers@gmail.com>
parents:
diff changeset
68 <input type="button" value=" " data-command="subscript" />
891d16fda2e2 initial push
Sonny Piers <sonny.piers@gmail.com>
parents:
diff changeset
69 <input type="button" value=" " data-command="superscript" />
891d16fda2e2 initial push
Sonny Piers <sonny.piers@gmail.com>
parents:
diff changeset
70 </dd>
891d16fda2e2 initial push
Sonny Piers <sonny.piers@gmail.com>
parents:
diff changeset
71 <dt> block: </dt>
891d16fda2e2 initial push
Sonny Piers <sonny.piers@gmail.com>
parents:
diff changeset
72 <dd>
891d16fda2e2 initial push
Sonny Piers <sonny.piers@gmail.com>
parents:
diff changeset
73 <select data-command="formatBlock">
891d16fda2e2 initial push
Sonny Piers <sonny.piers@gmail.com>
parents:
diff changeset
74 <option value="" disabled="" selected=""> Format </option>
891d16fda2e2 initial push
Sonny Piers <sonny.piers@gmail.com>
parents:
diff changeset
75 <option value="&lt;p&gt;"> paragraph </option>
891d16fda2e2 initial push
Sonny Piers <sonny.piers@gmail.com>
parents:
diff changeset
76 <option value="&lt;h1&gt;"> heading 1 </option>
891d16fda2e2 initial push
Sonny Piers <sonny.piers@gmail.com>
parents:
diff changeset
77 <option value="&lt;h2&gt;"> heading 2 </option>
891d16fda2e2 initial push
Sonny Piers <sonny.piers@gmail.com>
parents:
diff changeset
78 <option value="&lt;h3&gt;"> heading 3 </option>
891d16fda2e2 initial push
Sonny Piers <sonny.piers@gmail.com>
parents:
diff changeset
79 <option value="&lt;h4&gt;"> heading 4 </option>
891d16fda2e2 initial push
Sonny Piers <sonny.piers@gmail.com>
parents:
diff changeset
80 <option value="&lt;h5&gt;"> heading 5 </option>
891d16fda2e2 initial push
Sonny Piers <sonny.piers@gmail.com>
parents:
diff changeset
81 <option value="&lt;h6&gt;"> heading 6 </option>
891d16fda2e2 initial push
Sonny Piers <sonny.piers@gmail.com>
parents:
diff changeset
82 <option value="&lt;address&gt;"> address </option>
891d16fda2e2 initial push
Sonny Piers <sonny.piers@gmail.com>
parents:
diff changeset
83 <option value="&lt;pre&gt;"> preformatted </option>
891d16fda2e2 initial push
Sonny Piers <sonny.piers@gmail.com>
parents:
diff changeset
84 </select>
891d16fda2e2 initial push
Sonny Piers <sonny.piers@gmail.com>
parents:
diff changeset
85 |
891d16fda2e2 initial push
Sonny Piers <sonny.piers@gmail.com>
parents:
diff changeset
86 <input type="button" value=" " data-command="justifyLeft" />
891d16fda2e2 initial push
Sonny Piers <sonny.piers@gmail.com>
parents:
diff changeset
87 <input type="button" value=" " data-command="justifyCenter" />
891d16fda2e2 initial push
Sonny Piers <sonny.piers@gmail.com>
parents:
diff changeset
88 <input type="button" value=" " data-command="justifyRight" />
891d16fda2e2 initial push
Sonny Piers <sonny.piers@gmail.com>
parents:
diff changeset
89 <input type="button" value=" " data-command="justifyFull" />
891d16fda2e2 initial push
Sonny Piers <sonny.piers@gmail.com>
parents:
diff changeset
90 |
891d16fda2e2 initial push
Sonny Piers <sonny.piers@gmail.com>
parents:
diff changeset
91 <input type="button" value=" " data-command="outdent" />
891d16fda2e2 initial push
Sonny Piers <sonny.piers@gmail.com>
parents:
diff changeset
92 <input type="button" value=" " data-command="indent" />
891d16fda2e2 initial push
Sonny Piers <sonny.piers@gmail.com>
parents:
diff changeset
93 |
891d16fda2e2 initial push
Sonny Piers <sonny.piers@gmail.com>
parents:
diff changeset
94 <input type="button" value=" " data-command="insertOrderedList" />
891d16fda2e2 initial push
Sonny Piers <sonny.piers@gmail.com>
parents:
diff changeset
95 <input type="button" value=" " data-command="insertUnorderedList" />
891d16fda2e2 initial push
Sonny Piers <sonny.piers@gmail.com>
parents:
diff changeset
96 </dd>
891d16fda2e2 initial push
Sonny Piers <sonny.piers@gmail.com>
parents:
diff changeset
97 </dl>
891d16fda2e2 initial push
Sonny Piers <sonny.piers@gmail.com>
parents:
diff changeset
98 <pre id="execCommand" />
891d16fda2e2 initial push
Sonny Piers <sonny.piers@gmail.com>
parents:
diff changeset
99 </form>
2
683f56999fb3 'DOMNodeFocused' pseudo-event + Mutation Event Demo
Fabien Cazenave <fabien@cazenave.cc>
parents: 1
diff changeset
100 <pre id="breadcrumb"> </pre>
0
891d16fda2e2 initial push
Sonny Piers <sonny.piers@gmail.com>
parents:
diff changeset
101
6
24aa8dccb170 Make XMPP actually work.
Emmanuel Gil Peyrot <linkmauve@linkmauve.fr>
parents: 5
diff changeset
102 <section id="document" contenteditable="true">
0
891d16fda2e2 initial push
Sonny Piers <sonny.piers@gmail.com>
parents:
diff changeset
103 <h2> Go ahead, edit away! </h2>
8
7b2ca4d5af6d Add a resend-whole-state button and make it works.
Emmanuel Gil Peyrot <linkmauve@linkmauve.fr>
parents: 7
diff changeset
104 <p> Here's a <span style="color:red">typical</span> paragraph element </p>
0
891d16fda2e2 initial push
Sonny Piers <sonny.piers@gmail.com>
parents:
diff changeset
105 <ol><li> and now a list </li><li> with only </li><li> three items </li></ol>
891d16fda2e2 initial push
Sonny Piers <sonny.piers@gmail.com>
parents:
diff changeset
106 </section>
891d16fda2e2 initial push
Sonny Piers <sonny.piers@gmail.com>
parents:
diff changeset
107
5
03ef53b969bd Add XMPP support.
Emmanuel Gil Peyrot <linkmauve@linkmauve.fr>
parents: 2
diff changeset
108 <footer>
0
891d16fda2e2 initial push
Sonny Piers <sonny.piers@gmail.com>
parents:
diff changeset
109 <p>
891d16fda2e2 initial push
Sonny Piers <sonny.piers@gmail.com>
parents:
diff changeset
110 This HTML content editor is not intended to compete with <a
891d16fda2e2 initial push
Sonny Piers <sonny.piers@gmail.com>
parents:
diff changeset
111 href="http://ckeditor.com/">CKEditor</a> or <a
891d16fda2e2 initial push
Sonny Piers <sonny.piers@gmail.com>
parents:
diff changeset
112 href="http://tinymce.com/">TinyMCE</a>: it is designed to
891d16fda2e2 initial push
Sonny Piers <sonny.piers@gmail.com>
parents:
diff changeset
113 <strong>test</strong> the various implementations of
891d16fda2e2 initial push
Sonny Piers <sonny.piers@gmail.com>
parents:
diff changeset
114 <code>contentEditable</code> and <code>execCommand</code>
891d16fda2e2 initial push
Sonny Piers <sonny.piers@gmail.com>
parents:
diff changeset
115 in modern browsers.
891d16fda2e2 initial push
Sonny Piers <sonny.piers@gmail.com>
parents:
diff changeset
116 </p>
891d16fda2e2 initial push
Sonny Piers <sonny.piers@gmail.com>
parents:
diff changeset
117 <p>
891d16fda2e2 initial push
Sonny Piers <sonny.piers@gmail.com>
parents:
diff changeset
118 This is a standalone file: the JavaScript code (&lt;40 lines!), CSS markup and
891d16fda2e2 initial push
Sonny Piers <sonny.piers@gmail.com>
parents:
diff changeset
119 images are embedded. Feel free to download it to try it offline.
891d16fda2e2 initial push
Sonny Piers <sonny.piers@gmail.com>
parents:
diff changeset
120 </p>
891d16fda2e2 initial push
Sonny Piers <sonny.piers@gmail.com>
parents:
diff changeset
121 <p>
891d16fda2e2 initial push
Sonny Piers <sonny.piers@gmail.com>
parents:
diff changeset
122 Useful links:
891d16fda2e2 initial push
Sonny Piers <sonny.piers@gmail.com>
parents:
diff changeset
123 <a href="https://developer.mozilla.org/en/Rich-Text_Editing_in_Mozilla">Mozilla Developer Network</a>,
891d16fda2e2 initial push
Sonny Piers <sonny.piers@gmail.com>
parents:
diff changeset
124 <a href="http://html5demos.com/contenteditable/">html5demos.com</a>,
891d16fda2e2 initial push
Sonny Piers <sonny.piers@gmail.com>
parents:
diff changeset
125 <a href="http://www.browserscope.org/richtext2/test">Browserscope.org</a>.
891d16fda2e2 initial push
Sonny Piers <sonny.piers@gmail.com>
parents:
diff changeset
126 </p>
891d16fda2e2 initial push
Sonny Piers <sonny.piers@gmail.com>
parents:
diff changeset
127 </footer>
5
03ef53b969bd Add XMPP support.
Emmanuel Gil Peyrot <linkmauve@linkmauve.fr>
parents: 2
diff changeset
128 <script type="text/javascript" src="script2.js"></script>
0
891d16fda2e2 initial push
Sonny Piers <sonny.piers@gmail.com>
parents:
diff changeset
129 </body>
891d16fda2e2 initial push
Sonny Piers <sonny.piers@gmail.com>
parents:
diff changeset
130 </html>