1<!DOCTYPE html>
2<html>
3<head>
4    <meta charset="utf-8">
5    <meta http-equiv="X-UA-Compatible" content="chrome=1">
6    <title>Css-element-queries test</title>
7    <script src="mootools-core-full-nocompat.js"></script>
8    <script src="mootools-more-yui-compressed.min.js"></script>
9    <script src="../src/ResizeSensor.js"></script>
10    <script src="../src/ElementQueries.js"></script>
11
12    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
13    <!--[if lt IE 9]>
14    <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
15    <![endif]-->
16    <script>
17        'use strict';
18        var ResizerDemo = new Class({
19            y: null,
20            initialize: function(container) {
21                this.container = container;
22                this.setupLayout();
23            },
24
25            setupLayout: function(){
26                this.handler = new Element('div', {
27                    'class': 'resizerDemo-handler'
28                }).inject(this.container);
29
30                this.container.makeResizable({
31                    snap: 0,
32                    handle: this.handler,
33                    modifiers: {
34                        'x': 'width',
35                        'y': this.y
36                    }
37                });
38            }
39        });
40
41        var ResizeDemoXY = new Class({
42            Extends: ResizerDemo,
43            y: 'height'
44        });
45
46        window.addEvent('domready', function(){
47            $$('.examplesResizerDemos').each(function(resizer){
48                new ResizerDemo(resizer);
49            });
50            $$('.examplesResizerDemosXY').each(function(resizer){
51                new ResizeDemoXY(resizer);
52            });
53        });
54    </script>
55    <style type="text/css">
56        .examplesResizerDemos,
57        .examplesResizerDemosXY {
58            background-color: white;
59            width: 550px;
60            margin: 15px;
61            padding: 15px 0;
62            position: relative;
63            border-left: 1px dashed silver;
64            border-bottom: 1px dashed silver;
65        }
66
67        .examplesResizerDemosXY {
68            height: 150px;
69        }
70
71        .resizerDemo-handler {
72            position: absolute;
73            right: 0;
74            top: 0;
75            bottom: 0;
76            width: 5px;
77            padding: 0 1px;
78            background-color: gray;
79            cursor: ew-resize;
80            line-height: 5px;
81            font-size: 14px;
82        }
83
84        .resizerDemo-handler:before {
85            content: '• • •';
86            color: white;
87            width: 5px;
88            position: absolute;
89            top: 50%;
90            margin-top: -15px;
91        }
92
93        .example-1 {
94            max-width: 400px;
95            border: 1px solid silver;
96            background-color: #eee;
97            margin: auto;
98            padding: 50px;
99            text-align: center;
100            min-width: 120px;
101            transition:all .2s ease;
102        }
103
104        .example-1[max-width~="400px"] {
105            padding: 5px;
106        }
107
108        .example-1[max-width~="200px"] {
109            text-align: left;
110            font-size: 12px;
111        }
112
113        .example-2 {
114            border: 1px solid silver;
115            margin: 25px;
116            background-color: #eee;
117        }
118
119        .example-2-first,
120        .example-2-second {
121            background-color: black;
122            color: white;
123            padding: 2px;
124            width: 45%;
125            margin: 5px;
126            float: left;
127        }
128
129        .example-2-second {
130            float: right;
131        }
132
133        .example-2-box {
134            background-color: gray;
135            color: white;
136            margin: 5px;
137            padding: 2px;
138        }
139
140        .example-2[max-width~="300px"] .example-2-first,
141        .example-2[max-width~="300px"] .example-2-second {
142            float: none;
143            background-color: #4186ff;
144            width: auto;
145        }
146
147        .example-2[max-width~="350px"] .example-2-box {
148            background-color: #ba9196;
149        }
150
151        .example-2[max-width~="300px"] .example-2-box {
152            background-color: #ba6377;
153        }
154
155        .example-2[max-width~="200px"] .example-2-box {
156            background-color: #ba4349;
157        }
158
159        .example-2[max-width~="100px"] .example-2-box {
160            background-color: #ba000d;
161        }
162
163        .example-3,
164        .example-4 {
165            border: 1px solid silver;
166            margin: 25px;
167            background-color: #eee;
168        }
169
170        #example-5 {
171            overflow: visible;
172            position: relative;
173            z-index: 150;
174            text-align: center;
175        }
176
177        #example-3-box,
178        #example-4-box {
179            background-color: gray;
180            color: white;
181            margin: auto;
182            width: 50%;
183            padding: 50px;
184        }
185
186        .example-3-box-start,
187        .example-4-box-start {
188            animation-duration: 3s;
189            -moz-animation-duration: 3s;
190            -webkit-animation-duration: 3s;
191            -moz-animation-name: anim;
192            animation-name: anim;
193            -webkit-animation-name: anim;
194            animation-iteration-count: infinite;
195            -webkit-animation-iteration-count: infinite;
196        }
197
198        .example-4-box-start {
199            -moz-animation-name: animHeight;
200            animation-name: animHeight;
201            -webkit-animation-name: animHeight;
202        }
203
204        #example-3-log,
205        #example-4-log {
206            background-color: white;
207            padding: 2px;
208            margin: 5px;
209        }
210
211        @keyframes anim {
212            0% {
213                padding: 50px;
214                width: 50%;
215                background-color: gray;
216            }
217
218            50% {
219                padding: 10px;
220                width: 40%;
221                background-color: #806522;
222            }
223
224            100% {
225                padding: 50px;
226                width: 50%;
227                background-color: gray;
228            }
229        }
230
231        @-webkit-keyframes anim {
232            0% {
233                padding: 50px;
234                width: 50%;
235                background-color: gray;
236            }
237
238            50% {
239                padding: 10px;
240                width: 40%;
241                background-color: #806522;
242            }
243
244            100% {
245                padding: 50px;
246                width: 50%;
247                background-color: gray;
248            }
249        }
250
251        @-moz-keyframes anim {
252            0% {
253                padding: 50px;
254                width: 50%;
255                background-color: gray;
256            }
257
258            50% {
259                padding: 10px;
260                width: 40%;
261                background-color: #806522;
262            }
263
264            100% {
265                padding: 50px;
266                width: 50%;
267                background-color: gray;
268            }
269        }
270
271        @keyframes animHeight {
272            0% {
273                padding: 50px;
274                height: 50%;
275                background-color: gray;
276            }
277
278            50% {
279                padding: 10px;
280                height: 40%;
281                background-color: #806522;
282            }
283
284            100% {
285                padding: 50px;
286                height: 50%;
287                background-color: gray;
288            }
289        }
290
291        @-webkit-keyframes animHeight {
292            0% {
293                padding: 50px;
294                height: 50%;
295                background-color: gray;
296            }
297
298            50% {
299                padding: 10px;
300                height: 40%;
301                background-color: #806522;
302            }
303
304            100% {
305                padding: 50px;
306                height: 50%;
307                background-color: gray;
308            }
309        }
310
311        @-moz-keyframes animHeight {
312            0% {
313                padding: 50px;
314                height: 50%;
315                background-color: gray;
316            }
317
318            50% {
319                padding: 10px;
320                height: 40%;
321                background-color: #806522;
322            }
323
324            100% {
325                padding: 50px;
326                height: 50%;
327                background-color: gray;
328            }
329        }
330
331        .dynamicElement {
332            margin: 50px;
333            width: 50px;
334
335            -moz-animation-name: animHeight;
336            animation-name: animHeight;
337            -webkit-animation-name: animHeight;
338
339            animation-duration: 3s;
340            -moz-animation-duration: 3s;
341            -webkit-animation-duration: 3s;
342            animation-iteration-count: infinite;
343            -webkit-animation-iteration-count: infinite;
344
345            display: inline-block;
346            border: 1px solid #eee;
347            background-color: #f9f9f9;
348        }
349
350        .dynamic {
351            margin: 15px;
352        }
353
354    </style>
355</head>
356<body>
357    Drag the gray line at the right to see it in action.
358    <div class="examples">
359        <div class="examplesResizerDemos">
360            <div class="example-1">
361                <h2>Demo 1</h2>
362                This is content from the first responsive demo without media queries. It uses the element queries provided by this library.
363            </div>
364        </div>
365        <div class="examplesResizerDemos">
366            <div class="example-2">
367                <h2>Demo 2</h2>
368                <div class="example-2-box">
369                    Box
370                </div>
371                <div class="example-2-first">
372                    First 1/2 box
373                </div>
374                <div class="example-2-second">
375                    Second 1/2 box
376                </div>
377                <div class="breaker"></div>
378            </div>
379        </div>
380        <div class="examplesResizerDemos">
381            <div class="example-3">
382                <h2>Demo 3 - width<button id="startStop3">Start/Stop</button></h2>
383                <div id="example-3-box">
384                    This box is animated through css transitions.
385                    We attached a resize-listener to this box. See below.
386                </div>
387                <div id="example-3-log">
388                    No changes.
389                </div>
390            </div>
391        </div>
392        <div class="examplesResizerDemos">
393            <div class="example-4">
394                <h2>Demo 4 - height<button id="startStop4">Start/Stop</button></h2>
395                <div id="example-4-box">
396                    This box is animated through css transitions.
397                    We attached a resize-listener to this box. See below.
398                </div>
399                <div id="example-4-log">
400                    No changes.
401                </div>
402            </div>
403        </div>
404
405        <div style="height: 200px">
406            <div class="examplesResizerDemosXY">
407                <div id="example-5">
408                    0 changes
409                </div>
410            </div>
411        </div>
412        <script>
413            'use strict';
414            (function(){
415                var logger = document.id('example-3-log');
416                var box = document.id('example-3-box');
417                document.id('startStop3').addEvent('click', function(){
418                    if (box.hasClass('example-3-box-start')) {
419                        box.removeClass('example-3-box-start');
420                    } else {
421                        box.addClass('example-3-box-start');
422                    }
423                });
424                new ResizeSensor(box, function(el){
425                    logger.set('html', 'Changed to ' + box.getSize().x+'px width.');
426                });
427            })();
428        </script>
429        <script>
430            'use strict';
431            (function(){
432                var logger = document.id('example-4-log');
433                var box = document.id('example-4-box');
434                document.id('startStop4').addEvent('click', function(){
435                    if (box.hasClass('example-4-box-start')) {
436                        box.removeClass('example-4-box-start');
437                    } else {
438                        box.addClass('example-4-box-start');
439                    }
440                });
441                new ResizeSensor(box, function(){
442                    logger.set('html', 'Changed to ' + box.getSize().y+'px height.');
443                });
444            })();
445        </script>
446        <script>
447            'use strict';
448            (function(){
449                var box = document.id('example-5');
450                var changed = 0;
451                new ResizeSensor(box.getParent(), function(){
452                    box.innerHTML = (++changed) + ' changes. ' + box.getParent().getSize().x+'px/'+box.getParent().getSize().y+'px';
453                });
454            })();
455        </script>
456        <div class="dynamic">
457            <input type="text" value="10" id="dynamicCount" />
458            <button onclick="addDynamic()">Add</button>
459            <button onclick="detachDynamic()">Detach</button>
460            <button onclick="removeDynamic()">Remove</button>
461            <div id="dynamicCounter"></div>
462            <div id="dynamicContainer"></div>
463        </div>
464        <script>
465            'use strict';
466            var container = $('dynamicContainer');
467            var dynamicCount = $('dynamicCount');
468            var dynamicCounter = $('dynamicCounter');
469
470            window.detachDynamic = function() {
471                container.getChildren().each(function(element) {
472                    ResizeSensor.detach(element);
473                });
474            };
475
476            window.removeDynamic = function() {
477                container.empty();
478            };
479
480            window.addDynamic = function() {
481                container.empty();
482                var i = 0, to = dynamicCount.value, div, counter = 0;
483                for (; i < to; i++) {
484                    div = new Element('div', {
485                        'class': 'dynamicElement',
486                        text: '#' + i
487                    }).inject(container);
488
489                    new ResizeSensor(div, function(){
490                        counter++;
491                        dynamicCounter.set('text', counter + ' changes.');
492                    });
493                }
494            }
495        </script>
496    </div>
497</body>
498