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, 0 insertions, 530 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 deleted file mode 100644 index a16c2da..0000000 --- a/apps/it/static/js/ui/tests/visual/effects/all.html +++ /dev/null @@ -1,217 +0,0 @@ -<!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 deleted file mode 100644 index 8e9ee0f..0000000 --- a/apps/it/static/js/ui/tests/visual/effects/effects.css +++ /dev/null @@ -1,49 +0,0 @@ -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 deleted file mode 100644 index 624e0b1..0000000 --- a/apps/it/static/js/ui/tests/visual/effects/effects.js +++ /dev/null @@ -1,107 +0,0 @@ -$(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 deleted file mode 100644 index 223f5ae..0000000 --- a/apps/it/static/js/ui/tests/visual/effects/scale.html +++ /dev/null @@ -1,157 +0,0 @@ -<!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> |