Permalink
Browse files

- Added Animation.stop()

- Added View.animateStop()
- Fixed bugs in event emitter
- Added property change events
  • Loading branch information...
koenbok committed Dec 26, 2012
1 parent 818a4a2 commit 1677a43a13d5756da99b251477ee9b2f9140f94a
Showing with 115 additions and 56 deletions.
  1. +41 −23 build/framer.js
  2. +3 −0 src/animation.coffee
  3. +30 −10 src/views/view.coffee
  4. +41 −23 template/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) {
@@ -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", @
@@ -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
Oops, something went wrong.

0 comments on commit 1677a43

Please sign in to comment.