← Back to branch summary

~ubuntu-branches/ubuntu/raring/maas/raring-updates

« back to all changes in this revision

Viewing changes to src/maasserver/static/jslibs/yui/3.4.1/docs/editor/editor-nodechange.html

  • Committer: Package Import Robot
  • Author(s): Andres Rodriguez
  • Date: 2012-07-03 17:42:37 UTC
  • mfrom: (1.1.13)
  • Revision ID: package-import@ubuntu.com-20120703174237-p8l0keuuznfg721k
Tags: 0.1+bzr709+dfsg-0ubuntu1
* New Upstream release
* debian/control:
  - Depends on python-celery, python-tempita, libjs-yui3-{full,min},
    libjs-raphael
* debian/maas.install:
  - Install apiclient, celeryconfig.py, maas-import-pxe-files, preseeds_v2.
  - Update to install various files from chroot, rather tha manually copy
    them from the source.
* debian/maas.links: symlink celeryconfig.py
* debian/maas.maas-celery.upstart: Add job.
* debian/rules:
  - Install celery upstart job.
  - Do not install jslibs as packages are now used.
  - Drop copying of maas_local_settings_sample.py as source now ships
    a maas_local_settings.py
* debian/patches:
  - 04-maas-http-fix.patch: Drop. Merged upstream.
  - 01-fix-database-settings.patch: Refreshed.
  - 99_enums_js.patch: Added until creation of enum.js / build process
    is fixed.
* debian/maas.postinst: Update bzr version to correctly handle upgrades.

Show diffs side-by-side

added added

removed removed

Lines of Context:
src/maasserver/static/jslibs/yui/3.4.1/docs/editor/editor-nodechange.html
1
 
<!DOCTYPE html>
2
 
<html lang="en">
3
 
<head>
4
 
    <meta charset="utf-8">
5
 
    <title>Example: NodeChange Event</title>
6
 
    <link rel="stylesheet" href="http://yui.yahooapis.com/3.4.0pr3/build/cssgrids/grids-min.css">
7
 
    <link rel="stylesheet" href="../assets/css/main.css">
8
 
    <link rel="stylesheet" href="../assets/vendor/prettify/prettify-min.css">
9
 
    <script src="../../build/yui/yui-min.js"></script>
10
 
</head>
11
 
<body>
12
 
 
13
 
<div id="doc">
14
 
    <h1>Example: NodeChange Event</h1>
15
 
 
16
 
    
17
 
        <a href="#toc" class="jump">Jump to Table of Contents</a>
18
 
    
19
 
 
20
 
    <div class="yui3-g">
21
 
        <div id="main" class="yui3-u">
22
 
            <div class="content"><div class="intro">
23
 
    <p>Use the Editor's NodeChange Event</p>
24
 
</div>
25
 
 
26
 
<div class="example">
27
 
    <style>
28
 
    #demo_holder {
29
 
        position: relative;
30
 
    }
31
 
    #editor_cont {
32
 
        width: 300px;
33
 
        border: 1px solid #999;
34
 
        margin: 2em;
35
 
        background-color: #f2f2f2;
36
 
    }
37
 
    #editor_cont p {
38
 
        margin: .5em;
39
 
    }
40
 
    #editor {
41
 
        height: 350px;
42
 
        background-color: #fff;
43
 
    }
44
 
    #example-canvas .yui3-console .yui3-console-title {
45
 
        border: 0 none;
46
 
        color: #000;
47
 
        font-size: 13px;
48
 
        font-weight: bold;
49
 
        margin: 0;
50
 
        text-transform: none;
51
 
    }
52
 
    #example-canvas .yui3-console .yui3-console-entry-meta {
53
 
        margin: 0;
54
 
    }
55
 
 
56
 
 
57
 
</style>
58
 
 
59
 
<div id="demo_holder" class="yui3-skin-sam">
60
 
    <div id="editor_cont">
61
 
        <p>Interact with the Editor instance below (click, type) and watch the console.</p>
62
 
        <p>Use some special keys too. Enter, tab, arrows... Notice the event names.</p>
63
 
        <div id="editor"></div>
64
 
    </div>
65
 
    <div id="console"></div>
66
 
</div>
67
 
 
68
 
 
69
 
 
70
 
<script>
71
 
