← 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/overlay/overlay-xy.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/overlay/overlay-xy.html
1
 
<!DOCTYPE html>
2
 
<html lang="en">
3
 
<head>
4
 
    <meta charset="utf-8">
5
 
    <title>Example: Basic XY Positioning</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: Basic XY Positioning</h1>
15
 
 
16
 
    
17
 
 
18
 
    <div class="yui3-g">
19
 
        <div id="main" class="yui3-u">
20
 
            <div class="content"><style type="text/css" scoped>
21
 
/* Hide overlay markup while loading, if js is enabled */
22
 
.yui3-js-enabled .yui3-overlay-loading {
23
 
    top:-1000em;
24
 
    left:-1000em;
25
 
    position:absolute;
26
 
}
27
 
 
28
 
/* Overlay Look/Feel */
29
 
.yui3-overlay-content {
30
 
    padding:3px;
31
 
    border:1px solid #000;
32
 
    background-color:#aaa;
33
 
}
34
 
 
35
 
.yui3-overlay-content .yui3-widget-hd {
36
 
    padding:5px;
37
 
    border:2px solid #aa0000;
38
 
    background-color:#fff;
39
 
}
40
 
 
41
 
.yui3-overlay-content .yui3-widget-bd {
42
 
    padding:5px;
43
 
    border:2px solid #0000aa;
44
 
    background-color:#fff;
45
 
}
46
 
 
47
 
.yui3-overlay-content .yui3-widget-ft {
48
 
    padding:5px;
49
 
    border:2px solid #00aa00;
50
 
    background-color:#fff;
51
 
}
52
 
 
53
 
/* Example Layout CSS */
54
 
.overlay-example {
55
 
    padding:5px;
56
 
    margin:10px 0;
57
 
    height:15em;
58
 
}
59
 
 
60
 
.overlay-example button, .overlay-example label, .overlay-example select, .overlay-example input {
61
 
    margin-right:1px;
62
 
}
63
 
 
64
 
.overlay-example select.needs-shim {
65
 
    width:100%;
66
 
}
67
 
 
68
 
.overlay-example .filler {
69
 
    color:#999;
70
 
}
71
 
 
72
 
#hide {
73
 
    margin-left:15px;
74
 
}
75
 
 
76
 
#x, #y {
77
 
    width:3em;
78
 
}
79
 
</style>
80
 
 
81
 
<div class="intro">
82
 
    <p>This example walks you through basics of creating and positioning an Overlay. It walks you through setting up the sandbox environment for the Overlay, including the required modules, and instantiating the Overlay based on markup already on the page.</p>
83
 
    <p>It also provides a couple of input fields, allowing you to invoke the Overlay's <code>move()</code> method, to move the Overlay to a specific XY position on the page.</p>
84
 
</div>
85
 
 
86
 
<div class="example">
87
 
    <div class="overlay-example" id="overlay-position">
88
 
 
89
 
    <label>X: <input type="text" id="x" value="0" ></label>
90
 
    <label>Y: <input type="text" id="y" value="0" ></label>
91
 
    <button type="button" id="move">Move</button>
92
 
    <button type="button" id="hide">Hide</button>
93
 
    <button type="button" id="show">Show</button>
94
 
 
95
 
    <div id="overlay" class="yui3-overlay-loading">
96
 
        <div class="yui3-widget-hd">Overlay Header</div>
97
 
        <div class="yui3-widget-bd">Overlay Body</div>
98
 
        <div class="yui3-widget-ft">Overlay Footer</div>
99
 
    </div>
100
 
 
101
 
    <p class="filler">
102
 
        <select class="needs-shim">
103
 
            <option>Prevent IE6 Bleedthrough</option>
104
 
        </select>
105
 
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc pretium quam eu mi varius pulvinar. Duis orci arcu, ullamcorper sit amet, luctus ut, interdum ac, quam. Pellentesque euismod. Nam tincidunt, purus in ultrices congue, urna neque posuere arcu, aliquam tristique purus sapien id nulla. Etiam rhoncus nulla at leo. Cras scelerisque nisl in nibh. Sed eget odio. Morbi elit elit, porta a, convallis sit amet, rhoncus non, felis. Mauris nulla pede, pretium eleifend, porttitor at, rutrum id, orci. Quisque non urna. Nulla aliquam rhoncus est. 
106
 
    </p>
107
 
</div>
108
 
 
109
 
