← 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/resize/image-resize.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/resize/image-resize.html
1
 
<!DOCTYPE html>
2
 
<html lang="en">
3
 
<head>
4
 
    <meta charset="utf-8">
5
 
    <title>Example: 8-way Image Resize</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: 8-way Image Resize</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>This example shows a simple 8-way image resize and provides the required CSS elements required for the most common image-resize visual treatment.</p>
24
 
</div>
25
 
 
26
 
<div class="example">
27
 
    <style>
28
 
#demo {
29
 
        display: block; // fixes image misalignment
30
 
        height: 121px;
31
 
        width: 182px;
32
 
        position: absolute;
33
 
        top: 100px;
34
 
        left: 100px;
35
 
}
36
 
 
37
 
#demoContainer {
38
 
        position: relative;
39
 
        height: 333px;
40
 
        width: 500px;
41
 
    border: 1px solid black;
42
 
}
43
 
 
44
 
/* knob handles demo */
45
 
 
46
 
.yui3-resize-knob .yui3-resize-handle-tr,
47
 
.yui3-resize-knob .yui3-resize-handle-br,
48
 
.yui3-resize-knob .yui3-resize-handle-tl,
49
 
.yui3-resize-knob .yui3-resize-handle-bl,
50
 
.yui3-resize-knob .yui3-resize-handle-b,
51
 
.yui3-resize-knob .yui3-resize-handle-t,
52
 
.yui3-resize-knob .yui3-resize-handle-l,
53
 
.yui3-resize-knob .yui3-resize-handle-r {
54
 
        border: 1px solid #808080;
55
 
        background-color: #F2F2F2;
56
 
        height: 6px;
57
 
        width: 6px;
58
 
}
59
 
 
60
 
.yui3-resize-knob .yui3-resize-handle-b,
61
 
.yui3-resize-knob .yui3-resize-handle-t {
62
 
        left: 45%;
63
 
}
64
 
 
65
 
.yui3-resize-knob .yui3-resize-handle-l,
66
 
.yui3-resize-knob .yui3-resize-handle-r {
67
 
        top: 45%;
68
 
}
69
 
 
70
 
.yui3-resize-knob .yui3-resize-handle-t,
71
 
.yui3-resize-knob .yui3-resize-handle-tr,
72
 
.yui3-resize-knob .yui3-resize-handle-tl {
73
 
        top: -4px;
74
 
}
75
 
 
76
 
.yui3-resize-knob .yui3-resize-handle-b,
77
 
.yui3-resize-knob .yui3-resize-handle-br,
78
 
.yui3-resize-knob .yui3-resize-handle-bl {
79
 
        bottom: -4px;
80
 
}
81
 
 
82
 
.yui3-resize-knob .yui3-resize-handle-l,
83
 
.yui3-resize-knob .yui3-resize-handle-bl,
84
 
.yui3-resize-knob .yui3-resize-handle-tl {
85
 
        left: -4px;
86
 
}
87
 
 
88
 
.yui3-resize-knob .yui3-resize-handle-r,
89
 
.yui3-resize-knob .yui3-resize-handle-br,
90
 
.yui3-resize-knob .yui3-resize-handle-tr {
91
 
        right: -4px;
92
 
}
93
 
 
94
 
.yui3-resize-knob .yui3-resize-handle-inner {
95
 
        background: none;
96
 
        height: 6px;
97
 
        width: 6px;
98
 
}
99
 
 
100
 
</style>
101
 
 
102
 
<div id="demoContainer" class="yui3-resize-knob">
103
 
        <img id="demo" src="../assets/resize/team.jpg" alt="Eduardo Lundgren, Nate Cavanaugh and the YUI Team at Yahoo">
104
 
</div>
105
 
 
106
 
 
107
 
 
108
 
 
109
 
<script>
110
 
YUI().use('resize', function(Y) {
111
 
    var resize = new Y.Resize({
112
 
        //Selector of the node to resize
113
 
        node: '#demo'
114
 
    });   
115
 
        resize.plug(Y.Plugin.ResizeConstrained, {
116
 
                constrain: '#demoContainer',
117
 
                minHeight: 50,
118
 
                minWidth: 50
119
 
        });
120
 
});
121
 
 
122
 
 
123
 
</script>
124
 
 
125
 
 
126
 
</div>
127
 
 
128
 
 
129
 
<h3 id="setting-up-the-node">Setting up the Node</h3>
130
 