YUI().use('editor', 'console', function(Y) {
72
 
 
73
 
    (new Y.Console().render( "#console" ));
74
 
    
75
 
    Y.log('Interact with the Editor.');
76
 
 
77
 
    var logFn = function(e) {
78
 
        var node = e.changedNode, tag;
79
 
        
80
 
        if (node) {
81
 
            tag = node.get('tagName').toLowerCase();
82
 
            Y.log('nodeChange Event: ' + e.changedType + ' on (' + tag + ')');
83
 
        }
84
 
    };
85
 
 
86
 
    //Create the Base Editor
87
 
    var editor = new Y.EditorBase({
88
 
        content: '<p><b>This is <i class="foo">a test</i></b></p><p><b style="color: red; font-family: Comic Sans MS">This is <span class="foo">a test</span></b></p>',
89
 
        extracss: '.foo { font-weight: normal; color: black; background-color: yellow; }'
90
 
    });
91
 
    
92
 
    editor.on('nodeChange', logFn);
93
 
 
94
 
    //Rendering the Editor.
95
 
    editor.render('#editor');
96
 
});
97
 
 
98
 
 
99
 
</script>
100
 
 
101
 
 
102
 
</div>
103
 
 
104
 
<h3 id="working-with-editorbase">Working with EditorBase</h3>
105
 
<p><code>EditorBase</code> is not a fully functional Editor, it is simply the base utility that will be used under the hood to create an Editor.</p>
106
 
 
107
 
<h3 id="creating-the-editor">Creating the Editor</h3>
108
 
<p>In this step we are going to do the initial render of the Editor, set its content, and focus it when it's ready.</p>
109
 
 
110
 
<pre class="code prettyprint">YUI().use(&#x27;editor&#x27;, function(Y) {
111
 
 
112
 
    &#x2F;&#x2F;Create the Base Editor
113
 
    var editor = new Y.EditorBase({
114
 
        content: &#x27;&lt;p&gt;&lt;b&gt;This is &lt;i class=&quot;foo&quot;&gt;a test&lt;&#x2F;i&gt;&lt;&#x2F;b&gt;&lt;&#x2F;p&gt;&lt;p&gt;&lt;b style=&quot;color: red; font-family: Comic Sans MS&quot;&gt;This is &lt;span class=&quot;foo&quot;&gt;a test&lt;&#x2F;span&gt;&lt;&#x2F;b&gt;&lt;&#x2F;p&gt;&#x27;,
115
 
        extracss: &#x27;.foo { font-weight: normal; color: black; background-color: yellow; }&#x27;
116
 
    });
117
 
    
118
 
    &#x2F;&#x2F;Rendering the Editor.
119
 
    editor.render(&#x27;#editor&#x27;);
120
 
 
121
 
});</pre>
122
 
 
123
 
 
124
 
<h3 id="the-node-change-event">The Node Change Event</h3>
125
 
 
126
 
<p>The <code>nodeChange</code> event is a special event that Editor emmits so that you can react to certain important moments that occured.</p>
127
 
<p>The most common use for the <code>nodeChange</code> event is to update the state of a Toolbar.</p>
128
 
 
129
 
<h4 id="nodechange-event-properties">nodeChange event properties</h4>
130
 
<p>This list contains the properties that are added to the Event object when the <code>nodeChange</code> event is fired.</p>
131
 
<table>
132
 
    <thead>
133
 
        <tr>
134
 
            <th>Event Property</th>
135
 
            <th>Description</th>
136
 
        </tr>
137
 
    </thead>
138
 
    <tbody>
139
 
        <tr>
140
 
            <td nowrap="nowrap"><code>changedEvent</code></td>
141
 
            <td>The event that caused the nodeChange</td>
142
 
        </tr>
143
 
        <tr>
144
 
            <td nowrap="nowrap"><code>changedNode</code></td>
145
 
            <td>The node that was interacted with</td>
146
 
        </tr>
147
 
        <tr>
148
 
            <td nowrap="nowrap"><code>changedType</code></td>
149
 
            <td>The type of change: mousedown, mouseup, right, left, backspace, tab, enter, etc.</td>
150
 
        </tr>
151
 
        <tr>
152
 
            <td nowrap="nowrap"><code>commands</code></td>
153
 
            <td>The list of execCommands that belongs to this change and the dompath that's associated with the changedNode</td>