<script type="text/javascript">
110
 
YUI().use("overlay", function(Y) {
111
 
 
112
 
    var xy = Y.one("#overlay-position").getXY();
113
 
 
114
 
    // Create an overlay from markup
115
 
    var overlay = new Y.Overlay({
116
 
        srcNode:"#overlay",
117
 
        width:"10em",
118
 
        height:"10em",
119
 
        xy:[xy[0] + 10, xy[1] + 35]
120
 
    });
121
 
    overlay.render();
122
 
 
123
 
    var xInput = Y.one("#x");
124
 
    var yInput = Y.one("#y");
125
 
 
126
 
    // Using round to round sub-pixel values for FF3 just 
127
 
    // to make the text box values prettier.
128
 
    xInput.set("value", Math.round(overlay.get("x")));
129
 
    yInput.set("value", Math.round(overlay.get("y")));
130
 
 
131
 
    Y.on("click", function(e) {
132
 
        var x = parseInt(xInput.get("value"));
133
 
        var y = parseInt(yInput.get("value"));
134
 
        overlay.move(x,y);
135
 
    }, "#move");
136
 
 
137
 
    Y.on("click", Y.bind(overlay.show, overlay), "#show");
138
 
    Y.on("click", Y.bind(overlay.hide, overlay), "#hide");
139
 
});
140
 
</script>
141
 
 
142
 
</div>
143
 
 
144
 
<h2>Basic XY Overlay Positioning</h2>
145
 
 
146
 
<h3>Setting Up The YUI Instance</h3>
147
 
 
148
 
<p>To create an instance of an Overlay on your page, the only module you need to request is the <code>overlay</code> module. The <code>overlay</code> module will pull in the <code>widget</code>, <code>widget-stack</code>, <code>widget-position</code>, <code>widget-position-align</code>, <code>widget-position-constrain</code> and <code>widget-stdmod</code> extensions it uses.</p>
149
 
 
150
 
<pre class="code prettyprint">YUI({...}).use(&quot;overlay&quot;, function(Y) {
151
 
    &#x2F;&#x2F; We&#x27;ll write example code here, where we have a Y.Overlay class available.
152
 
});</pre>
153
 
 
154
 
 
155
 
<p>Note, using the <code>overlay</code> module, will also pull down the default CSS required for overlay, on top of which we only need to add our required look/feel CSS for the example.</p>
156
 
 
157
 
<h3>Creating The Overlay From Markup</h3>
158
 
 
159
 
<p>For this example, we'll create the overlay instance from markup which already exists on the page, and is shown below. We mark the existing markup with the <code>yui3-overlay-loading</code> class, so that we can hide it while the rich control is being instantiated:</p>
160
 
 
161
 
<pre class="code prettyprint">&lt;div id=&quot;overlay&quot; class=&quot;yui3-overlay-loading&quot;&gt;
162
 
    &lt;div class=&quot;yui3-widget-hd&quot;&gt;Overlay Header&lt;&#x2F;div&gt;
163
 
    &lt;div class=&quot;yui3-widget-bd&quot;&gt;Overlay Body&lt;&#x2F;div&gt;
164
 
    &lt;div class=&quot;yui3-widget-ft&quot;&gt;Overlay Footer&lt;&#x2F;div&gt;
165
 
&lt;&#x2F;div&gt;</pre>
166
 
 
167
 
 
168
 
<p>The container DIV with id="overlay" is specified as the contentBox for the Overlay instance, and during instantiation, the overlay will look for DIV's marked with the <code>yui3-widget-hd, yui3-widget-bd, yui3-widget-ft</code> classes to setup the Overlay's header, body and footer content attributes.</p>
169
 
 
170
 
<h3>Instantiating The Overlay</h3>
171
 
 
172
 
<p>To create an overlay instance, we use the overlay constructor <code>Y.Overlay</code>, and pass it the <code>contentBox</code> node reference for the existing markup on the page. We also set a height/width for the overlay and the initial position for the Overlay (which otherwise defaults to 0,0):</p>
173
 
 
174
 
<pre class="code prettyprint">&#x2F;&#x2F; Create an overlay from markup, using an existing contentBox.
175
 
var overlay = new Y.Overlay({
176
 
    srcNode:&quot;#overlay&quot;,
177
 
    width:&quot;10em&quot;,
178
 
    height:&quot;10em&quot;,
179
 
    xy:[xy[0] + 10, xy[1] + 35]
180
 
});
181
 
