- Added Animation.stop()

- Added View.animateStop()
- Fixed bugs in event emitter
- Added property change events

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) {

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", @

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