← Back to branch summary

~smagoun/whoopsie/whoopsie-lp1017637

« back to all changes in this revision

Viewing changes to backend/stats/static/js/yui/tests/overlay/tests/manual/overlay.html

  • Committer: Evan Dandrea
  • Date: 2012-05-09 05:53:45 UTC
  • Revision ID: evan.dandrea@canonical.com-20120509055345-z2j41tmcbf4as5uf
The backend now lives in lp:daisy and the website (errors.ubuntu.com) now lives in lp:errors.

Show diffs side-by-side

added added

removed removed

Lines of Context:
backend/stats/static/js/yui/tests/overlay/tests/manual/overlay.html
1
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
2
 
<html>
3
 
<head>
4
 
    <title>Widget Class</title>
5
 
 
6
 
    <link rel="stylesheet" type="text/css" href="../../../../build/cssreset/reset.css" />
7
 
    <link rel="stylesheet" type="text/css" href="../../../../build/cssfonts/fonts.css" />
8
 
 
9
 
    <script type="text/javascript" src="../../../../build/yui/yui.js"></script>
10
 
 
11
 
    <style>
12
 
        body {
13
 
            padding:0;
14
 
            margin:0;
15
 
        }
16
 
 
17
 
        .hideme {
18
 
            width:30em;
19
 
            display:block;
20
 
        }
21
 
 
22
 
        .yui3-overlay {
23
 
            background-color:#0000ff;
24
 
        }
25
 
 
26
 
        .yui3-overlay .yui3-overlay-content {
27
 
            border:5px solid #000000;
28
 
            padding:0.4em;
29
 
            background-color:#eee;
30
 
        }
31
 
 
32
 
        .yui3-overlay .yui3-widget-stdmod span {
33
 
            background-color:#000;
34
 
            color:#fff;
35
 
        }
36
 
 
37
 
        .yui3-overlay .yui3-widget-stdmod .yui3-widget-hd {
38
 
            border:2px solid red;
39
 
            background-color:#cc0000;
40
 
            color:#fff;
41
 
            padding:2px;
42
 
        }
43
 
 
44
 
        .yui3-overlay .yui3-widget-stdmod .yui3-widget-bd {
45
 
            font-family:monospace;
46
 
            border:2px solid blue;
47
 
            padding:2px;
48
 
        }
49
 
 
50
 
        .yui3-overlay .yui3-widget-stdmod .yui3-widget-ft {
51
 
            border:2px solid green;
52
 
            background-color:#00cc00;
53
 
            color:#fff;
54
 
            padding:2px;
55
 
        }
56
 
 
57
 
        .sels {
58
 
            position:absolute;
59
 
        }
60
 
 
61
 
        #fromMarkup {
62
 
            z-index:10;
63
 
        }
64
 
 
65
 
        #align {
66
 
            opacity:.5;
67
 
            filter:alpha(opacity=50);
68
 
            position:relative;
69
 
            z-index:6;
70
 
            top:20px;
71
 
            left:400px;
72
 
            width:300px;
73
 
            height:250px;
74
 
            border:1px solid black;
75
 
            background-color:#cc0000;
76
 
        }
77
 
    </style>
78
 
</head>
79
 
<body class="yui3-skin-sam">
80
 
 
81
 
    <div class="sels">
82
 
       <button id="control-run" type="button">run</button>    
83
 
       <button id="control-show" type="button">show</button>
84
 
       <button id="control-hide" type="button">hide</button>
85
 
 
86
 
        <div style="overflow:auto;width:20em;height:5em">
87
 
            <div style="height:200em"></div>
88
 
        </div>
89
 
 
90
 
        <select class="hideme"><option>Foo</option></select>
91
 
        <select class="hideme"><option>Foo</option></select>
92
 
        <select class="hideme"><option>Foo</option></select>
93
 
        <select class="hideme"><option>Foo</option></select>
94
 
        <select class="hideme"><option>Foo</option></select>
95
 
        <select class="hideme"><option>Foo</option></select>
96
 
        <select class="hideme"><option>Foo</option></select>
97
 
        <select class="hideme"><option>Foo</option></select>
98
 
        <select class="hideme"><option>Foo</option></select>
99
 
        <select class="hideme"><option>Foo</option></select>
100
 
        <select class="hideme"><option>Foo</option></select>
101
 
        <select class="hideme"><option>Foo</option></select>
102
 
        <select class="hideme"><option>Foo</option></select>
103
 
        <select class="hideme"><option>Foo</option></select>
104
 
        <select class="hideme"><option>Foo</option></select>
105
 
        <select class="hideme"><option>Foo</option></select>
106
 
        <select class="hideme"><option>Foo</option></select>
107
 
        <select class="hideme"><option>Foo</option></select>
108
 
    </div>
109
 
 
110
 
    <div id="align">
111
 
        Align Here
112
 
    </div>
113
 
 
114
 
    <div class="foo" id="foobar"></div>
115
 
 
116
 
    <div id="fromMarkup">
117
 
        <div class="yui3-widget-hd">
118
 
            <span>Header From Markup</span>
119
 
        </div>
120
 
        <div class="yui3-widget-bd">
121
 
            <span>Body From Markup</span>
122
 
        </div>
123
 
        <div id="fourth" class="yui3-widget-ft">
124
 
            <span>Footer From Markup</span>
125
 
        </div>
126
 
    </div>
127
 
 
128
 
    <script type="text/javascript">
129
 
        var widget, widget2;
