Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Spliting the 'animations' plugin and removing js/util
- Loading branch information
1 parent
69a261b
commit 04c3e17
Showing
36 changed files
with
376 additions
and
136 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
File renamed without changes.
File renamed without changes.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,7 @@ | ||
| # WireIt animations plugin | ||
|
|
||
|
|
||
| * Utility to provide Animation on any DOM element containing terminals | ||
|
|
||
| * clearExplode on Layer | ||
|
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,99 @@ | ||
| <?xml version="1.0" encoding="UTF-8"?> | ||
| <html> | ||
| <head> | ||
| <title>WireIt Example, Move and Animate elements containing terminals</title> | ||
|
|
||
| <!-- YUI --> | ||
| <link rel="stylesheet" type="text/css" href="../lib/yui/fonts/fonts-min.css" /> | ||
| <link rel="stylesheet" type="text/css" href="../lib/yui/reset/reset-min.css" /> | ||
|
|
||
| <script type="text/javascript" src="../lib/yui/utilities/utilities.js"></script> | ||
|
|
||
| <!-- Excanvas --> | ||
| <!--[if IE]><script type="text/javascript" src="../lib/excanvas.js"></script><![endif]--> | ||
|
|
||
| <!-- WireIt --> | ||
| <script type="text/javascript" src="../js/WireIt.js"></script> | ||
| <script type="text/javascript" src="../js/CanvasElement.js"></script> | ||
| <script type="text/javascript" src="../js/Wire.js"></script> | ||
| <script type="text/javascript" src="../js/Terminal.js"></script> | ||
| <script type="text/javascript" src="../js/DD.js"></script> | ||
|
|
||
| <!-- Animations plugin --> | ||
| <script type="text/javascript" src="../js/Anim.js"></script> | ||
|
|
||
| <link rel="stylesheet" type="text/css" href="../css/WireIt.css" /> | ||
|
|
||
| <style> | ||
|
|
||
| div.blockBox { | ||
| /* WireIt */ | ||
| position: absolute; | ||
| z-index: 5; | ||
| opacity: 0.8; | ||
|
|
||
| /* Others */ | ||
| width: 100px; | ||
| height: 100px; | ||
| background-color: rgb(255,200,200); | ||
| cursor: move; | ||
| } | ||
|
|
||
| </style> | ||
|
|
||
| <script> | ||
| window.onload = function() { | ||
|
|
||
| // Create 2 terminals into Block1 | ||
| var block1 = YAHOO.util.Dom.get('block1'); | ||
| var terminals1 = [new WireIt.Terminal(block1, {direction: [-1,0], offsetPosition: [-14,35]}), | ||
| new WireIt.Terminal(block1, {direction: [1,0], offsetPosition: [85,35]})]; | ||
|
|
||
| // Make the block1 draggable | ||
| new WireIt.util.DD(terminals1,block1); | ||
|
|
||
| // Create 2 terminals into Block2 | ||
| var block2 = YAHOO.util.Dom.get('block2'); | ||
| var terminals2 = [new WireIt.Terminal(block2, {direction: [-1,0], offsetPosition: [-14,35]}), | ||
| new WireIt.Terminal(block2, {direction: [1,0], offsetPosition: [85,35]})]; | ||
|
|
||
| // Make the block2 draggable | ||
| new WireIt.util.DD(terminals2,block2); | ||
|
|
||
| // Create a wire between some terminals | ||
| var w1 = new WireIt.Wire(terminals1[0], terminals2[0], document.body); | ||
| w1.redraw(); | ||
|
|
||
| var w2 = new WireIt.Wire(terminals1[1], terminals2[1], document.body); | ||
| w2.redraw(); | ||
|
|
||
| // Create the animations for both blocks using WireIt.util.Anim | ||
| var myAnim1 = new WireIt.util.Anim(terminals1, // same constructor except constructor takes the terminals as 1st parameter | ||
| block1, { left: { to: 500 }, top: {to: 150} }, 2, YAHOO.util.Easing.easeOut); | ||
| var myAnim2 = new WireIt.util.Anim(terminals2, | ||
| block2, { left: { to: 100 } }, 1, YAHOO.util.Easing.easeOut); | ||
|
|
||
| // OnClick on the button, launch both animations | ||
| YAHOO.util.Event.addListener('animButton','click', function() { | ||
| myAnim1.animate(); | ||
| myAnim2.animate(); | ||
| }) | ||
| }; | ||
|
|
||
|
|
||
| </script> | ||
|
|
||
| </head> | ||
| <body> | ||
|
|
||
| <p style="margin: 15px;"><a href="../index.html">< Back</a></p> | ||
| <p style="margin: 15px;">Show usage of WireIt.util.DD and WireIt.util.Anim to make terminal containers draggable</p> | ||
|
|
||
| <button id='animButton' style="margin: 15px;">Click to animate !</button> | ||
|
|
||
| <div id='block1' class="blockBox" style="left: 300px; top: 100px;">Move Me !</div> | ||
|
|
||
| <div id='block2' class="blockBox" style="left: 500px; top: 200px;">Move Me !</div> | ||
|
|
||
| </body> | ||
| </html> |
Empty file.
File renamed without changes.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,34 @@ | ||
|
|
||
|
|
||
| /** | ||
| * Layer explosing animation | ||
| * @method clearExplode | ||
| */ | ||
| WireIt.Layer.prototype.clearExplode = function(callback, bind) { | ||
|
|
||
| var center = [ Math.floor(YAHOO.util.Dom.getViewportWidth()/2), | ||
| Math.floor(YAHOO.util.Dom.getViewportHeight()/2)]; | ||
| var R = 1.2*Math.sqrt( Math.pow(center[0],2)+Math.pow(center[1],2)); | ||
|
|
||
| for(var i = 0 ; i < this.containers.length ; i++) { | ||
| var left = parseInt(dbWire.layer.containers[i].el.style.left.substr(0,dbWire.layer.containers[i].el.style.left.length-2),10); | ||
| var top = parseInt(dbWire.layer.containers[i].el.style.top.substr(0,dbWire.layer.containers[i].el.style.top.length-2),10); | ||
|
|
||
| var d = Math.sqrt( Math.pow(left-center[0],2)+Math.pow(top-center[1],2) ); | ||
|
|
||
| var u = [ (left-center[0])/d, (top-center[1])/d]; | ||
| YAHOO.util.Dom.setStyle(this.containers[i].el, "opacity", "0.8"); | ||
|
|
||
| var myAnim = new WireIt.util.Anim(this.containers[i].terminals, this.containers[i].el, { | ||
| left: { to: center[0]+R*u[0] }, | ||
| top: { to: center[1]+R*u[1] }, | ||
| opacity: { to: 0, by: 0.05}, | ||
| duration: 3 | ||
| }); | ||
| if(i == this.containers.length-1) { | ||
| myAnim.onComplete.subscribe(function() { this.clear(); callback.call(bind);}, this, true); | ||
| } | ||
| myAnim.animate(); | ||
| } | ||
|
|
||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.