summaryrefslogtreecommitdiffstats
path: root/apps/it/static/js/ui/tests/visual/effects
diff options
context:
space:
mode:
authorFilipp Lepalaan <f@230.to>2014-02-19 18:02:09 +0200
committerFilipp Lepalaan <f@230.to>2014-02-19 18:02:09 +0200
commit75ad7e4bd7d69243e7e5281c2642f00478fb072d (patch)
treeeaaaf360902d369f42d94778aac8803db7973ce0 /apps/it/static/js/ui/tests/visual/effects
parentcfc7c3f52544af8a71d3fa3988a06fee200d2c24 (diff)
downloadpudding-75ad7e4bd7d69243e7e5281c2642f00478fb072d.tar.gz
pudding-75ad7e4bd7d69243e7e5281c2642f00478fb072d.tar.bz2
pudding-75ad7e4bd7d69243e7e5281c2642f00478fb072d.zip
Added tags, jquery UI
Diffstat (limited to 'apps/it/static/js/ui/tests/visual/effects')
-rw-r--r--apps/it/static/js/ui/tests/visual/effects/all.html217
-rw-r--r--apps/it/static/js/ui/tests/visual/effects/effects.css49
-rw-r--r--apps/it/static/js/ui/tests/visual/effects/effects.js107
-rw-r--r--apps/it/static/js/ui/tests/visual/effects/scale.html157
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>
generated by cgit v1.2.3 (git 2.25.1) at 2024-11-21 21:45:27 +0000