Tests/Fx/Fx.html

   1 <!DOCTYPE html>
   2 <html>
   3         <head>
   4                 <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
   5
   6                 <title>Fx Tests</title>
   7
   8                 <script src="../../../Source/Core/Core.js" type="text/javascript"></script>
   9                 <script src="../../../Source/Types/Array.js" type="text/javascript"></script>
  10                 <script src="../../../Source/Types/Function.js" type="text/javascript"></script>
  11                 <script src="../../../Source/Types/Number.js" type="text/javascript"></script>
  12                 <script src="../../../Source/Types/String.js" type="text/javascript"></script>
  13                 <script src="../../../Source/Types/Object.js" type="text/javascript"></script>
  14                 <script src="../../../Source/Types/DOMEvent.js" type="text/javascript"></script>
  15                 <script src="../../../Source/Browser/Browser.js" type="text/javascript"></script>
  16                 <script src="../../../Source/Slick/Slick.Parser.js" type="text/javascript"></script>
  17                 <script src="../../../Source/Slick/Slick.Finder.js" type="text/javascript"></script>
  18                 <script src="../../../Source/Element/Element.js" type="text/javascript"></script>
  19                 <script src="../../../Source/Element/Element.Event.js" type="text/javascript"></script>
  20                 <script src="../../../Source/Element/Element.Style.js" type="text/javascript"></script>
  21                 <script src="../../../Source/Class/Class.js" type="text/javascript"></script>
  22                 <script src="../../../Source/Class/Class.Extras.js" type="text/javascript"></script>
  23                 <script src="../../../Source/Fx/Fx.js" type="text/javascript"></script>
  24                 <script src="../../../Source/Fx/Fx.CSS.js" type="text/javascript"></script>
  25                 <script src="../../../Source/Fx/Fx.Tween.js" type="text/javascript"></script>
  26                 <script src="../../../Source/Fx/Fx.Morph.js" type="text/javascript"></script>
  27
  28                 <style>
  29
  30                         body {
  31                                 font: 13px sans-serif;
  32                         }
  33
  34                         h1 {
  35                                 border-top: 1px dashed #AAA;
  36                                 font: normal 22px sans-serif;
  37                                 margin: 5px 0;
  38                                 padding-top: 10px;
  39                         }
  40
  41                         #content {
  42                                 top: 0;
  43                                 bottom: 0;
  44                                 left: 370px;
  45                                 position: absolute;
  46                                 overflow: auto;
  47                                 padding-bottom: 150px;
  48                                 right: 0;
  49                         }
  50
  51                         #aside {
  52                                 background: #F5F5F5;
  53                                 border-right: 1px dashed #AAA;
  54                                 bottom: 0;
  55                                 font-family: monospace;
  56                                 left: 0;
  57                                 margin-right: 10px;
  58                                 overflow: auto;
  59                                 padding: 10px;
  60                                 position: absolute;
  61                                 top: 0;
  62                                 width: 340px;
  63                         }
  64
  65                         .success {
  66                                 background: greenyellow;
  67                         }
  68
  69                         .fail {
  70                                 background: orangered;
  71                         }
  72
  73                         .box {
  74                                 background: greenyellow;
  75                                 border: 1px solid black;
  76                                 padding: 10px;
  77                                 width: 300px;
  78                         }
  79
  80                         .wrapper {
  81                                 width: 500px;
  82                                 height: 300px;
  83                                 background: #eee;
  84                         }
  85
  86                 </style>
  87
  88         </head>
  89         <body>
  90
  91                 <div id="aside">
  92                         <h2>Log</h2>
  93                         <div id="log"></div>
  94                 </div>
  95
  96                 <script>
  97
  98                         var logger = $('log');
  99                         var log = function(msg, success){
 100                                 new Element('div', {
 101                                         'class': success == true ? 'success' : (success == false ? 'fail' : ''),
 102                                         text: msg
 103                                 }).inject(logger, 'top');
 104                         };
 105
 106                 </script>
 107
 108                 <div id="content">
 109
 110                         <h1>Fx.Tween</h1>
 111
 112                         <p>
 113                                 <a href="#" id="simple-fx-tween-link">tween</a>
 114                         </p>
 115
 116                         <div id="simple-fx-tween" class="box"></div>
 117
 118                         <script>
 119
 120                                 var simpleFxTween = new Fx.Tween('simple-fx-tween', {
 121                                         property: 'width',
 122                                         link: 'cancel'
 123                                 });
 124                                 var simpleFxTweenToggle = true;
 125
 126                                 $('simple-fx-tween-link').addEvent('click', function(event){
 127                                         event.preventDefault();
 128                                         simpleFxTween.start(simpleFxTweenToggle ? 500 : 200);
 129                                         simpleFxTweenToggle = !simpleFxTweenToggle;
 130                                 });
 131
 132                         </script>
 133
 134
 135                         <h1>Fx.Morph</h1>
 136
 137                         <p>
 138                                 <a href="#" id="simple-fx-morph-link">morph</a>
 139                         </p>
 140
 141                         <div id="simple-fx-morph" class="box"></div>
 142
 143                         <script>
 144
 145                                 var simpleFxMorph = new Fx.Morph('simple-fx-morph');
 146                                 var simpleFxMorphToggle = true;
 147
 148                                 $('simple-fx-morph-link').addEvent('click', function(event){
 149                                         event.preventDefault();
 150                                         simpleFxMorph.start(simpleFxMorphToggle ? {
 151                                                 width: 500,
 152                                                 height: 300
 153                                         } : {
 154                                                 width: [400, 300],
 155                                                 height: [250, '50px']
 156                                         });
 157                                         simpleFxMorphToggle = !simpleFxMorphToggle;
 158                                 });
 159
 160                         </script>
 161
 162                         <h1>Element.morph</h1>
 163
 164                         <p>
 165                                 <a href="#" id="fx-sun">start</a>
 166                         </p>
 167
 168                         <div id="sun" class="box"></div>
 169
 170                         <style>
 171                         #sun {
 172                                 width: 100px;
 173                                 height: 100px;
 174                         }
 175                         </style>
 176
 177                         <script>
 178                                 var sun = document.id('sun').set("morph", {
 179                                         duration: 2000
 180                                 });
 181                                 var sunToggle = true;
 182                                 $('fx-sun').addEvent('click', function(event){
 183                                         event.preventDefault();
 184                                         sun.morph(sunToggle ? {
 185                                                 width: '300px'
 186                                         } : {
 187                                                 width: '200px'
 188                                         });
 189                                         sunToggle = !sunToggle;
 190                                 });
 191                         </script>
 192
 193                         <h1>Fx.Morph with % as unit</h1>
 194
 195                         <p>
 196                                 <a href="#" id="units-fx-morph-link">morph</a>
 197                         </p>
 198
 199                         <div class="wrapper">
 200                                 <div id="units-fx-morph" class="box"></div>
 201                         </div>
 202
 203                         <script>
 204
 205                                 var unitsFxMorph = new Fx.Morph('units-fx-morph', {
 206                                         unit: '%'
 207                                 });
 208                                 var unitsFxMorphToggle = true;
 209
 210                                 $('units-fx-morph-link').addEvent('click', function(event){
 211                                         event.preventDefault();
 212                                         unitsFxMorph.start(unitsFxMorphToggle ? {
 213                                                 width: 50,
 214                                                 height: 50,
 215                                                 'margin-left': 6
 216                                         } : {
 217                                                 width: 30,
 218                                                 height: 20,
 219                                                 'margin-left': 0
 220                                         });
 221                                         unitsFxMorphToggle = !unitsFxMorphToggle;
 222                                 });
 223
 224                         </script>
 225
 226                         <h1>.fade</h1>
 227
 228                         <p>
 229                                 <a href="#" id="fade-link">fade</a><br>
 230                                 <span id="fade-opacity"></span>
 231                         </p>
 232
 233                         <div class="wrapper">
 234                                 <div id="fade" class="box"></div>
 235                                 <h1 id="fade2" class="box">test</h1>
 236                         </div>
 237
 238                         <script>
 239                         var fadeToggle = 1;
 240                         var fade = $('fade').set('tween', {
 241                                 onStart: function(){
 242                                         $('fade-opacity').set('text', fade.getStyle('opacity'))
 243                                                 .appendText(' ' + fade.getStyle('visibility'));
 244                                 },
 245                                 onComplete: function(){
 246                                         $('fade-opacity').set('text', fade.getStyle('opacity'))
 247                                                 .appendText(' ' + fade.getStyle('visibility'));
 248                                 }
 249                         });
 250                         fade.fade('hide');
 251                         var fade2 = $('fade2');
 252                         $('fade-link').addEvent('click', function(event){
 253                                 event.preventDefault();
 254                                 var to = fadeToggle++ % 5 / 4;
 255                                 fade.fade(to == 1 ? 'in' : (to == 0 ? 'out' : to));
 256                                 fade2.fade('hide');
 257                                 fade2.fade('in');
 258                         });
 259                         </script>
 260
 261                 </div>
 262
 263         </body>
 264 </html>