overlay.render();</pre>
182
 
 
183
 
 
184
 
<p>After creating the overlay instance, we invoke <code>overlay.render()</code> to update the DOM to reflect the current state of the overlay. Before render is called, the state of the Overlay should not be reflected in the DOM (for example, we can change the height, without it being reflected in the DOM. When we finally render, the current height value will be applied to the DOM). We could also pass an optional node reference to the render method, to have the overlay rendered under a different parent node, from where the content box currently lies.</p>
185
 
 
186
 
<h3>Moving the Overlay</h3>
187
 
 
188
 
<p>Overlays have support for basic page based XY positioning. This example provides a couple of input controls which can be used to move the overlay to a specific XY page co-ordinate. Later examples will show how Overlay's extended positioning support to align/center the Overlay relative to other elements on the page.</p>
189
 
 
190
 
<pre class="code prettyprint">var xInput = Y.one(&quot;#x&quot;);
191
 
var yInput = Y.one(&quot;#y&quot;);
192
 
 
193
 
Y.on(&quot;click&quot;, function(e) {
194
 
 
195
 
    var x = parseInt(xInput.get(&quot;value&quot;));
196
 
    var y = parseInt(yInput.get(&quot;value&quot;));
197
 
 
198
 
    overlay.move(x,y);
199
 
}, &quot;#move&quot;);</pre>
200
 
 
201
 
 
202
 
<p>Overlay can be moved by invoking the <code>move</code> method, with either seperate x and y arguments (<code>move(100,200)</code>), or as an array (<code>move([100,200])</code>). The <code>x, y and xy</code> attributes can also be used to move the overlay, and are equivalent to the move method (<code>overlay.set(&quot;x&quot;, 200);overlay.set(&quot;xy&quot;, [100,200])</code>)</p>
203
 
 
204
 
<p>A select dropdown is added to the example page, along with additional content, to demonstrate the Overlay's ability to provide stacking and shimming support (to block select dropdown bleed through in IE6).</p>
205
 
 
206
 
<h3>CSS: Overlay Look/Feel</h3>
207
 
 
208
 
<p>The overlay.css Sam Skin file (build/overlay/assets/skins/sam/overlay.css) provides the default functional CSS for the overlay. Namely the CSS rules to hide the overlay, and position it absolutely. However there's no default out-of-the-box look/feel applied to the Overlay widget.</p>
209
 
 
210
 
<p>The example provides it's own look and feel for the Overlay, by defining rules for the content box, header, body and footer sections, and also specifies how markup should be hidden while the overlay is loading.:</p>
211
 
 
212
 
<pre class="code prettyprint">&#x2F;* Hide overlay markup while loading, if js is enabled *&#x2F;
213
 
.yui3-js-enabled .yui3-overlay-loading {
214
 
    top:-1000em;
215
 
    left:-1000em;
216
 
    position:absolute;
217
 
}
218
 
 
219
 
&#x2F;* Overlay Look&#x2F;Feel *&#x2F;
220
 
.yui3-overlay-content {
221
 
    padding:3px;
222
 
    border:1px solid #000;
223
 
    background-color:#aaa;
224
 
}
225
 
 
226
 
.yui3-overlay-content .yui3-widget-hd {
227
 
    padding:5px;
228
 
    border:2px solid #aa0000;
229
 
    background-color:#fff;
230
 
}
231
 
 
232
 
.yui3-overlay-content .yui3-widget-bd {
233
 
    padding:5px;
234
 
    border:2px solid #0000aa;
235
 
    background-color:#fff;
236
 
}
237
 
 
238
 
.yui3-overlay-content .yui3-widget-ft {
239
 
    padding:5px;
240
 
    border:2px solid #00aa00;
241
 
    background-color:#fff;
242
 
}</pre>
243
 
 
244
 
 
245
 
<p><strong>NOTE:</strong> As discussed on the <a href="../widget/index.html#widget-markup-diagram">Widget user guide</a>, all widgets are enclosed in 2 containing elements - the boundingBox is the outer(most) element, and the contentBox is the inner element into which the widget's content is added. It is advised to apply any look/feel CSS for the widget to the content box and it's children. This leaves the bounding box without padding/borders, allowing for consistent positioning/sizing across box models.</p>
246
 
 
247
 
<h2>Complete Example Source</h2>
248
 
<pre class="code prettyprint">&lt;div class=&quot;overlay-example&quot; id=&quot;overlay-position&quot;&gt;
249
 
 
250
 
    &lt;label&gt;X: &lt;input type=&quot;text&quot; id=&quot;x&quot; value=&quot;0&quot; &gt;&lt;&#x2F;label&gt;
251
 
    &lt;label&gt;Y: &lt;input type=&quot;text&quot; id=&quot;y&quot; value=&quot;0&quot; &gt;&lt;&#x2F;label&gt;
252
 
    &lt;button type=&quot;button&quot; id=&quot;move&quot;&gt;Move&lt;&#x2F;button&gt;
253
 
    &lt;button type=&quot;button&quot; id=&quot;hide&quot;&gt;Hide&lt;&#x2F;button&gt;
254
 
    &lt;button type=&quot;button&quot; id=&quot;show&quot;&gt;Show&lt;&#x2F;button&gt;
255
 
 
256
 
    &lt;div id=&quot;overlay&quot; class=&quot;yui3-overlay-loading&quot;&gt;
257
 
        &lt;div class=&quot;yui3-widget-hd&quot;&gt;Overlay Header&lt;&#x2F;div&gt;
258
 
        &lt;div class=&quot;yui3-widget-bd&quot;&gt;Overlay Body&lt;&#x2F;div&gt;
259
 
        &lt;div class=&quot;yui3-widget-ft&quot;&gt;Overlay Footer&lt;&#x2F;div&gt;
260
 
    &lt;&#x2F;div&gt;
261
 
 
262
 
    &lt;p class=&quot;filler&quot;&gt;
263
 
        &lt;select class=&quot;needs-shim&quot;&gt;
264
 
            &lt;option&gt;Prevent IE6 Bleedthrough&lt;&#x2F;option&gt;
265
 
        &lt;&#x2F;select&gt;
266
 
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc pretium quam eu mi varius pulvinar. Duis orci arcu, ullamcorper sit amet, luctus ut, interdum ac, quam. Pellentesque euismod. Nam tincidunt, purus in ultrices congue, urna neque posuere arcu, aliquam tristique purus sapien id nulla. Etiam rhoncus nulla at leo. Cras scelerisque nisl in nibh. Sed eget odio. Morbi elit elit, porta a, convallis sit amet, rhoncus non, felis. Mauris nulla pede, pretium eleifend, porttitor at, rutrum id, orci. Quisque non urna. Nulla aliquam rhoncus est. 
267
 
    &lt;&#x2F;p&gt;
268
 
&lt;&#x2F;div&gt;
269
 
 
270
 
&lt;script type=&quot;text&#x2F;javascript&quot;&gt;
271
 
YUI().use(&quot;overlay&quot;, function(Y) {
272
 
 
273
 
    var xy = Y.one(&quot;#overlay-position&quot;).getXY();
274
 
 
275
 
    &#x2F;&#x2F; Create an overlay from markup
276
 
    var overlay = new Y.Overlay({
277
 
        srcNode:&quot;#overlay&quot;,
278
 
        width:&quot;10em&quot;,
279
 
        height:&quot;10em&quot;,
280
 
        xy:[xy[0] + 10, xy[1] + 35]
281
 
    });
282
 
    overlay.render();
283
 
 
284
 
    var xInput = Y.one(&quot;#x&quot;);
285
 
    var yInput = Y.one(&quot;#y&quot;);
286
 
 
287
 
    &#x2F;&#x2F; Using round to round sub-pixel values for FF3 just 
288
 
    &#x2F;&#x2F; to make the text box values prettier.
289
 
    xInput.set(&quot;value&quot;, Math.round(overlay.get(&quot;x&quot;)));
290
 
    yInput.set(&quot;value&quot;, Math.round(overlay.get(&quot;y&quot;)));
291
 
 
292
 
    Y.on(&quot;click&quot;, function(e) {
293
 
        var x = parseInt(xInput.get(&quot;value&quot;));
294
 
        var y = parseInt(yInput.get(&quot;value&quot;));
295
 
        overlay.move(x,y);
296
 
    }, &quot;#move&quot;);
297
 
 
298
 
    Y.on(&quot;click&quot;, Y.bind(overlay.show, overlay), &quot;#show&quot;);
299
 
    Y.on(&quot;click&quot;, Y.bind(overlay.hide, overlay), &quot;#hide&quot;);
300
 
});
301
 
&lt;&#x2F;script&gt;</pre>
302
 
 
303
 
</div>
304
 
        </div>
305
 
 
306
 
        <div id="sidebar" class="yui3-u">
307
 
            
308
 
 
309
 
            
310
 
                <div class="sidebox">
311
 
                    <div class="hd">
312
 
                        <h2 class="no-toc">Examples</h2>
313
 
                    </div>
314
 
 
315
 
                    <div class="bd">
316
 
                        <ul class="examples">
317
 
                            
318
 
                                
319
 
                                    <li data-description="Shows how to instantiate a basic Overlay instance, and use the Overlay&#x27;s basic XY positioning support.">
320
 
                                        <a href="overlay-xy.html">Basic XY Positioning</a>
321
 
                                    </li>
322
 
                                
323
 
                            
324
 
                                
325
 
                                    <li data-description="Shows how to use the Overlay&#x27;s XY alignment support, to align the Overlay relative to another element, or to the viewport.">
326
 
                                        <a href="overlay-align.html">Alignment Support</a>
327
 
                                    </li>
328
 
                                
329
 
                            
330
 
                                
331
 
                                    <li data-description="Shows how to use the Overlay&#x27;s zindex and shim support when positioning Overlays above other elements on the page.">
332
 
                                        <a href="overlay-stack.html">Stack Support</a>
333
 
                                    </li>
334
 
                                
335
 
                            
336
 
                                
337
 
                                    <li data-description="Shows how to modify content in the Overlay&#x27;s header, body and footer sections.">
338
 
                                        <a href="overlay-stdmod.html">Standard Module Support</a>
339
 
                                    </li>
340
 
                                
341
 
                            
342
 
                                
343
 
                                    <li data-description="Shows how to use Overlay&#x27;s constrainment support, to limit the XY value which can be set for an Overlay.">
344
 
                                        <a href="overlay-constrain.html">Constrain Support</a>
345
 
                                    </li>
346
 
                                
347
 
                            
348
 
                                
349
 
                                    <li data-description="Shows how to create a simple plugin to retrieve content for the Overlay using the io utility.">
350
 
                                        <a href="overlay-io-plugin.html">IO Plugin</a>
351
 
                                    </li>
352
 
                                
353
 
                            
354
 
                                
355
 
                                    <li data-description="Shows how to create a simple plugin to animate the Overlay&#x27;s movement and visibility.">
356
 
                                        <a href="overlay-anim-plugin.html">Animation Plugin</a>
357
 
                                    </li>
358
 
                                
359
 
                            
360
 
                                
361
 
                            
362
 
                                
363
 
                            
364
 
                        </ul>
365
 
                    </div>
366
 
                </div>
367
 
            
368
 
 
369
 
            
370
 
                <div class="sidebox">
371
 
                    <div class="hd">
372
 
                        <h2 class="no-toc">Examples That Use This Component</h2>
373
 
                    </div>
374
 
 
375
 
                    <div class="bd">
376
 
                        <ul class="examples">
377
 
                            
378
 
                                
379
 
                            
380
 
                                
381
 
                            
382
 
                                
383
 
                            
384
 
                                
385
 
                            
386
 
                                
387
 
                            
388
 
                                
389
 
                            
390
 
                                
391
 
                            
392
 
                                
393
 
                                    <li data-description="Creating an accessible menu button using the Focus Manager Node Plugin, Event&#x27;s delegation support and mouseenter event, along with the Overlay widget and Node&#x27;s support for the WAI-ARIA Roles and States.">
394
 
                                        <a href="../node-focusmanager/node-focusmanager-3.html">Accessible Menu Button</a>
395
 
                                    </li>
396
 
                                
397
 
                            
398
 
                                
399
 
                                    <li data-description="Use StyleSheet to adjust the CSS rules applying a page theme from user input">
400
 
                                        <a href="../stylesheet/stylesheet-theme.html">Adjusting a Page Theme on the Fly</a>
401
 
                                    </li>
402
 
                                
403
 
                            
404
 
                        </ul>
405
 
                    </div>
406
 
                </div>
407
 
            
408
 
        </div>
409
 
    </div>
410
 
</div>
411
 
 
412
 
<script src="../assets/vendor/prettify/prettify-min.js"></script>
413
 
<script>prettyPrint();</script>
414
 
 
415
 
</body>
416
 
</html>