Home | History | Annotate | Download | only in test 
      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