<p>First we need to create an image to resize; we wrap the image in another element to provide some CSS hooks.</p>
131
 
 
132
 
<pre class="code prettyprint">&lt;div id=&quot;demoContainer&quot; class=&quot;yui3-resize-knob&quot;&gt;
133
 
        &lt;img id=&quot;demo&quot; src=&quot;..&#x2F;assets&#x2F;resize&#x2F;team.jpg&quot; alt=&quot;Eduardo Lundgren, Nate Cavanaugh and the YUI Team at Yahoo&quot;&gt;
134
 
&lt;&#x2F;div&gt;</pre>
135
 
 
136
 
 
137
 
<h3 id="setting-up-the-yui-instance">Setting up the YUI Instance</h3>
138
 
<p>Next, we need to create our YUI instance and tell it to load the <code>resize</code> module.</p>
139
 
 
140
 
<pre class="code prettyprint">YUI().use(&#x27;resize&#x27;);</pre>
141
 
 
142
 
 
143
 
<h3 id="making-the-node-resizable">Making the Node Resizable</h3>
144
 
<p>Now that we have a YUI instance with the <code>resize</code> module, we need to instantiate the <code>Resize</code> instance on this element.</p>
145
 
 
146
 
<pre class="code prettyprint">YUI().use(&#x27;resize&#x27;, function(Y) {
147
 
    var resize = new Y.Resize({
148
 
        &#x2F;&#x2F;Selector of the node to resize
149
 
        node: &#x27;#demo&#x27;
150
 
    });   
151
 
});</pre>
152
 
 
153
 
 
154
 
 
155
 
<h3 id="adding-the-constrained-plugin">Adding the Constrained Plugin</h3>
156
 
<p>Now we add the <code>ResizeConstrained</code> plugin. This plugin will allow you to limit the resize dimensions in special ways.</p>
157
 
 
158
 
 
159
 
<pre class="code prettyprint">YUI().use(&#x27;resize&#x27;, function(Y) {
160
 
    var resize = new Y.Resize({
161
 
        &#x2F;&#x2F;Selector of the node to resize
162
 
        node: &#x27;#demo&#x27;
163
 
    });   
164
 
        resize.plug(Y.Plugin.ResizeConstrained, {
165
 
                constrain: &#x27;#demoContainer&#x27;,
166
 
                minHeight: 50,
167
 
                minWidth: 50
168
 
        });
169
 
});</pre>
170
 
 
171
 
 
172
 
<h3 id="adding-css">Adding CSS</h3>
173
 
 
174
 
<p>Image resize operations typically have their own visual treatment and therefore require slightly different drag handles in order to be discoverable and intuitive.  Here is CSS that provides a common image-resize visual treatment:</p>
175
 
 
176
 
<pre class="code prettyprint">#demo {
177
 
        display: block; &#x2F;&#x2F; fixes image misalignment
178
 
        height: 121px;
179
 
        width: 182px;
180
 
        position: absolute;
181
 
        top: 100px;
182
 
        left: 100px;
183
 
}
184
 
 
185
 
#demoContainer {
186
 
        position: relative;
187
 
        height: 333px;
188
 
        width: 500px;
189
 
    border: 1px solid black;
190
 
}
191
 
 
192
 
&#x2F;* knob handles demo *&#x2F;
193
 
 
194
 
.yui3-resize-knob .yui3-resize-handle-tr,
195
 
.yui3-resize-knob .yui3-resize-handle-br,
196
 
.yui3-resize-knob .yui3-resize-handle-tl,
197
 
.yui3-resize-knob .yui3-resize-handle-bl,
198
 
.yui3-resize-knob .yui3-resize-handle-b,
199
 
.yui3-resize-knob .yui3-resize-handle-t,
200
 
.yui3-resize-knob .yui3-resize-handle-l,
201
 
.yui3-resize-knob .yui3-resize-handle-r {
202
 
        border: 1px solid #808080;
203
 
        background-color: #F2F2F2;
204
 
        height: 6px;
205
 
        width: 6px;
206
 
}
207
 
 
208
 
.yui3-resize-knob .yui3-resize-handle-b,
209
 
.yui3-resize-knob .yui3-resize-handle-t {
210
 
        left: 45%;
211
 
}
212
 
 
213
 
.yui3-resize-knob .yui3-resize-handle-l,
214
 
.yui3-resize-knob .yui3-resize-handle-r {
215
 
        top: 45%;
216
 
}
217
 
 
218
 