154
 
        </tr>
155
 
        <tr>
156
 
            <td nowrap="nowrap"><code>classNames</code></td>
157
 
            <td>An array of classNames that is applied to the changedNode and all of its parents</td>
158
 
        </tr>
159
 
        <tr>
160
 
            <td nowrap="nowrap"><code>dompath</code></td>
161
 
            <td>A sorted array of node instances that make up the DOM path from the changedNode to body.</td>
162
 
        </tr>
163
 
        <tr>
164
 
            <td nowrap="nowrap"><code>backgroundColor</code></td>
165
 
            <td>The cascaded backgroundColor of the changedNode</td>
166
 
        </tr>
167
 
        <tr>
168
 
            <td nowrap="nowrap"><code>fontColor</code></td>
169
 
            <td>The cascaded fontColor of the changedNode</td>
170
 
        </tr>
171
 
        <tr>
172
 
            <td nowrap="nowrap"><code>fontFamily</code></td>
173
 
            <td>The cascaded fontFamily of the changedNode</td>
174
 
        </tr>
175
 
        <tr>
176
 
            <td nowrap="nowrap"><code>fontSize</code></td>
177
 
            <td>The cascaded fontSize of the changedNode</td>
178
 
        </tr>
179
 
    </tbody>
180
 
</table>
181
 
 
182
 
<pre class="code prettyprint">&#x2F;&#x2F;Attaching a nodeChange event
183
 
editor.on(&#x27;nodeChange&#x27;, function(e) {
184
 
    &#x2F;&#x2F;Here e contains the values above..
185
 
});</pre>
186
 
 
187
 
 
188
 
 
189
 
<h3 id="full-example-source">Full Example Source</h3>
190
 
 
191
 
<h4 id="html">HTML</h4>
192
 
<pre class="code prettyprint">&lt;div id=&quot;demo_holder&quot; class=&quot;yui3-skin-sam&quot;&gt;
193
 
    &lt;div id=&quot;editor_cont&quot;&gt;
194
 
        &lt;p&gt;Interact with the Editor instance below (click, type) and watch the console.&lt;&#x2F;p&gt;
195
 
        &lt;p&gt;Use some special keys too. Enter, tab, arrows... Notice the event names.&lt;&#x2F;p&gt;
196
 
        &lt;div id=&quot;editor&quot;&gt;&lt;&#x2F;div&gt;
197
 
    &lt;&#x2F;div&gt;
198
 
    &lt;div id=&quot;console&quot;&gt;&lt;&#x2F;div&gt;
199
 
&lt;&#x2F;div&gt;</pre>
200
 
 
201
 
 
202
 
<h4 id="css">CSS</h4>
203
 
<pre class="code prettyprint">#demo_holder {
204
 
    position: relative;
205
 
}
206
 
#editor_cont {
207
 
    width: 300px;
208
 
    border: 1px solid #999;
209
 
    margin: 2em;
210
 
    background-color: #f2f2f2;
211
 
}
212
 
#editor_cont p {
213
 
    margin: .5em;
214
 
}
215
 
#editor {
216
 
    height: 350px;
217
 
    background-color: #fff;
218
 
}
219
 
#example-canvas .yui3-console .yui3-console-title {
220
 
    border: 0 none;
221
 
    color: #000;
222
 
    font-size: 13px;
223
 
    font-weight: bold;
224
 
    margin: 0;
225
 
    text-transform: none;
226
 
}
227
 
#example-canvas .yui3-console .yui3-console-entry-meta {
228
 
    margin: 0;
229
 
}</pre>
230
 
 
231
 
 
232
 
 
233
 
<h4 id="javascript">Javascript</h4>
234
 
