- Added Animation.stop()

- Added View.animateStop() - Fixed bugs in event emitter - Added property change events
koenbok · Dec 26, 2012 · 1677a43a13d5756da99b251477ee9b2f9140f94a · 1677a43
1 parent 818a4a2
commit 1677a43a13d5756da99b251477ee9b2f9140f94a
Unified Split

Showing with 115 additions and 56 deletions.

+41 −23 build/framer.js

+3 −0 src/animation.coffee

+30 −10 src/views/view.coffee

+41 −23 template/framer.js
diff --git a/build/framer.js b/build/framer.js
@@ -716,9 +716,11 @@ require.define("/views/view.coffee",function(require,module,exports,__dirname,__
      },
      set: function(value) {
        this._x = value;
-        return this._matrix = utils.extend(this._matrix, {
+        this._matrix = utils.extend(this._matrix, {
          m41: value
        });
+        this.emit("change:x");
+        return this.emit("change:frame");
      }
    });

@@ -728,9 +730,11 @@ require.define("/views/view.coffee",function(require,module,exports,__dirname,__
      },
      set: function(value) {
        this._y = value;
-        return this._matrix = utils.extend(this._matrix, {
+        this._matrix = utils.extend(this._matrix, {
          m42: value
        });
+        this.emit("change:y");
+        return this.emit("change:frame");
      }
    });

@@ -740,7 +744,9 @@ require.define("/views/view.coffee",function(require,module,exports,__dirname,__
      },
      set: function(value) {
        this._width = value;
-        return this._element.style.width = "" + value + "px";
+        this._element.style.width = "" + value + "px";
+        this.emit("change:width");
+        return this.emit("change:frame");
      }
    });

@@ -750,7 +756,9 @@ require.define("/views/view.coffee",function(require,module,exports,__dirname,__
      },
      set: function(value) {
        this._height = value;
-        return this._element.style.height = "" + value + "px";
+        this._element.style.height = "" + value + "px";
+        this.emit("change:height");
+        return this.emit("change:frame");
      }
    });

@@ -776,7 +784,8 @@ require.define("/views/view.coffee",function(require,module,exports,__dirname,__
      },
      set: function(value) {
        this._opacity = value;
-        return this.style["opacity"] = value;
+        this.style["opacity"] = value;
+        return this.emit("change:opacity");
      }
    });

@@ -786,11 +795,12 @@ require.define("/views/view.coffee",function(require,module,exports,__dirname,__
      },
      set: function(value) {
        this._scale = value;
-        return this._matrix = utils.extend(this._matrix, {
+        this._matrix = utils.extend(this._matrix, {
          m11: value,
          m22: value,
          m33: value
        });
+        return this.emit("change:scale");
      }
    });

@@ -804,8 +814,9 @@ require.define("/views/view.coffee",function(require,module,exports,__dirname,__
          this.style.overflow = "hidden";
        }
        if (value === false) {
-          return this.style.overflow = "visible";
+          this.style.overflow = "visible";
        }
+        return this.emit("change:clip");
      }
    });

@@ -829,7 +840,8 @@ require.define("/views/view.coffee",function(require,module,exports,__dirname,__
          value._element.appendChild(this._element);
          value._subViews.push(this);
        }
-        return this._superView = value;
+        this._superView = value;
+        return this.emit("change:superView");
      }
    });

@@ -887,12 +899,19 @@ require.define("/views/view.coffee",function(require,module,exports,__dirname,__
      return animation;
    };

+    View.prototype.animateStop = function() {
+      return this._animations.map(function(animation) {
+        return animation.stop();
+      });
+    };
+
    View.define("html", {
      get: function() {
        return this._element.innerHTML;
      },
      set: function(value) {
-        return this._element.innerHTML = value;
+        this._element.innerHTML = value;
+        return this.emit("change:html");
      }
    });

@@ -901,7 +920,8 @@ require.define("/views/view.coffee",function(require,module,exports,__dirname,__
        return this._element.style;
      },
      set: function(value) {
-        return utils.extend(this._element.style, value);
+        utils.extend(this._element.style, value);
+        return this.emit("change:style");
      }
    });

@@ -924,7 +944,8 @@ require.define("/views/view.coffee",function(require,module,exports,__dirname,__
    };

    View.prototype.addClass = function(className) {
-      return this._element.className += " " + className;
+      this._element.className += " " + className;
+      return this.emit("change:class");
    };

    View.prototype.removeClass = function(className) {
@@ -943,27 +964,22 @@ require.define("/views/view.coffee",function(require,module,exports,__dirname,__
        }
        return _results;
      }).call(this);
-      return this._element.className = values.join(" ");
+      this._element.className = values.join(" ");
+      return this.emit("change:class");
    };

    View.prototype._insertElement = function() {
      return document.body.appendChild(this._element);
    };

    View.prototype.addListener = function(event, listener) {
-      if (EventTypes[event]) {
-        return this._element.addEventListener(event, listener);
-      } else {
-        return View.__super__.addListener.apply(this, arguments);
-      }
+      View.__super__.addListener.apply(this, arguments);
+      return this._element.addEventListener(event, listener);
    };

    View.prototype.removeListener = function(event, listener) {
-      if (EventTypes[event]) {
-        return this._element.removeEventListener(event, listener);
-      } else {
-        return View.__super__.removeListener.apply(this, arguments);
-      }
+      View.__super__.removeListener.apply(this, arguments);
+      return this._element.removeEventListener(event, listener);
    };

    View.prototype.on = View.prototype.addListener;
