set state without animation. Added Fx.Graph.clear

to clear animation properties once a state has been reached.
swannodette · Oct 25, 2009 · c37aba8 · c37aba8
1 parent e53ba8c
commit c37aba8
Show file tree

Hide file tree

Showing 4 changed files with 31 additions and 4 deletions.
diff --git a/FxGraph.js b/FxGraph.js
@@ -83,10 +83,13 @@ Fx.Graph = new Class({
   */
   setState: function(name, animate) {
     this.transitionState = name;
-    if(animate === false) return;
     var state = this.graph[name];
     this.cancel();
-    this.element.morph(state.selector);
+    if(animate !== false) {
+      this.element.morph(state.selector);
+    } else {
+      this.onStateArrive();
+    }
   },
 
   /*
@@ -96,6 +99,14 @@ Fx.Graph = new Class({
       is based on the current direction of the graph.
   */
   onStateArrive: function() {
+    function fix(selector) {
+      return selector.substr(1, selector.length-1);
+    };
+    this.element.removeClass(fix(this.graph[this.currentState].selector));
+    this.element.addClass(fix(this.graph[this.transitionState].selector));
+    Fx.Graph.clear.each(function(style) {
+      this.element.setStyle(style, '');
+    }, this);
     this.currentState = this.transitionState;
     var state = this.graph[this.currentState];
     if(state.onComplete) state.onComplete();
@@ -114,4 +125,6 @@ Fx.Graph = new Class({
   cancel: function() {
     this.element.get('morph').cancel();
   }
-});
+});
+
+Fx.Graph.clear = ['width', 'height', 'left', 'right', 'top', 'bottom', 'background-color', 'opacity', 'visibility'];
diff --git a/examples/example.css b/examples/example.css
@@ -1,6 +1,14 @@
 #box1
+{
+}
+
+.base
 {
   position: absolute;
+  left: 100px;
+  top: 200px;
+  width: 100px;
+  height: 100px;
 }
 
 .start

diff --git a/examples/example.html b/examples/example.html
@@ -9,6 +9,7 @@
         <script src="example.js" type="text/javascript" charset="utf-8"></script>
     </head>
     <body>
-        <div id="box1" class="start"></div>
+        <button id="step3">Step 3</button>
+        <div id="box1" class="base start"></div>
     </body>
 </html>
diff --git a/examples/example.js b/examples/example.js
@@ -96,4 +96,9 @@ function init() {
       }
     }
   });
+
+  $('step3').addEvent('click', function(evt) {
+    evt = new Event(evt);
+    fxgraph.setState('step3', false);
+  });
 }