diff options
Diffstat (limited to 'apps/it/static/js/ui/tests/visual/effects')
| -rw-r--r-- | apps/it/static/js/ui/tests/visual/effects/all.html | 217 | ||||
| -rw-r--r-- | apps/it/static/js/ui/tests/visual/effects/effects.css | 49 | ||||
| -rw-r--r-- | apps/it/static/js/ui/tests/visual/effects/effects.js | 107 | ||||
| -rw-r--r-- | apps/it/static/js/ui/tests/visual/effects/scale.html | 157 |
4 files changed, 530 insertions, 0 deletions
diff --git a/apps/it/static/js/ui/tests/visual/effects/all.html b/apps/it/static/js/ui/tests/visual/effects/all.html new file mode 100644 index 0000000..a16c2da --- /dev/null +++ b/apps/it/static/js/ui/tests/visual/effects/all.html @@ -0,0 +1,217 @@ +<!doctype html> +<html lang="en"> +<head> + <meta charset="utf-8"> + <title>jQuery UI Effects Test Suite</title> + <link rel="stylesheet" href="effects.css"> + <script src="../../../jquery-1.10.2.js"></script> + <script src="../../../ui/jquery.ui.effect.js"></script> + <script src="../../../ui/jquery.ui.effect-blind.js"></script> + <script src="../../../ui/jquery.ui.effect-bounce.js"></script> + <script src="../../../ui/jquery.ui.effect-clip.js"></script> + <script src="../../../ui/jquery.ui.effect-drop.js"></script> + <script src="../../../ui/jquery.ui.effect-explode.js"></script> + <script src="../../../ui/jquery.ui.effect-fade.js"></script> + <script src="../../../ui/jquery.ui.effect-fold.js"></script> + <script src="../../../ui/jquery.ui.effect-highlight.js"></script> + <script src="../../../ui/jquery.ui.effect-pulsate.js"></script> + <script src="../../../ui/jquery.ui.effect-scale.js"></script> + <script src="../../../ui/jquery.ui.effect-shake.js"></script> + <script src="../../../ui/jquery.ui.effect-slide.js"></script> + <script src="../../../ui/jquery.ui.effect-transfer.js"></script> + <script src="effects.js"></script> +</head> +<body> + +<ul class="effects"> + + <li> + <div class="effect" id="blindUp"> + <p>Blind up</p> + </div> + </li> + + <li> + <div class="effect" id="blindDown"> + <p>Blind down</p> + </div> + </li> + + <li> + <div class="effect" id="blindLeft"> + <p>Blind left</p> + </div> + </li> + + <li> + <div class="effect" id="blindRight"> + <p>Blind right</p> + </div> + </li> + + <li> + <div class="effect" id="bounce3times"> + <p>Bounce 3 times</p> + </div> + </li> + + <li> + <div class="effect" id="clipHorizontally"> + <p>Clip horizontally</p> + </div> + </li> + + <li> + <div class="effect" id="clipVertically"> + <p>Clip vertically</p> + </div> + </li> + + <li> + <div class="effect" id="dropDown"> + <p>Drop down</p> + </div> + </li> + + <li> + <div class="effect" id="dropUp"> + <p>Drop up</p> + </div> + </li> + + <li> + <div class="effect" id="dropLeft"> + <p>Drop left</p> + </div> + </li> + + <li> + <div class="effect" id="dropRight"> + <p>Drop right</p> + </div> + </li> + + <li> + <div class="effect" id="explode9"> + <p>Explode in 9 pieces</p> + </div> + </li> + + <li> + <div class="effect" id="explode36"> + <p>Explode in 36 pieces</p> + </div> + </li> + + <li> + <div class="effect" id="fade"> + <p>Fade</p> + </div> + </li> + + <li> + <div class="effect" id="fold"> + <p>Fold</p> + </div> + </li> + + <li> + <div class="effect" id="highlight"> + <p>Highlight</p> + </div> + </li> + + <li> + <div class="effect" id="pulsate"> + <p>Pulsate 2 times</p> + </div> + </li> + + <li> + <div class="effect" id="puff"> + <p>Puff</p> + </div> + </li> + + <li> + <div class="effect" id="scale"> + <p>Scale</p> + </div> + </li> + + <li> + <div class="effect" id="shake"> + <p>Shake</p> + </div> + </li> + + <li> + <div class="effect" id="size"> + <p>Size Default Show/Hide</p> + </div> + </li> + + <li> + <div class="effect" id="sizeToggle"> + <p>Size Toggle</p> + </div> + </li> + + <li> + <div class="effect" id="slideDown"> + <p>Slide down</p> + </div> + </li> + + <li> + <div class="effect" id="slideUp"> + <p>Slide up</p> + </div> + </li> + + <li> + <div class="effect" id="slideLeft"> + <p>Slide left</p> + </div> + </li> + + <li> + <div class="effect" id="slideRight"> + <p>Slide right</p> + </div> + </li> + + <li> + <div class="effect" id="transfer"> + <p>Transfer to first element</p> + </div> + </li> + + <li> + <div class="effect" id="addClass"> + <p>addClass</p> + </div> + </li> + + <li> + <div class="effect" id="removeClass"> + <p>removeClass</p> + </div> + </li> + + <li> + <div class="effect" id="toggleClass"> + <p>toggleClass</p> + </div> + </li> + + <li> + <div class="effect" id="hide"> + <p>hide/show (jQuery)</p> + </div> + </li> + +</ul> + +</body> +</html> diff --git a/apps/it/static/js/ui/tests/visual/effects/effects.css b/apps/it/static/js/ui/tests/visual/effects/effects.css new file mode 100644 index 0000000..8e9ee0f --- /dev/null +++ b/apps/it/static/js/ui/tests/visual/effects/effects.css @@ -0,0 +1,49 @@ +body { + margin: 1em; + padding: 0; + background: #fff; + color: #000; +} + +ul.effects { + list-style-type: none; + margin: 0; + padding: 0; +} + +ul.effects li { + padding: 0; + width: 120px; + height: 100px; + float: left; + margin-top: 20px; + margin-left: 20px; +} + +div.effect { + width: 120px; + height: 100px; + background: #ccc; + border: 5px outset #aaa; + float: left; + cursor: pointer; + cursor: hand; +} + +div.current { + border: 5px outset #FF9C08; + background: #FF9C08; +} + +div.effect p { + color: #191919; + font-weight: bold; + margin: 0; + padding: 10px; +} + +.ui-effects-transfer { + border: 1px dotted #fff; + background: #666; + opacity: 0.5; +} diff --git a/apps/it/static/js/ui/tests/visual/effects/effects.js b/apps/it/static/js/ui/tests/visual/effects/effects.js new file mode 100644 index 0000000..624e0b1 --- /dev/null +++ b/apps/it/static/js/ui/tests/visual/effects/effects.js @@ -0,0 +1,107 @@ +$(function() { + +var duration = 1000, + wait = 500; + +function effect( elem, name, options ) { + $.extend( options, { + easing: "easeOutQuint" + }); + + $( elem ).click(function() { + $( this ) + .addClass( "current" ) + // delaying the initial animation makes sure that the queue stays in tact + .delay( 10 ) + .hide( name, options, duration ) + .delay( wait ) + .show( name, options, duration, function() { + $( this ).removeClass( "current" ); + }); + }); +} + +$( "#hide" ).click(function() { + $( this ) + .addClass( "current" ) + .hide( duration ) + .delay( wait ) + .show( duration, function() { + $( this ).removeClass( "current" ); + }); +}); + +effect( "#blindLeft", "blind", { direction: "left" } ); +effect( "#blindUp", "blind", { direction: "up" } ); +effect( "#blindRight", "blind", { direction: "right" } ); +effect( "#blindDown", "blind", { direction: "down" } ); + +effect( "#bounce3times", "bounce", { times: 3 } ); + +effect( "#clipHorizontally", "clip", { direction: "horizontal" } ); +effect( "#clipVertically", "clip", { direction: "vertical" } ); + +effect( "#dropDown", "drop", { direction: "down" } ); +effect( "#dropUp", "drop", { direction: "up" } ); +effect( "#dropLeft", "drop", { direction: "left" } ); +effect( "#dropRight", "drop", { direction: "right" } ); + +effect( "#explode9", "explode", {} ); +effect( "#explode36", "explode", { pieces: 36 } ); + +effect( "#fade", "fade", {} ); + +effect( "#fold", "fold", { size: 50 } ); + +effect( "#highlight", "highlight", {} ); + +effect( "#pulsate", "pulsate", { times: 2 } ); + +effect( "#puff", "puff", { times: 2 } ); +effect( "#scale", "scale", {} ); +effect( "#size", "size", {} ); +$( "#sizeToggle" ).click(function() { + var options = { to: { width: 300, height: 300 } }; + $( this ) + .addClass( "current" ) + .toggle( "size", options, duration ) + .delay( wait ) + .toggle( "size", options, duration, function() { + $( this ).removeClass( "current" ); + }); +}); + +$( "#shake" ).click(function() { + $( this ) + .addClass( "current" ) + .effect( "shake", {}, 100, function() { + $( this ).removeClass( "current" ); + }); +}); + +effect( "#slideDown", "slide", { direction: "down" } ); +effect( "#slideUp", "slide", { direction: "up" } ); +effect( "#slideLeft", "slide", { direction: "left" } ); +effect( "#slideRight", "slide", { direction: "right" } ); + +$( "#transfer" ).click(function() { + $( this ) + .addClass( "current" ) + .effect( "transfer", { to: "div:eq(0)" }, 1000, function() { + $( this ).removeClass( "current" ); + }); +}); + +$( "#addClass" ).click(function() { + $( this ).addClass( "current", duration, function() { + $( this ).removeClass( "current" ); + }); +}); +$( "#removeClass" ).click(function() { + $( this ).addClass( "current" ).removeClass( "current", duration ); +}); +$( "#toggleClass" ).click(function() { + $( this ).toggleClass( "current", duration ); +}); + +}); diff --git a/apps/it/static/js/ui/tests/visual/effects/scale.html b/apps/it/static/js/ui/tests/visual/effects/scale.html new file mode 100644 index 0000000..223f5ae --- /dev/null +++ b/apps/it/static/js/ui/tests/visual/effects/scale.html @@ -0,0 +1,157 @@ +<!doctype html> +<html lang="en"> +<head> + <meta charset="utf-8"> + <title>jQuery UI Effects Test Suite</title> + <link rel="stylesheet" href="effects.css"> + <script src="../../../jquery-1.10.2.js"></script> + <script src="../../../ui/jquery.ui.effect.js"></script> + <script src="../../../ui/jquery.ui.effect-scale.js"></script> + <script> + $(function() { + var test = $( "#testBox" ), + opts = $( ".arg" ), + optsRev = $( opts.get().reverse() ), + doer = $( "#doAnim" ), + current = $( "#current" ), + cleanStyle = test[0].style, + total = 1; + + opts.each(function() { + total *= this.options.length; + }); + + opts.change( doAnim ); + doer.click( doAnim ); + $( "#cyclePrev" ).click(function() { + cycle( -1 ); + }); + $( "#cycleNext" ).click(function() { + cycle( 1 ); + }); + + function cycle( direction ) { + optsRev.each(function() { + var cur = this.selectedIndex, + next = cur + direction, + len = this.options.length; + + this.selectedIndex = ( next + len ) % len; + + if ( ( next+len ) % len === next ) return false; + }); + doAnim(); + } + + + function doAnim() { + var cur = 0; + opts.each(function() { + cur *= this.options.length + cur += this.selectedIndex; + }); + cur++; + current.text( "Configuration: " + cur + " of " + total ); + run.apply(test, opts.map(function() { + return $(this).val(); + }).get()); + } + + function run( position, v, h, vo, ho ) { + var el = this, + style = el[0].style, + effect = { + effect: "scale", + mode: "effect", + percent: 200, + origin: [ vo, ho ], + duration: 500 + }; + el.stop(true, true); + if ( typeof style === "object" ) { + style.cssText = ""; + } else { + el[0].style = ""; + } + el.css( "position", position ) + .css( h, 5 ) + .css( v, 5 ) + .delay( 100 ) + .effect( effect ); + } + }); + </script> + <style> + #testArea { + width: 200px; + height: 200px; + position: relative; + } + #testBox { + width: 50px; + height: 50px; + background-color: #bada55; + color: black; + border: 10px solid #fff; + margin: 10px; + padding: 10px; + } + label { + display: block; + } + #controls { + position: absolute; + z-index: 300; + left: 50%; + top: 50%; + margin-left: -200px; + width: 400px; + opacity: 0.8; + } + </style> +</head> +<body> + <div id="testArea"> + <div id="testBox"> + </div> + </div> + <div id="controls"> + <label for="pos">Positioning + <select id="pos" class="arg"> + <option value="absolute">absolute</option> + <option value="relative">relative</option> + <option value="fixed">fixed</option> + </select> + </label> + <label for="vertPos">Vertical Positioning + <select id="vertPos" class="arg"> + <option value="top">top</option> + <option value="bottom">bottom</option> + </select> + </label> + <label for="horizPos">Horizontal Positioning + <select id="horizPos" class="arg"> + <option value="left">left</option> + <option value="right">right</option> + </select> + </label> + <label for="vertOrigin">Vertical Origin + <select id="vertOrigin" class="arg"> + <option value="top">top</option> + <option value="middle">middle</option> + <option value="bottom">bottom</option> + </select> + </label> + <label for="horizOrigin">Horizontal Origin + <select id="horizOrigin" class="arg"> + <option value="left">left</option> + <option value="center">center</option> + <option value="right">right</option> + </select> + </label><br /> + <label id="current">jQuery UI Scale Animation Test</label> + <button id="cyclePrev">Back</button> + <button id="doAnim">Run Animation</button> + <button id="cycleNext">Forward</button> + </div> +</body> |