@@ -1548,7 +1564,9 @@ require.define("/animation.coffee",function(require,module,exports,__dirname,__f
    };

    Animation.prototype.stop = function() {
-      return this._stop = true;
+      this._stop = true;
+      this._end();
+      return this.view.style.webkitTransform = this.view.computedStyle.webkitTransform;
    };

    Animation.prototype._end = function(callback) {
diff --git a/src/animation.coffee b/src/animation.coffee
@@ -40,6 +40,9 @@ class exports.Animation extends EventEmitter
 	
 	stop: ->
 		@_stop = true
+		@_end()
+		@view.style.webkitTransform = @view.computedStyle.webkitTransform
+		# console.log "Animation.stop", @
 	
 	_end: (callback) =>
 		@emit "end", @
diff --git a/src/views/view.coffee b/src/views/view.coffee
@@ -75,6 +75,8 @@ class View extends Frame
 		set: (value) -> 
 			@_x = value
 			@_matrix = utils.extend @_matrix, {m41: value}
+			@emit "change:x"
+			@emit "change:frame"
 	
 	@define "y"
 		get: ->
@@ -83,6 +85,8 @@ class View extends Frame
 		set: (value) -> 
 			@_y = value
 			@_matrix = utils.extend @_matrix, {m42: value}
+			@emit "change:y"
+			@emit "change:frame"
 	
 	# @define "z"
 	# 	get: -> @_matrix.m43
@@ -95,6 +99,8 @@ class View extends Frame
 		set: (value) -> 
 			@_width = value
 			@_element.style.width = "#{value}px"
+			@emit "change:width"
+			@emit "change:frame"

 	@define "height"
 		get: -> 
@@ -103,6 +109,8 @@ class View extends Frame
 		set: (value) -> 
 			@_height = value
 			@_element.style.height = "#{value}px"
+			@emit "change:height"
+			@emit "change:frame"
 	
 	@define "_matrix"
 		get: -> 
@@ -138,6 +146,7 @@ class View extends Frame
 		set: (value) -> 
 			@_opacity = value
 			@style["opacity"] = value
+			@emit "change:opacity"
 	
 	@define "scale"
 		get: -> 
@@ -147,6 +156,7 @@ class View extends Frame
 			@_scale = value
 			@_matrix = utils.extend @_matrix, 
 				{m11:value, m22:value, m33:value}
+			@emit "change:scale"
 	
 	@define "clip"
 		get: ->
@@ -155,6 +165,7 @@ class View extends Frame
 			@_clip = value
 			@style.overflow = "hidden" if value is true
 			@style.overflow = "visible" if value is false
+			@emit "change:clip"

 	# Hierarchy
 	
@@ -176,6 +187,7 @@ class View extends Frame
 				value._subViews.push @
 			
 			@_superView = value
+			@emit "change:superView"
 	
 	@define "subViews"
 		get: -> @_subViews
@@ -219,18 +231,26 @@ class View extends Frame
 		animation = new Animation args
 		animation.start callback
 		return animation
+	
+	animateStop: ->
+		@_animations.map (animation) ->
+			animation.stop()



 	# Html helpers

 	@define "html"
 		get: -> @_element.innerHTML
-		set: (value) -> @_element.innerHTML = value
+		set: (value) -> 
+			@_element.innerHTML = value
+			@emit "change:html"

 	@define "style"
 		get: -> @_element.style
-		set: (value) -> utils.extend @_element.style, value
+		set: (value) -> 
+			utils.extend @_element.style, value
+			@emit "change:style"

 	@define "computedStyle"
 		get: -> document.defaultView.getComputedStyle @_element
@@ -248,11 +268,13 @@ class View extends Frame

 	addClass: (className) ->
 		@_element.className += " #{className}"
+		@emit "change:class"

 	removeClass: (className) ->
 		values = for item in @_element.classList
 			item if item and item isnt className
 		@_element.className = values.join " "
+		@emit "change:class"

 	_insertElement: ->
 		document.body.appendChild @_element
@@ -261,16 +283,14 @@ class View extends Frame
 	# Dom element events

 	addListener: (event, listener) ->
-		if EventTypes[event]
-			@_element.addEventListener event, listener
-		else
-			super
+		super
+		# if EventTypes[event]
+		@_element.addEventListener event, listener

 	removeListener: (event, listener) ->
-		if EventTypes[event]
-			@_element.removeEventListener event, listener
-		else
-			super
+		super
+		# if EventTypes[event]
+		@_element.removeEventListener event, listener

 	on: @::addListener
 	off: @::removeListener