1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly<script src="{{yuiSeedUrl}}"></script>
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly// Create a new YUI instance, requiring stylesheet, overlay, slider, and the
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly// dd-plugin to make the overlay draggable
66cdef7b58c561872619512e33839803f9673670Luke SmithYUI().use("stylesheet","overlay","slider","dd-plugin", function (Y) {
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly var myStyleSheet = new Y.StyleSheet(),
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly overlayContent = Y.one('#form_container'),
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly slider_container,
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly fontSizeInput,
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly // Create the Overlay, using the form container as the contentBox.
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly // The form is assigned a class yui-widget-bd that will be automatically
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly // discovered by Overlay to populate the Overlay's body section.
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly // The overlay is positioned in the top right corner, but made draggable
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly // using Y.Plugin.Drag, provided by the dd-plugin module.
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly overlay = new Y.Overlay({
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly srcNode: overlayContent,
2a765971702bbec268ed17403a8fd650f7583547Tilo Mitra alignOn: [],
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly width: '225px',
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly align: { points: [ Y.WidgetPositionAlign.TR, Y.WidgetPositionAlign.TR ] },
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly // Slider needs a parent element to have the sam skin class for UI skinning
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly // Progressively enhance the font-size input with a Slider
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly fontSizeInput = Y.one('#font_size');
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly fontSizeInput.set('type','hidden');
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly fontSizeInput.get('parentNode').insertBefore(
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly Y.Node.create('6 <span></span> 36'),
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly fontSizeInput);
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly slider_container = fontSizeInput.previous( "span" );
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly // Create a Slider to contain font size between 6px and 36px, using the
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly // page's current font size as the initial value.
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly // Set up an event subscriber during construction to update the replaced
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly // input field's value and apply the change to the StyleSheet
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly slider = new Y.Slider({
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly length: '100px',
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly value: parseInt(Y.one('body').getStyle('fontSize')) || 13,
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly valueChange: function (e) {
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly var size = e.newVal + 'px';
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly this.thumb.set('title', size);
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly myStyleSheet.set('body', { fontSize: size });
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly }).render( slider_container );
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly // The color inputs are assigned keyup listeners that will update the
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly // StyleSheet if the current input value is a valid CSS color value
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly // The heading input affects all h1s, h2, and h3s
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly Y.on('keyup', function (e) {
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly var color = this.get('value');
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly if (isValidColor(color)) {
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly myStyleSheet.set('h1, h2, h3', { color: color });
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly }, '#heading_color');
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly // The link hover affects the background color of links when they are
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly // hovered. There is no way other than via stylesheet modification to
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly // change pseudo-class styles.
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly Y.on('keyup', function (e) {
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly var color = this.get('value');
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly if (isValidColor(color)) {
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly myStyleSheet.set('a:hover', { backgroundColor: color });
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly }, '#link_hover');
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly // Progressive form enhancement complete, now prevent the form from
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly // submitting normally.
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly Y.one('#theme_form input[type=submit]').remove();
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly Y.on('submit', function (e) {
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly }, '#theme_form');
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly // A rudimentary validator to make sure we're not trying to set
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly // invalid color values in StyleSheet.
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly function isValidColor(v) {
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly return /^#[0-9a-f]{3}(?:[0-9a-f]{3})?$/i.test(v) ||
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly /^rgb\(\s*\d+\s*,\s*\d+\s*,\s*\d+\s*\)$/.test(v) ||
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly /^[a-z]{3,}$/i.test(v);