130
 
 
131
 
        YUI({filter:"raw"}).use("async-queue", "overlay", function(Y) {
132
 
 
133
 
                widget = new Y.Overlay({ 
134
 
                    width:"12em",
135
 
                    align:{node:'#align', points:["tr", "tl"]}, 
136
 
                    zIndex:5,
137
 
                    headerContent:"Overlay Header",
138
 
                    bodyContent:"width:12em, #align, tr, tl, zIndex:5",
139
 
                    footerContent:"Overlay Footer",
140
 
                    render: "#foobar"
141
 
                });
142
 
 
143
 
                widget.after("xyChange", function(e) {
144
 
                    Y.log(e.newVal);
145
 
                });
146
 
 
147
 
                widget.after("contentUpdate", function() {
148
 
                    Y.log("Content Updated");
149
 
                });
150
 
 
151
 
                widget2 = new Y.Overlay({
152
 
                    contentBox: "#fromMarkup",
153
 
                    width:200,
154
 
                    height:200,
155
 
                    xy: [800,200],
156
 
                    footerContent: "Footer Content - was in markup, but got over-ridden in constructor",
157
 
                    render:true
158
 
                });
159
 
 
160
 
                var stepDelay = 2000;
161
 
 
162
 
                var fns = [
163
 
                    function() {
164
 
                        widget.set("height", "20em");
165
 
                    },
166
 
                    function() {
167
 
                        widget.set("bodyContent", "Height changed to 20em in previous step");
168
 
                    },
169
 
                    function() {
170
 
                        widget.move(0,0);
171
 
                        widget.set("bodyContent", "move(0,0)");
172
 
                    },
173
 
                    function() {
174
 
                        widget.set("height", "12em");
175
 
                        widget.set("bodyContent", "height, 12em");
176
 
                    },
177
 
                    function() {
178
 
                        widget.set("align", {node:"#align", points:["lc", "rc"]});
179
 
                        widget.set("bodyContent", "#align, lc, rc");
180
 
                    },
181
 
                    function() {
182
 
                        widget.set("centered", "#align");
183
 
                        widget.set("bodyContent", "#align, centered");
184
 
                    },
185
 
                    function() {
186
 
                        widget.set("zIndex", 7);
187
 
                        widget.set("bodyContent", "zIndex, 7");
188
 
                    },
189
 
                    function() {
190
 
                        widget.set("align", {points:["rc", "rc"]});
191
 
                        widget.set("bodyContent", "viewport, rc, rc");
192
 
                    },
193
 
                    function() {
194
 
                        widget.set("centered", true);
195
 
                        widget.set("bodyContent", "viewport, centered");
196
 
                    },
197
 
                    function() {
198
 
                        widget.move(0, 0);
199
 
                        widget.set("bodyContent", "move(0,0)");
200
 
                    },
201
 
                    function() {
202
 
                        widget.set("width", "20em");
203
 
                        widget.set("bodyContent", "width, 20em");
204
 
                    },
205
 
                    function() {
206
 
                        widget.set("fillHeight", "header");
207
 
                        widget.set("bodyContent", "fillHeight, header");
208
 
                    },
209
 
                    function() {
210
 
                        widget.set("fillHeight", "footer");
211
 
                        widget.set("bodyContent", "fillHeight, footer");
212
 
                    },
213
 
                    function() {
214
 
                        widget.set("fillHeight", null);
215
 
                        widget.set("bodyContent", "fillHeight, false");
216
 
                    },
217
 
                    function() {
218
 
                        widget.set("fillHeight", "body");
219
 
                        widget.set("bodyContent", "fillHeight, body");
220
 
                    },
221
 
                    function() {
222
 
                        widget.set("shim", false);
223
 
                        widget.set("bodyContent", "shim, false");
224
 
                    },
225
 
                    function() {
226
 
                        widget.set("shim", true);
227
 
                        widget.set("bodyContent", "shim, true");
228
 
                    },
229
 
                    function() {
230
 
                        widget.hide();
231
 
                    },
232
 
                    function() {
233
 
                        widget.show();
234
 
                        widget.set("bodyContent", "hide, followed by show");
235
 
                    },
236
 
                    function() {
237
 
                        widget.setStdModContent(Y.WidgetStdMod.FOOTER, null);
238
 
                    },
239
 
                    function() {
240
 
                        widget.setStdModContent(Y.WidgetStdMod.HEADER, Y.Node.create("<p>Insert Before Header Content</p>"), Y.WidgetStdMod.BEFORE);
241
 
                        widget.setStdModContent(Y.WidgetStdMod.FOOTER, Y.Node.create("<p>Append After Footer Content</p>"), Y.WidgetStdMod.AFTER);
242
 
                        widget.setStdModContent(Y.WidgetStdMod.BODY, "Replaced Body - DONE!", Y.WidgetStdMod.REPLACE);
243
 
                    },
244
 
                    function() {
245
 
                        widget.destroy();
246
 
                    }
247
 
                ];
248
 
 
249
 
                var q = new Y.AsyncQueue();
250
 
                for (var i = 0; i < fns.length; i++){
251
 
                    q.add({
252
 
                        timeout:stepDelay,
253
 
                        fn:fns[i]
254
 
                    });
255
 
                }
256
 
                // q.run();
257
 
 
258
 
                Y.on('click', Y.bind(widget.show, widget), Y.Node.one('#control-show'));
259
 
                Y.on('click', Y.bind(widget.hide, widget), Y.Node.one('#control-hide'));
260
 
                Y.on('click', Y.bind(q.run, q), Y.Node.one('#control-run'));
261
 
 
262
 
            });
263
 
    </script>
264
 
</body>
265
 
</html>