← Back to branch summary

~ubuntu-branches/ubuntu/precise/whoopsie-daisy/precise-proposed

« back to all changes in this revision

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

  • Committer: Package Import Robot
  • Author(s): Evan Dandrea
  • Date: 2012-04-18 13:04:36 UTC
  • Revision ID: package-import@ubuntu.com-20120418130436-vmt93p8fds516lws
Tags: 0.1.32
Fix failing tests on powerpc and ARM.

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>