Skip to content

/ Framer

Permalink
Browse files
Loading status checks…

- Camel cased filter properties (hue-rotate -> hueRotate) 

- Centralized filter properties
  • Loading branch information
@koenbok
koenbok committed Oct 13, 2013
1 parent f367c76 commit 6eefeb0600ec7c13506f2b3398db3d4f0edbf5b1
Unified Split
Showing with 214 additions and 175 deletions.
  1. +88 −69 build/framer.js
  2. +16 −16 src/animation.coffee
  3. +9 −0 src/filters.coffee
  4. +13 −21 src/views/view.coffee
  5. +88 −69 template/framer.js
157 build/framer.js
View file
@@ -1,7 +1,7 @@
// Framer 2.0-30-gaa847ac (c) 2013 Koen Bok
// Framer 2.0-31-gf367c76 (c) 2013 Koen Bok
// https://github.com/koenbok/Framer

window.FramerVersion = "2.0-30-gaa847ac";
window.FramerVersion = "2.0-31-gf367c76";


(function(){var require = function (file, cwd) {
@@ -2307,7 +2307,7 @@ require.define("/src/tools/facebook.coffee",function(require,module,exports,__di
});

require.define("/src/views/view.coffee",function(require,module,exports,__dirname,__filename,process,global){(function() {
var Animation, EventEmitter, Frame, Matrix, View, check, k, utils, v, _, _ref,
var Animation, EventEmitter, FilterProperties, Frame, Matrix, View, check, k, utils, v, _,
__bind = function(fn, me){ return function(){ return fn.apply(me, arguments); }; },
__hasProp = {}.hasOwnProperty,
__extends = function(child, parent) { for (var key in parent) { if (__hasProp.call(parent, key)) child[key] = parent[key]; } function ctor() { this.constructor = child; } ctor.prototype = parent.prototype; child.prototype = new ctor(); child.__super__ = parent.prototype; return child; },
@@ -2327,6 +2327,8 @@ require.define("/src/views/view.coffee",function(require,module,exports,__dirnam

Animation = require("../animation").Animation;

FilterProperties = require("../filters").FilterProperties;

exports.ViewList = [];

View = (function(_super) {
@@ -2697,83 +2699,52 @@ require.define("/src/views/view.coffee",function(require,module,exports,__dirnam
}
});

View._FilterProperties = {
"blur": {
unit: "px",
"default": 0
},
"brightness": {
unit: "%",
"default": 0
},
"saturate": {
unit: "%",
"default": 0
},
"hue-rotate": {
unit: "deg",
"default": 0
},
"contrast": {
unit: "%",
"default": 0
},
"invert": {
unit: "%",
"default": 0
},
"grayscale": {
unit: "%",
"default": 0
},
"sepia": {
unit: "%",
"default": 0
}
};

View.prototype._getFilterValue = function(name) {
var values;
values = this._parseFilterCSS(this.style.webkitFilter);
return values[name] || View._FilterProperties[name]["default"];
return values[name] || FilterProperties[name]["default"];
};

View.prototype._setFilterValue = function(name, value, unit) {
if (this._filterValues == null) {
this._filterValues = {};
}
this._filterValues[name] = value;
return this.style.webkitFilter = this._filterCSS(this._filterValues);
var values;
values = this._parseFilterCSS(this.style.webkitFilter);
values[name] = value;
return this.style.webkitFilter = this._filterCSS(values);
};

View.prototype._filterCSS = function(filterValues) {
var css, k, v;
css = [];
for (k in filterValues) {
v = filterValues[k];
if (View._FilterProperties.hasOwnProperty(k)) {
css.push("" + k + "(" + v + View._FilterProperties[k].unit + ")");
if (FilterProperties.hasOwnProperty(k)) {
css.push("" + FilterProperties[k].css + "(" + v + FilterProperties[k].unit + ")");
}
}
return css.join(" ");
};

View.prototype._parseFilterCSS = function(css) {
var name, part, results, value, _i, _len, _ref;
var k, name, part, results, v, value, _i, _len, _ref;
results = {};
_ref = css.split(" ");
for (_i = 0, _len = _ref.length; _i < _len; _i++) {
part = _ref[_i];
if (part) {
name = part.split("(")[0];
value = parseFloat(part.split("(")[1]);
results[name] = value;
for (k in FilterProperties) {
v = FilterProperties[k];
if (v.css === name) {
results[k] = value;
}
}
}
}
return results;
};

_.map(View._FilterProperties, function(filterUnit, filterName) {
_.map(FilterProperties, function(filterUnit, filterName) {
return View.define(filterName, {
get: function() {
return this._getFilterValue(filterName);
@@ -3027,9 +2998,8 @@ require.define("/src/views/view.coffee",function(require,module,exports,__dirnam
index: 0
});

_ref = View._FilterProperties;
for (k in _ref) {
v = _ref[k];
for (k in FilterProperties) {
v = FilterProperties[k];
View.Properties[k] = v["default"];
}

@@ -3973,7 +3943,7 @@ require.define("/src/primitives/matrix.coffee",function(require,module,exports,_
});

require.define("/src/animation.coffee",function(require,module,exports,__dirname,__filename,process,global){(function() {
var Animation, AnimationCounter, AnimationList, EventEmitter, Matrix, bezier, config, css, parseCurve, spring, utils, _,
var AnimatableFilterProperties, Animation, AnimationCounter, AnimationList, EventEmitter, FilterProperties, Matrix, bezier, config, css, k, parseCurve, spring, utils, v, _,
__bind = function(fn, me){ return function(){ return fn.apply(me, arguments); }; },
__hasProp = {}.hasOwnProperty,
__extends = function(child, parent) { for (var key in parent) { if (__hasProp.call(parent, key)) child[key] = parent[key]; } function ctor() { this.constructor = child; } ctor.prototype = parent.prototype; child.prototype = new ctor(); child.__super__ = parent.prototype; return child; };
@@ -3990,6 +3960,8 @@ require.define("/src/animation.coffee",function(require,module,exports,__dirname

Matrix = require("./primitives/matrix").Matrix;

FilterProperties = require("./filters").FilterProperties;

spring = require("./curves/spring");

bezier = require("./curves/bezier");
@@ -4009,6 +3981,13 @@ require.define("/src/animation.coffee",function(require,module,exports,__dirname
});
};

AnimatableFilterProperties = {};

for (k in FilterProperties) {
v = FilterProperties[k];
AnimatableFilterProperties[k] = v.unit;
}

Animation = (function(_super) {
__extends(Animation, _super);

@@ -4020,16 +3999,7 @@ require.define("/src/animation.coffee",function(require,module,exports,__dirname
height: "px"
};

Animation.prototype.AnimatableFilterProperties = {
"blur": "px",
"brightness": "%",
"saturate": "%",
"hue-rotate": "deg",
"contrast": "%",
"invert": "%",
"grayscale": "%",
"sepia": "%"
};
Animation.prototype.AnimatableFilterProperties = AnimatableFilterProperties;

Animation.prototype.AnimatableMatrixProperties = ["x", "y", "z", "scaleX", "scaleY", "scaleZ", "rotationX", "rotationY", "rotationZ"];

@@ -4079,7 +4049,7 @@ require.define("/src/animation.coffee",function(require,module,exports,__dirname
});

Animation.prototype.start = function(callback) {
var animatedProperties, backsideVisibility, k, propertiesA, propertiesB, startTime, v, _i, _len, _ref, _ref1, _ref2,
var animatedProperties, backsideVisibility, propertiesA, propertiesB, startTime, _i, _len, _ref, _ref1, _ref2,
_this = this;
AnimationList.push(this);
if (this.view === null) {
@@ -4177,7 +4147,7 @@ require.define("/src/animation.coffee",function(require,module,exports,__dirname
};

Animation.prototype.reverse = function() {
var k, options, p, v, _i, _len, _ref, _ref1;
var options, p, _i, _len, _ref, _ref1;
options = {};
_ref = this.AnimationProperties;
for (_i = 0, _len = _ref.length; _i < _len; _i++) {
@@ -4209,7 +4179,7 @@ require.define("/src/animation.coffee",function(require,module,exports,__dirname
};

Animation.prototype._cleanup = function(completed) {
var computedStyles, endMatrix, endStyles, k, v, _ref, _ref1;
var computedStyles, endMatrix, endStyles, _ref, _ref1;
this.view._currentAnimations = _.without(this.view._currentAnimations, this);
if (completed) {
endMatrix = utils.extend(new Matrix(), this.propertiesB);
@@ -4277,7 +4247,7 @@ require.define("/src/animation.coffee",function(require,module,exports,__dirname
if (!values.hasOwnProperty(propertyName)) {
continue;
}
cssString.push("" + propertyName + "(" + (utils.round(values[propertyName], config.roundingDecimals)) + unit + ") ");
cssString.push("" + FilterProperties[propertyName].css + "(" + (utils.round(values[propertyName], config.roundingDecimals)) + unit + ") ");
}
cssString.push(";");
cssString.push("-webkit-transform: ");
@@ -4302,11 +4272,12 @@ require.define("/src/animation.coffee",function(require,module,exports,__dirname
cssString.push("}\n");
}
cssString.push("}\n");
console.log(cssString.join(""));
return cssString.join("");
};

Animation.prototype._deltas = function() {
var deltas, k;
var deltas;
deltas = {};
for (k in this.propertiesA) {
deltas[k] = (this.propertiesB[k] - this.propertiesA[k]) / 100.0;
@@ -4315,7 +4286,7 @@ require.define("/src/animation.coffee",function(require,module,exports,__dirname
};

Animation.prototype._parseCurve = function(curve) {
var factor, precision, time, v;
var factor, precision, time;
if (curve == null) {
curve = "";
}
@@ -4355,6 +4326,54 @@ require.define("/src/animation.coffee",function(require,module,exports,__dirname

});

require.define("/src/filters.coffee",function(require,module,exports,__dirname,__filename,process,global){(function() {
exports.FilterProperties = {
"blur": {
unit: "px",
"default": 0,
css: "blur"
},
"brightness": {
unit: "%",
"default": 100,
css: "brightness"
},
"saturate": {
unit: "%",
"default": 0,
css: "saturate"
},
"hueRotate": {
unit: "deg",
"default": 0,
css: "hue-rotate"
},
"contrast": {
unit: "%",
"default": 0,
css: "contrast"
},
"invert": {
unit: "%",
"default": 0,
css: "invert"
},
"grayscale": {
unit: "%",
"default": 0,
css: "grayscale"
},
"sepia": {
unit: "%",
"default": 0,
css: "sepia"
}
};

}).call(this);

});

require.define("/src/curves/spring.coffee",function(require,module,exports,__dirname,__filename,process,global){(function() {
var Spring, SpringCurve, defaults, springAccelerationForState, springEvaluateState, springEvaluateStateWithDerivative, springIntegrateState,
__bind = function(fn, me){ return function(){ return fn.apply(me, arguments); }; };
32 src/animation.coffee
View file
@@ -5,6 +5,7 @@ css = require "./css"

{EventEmitter} = require "./eventemitter"
{Matrix} = require "./primitives/matrix"
{FilterProperties} = require "./filters"

spring = require "./curves/spring"
bezier = require "./curves/bezier"
@@ -25,6 +26,12 @@ parseCurve = (a, prefix) ->
return a.map (i) -> parseFloat i


AnimatableFilterProperties = {}

for k, v of FilterProperties
AnimatableFilterProperties[k] = v.unit


class Animation extends EventEmitter

AnimationProperties: [
@@ -39,16 +46,8 @@ class Animation extends EventEmitter
}
# TODO, we should get these from where they are
# defined in the view.
AnimatableFilterProperties: {
"blur": "px"
"brightness": "%"
"saturate": "%"
"hue-rotate": "deg"
"contrast": "%"
"invert": "%"
"grayscale": "%"
"sepia": "%"
}
AnimatableFilterProperties: AnimatableFilterProperties

AnimatableMatrixProperties: [
"x", "y", "z",
"scaleX", "scaleY", "scaleZ", # "scale",
@@ -153,15 +152,13 @@ class Animation extends EventEmitter
@propertiesB[k] = propertiesA[k]

# Build up the css animation properties

for k, v of @AnimatableCSSProperties

if propertiesB.hasOwnProperty k
@propertiesA[k] = propertiesA[k]
@propertiesB[k] = propertiesB[k]


# Build up the css filter properties
for k, v of @AnimatableFilterProperties

if propertiesB.hasOwnProperty k
@propertiesA[k] = propertiesA[k]
@propertiesB[k] = propertiesB[k]
@@ -356,7 +353,7 @@ class Animation extends EventEmitter
# Add the filter based values
for propertyName, unit of @AnimatableFilterProperties
continue if not values.hasOwnProperty propertyName
cssString.push "#{propertyName}(#{ utils.round values[propertyName], config.roundingDecimals}#{unit}) "
cssString.push "#{FilterProperties[propertyName].css}(#{ utils.round values[propertyName], config.roundingDecimals}#{unit}) "

cssString.push ";"

@@ -376,13 +373,16 @@ class Animation extends EventEmitter
# Add the css based values
for propertyName, unit of @AnimatableCSSProperties
continue if not values.hasOwnProperty propertyName
cssString.push "#{propertyName}:#{ utils.round values[propertyName], config.roundingDecimals}#{unit}; "
cssString.push "#{propertyName}:#{utils.round(values[propertyName], config.roundingDecimals)}#{unit}; "


# Close out this keyframe
cssString.push "}\n"

cssString.push "}\n"

console.log cssString.join ""

cssString.join ""

_deltas: ->
9 src/filters.coffee
View file
@@ -0,0 +1,9 @@
exports.FilterProperties =
"blur": {unit:"px", default:0, css: "blur"}
"brightness": {unit:"%", default:100, css: "brightness"}
"saturate": {unit:"%", default:0, css: "saturate"}
"hueRotate": {unit:"deg", default:0, css: "hue-rotate"}
"contrast": {unit:"%", default:0, css: "contrast"}
"invert": {unit:"%", default:0, css: "invert"}
"grayscale": {unit:"%", default:0, css: "grayscale"}
"sepia": {unit:"%", default:0, css: "sepia"}

0 comments on commit 6eefeb0

Please sign in to comment.