← Back to branch summary

~ubuntu-branches/ubuntu/precise/maas/precise-updates

« back to all changes in this revision

Viewing changes to src/maasserver/static/jslibs/yui/3.4.1/docs/stylesheet/stylesheet-theme.html

Tags: 1.2+bzr1373+dfsg-0ubuntu1~12.04.4
https://launchpad.net/bugs/1039513
https://launchpad.net/bugs/1158425
* SECURITY UPDATE: failure to authenticate downloaded content (LP: #1039513)
  - debian/patches/CVE-2013-1058.patch: Authenticate downloaded files with
    GnuPG and MD5SUM files. Thanks to Julian Edwards.
  - CVE-2013-1058
* SECURITY UPDATE: configuration options may be loaded from current working
  directory (LP: #1158425)
  - debian/patches/CVE-2013-1057-1-2.patch: Do not load configuration
    options from the current working directory. Thanks to Julian Edwards.
  - CVE-2013-1057

Show diffs side-by-side

added added

removed removed

Lines of Context:
src/maasserver/static/jslibs/yui/3.4.1/docs/stylesheet/stylesheet-theme.html
1
 
<!DOCTYPE html>
2
 
<html lang="en">
3
 
<head>
4
 
    <meta charset="utf-8">
5
 
    <title>Example: Adjusting a Page Theme on the Fly</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: Adjusting a Page Theme on the Fly</h1>
15
 
 
16
 
    
17
 
 
18
 
    <div class="yui3-g">
19
 
        <div id="main" class="yui3-u">
20
 
            <div class="content"><div class="intro">
21
 
    <p>In this example, we'll use a snapshot of the <a href="http://www.w3.org/TR/html401/present/styles.html">W3C HTML 4.01 specification for Style Sheets</a> and add a custom dynamic StyleSheet to apply some color and font size changes.</p>
22
 
 
23
 
    <p>A Progressive enhancement strategy is used to extract a static form on the page into a draggable Overlay.  Additionally, one of the form inputs is replaced with a Slider.  Enter any valid CSS color value into the other inputs (e.g. <code>#123456</code>, <code>#135</code>, <code>rgb(0,0,0)</code>, or <code>red</code>).</p>
24
 
</div>
25
 
 
26
 
<div class="example newwindow">
27
 
    <a href="stylesheet-theme-example.html" target="_blank" class="button">
28
 
        View Example in New Window
29
 
    </a>
30
 
</div>
31
 
 
32
 
<h3 class="first">Full code listing</h3>
33
 
<h4 id="markup">Markup</h4>
34
 
<p>The markup as stated above is a local snapshot of the HTML 4.01 spec, but with the following markup added to the end of the <code>&lt;body&gt;</code> to show a progressive enhancement model.</p>
35
 
 
36
 
<pre class="code prettyprint">&lt;div id=&quot;form_container&quot;&gt;
37
 
    &lt;form class=&quot;yui3-widget-bd&quot; id=&quot;theme_form&quot; action=&quot;#&quot; method=&quot;get&quot;&gt;
38
 
        &lt;fieldset&gt;
39
 
            &lt;h3&gt;Update Theme&lt;&#x2F;h3&gt;
40
 
            &lt;label for=&quot;font_size&quot;&gt;Font size:&lt;&#x2F;label&gt;
41
 
            &lt;input type=&quot;text&quot; size=&quot;3&quot; id=&quot;font_size&quot; value=&quot;16px&quot;&gt;
42
 
 
43
 
            &lt;label for=&quot;heading_color&quot;&gt;Heading color:&lt;&#x2F;label&gt;
44
 
            &lt;input type=&quot;text&quot; size=&quot;12&quot; id=&quot;heading_color&quot; value=&quot;#005A9C&quot;&gt;
45
 
 
46
 
            &lt;label for=&quot;link_hover&quot;&gt;Link hover backgound:&lt;&#x2F;label&gt;
47
 
            &lt;input type=&quot;text&quot; size=&quot;12&quot; id=&quot;link_hover&quot; value=&quot;#ffa&quot;&gt;
48
 
        &lt;&#x2F;fieldset&gt;
49
 
        &lt;input type=&quot;submit&quot;&gt;
50
 
    &lt;&#x2F;form&gt;
51
 
&lt;&#x2F;div&gt;</pre>
52
 
 
53
 
 
54
 
<h4>JavaScript</h4>
55
 
 
56
 
<pre class="code prettyprint">&lt;script src=&quot;..&#x2F;..&#x2F;build&#x2F;yui&#x2F;yui-min.js&quot;&gt;&lt;&#x2F;script&gt;
57
 
&lt;script&gt;
58
 
&#x2F;&#x2F; Create a new YUI instance, requiring stylesheet, overlay, slider, and the
59
 
&#x2F;&#x2F; dd-plugin to make the overlay draggable
60
 
YUI().use(&quot;stylesheet&quot;,&quot;overlay&quot;,&quot;slider&quot;,&quot;dd-plugin&quot;, function (Y) {
61
 
 
62
 
    var myStyleSheet = new Y.StyleSheet(),
63
 
        overlayContent = Y.one(&#x27;#form_container&#x27;),
64
 
        overlay,
65
 
        slider,
66
 
        slider_container,
67
 
        fontSizeInput,
68
 
 
69
 
    &#x2F;&#x2F; Create the Overlay, using the form container as the contentBox.
70
 
    &#x2F;&#x2F; The form is assigned a class yui-widget-bd that will be automatically
71
 
    &#x2F;&#x2F; discovered by Overlay to populate the Overlay&#x27;s body section.
72
 
    &#x2F;&#x2F; The overlay is positioned in the top right corner, but made draggable
73
 
    &#x2F;&#x2F; using Y.Plugin.Drag, provided by the dd-plugin module.
74
 
    overlay = new Y.Overlay({
75
 
        srcNode: overlayContent,
76
 
        alignOn: [],
77
 
        width: &#x27;225px&#x27;,
78
 
        align: { points: [ Y.WidgetPositionAlign.TR, Y.WidgetPositionAlign.TR ] },
79
 
        plugins: [ Y.Plugin.Drag ]
80
 
    }).render();
81
 
 
82
 
    &#x2F;&#x2F; Slider needs a parent element to have the sam skin class for UI skinning
83
 
    overlayContent.addClass(&#x27;yui3-skin-sam&#x27;);
84
 
 
85
 
    &#x2F;&#x2F; Progressively enhance the font-size input with a Slider
86
 
    fontSizeInput = Y.one(&#x27;#font_size&#x27;);
87
 
    fontSizeInput.set(&#x27;type&#x27;,&#x27;hidden&#x27;);
88
 
    fontSizeInput.get(&#x27;parentNode&#x27;).insertBefore(
89
 
        Y.Node.create(&#x27;6 &lt;span&gt;&lt;&#x2F;span&gt; 36&#x27;),
90
 
        fontSizeInput);
91
 
 
92
 
    slider_container = fontSizeInput.previous( &quot;span&quot; );
93
 
 
94
 
    &#x2F;&#x2F; Create a Slider to contain font size between 6px and 36px, using the
95
 
    &#x2F;&#x2F; page&#x27;s current font size as the initial value.
96
 
    &#x2F;&#x2F; Set up an event subscriber during construction to update the replaced
97
 
    &#x2F;&#x2F; input field&#x27;s value and apply the change to the StyleSheet
98
 
    slider = new Y.Slider({
99
 
        length: &#x27;100px&#x27;,
100
 
        min: 6,
101
 
        max: 36,
102
 
        value: parseInt(Y.one(&#x27;body&#x27;).getStyle(&#x27;fontSize&#x27;)) || 13,
103
 
        after: {
104
 
            valueChange: function (e) {
105
 
                var size = e.newVal + &#x27;px&#x27;;
106
 
 
107
 
                this.thumb.set(&#x27;title&#x27;, size);
108
 
                fontSizeInput.set(&#x27;value&#x27;, size);
109
 
 
110
 
                myStyleSheet.set(&#x27;body&#x27;, { fontSize: size });
111
 
            }
112
 
        }
113
 
    }).render( slider_container );
114
 
 
115
 
    &#x2F;&#x2F; The color inputs are assigned keyup listeners that will update the
116
 
    &#x2F;&#x2F; StyleSheet if the current input value is a valid CSS color value
117
 
 
118
 
    &#x2F;&#x2F; The heading input affects all h1s, h2, and h3s
119
 
    Y.on(&#x27;keyup&#x27;, function (e) {
120
 
        var color = this.get(&#x27;value&#x27;);
121
 
 
122
 
        if (isValidColor(color)) {
123
 
            myStyleSheet.set(&#x27;h1, h2, h3&#x27;, { color: color });
124
 
        }
125
 
    }, &#x27;#heading_color&#x27;);
126
 
 
127
 
    &#x2F;&#x2F; The link hover affects the background color of links when they are
128
 
    &#x2F;&#x2F; hovered.  There is no way other than via stylesheet modification to
129
 
    &#x2F;&#x2F; change pseudo-class styles.
130
 
    Y.on(&#x27;keyup&#x27;, function (e) {
131
 
        var color = this.get(&#x27;value&#x27;);
132
 
 
133
 
        if (isValidColor(color)) {
134
 
            myStyleSheet.set(&#x27;a:hover&#x27;, { backgroundColor: color });
135
 
        }
136
 
    }, &#x27;#link_hover&#x27;);
137
 
 
138
 
    &#x2F;&#x2F; Progressive form enhancement complete, now prevent the form from
139
 
    &#x2F;&#x2F; submitting normally.
140
 
    Y.one(&#x27;#theme_form input[type=submit]&#x27;).remove();
141
 
 
142
 
    Y.on(&#x27;submit&#x27;, function (e) {
143
 
        e.halt();
144
 
    }, &#x27;#theme_form&#x27;);
145
 
 
146
 
        &#x2F;&#x2F; A rudimentary validator to make sure we&#x27;re not trying to set
147
 
        &#x2F;&#x2F; invalid color values in StyleSheet.
148
 
        function isValidColor(v) {
149
 
        return &#x2F;^#[0-9a-f]{3}(?:[0-9a-f]{3})?$&#x2F;i.test(v) ||
150
 
               &#x2F;^rgb\(\s*\d+\s*,\s*\d+\s*,\s*\d+\s*\)$&#x2F;.test(v) ||
151
 
               &#x2F;^[a-z]{3,}$&#x2F;i.test(v);
152
 
        }
153
 
 
154
 
});
155
 
&lt;&#x2F;script&gt;</pre>
156
 
 
157
 
 
158
 
<h4>CSS</h4>
159
 
<p>This is the CSS added to the page to skin the Overlay and its content.</p>
160
 
 
161
 
<pre class="code prettyprint">&lt;style&gt;
162
 
&#x2F;* For supporting browsers, the overlay is rendered semi-transparent with
163
 
 * fancy rounded corners *&#x2F;
164
 
.yui3-overlay {
165
 
    background: rgba(128,128,128,0.3);
166
 
    -moz-border-radius: 10px;
167
 
    -webkit-border-radius: 10px;
168
 
    border-radius: 10px;
169
 
    padding: 7px;
170
 
    cursor: move;
171
 
}
172
 
.yui3-overlay-content {
173
 
    background: rgba(205,205,205,0.3);
174
 
    -moz-border-radius: 10px;
175
 
    -webkit-border-radius: 10px;
176
 
    border-radius: 10px;
177
 
    padding: 1px;
178
 
} 
179
 
.yui3-overlay form {
180
 
    background: #f2fbff url(..&#x2F;assets&#x2F;stylesheet&#x2F;gradient-promo.png) repeat-x scroll 0 0;
181
 
    border: 2px solid #fff;
182
 
    -moz-border-radius: 10px;
183
 
    -webkit-border-radius: 10px;
184
 
    border-radius: 10px;
185
 
    margin: 0;
186
 
    padding: 0;
187
 
    font-size: 13px;
188
 
}
189
 
.yui3-overlay fieldset {
190
 
    border: 1px solid #cde;
191
 
    -moz-border-radius: 10px;
192
 
    -webkit-border-radius: 10px;
193
 
    border-radius: 10px;
194
 
    margin: 0;
195
 
    padding: 20px;
196
 
}
197
 
.yui3-overlay h3 {
198
 
    border-bottom: 2px solid #fff;
199
 
    color: #479;
200
 
    background: transparent;
201
 
    margin: 0;
202
 
    font-size: 175%;
203
 
}
204
 
.yui3-overlay label {
205
 
    display: block;
206
 
    margin: 1.3em 0 0.5ex;
207
 
    font-weight: bold;
208
 
    color: #003;
209
 
}
210
 
.yui3-overlay p {
211
 
    margin: 2em 0 0;
212
 
}
213
 
&#x2F;* override the move cursor for the Slider *&#x2F;
214
 
.yui3-overlay .yui3-slider:hover {
215
 
    cursor: default;
216
 
}
217
 
&lt;&#x2F;style&gt;</pre>
218
 
 
219
 
 
220
 
</div>
221
 
        </div>
222
 
 
223
 
        <div id="sidebar" class="yui3-u">
224
 
            
225
 
 
226
 
            
227
 
                <div class="sidebox">
228
 
                    <div class="hd">
229
 
                        <h2 class="no-toc">Examples</h2>
230
 
                    </div>
231
 
 
232
 
                    <div class="bd">
233
 
                        <ul class="examples">
234
 
                            
235
 
                                
236
 
                                    <li data-description="Use StyleSheet to adjust the CSS rules applying a page theme from user input">
237
 
                                        <a href="stylesheet-theme.html">Adjusting a Page Theme on the Fly</a>
238
 
                                    </li>
239
 
                                
240
 
                            
241
 
                                
242
 
                            
243
 
                        </ul>
244
 
                    </div>
245
 
                </div>
246
 
            
247
 
 
248
 
            
249
 
                <div class="sidebox">
250
 
                    <div class="hd">
251
 
                        <h2 class="no-toc">Examples That Use This Component</h2>
252
 
                    </div>
253
 
 
254
 
                    <div class="bd">
255
 
                        <ul class="examples">
256
 
                            
257
 
                                
258
 
                            
259
 
                                
260
 
                                    <li data-description="Example Photo Browser application.">
261
 
                                        <a href="../dd/photo-browser.html">Photo Browser</a>
262
 
                                    </li>
263
 
                                
264
 
                            
265
 
                        </ul>
266
 
                    </div>
267
 
                </div>
268
 
            
269
 
        </div>
270
 
    </div>
271
 
</div>
272
 
 
273
 
<script src="../assets/vendor/prettify/prettify-min.js"></script>
274
 
<script>prettyPrint();</script>
275
 
 
276
 
</body>
277
 
</html>