.yui3-resize-knob .yui3-resize-handle-t,
219
 
.yui3-resize-knob .yui3-resize-handle-tr,
220
 
.yui3-resize-knob .yui3-resize-handle-tl {
221
 
        top: -4px;
222
 
}
223
 
 
224
 
.yui3-resize-knob .yui3-resize-handle-b,
225
 
.yui3-resize-knob .yui3-resize-handle-br,
226
 
.yui3-resize-knob .yui3-resize-handle-bl {
227
 
        bottom: -4px;
228
 
}
229
 
 
230
 
.yui3-resize-knob .yui3-resize-handle-l,
231
 
.yui3-resize-knob .yui3-resize-handle-bl,
232
 
.yui3-resize-knob .yui3-resize-handle-tl {
233
 
        left: -4px;
234
 
}
235
 
 
236
 
.yui3-resize-knob .yui3-resize-handle-r,
237
 
.yui3-resize-knob .yui3-resize-handle-br,
238
 
.yui3-resize-knob .yui3-resize-handle-tr {
239
 
        right: -4px;
240
 
}
241
 
 
242
 
.yui3-resize-knob .yui3-resize-handle-inner {
243
 
        background: none;
244
 
        height: 6px;
245
 
        width: 6px;
246
 
}</pre>
247
 
 
248
 
</div>
249
 
        </div>
250
 
 
251
 
        <div id="sidebar" class="yui3-u">
252
 
            
253
 
                <div id="toc" class="sidebox">
254
 
                    <div class="hd">
255
 
                        <h2 class="no-toc">Table of Contents</h2>
256
 
                    </div>
257
 
 
258
 
                    <div class="bd">
259
 
                        <ul class="toc">
260
 
<li>
261
 
<a href="#setting-up-the-node">Setting up the Node</a>
262
 
</li>
263
 
<li>
264
 
<a href="#setting-up-the-yui-instance">Setting up the YUI Instance</a>
265
 
</li>
266
 
<li>
267
 
<a href="#making-the-node-resizable">Making the Node Resizable</a>
268
 
</li>
269
 
<li>
270
 
<a href="#adding-the-constrained-plugin">Adding the Constrained Plugin</a>
271
 
</li>
272
 
<li>
273
 
<a href="#adding-css">Adding CSS</a>
274
 
</li>
275
 
</ul>
276
 
                    </div>
277
 
                </div>
278
 
            
279
 
 
280
 
            
281
 
                <div class="sidebox">
282
 
                    <div class="hd">
283
 
                        <h2 class="no-toc">Examples</h2>
284
 
                    </div>
285
 
 
286
 
                    <div class="bd">
287
 
                        <ul class="examples">
288
 
                            
289
 
                                
290
 
                                    <li data-description="Resize a node.">
291
 
                                        <a href="simple-resize.html">Simple Resize</a>
292
 
                                    </li>
293
 
                                
294
 
                            
295
 
                                
296
 
                                    <li data-description="A simple resize implementation that utilizes the ResizeConstrained plugin to set min/max dimensions and to lock in the resized element&#x27;s aspect ratio.">
297
 
                                        <a href="constrain-resize.html">Constrain a Resize</a>
298
 
                                    </li>
299
 
                                
300
 
                            
301
 
                                
302
 
                                    <li data-description="This example shows an 8-way image resize, providing the CSS needed for a common image-resize visual treatment.">
303
 
                                        <a href="image-resize.html">8-way Image Resize</a>
304
 
                                    </li>
305
 
                                
306
 
                            
307
 
                                
308
 
                                    <li data-description="Plugs a widget with resize functionality.">
309
 
                                        <a href="simple-resize-plugin.html">Widget with simple Resize Plugin</a>
310
 
                                    </li>
311
 
                                
312
 
                            
313
 
                                
314
 
                                    <li data-description="Plugs a widget with resize functionality, and implements ResizeConstrained">
315
 
                                        <a href="constrain-resize-plugin.html">Widget with Resize Plugin under constraints</a>
316
 
                                    </li>
317
 
                                
318
 
                            
319
 
                        </ul>
320
 
                    </div>
321
 
                </div>
322
 
            
323
 
 
324
 
            
325
 
        </div>
326
 
    </div>
327
 
</div>
328
 
 
329
 
<script src="../assets/vendor/prettify/prettify-min.js"></script>
330
 
<script>prettyPrint();</script>
331
 
 
332
 
</body>
333
 
</html>