<pre class="code prettyprint">YUI().use(&#x27;editor&#x27;, &#x27;console&#x27;, function(Y) {
235
 
 
236
 
    (new Y.Console().render( &quot;#console&quot; ));
237
 
    
238
 
    Y.log(&#x27;Interact with the Editor.&#x27;);
239
 
 
240
 
    var logFn = function(e) {
241
 
        var node = e.changedNode, tag;
242
 
        
243
 
        if (node) {
244
 
            tag = node.get(&#x27;tagName&#x27;).toLowerCase();
245
 
            Y.log(&#x27;nodeChange Event: &#x27; + e.changedType + &#x27; on (&#x27; + tag + &#x27;)&#x27;);
246
 
        }
247
 
    };
248
 
 
249
 
    &#x2F;&#x2F;Create the Base Editor
250
 
    var editor = new Y.EditorBase({
251
 
        content: &#x27;&lt;p&gt;&lt;b&gt;This is &lt;i class=&quot;foo&quot;&gt;a test&lt;&#x2F;i&gt;&lt;&#x2F;b&gt;&lt;&#x2F;p&gt;&lt;p&gt;&lt;b style=&quot;color: red; font-family: Comic Sans MS&quot;&gt;This is &lt;span class=&quot;foo&quot;&gt;a test&lt;&#x2F;span&gt;&lt;&#x2F;b&gt;&lt;&#x2F;p&gt;&#x27;,
252
 
        extracss: &#x27;.foo { font-weight: normal; color: black; background-color: yellow; }&#x27;
253
 
    });
254
 
    
255
 
    editor.on(&#x27;nodeChange&#x27;, logFn);
256
 
 
257
 
    &#x2F;&#x2F;Rendering the Editor.
258
 
    editor.render(&#x27;#editor&#x27;);
259
 
});</pre>
260
 
 
261
 
</div>
262
 
        </div>
263
 
 
264
 
        <div id="sidebar" class="yui3-u">
265
 
            
266
 
                <div id="toc" class="sidebox">
267
 
                    <div class="hd">
268
 
                        <h2 class="no-toc">Table of Contents</h2>
269
 
                    </div>
270
 
 
271
 
                    <div class="bd">
272
 
                        <ul class="toc">
273
 
<li>
274
 
<a href="#working-with-editorbase">Working with EditorBase</a>
275
 
</li>
276
 
<li>
277
 
<a href="#creating-the-editor">Creating the Editor</a>
278
 
</li>
279
 
<li>
280
 
<a href="#the-node-change-event">The Node Change Event</a>
281
 
<ul class="toc">
282
 
<li>
283
 
<a href="#nodechange-event-properties">nodeChange event properties</a>
284
 
</li>
285
 
</ul>
286
 
</li>
287
 
<li>
288
 
<a href="#full-example-source">Full Example Source</a>
289
 
<ul class="toc">
290
 
<li>
291
 
<a href="#html">HTML</a>
292
 
</li>
293
 
<li>
294
 
<a href="#css">CSS</a>
295
 
</li>
296
 
<li>
297
 
<a href="#javascript">Javascript</a>
298
 
</li>
299
 
</ul>
300
 
</li>
301
 
</ul>
302
 
                    </div>
303
 
                </div>
304
 
            
305
 
 
306
 
            
307
 
                <div class="sidebox">
308
 
                    <div class="hd">
309
 
                        <h2 class="no-toc">Examples</h2>
310
 
                    </div>
311
 
 
312
 
                    <div class="bd">
313
 
                        <ul class="examples">
314
 
                            
315
 
                                
316
 
                                    <li data-description="Use the Editor&#x27;s instance to query the iframe">
317
 
                                        <a href="editor-instance.html">Using the Editor&#x27;s instance</a>
318
 
                                    </li>
319
 
                                
320
 
                            
321
 
                                
322
 
                                    <li data-description="Using the Editor&#x27;s built in events.">
323
 
                                        <a href="editor-events.html">Editor Events</a>
324
 
                                    </li>
325
 
                                
326
 
                            
327
 
                                
328
 
                                    <li data-description="Using the Editor&#x27;s nodeChange Event.">
329
 
                                        <a href="editor-nodechange.html">NodeChange Event</a>
330
 
                                    </li>
331
 
                                
332
 
                            
333
 
                                
334
 
                                    <li data-description="Creating and using your own ExecCommands">
335
 
                                        <a href="editor-exec.html">ExecCommands</a>
336
 
                                    </li>
337
 
                                
338
 
                            
339
 
                        </ul>
340
 
                    </div>
341
 
                </div>
342
 
            
343
 
 
344
 
            
345
 
        </div>
346
 
    </div>
347
 
</div>
348
 
 
349
 
<script src="../assets/vendor/prettify/prettify-min.js"></script>
350
 
<script>prettyPrint();</script>
351
 
 
352
 
</body>
353
 
</html>