Skip to content
Browse files

- new style guidlines applied to main src

  • Loading branch information...
1 parent 937c9af commit b91f915f4c6a749b8591e0ca021e9aa245685af4 @ded ded committed Aug 30, 2011
Showing with 251 additions and 259 deletions.
  1. +21 −19 build.json
  2. +114 −119 morpheus.js
  3. +1 −1 morpheus.min.js
  4. +1 −1 package.json
  5. +114 −119 src/morpheus.js
View
40 build.json
@@ -1,24 +1,26 @@
{
"JAVASCRIPT": {
- "DIST_DIR": "./",
- "morpheus": [
- "./src/copyright.js",
- "./src/morpheus.js"
+ "DIST_DIR": "./"
+ , "morpheus": [
+ "./src/copyright.js"
+ , "./src/morpheus.js"
]
- },
- "JSHINT_OPTS": {
- "boss": true,
- "forin": false,
- "curly": false,
- "debug": false,
- "devel": false,
- "evil": false,
- "regexp": false,
- "undef": false,
- "sub": true,
- "white": true,
- "indent": 2,
- "whitespace": true,
- "asi": true
+ }
+ , "JSHINT_OPTS": {
+ "boss": true
+ , "forin": false
+ , "curly": false
+ , "debug": false
+ , "devel": false
+ , "evil": false
+ , "regexp": false
+ , "undef": false
+ , "sub": true
+ , "white": false
+ , "indent": 2
+ , "whitespace": true
+ , "asi": true
+ , "laxbreak": true
+ , "shadow": true
}
}
View
233 morpheus.js
@@ -5,71 +5,46 @@
*/
!function (context, doc, win) {
- var html = doc.documentElement,
- rgbOhex = /^rgb\(|#/,
- relVal = /^([+\-])=([\d\.]+)/,
- numUnit = /^(?:[\+\-]=)?\d+(?:\.\d+)?(%|in|cm|mm|em|ex|pt|pc|px)$/,
- // does this browser support the opacity property?
- opasity = function () {
- return typeof doc.createElement('a').style.opacity !== 'undefined';
- }(),
+ var html = doc.documentElement
+ , rgbOhex = /^rgb\(|#/
+ , relVal = /^([+\-])=([\d\.]+)/
+ , numUnit = /^(?:[\+\-]=)?\d+(?:\.\d+)?(%|in|cm|mm|em|ex|pt|pc|px)$/
// these elements do not require 'px'
- unitless = { lineHeight: 1, zoom: 1, zIndex: 1, opacity: 1 },
-
+ , unitless = { lineHeight: 1, zoom: 1, zIndex: 1, opacity: 1 }
+ // does this browser support the opacity property?
+ , opasity = function () {
+ return typeof doc.createElement('a').style.opacity !== 'undefined'
+ }()
// initial style is determined by the elements themselves
- getStyle = doc.defaultView && doc.defaultView.getComputedStyle ?
+ , getStyle = doc.defaultView && doc.defaultView.getComputedStyle ?
function (el, property) {
- var value = null;
- var computed = doc.defaultView.getComputedStyle(el, '');
- computed && (value = computed[camelize(property)]);
- return el.style[property] || value;
+ var value = null
+ , computed = doc.defaultView.getComputedStyle(el, '')
+ computed && (value = computed[camelize(property)])
+ return el.style[property] || value
} : html.currentStyle ?
function (el, property) {
- property = camelize(property);
+ property = camelize(property)
if (property == 'opacity') {
- var val = 100;
+ var val = 100
try {
- val = el.filters['DXImageTransform.Microsoft.Alpha'].opacity;
+ val = el.filters['DXImageTransform.Microsoft.Alpha'].opacity
} catch (e1) {
try {
- val = el.filters('alpha').opacity;
+ val = el.filters('alpha').opacity
} catch (e2) {}
}
- return val / 100;
+ return val / 100
}
- var value = el.currentStyle ? el.currentStyle[property] : null;
- return el.style[property] || value;
+ var value = el.currentStyle ? el.currentStyle[property] : null
+ return el.style[property] || value
} :
-
function (el, property) {
- return el.style[camelize(property)];
- },
-
- rgb = function (r, g, b) {
- return '#' + (1 << 24 | r << 16 | g << 8 | b).toString(16).slice(1);
- },
-
- // convert rgb and short hex to long hex
- toHex = function (c) {
- var m = /rgba?\((\d+),\s*(\d+),\s*(\d+)/.exec(c);
- return (m ? rgb(m[1], m[2], m[3]) : c)
- .replace(/#(\w)(\w)(\w)$/, '#$1$1$2$2$3$3'); // short to long
- },
-
- // change font-size => fontSize etc.
- camelize = function (s) {
- return s.replace(/-(.)/g, function (m, m1) {
- return m1.toUpperCase();
- });
- },
-
- fun = function (f) {
- return typeof f == 'function';
- },
-
- frame = function () {
+ return el.style[camelize(property)]
+ }
+ , frame = function () {
// native animation frames
// http://webstuff.nfshost.com/anim-timing/Overview.html
// http://dev.chromium.org/developers/design-documents/requestanimationframe-implementation
@@ -80,10 +55,32 @@
win.msRequestAnimationFrame ||
function (callback) {
win.setTimeout(function () {
- callback(+new Date());
- }, 10);
- };
- }();
+ callback(+new Date())
+ }, 10)
+ }
+ }()
+
+ function rgb(r, g, b) {
+ return '#' + (1 << 24 | r << 16 | g << 8 | b).toString(16).slice(1)
+ }
+
+ // convert rgb and short hex to long hex
+ function toHex(c) {
+ var m = /rgba?\((\d+),\s*(\d+),\s*(\d+)/.exec(c)
+ return (m ? rgb(m[1], m[2], m[3]) : c)
+ .replace(/#(\w)(\w)(\w)$/, '#$1$1$2$2$3$3') // short to long
+ }
+
+ // change font-size => fontSize etc.
+ function camelize(s) {
+ return s.replace(/-(.)/g, function (m, m1) {
+ return m1.toUpperCase()
+ })
+ }
+
+ function fun(f) {
+ return typeof f == 'function';
+ }
/**
* Core tween method that requests each frame
@@ -99,33 +96,32 @@
ease = ease || function (t) {
// default to a pleasant-to-the-eye easeOut (like native animations)
return Math.sin(t * Math.PI / 2)
- };
- var time = duration || 1000,
- diff = to - from,
- start = +new Date(),
- stop = 0,
- end = 0;
- frame(run);
+ }
+ var time = duration || 1000
+ , diff = to - from
+ , start = +new Date()
+ , stop = 0
+ , end = 0
+ frame(run)
function run(t) {
var delta = t - start;
if (delta > time || stop) {
- to = isFinite(to) ? to : 1;
- stop ? end && fn(to) : fn(to);
- done && done();
- return;
+ to = isFinite(to) ? to : 1
+ stop ? end && fn(to) : fn(to)
+ return done && done()
}
// if you don't specify a 'to' you can use tween as a generic delta tweener
// cool, eh?
isFinite(to) ?
fn((diff * ease(delta / time)) + from) :
- fn(ease(delta / time));
- frame(run);
+ fn(ease(delta / time))
+ frame(run)
}
return {
stop: function (jump) {
- stop = 1;
- end = jump; // jump to end of animation?
+ stop = 1
+ end = jump // jump to end of animation?
}
}
}
@@ -141,42 +137,42 @@
* @return [x, y]
*/
function bezier(points, pos) {
- var n = points.length, r = [], i, j;
+ var n = points.length, r = [], i, j
for (i = 0; i < n; ++i) {
- r[i] = [points[i][0], points[i][1]];
+ r[i] = [points[i][0], points[i][1]]
}
for (j = 1; j < n; ++j) {
for (i = 0; i < n - j; ++i) {
- r[i][0] = (1 - pos) * r[i][0] + pos * r[parseInt(i + 1, 10)][0];
- r[i][1] = (1 - pos) * r[i][1] + pos * r[parseInt(i + 1, 10)][1];
+ r[i][0] = (1 - pos) * r[i][0] + pos * r[parseInt(i + 1, 10)][0]
+ r[i][1] = (1 - pos) * r[i][1] + pos * r[parseInt(i + 1, 10)][1]
}
}
- return [r[0][0], r[0][1]];
+ return [r[0][0], r[0][1]]
}
// this gets you the next hex in line according to a 'position'
function nextColor(pos, start, finish) {
- var r = [], i, e;
+ var r = [], i, e
for (i = 0; i < 6; i++) {
- from = Math.min(15, parseInt(start.charAt(i), 16));
- to = Math.min(15, parseInt(finish.charAt(i), 16));
- e = Math.floor((to - from) * pos + from);
- e = e > 15 ? 15 : e < 0 ? 0 : e;
- r[i] = e.toString(16);
+ from = Math.min(15, parseInt(start.charAt(i), 16))
+ to = Math.min(15, parseInt(finish.charAt(i), 16))
+ e = Math.floor((to - from) * pos + from)
+ e = e > 15 ? 15 : e < 0 ? 0 : e
+ r[i] = e.toString(16)
}
- return '#' + r.join('');
+ return '#' + r.join('')
}
// this retreives the frame value within a sequence
function getTweenVal(pos, units, begin, end, k, i, v) {
if (typeof begin[i][k] == 'string') {
- return nextColor(pos, begin[i][k], end[i][k]);
+ return nextColor(pos, begin[i][k], end[i][k])
} else {
// round so we don't get crazy long floats
- v = Math.round(((end[i][k] - begin[i][k]) * pos + begin[i][k]) * 1000) / 1000;
+ v = Math.round(((end[i][k] - begin[i][k]) * pos + begin[i][k]) * 1000) / 1000
// some css properties don't require a unit (like zIndex, lineHeight, opacity)
- !(k in unitless) && (v += units[i][k] || 'px');
- return v;
+ if (!k in unitless) v += units[i][k] || 'px'
+ return v
}
}
@@ -185,7 +181,7 @@
return (m = relVal.exec(val)) ?
(i = parseFloat(m[2])) && (r = (start + i)) && m[1] == '+' ?
r : start - i :
- parseFloat(val);
+ parseFloat(val)
}
/**
@@ -203,17 +199,17 @@
* - this may also be a function that receives element to be animated. it must return a value
*/
function morpheus(elements, options) {
- var els = elements ? (els = isFinite(elements.length) ? elements : [elements]) : [], i,
- complete = options.complete,
- duration = options.duration,
- ease = options.easing,
- points = options.bezier,
- begin = [],
- end = [],
- units = [],
- bez = [],
- originalLeft,
- originalTop;
+ var els = elements ? (els = isFinite(elements.length) ? elements : [elements]) : [], i
+ , complete = options.complete
+ , duration = options.duration
+ , ease = options.easing
+ , points = options.bezier
+ , begin = []
+ , end = []
+ , units = []
+ , bez = []
+ , originalLeft
+ , originalTop
delete options.complete;
delete options.duration;
@@ -233,17 +229,17 @@
for (i = els.length; i--;) {
// record beginning and end states to calculate positions
- begin[i] = {};
- end[i] = {};
- units[i] = {};
+ begin[i] = {}
+ end[i] = {}
+ units[i] = {}
// are we 'moving'?
if (points) {
- var left = getStyle(els[i], 'left'),
- top = getStyle(els[i], 'top'),
- xy = [by(fun(originalLeft) ? originalLeft(els[i]) : originalLeft || 0, parseFloat(left)),
- by(fun(originalTop) ? originalTop(els[i]) : originalTop || 0, parseFloat(top))];
+ var left = getStyle(els[i], 'left')
+ , top = getStyle(els[i], 'top')
+ , xy = [by(fun(originalLeft) ? originalLeft(els[i]) : originalLeft || 0, parseFloat(left)),
+ by(fun(originalTop) ? originalTop(els[i]) : originalTop || 0, parseFloat(top))]
bez[i] = fun(points) ? points(els[i], xy) : points;
bez[i].push(xy);
@@ -254,8 +250,8 @@
}
for (var k in options) {
- var v = getStyle(els[i], k), unit,
- tmp = fun(options[k]) ? options[k](els[i]) : options[k]
+ var v = getStyle(els[i], k), unit
+ , tmp = fun(options[k]) ? options[k](els[i]) : options[k]
if (typeof tmp == 'string' &&
rgbOhex.test(tmp) &&
!rgbOhex.test(v)) {
@@ -271,7 +267,7 @@
toHex(tmp).slice(1) :
by(tmp, parseFloat(v));
// record original unit
- typeof tmp == 'string' && (unit = tmp.match(numUnit)) && (units[i][k] = unit[1]);
+ typeof tmp == 'string' && (unit = tmp.match(numUnit)) && (units[i][k] = unit[1])
}
}
// ONE TWEEN TO RULE THEM ALL
@@ -280,27 +276,26 @@
// fast for animating
for (i = els.length; i--;) {
if (points) {
- xy = bezier(bez[i], pos);
- els[i].style.left = xy[0] + 'px';
- els[i].style.top = xy[1] + 'px';
+ xy = bezier(bez[i], pos)
+ els[i].style.left = xy[0] + 'px'
+ els[i].style.top = xy[1] + 'px'
}
for (var k in options) {
- v = getTweenVal(pos, units, begin, end, k, i);
+ v = getTweenVal(pos, units, begin, end, k, i)
k == 'opacity' && !opasity ?
(els[i].style.filter = 'alpha(opacity=' + (v * 100) + ')') :
- (els[i].style[camelize(k)] = v);
+ (els[i].style[camelize(k)] = v)
}
}
- }, complete, ease);
+ }, complete, ease)
}
// expose useful methods
- morpheus.tween = tween;
- morpheus.getStyle = getStyle;
- morpheus.bezier = bezier;
+ morpheus.tween = tween
+ morpheus.getStyle = getStyle
+ morpheus.bezier = bezier
- typeof module !== 'undefined' && module.exports &&
- (module.exports = morpheus);
- context['morpheus'] = morpheus;
+ if (typeof module !== 'undefined') module.exports = morpheus
+ context['morpheus'] = morpheus
-}(this, document, window);
+}(this, document, window)
View
2 morpheus.min.js
@@ -3,4 +3,4 @@
* https://github.com/ded/morpheus - (c) Dustin Diaz 2011
* License MIT
*/
-!function(a,b,c){function u(a,b){var c=a?c=isFinite(a.length)?a:[a]:[],d,f=b.complete,i=b.duration,k=b.easing,o=b.bezier,r=[],u=[],v=[],w=[],x,y;delete b.complete,delete b.duration,delete b.easing,delete b.bezier,o&&(x=b.left,y=b.top,delete b.right,delete b.bottom,delete b.left,delete b.top);for(d=c.length;d--;){r[d]={},u[d]={},v[d]={};if(o){var z=j(c[d],"left"),A=j(c[d],"top"),B=[t(n(x)?x(c[d]):x||0,parseFloat(z)),t(n(y)?y(c[d]):y||0,parseFloat(A))];w[d]=n(o)?o(c[d],B):o,w[d].push(B),w[d].unshift([parseInt(z,10),parseInt(A,10)])}for(var C in b){var D=j(c[d],C),E,F=n(b[C])?b[C](c[d]):b[C];if(typeof F=="string"&&e.test(F)&&!e.test(D)){delete b[C];continue}r[d][C]=typeof F=="string"&&e.test(F)?l(D).slice(1):parseFloat(D),u[d][C]=typeof F=="string"&&F.charAt(0)=="#"?l(F).slice(1):t(F,parseFloat(D)),typeof F=="string"&&(E=F.match(g))&&(v[d][C]=E[1])}}return p(i,function(a,e,f){for(d=c.length;d--;){o&&(f=q(w[d],a),c[d].style.left=f[0]+"px",c[d].style.top=f[1]+"px");for(var g in b)e=s(a,v,r,u,g,d),g=="opacity"&&!h?c[d].style.filter="alpha(opacity="+e*100+")":c[d].style[m(g)]=e}},f,k)}function t(a,b,c,d,e){return(c=f.exec(a))?(e=parseFloat(c[2]))&&(d=b+e)&&c[1]=="+"?d:b-e:parseFloat(a)}function s(a,b,c,d,e,f,g){if(typeof c[f][e]=="string")return r(a,c[f][e],d[f][e]);g=Math.round(((d[f][e]-c[f][e])*a+c[f][e])*1e3)/1e3,!(e in i)&&(g+=b[f][e]||"px");return g}function r(a,b,c){var d=[],e,f;for(e=0;e<6;e++)from=Math.min(15,parseInt(b.charAt(e),16)),to=Math.min(15,parseInt(c.charAt(e),16)),f=Math.floor((to-from)*a+from),f=f>15?15:f<0?0:f,d[e]=f.toString(16);return"#"+d.join("")}function q(a,b){var c=a.length,d=[],e,f;for(e=0;e<c;++e)d[e]=[a[e][0],a[e][1]];for(f=1;f<c;++f)for(e=0;e<c-f;++e)d[e][0]=(1-b)*d[e][0]+b*d[parseInt(e+1,10)][0],d[e][1]=(1-b)*d[e][1]+b*d[parseInt(e+1,10)][1];return[d[0][0],d[0][1]]}function p(a,b,c,d,e,f){function l(a){var m=a-i;m>g||j?(f=isFinite(f)?f:1,j?k&&b(f):b(f),c&&c()):(isFinite(f)?b(h*d(m/g)+e):b(d(m/g)),o(l))}d=d||function(a){return Math.sin(a*Math.PI/2)};var g=a||1e3,h=f-e,i=+(new Date),j=0,k=0;o(l);return{stop:function(a){j=1,k=a}}}var d=b.documentElement,e=/^rgb\(|#/,f=/^([+\-])=([\d\.]+)/,g=/^(?:[\+\-]=)?\d+(?:\.\d+)?(%|in|cm|mm|em|ex|pt|pc|px)$/,h=function(){return typeof b.createElement("a").style.opacity!="undefined"}(),i={lineHeight:1,zoom:1,zIndex:1,opacity:1},j=b.defaultView&&b.defaultView.getComputedStyle?function(a,c){var d=null,e=b.defaultView.getComputedStyle(a,"");e&&(d=e[m(c)]);return a.style[c]||d}:d.currentStyle?function(a,b){b=m(b);if(b=="opacity"){var c=100;try{c=a.filters["DXImageTransform.Microsoft.Alpha"].opacity}catch(d){try{c=a.filters("alpha").opacity}catch(e){}}return c/100}var f=a.currentStyle?a.currentStyle[b]:null;return a.style[b]||f}:function(a,b){return a.style[m(b)]},k=function(a,b,c){return"#"+(1<<24|a<<16|b<<8|c).toString(16).slice(1)},l=function(a){var b=/rgba?\((\d+),\s*(\d+),\s*(\d+)/.exec(a);return(b?k(b[1],b[2],b[3]):a).replace(/#(\w)(\w)(\w)$/,"#$1$1$2$2$3$3")},m=function(a){return a.replace(/-(.)/g,function(a,b){return b.toUpperCase()})},n=function(a){return typeof a=="function"},o=function(){return c.requestAnimationFrame||c.webkitRequestAnimationFrame||c.mozRequestAnimationFrame||c.oRequestAnimationFrame||c.msRequestAnimationFrame||function(a){c.setTimeout(function(){a(+(new Date))},10)}}();u.tween=p,u.getStyle=j,u.bezier=q,typeof module!="undefined"&&module.exports&&(module.exports=u),a.morpheus=u}(this,document,window)
+!function(a,b,c){function u(a,b){var c=a?c=isFinite(a.length)?a:[a]:[],d,f=b.complete,h=b.duration,k=b.easing,l=b.bezier,r=[],u=[],v=[],w=[],x,y;delete b.complete,delete b.duration,delete b.easing,delete b.bezier,l&&(x=b.left,y=b.top,delete b.right,delete b.bottom,delete b.left,delete b.top);for(d=c.length;d--;){r[d]={},u[d]={},v[d]={};if(l){var z=j(c[d],"left"),A=j(c[d],"top"),B=[t(o(x)?x(c[d]):x||0,parseFloat(z)),t(o(y)?y(c[d]):y||0,parseFloat(A))];w[d]=o(l)?l(c[d],B):l,w[d].push(B),w[d].unshift([parseInt(z,10),parseInt(A,10)])}for(var C in b){var D=j(c[d],C),E,F=o(b[C])?b[C](c[d]):b[C];if(typeof F=="string"&&e.test(F)&&!e.test(D)){delete b[C];continue}r[d][C]=typeof F=="string"&&e.test(F)?m(D).slice(1):parseFloat(D),u[d][C]=typeof F=="string"&&F.charAt(0)=="#"?m(F).slice(1):t(F,parseFloat(D)),typeof F=="string"&&(E=F.match(g))&&(v[d][C]=E[1])}}return p(h,function(a,e,f){for(d=c.length;d--;){l&&(f=q(w[d],a),c[d].style.left=f[0]+"px",c[d].style.top=f[1]+"px");for(var g in b)e=s(a,v,r,u,g,d),g=="opacity"&&!i?c[d].style.filter="alpha(opacity="+e*100+")":c[d].style[n(g)]=e}},f,k)}function t(a,b,c,d,e){return(c=f.exec(a))?(e=parseFloat(c[2]))&&(d=b+e)&&c[1]=="+"?d:b-e:parseFloat(a)}function s(a,b,c,d,e,f,g){if(typeof c[f][e]=="string")return r(a,c[f][e],d[f][e]);g=Math.round(((d[f][e]-c[f][e])*a+c[f][e])*1e3)/1e3,!e in h&&(g+=b[f][e]||"px");return g}function r(a,b,c){var d=[],e,f;for(e=0;e<6;e++)from=Math.min(15,parseInt(b.charAt(e),16)),to=Math.min(15,parseInt(c.charAt(e),16)),f=Math.floor((to-from)*a+from),f=f>15?15:f<0?0:f,d[e]=f.toString(16);return"#"+d.join("")}function q(a,b){var c=a.length,d=[],e,f;for(e=0;e<c;++e)d[e]=[a[e][0],a[e][1]];for(f=1;f<c;++f)for(e=0;e<c-f;++e)d[e][0]=(1-b)*d[e][0]+b*d[parseInt(e+1,10)][0],d[e][1]=(1-b)*d[e][1]+b*d[parseInt(e+1,10)][1];return[d[0][0],d[0][1]]}function p(a,b,c,d,e,f){function m(a){var n=a-i;if(n>g||j){f=isFinite(f)?f:1,j?l&&b(f):b(f);return c&&c()}isFinite(f)?b(h*d(n/g)+e):b(d(n/g)),k(m)}d=d||function(a){return Math.sin(a*Math.PI/2)};var g=a||1e3,h=f-e,i=+(new Date),j=0,l=0;k(m);return{stop:function(a){j=1,l=a}}}function o(a){return typeof a=="function"}function n(a){return a.replace(/-(.)/g,function(a,b){return b.toUpperCase()})}function m(a){var b=/rgba?\((\d+),\s*(\d+),\s*(\d+)/.exec(a);return(b?l(b[1],b[2],b[3]):a).replace(/#(\w)(\w)(\w)$/,"#$1$1$2$2$3$3")}function l(a,b,c){return"#"+(1<<24|a<<16|b<<8|c).toString(16).slice(1)}var d=b.documentElement,e=/^rgb\(|#/,f=/^([+\-])=([\d\.]+)/,g=/^(?:[\+\-]=)?\d+(?:\.\d+)?(%|in|cm|mm|em|ex|pt|pc|px)$/,h={lineHeight:1,zoom:1,zIndex:1,opacity:1},i=function(){return typeof b.createElement("a").style.opacity!="undefined"}(),j=b.defaultView&&b.defaultView.getComputedStyle?function(a,c){var d=null,e=b.defaultView.getComputedStyle(a,"");e&&(d=e[n(c)]);return a.style[c]||d}:d.currentStyle?function(a,b){b=n(b);if(b=="opacity"){var c=100;try{c=a.filters["DXImageTransform.Microsoft.Alpha"].opacity}catch(d){try{c=a.filters("alpha").opacity}catch(e){}}return c/100}var f=a.currentStyle?a.currentStyle[b]:null;return a.style[b]||f}:function(a,b){return a.style[n(b)]},k=function(){return c.requestAnimationFrame||c.webkitRequestAnimationFrame||c.mozRequestAnimationFrame||c.oRequestAnimationFrame||c.msRequestAnimationFrame||function(a){c.setTimeout(function(){a(+(new Date))},10)}}();u.tween=p,u.getStyle=j,u.bezier=q,typeof module!="undefined"&&(module.exports=u),a.morpheus=u}(this,document,window)
View
2 package.json
@@ -1,7 +1,7 @@
{
"name": "morpheus",
"description": "A Brilliant Animator",
- "version": "0.4.3",
+ "version": "0.4.4",
"homepage": "https://github.com/ded/morpheus",
"author": "Dustin Diaz <@ded>",
"repository": {
View
233 src/morpheus.js
@@ -1,70 +1,45 @@
!function (context, doc, win) {
- var html = doc.documentElement,
- rgbOhex = /^rgb\(|#/,
- relVal = /^([+\-])=([\d\.]+)/,
- numUnit = /^(?:[\+\-]=)?\d+(?:\.\d+)?(%|in|cm|mm|em|ex|pt|pc|px)$/,
- // does this browser support the opacity property?
- opasity = function () {
- return typeof doc.createElement('a').style.opacity !== 'undefined';
- }(),
+ var html = doc.documentElement
+ , rgbOhex = /^rgb\(|#/
+ , relVal = /^([+\-])=([\d\.]+)/
+ , numUnit = /^(?:[\+\-]=)?\d+(?:\.\d+)?(%|in|cm|mm|em|ex|pt|pc|px)$/
// these elements do not require 'px'
- unitless = { lineHeight: 1, zoom: 1, zIndex: 1, opacity: 1 },
-
+ , unitless = { lineHeight: 1, zoom: 1, zIndex: 1, opacity: 1 }
+ // does this browser support the opacity property?
+ , opasity = function () {
+ return typeof doc.createElement('a').style.opacity !== 'undefined'
+ }()
// initial style is determined by the elements themselves
- getStyle = doc.defaultView && doc.defaultView.getComputedStyle ?
+ , getStyle = doc.defaultView && doc.defaultView.getComputedStyle ?
function (el, property) {
- var value = null;
- var computed = doc.defaultView.getComputedStyle(el, '');
- computed && (value = computed[camelize(property)]);
- return el.style[property] || value;
+ var value = null
+ , computed = doc.defaultView.getComputedStyle(el, '')
+ computed && (value = computed[camelize(property)])
+ return el.style[property] || value
} : html.currentStyle ?
function (el, property) {
- property = camelize(property);
+ property = camelize(property)
if (property == 'opacity') {
- var val = 100;
+ var val = 100
try {
- val = el.filters['DXImageTransform.Microsoft.Alpha'].opacity;
+ val = el.filters['DXImageTransform.Microsoft.Alpha'].opacity
} catch (e1) {
try {
- val = el.filters('alpha').opacity;
+ val = el.filters('alpha').opacity
} catch (e2) {}
}
- return val / 100;
+ return val / 100
}
- var value = el.currentStyle ? el.currentStyle[property] : null;
- return el.style[property] || value;
+ var value = el.currentStyle ? el.currentStyle[property] : null
+ return el.style[property] || value
} :
-
function (el, property) {
- return el.style[camelize(property)];
- },
-
- rgb = function (r, g, b) {
- return '#' + (1 << 24 | r << 16 | g << 8 | b).toString(16).slice(1);
- },
-
- // convert rgb and short hex to long hex
- toHex = function (c) {
- var m = /rgba?\((\d+),\s*(\d+),\s*(\d+)/.exec(c);
- return (m ? rgb(m[1], m[2], m[3]) : c)
- .replace(/#(\w)(\w)(\w)$/, '#$1$1$2$2$3$3'); // short to long
- },
-
- // change font-size => fontSize etc.
- camelize = function (s) {
- return s.replace(/-(.)/g, function (m, m1) {
- return m1.toUpperCase();
- });
- },
-
- fun = function (f) {
- return typeof f == 'function';
- },
-
- frame = function () {
+ return el.style[camelize(property)]
+ }
+ , frame = function () {
// native animation frames
// http://webstuff.nfshost.com/anim-timing/Overview.html
// http://dev.chromium.org/developers/design-documents/requestanimationframe-implementation
@@ -75,10 +50,32 @@
win.msRequestAnimationFrame ||
function (callback) {
win.setTimeout(function () {
- callback(+new Date());
- }, 10);
- };
- }();
+ callback(+new Date())
+ }, 10)
+ }
+ }()
+
+ function rgb(r, g, b) {
+ return '#' + (1 << 24 | r << 16 | g << 8 | b).toString(16).slice(1)
+ }
+
+ // convert rgb and short hex to long hex
+ function toHex(c) {
+ var m = /rgba?\((\d+),\s*(\d+),\s*(\d+)/.exec(c)
+ return (m ? rgb(m[1], m[2], m[3]) : c)
+ .replace(/#(\w)(\w)(\w)$/, '#$1$1$2$2$3$3') // short to long
+ }
+
+ // change font-size => fontSize etc.
+ function camelize(s) {
+ return s.replace(/-(.)/g, function (m, m1) {
+ return m1.toUpperCase()
+ })
+ }
+
+ function fun(f) {
+ return typeof f == 'function';
+ }
/**
* Core tween method that requests each frame
@@ -94,33 +91,32 @@
ease = ease || function (t) {
// default to a pleasant-to-the-eye easeOut (like native animations)
return Math.sin(t * Math.PI / 2)
- };
- var time = duration || 1000,
- diff = to - from,
- start = +new Date(),
- stop = 0,
- end = 0;
- frame(run);
+ }
+ var time = duration || 1000
+ , diff = to - from
+ , start = +new Date()
+ , stop = 0
+ , end = 0
+ frame(run)
function run(t) {
var delta = t - start;
if (delta > time || stop) {
- to = isFinite(to) ? to : 1;
- stop ? end && fn(to) : fn(to);
- done && done();
- return;
+ to = isFinite(to) ? to : 1
+ stop ? end && fn(to) : fn(to)
+ return done && done()
}
// if you don't specify a 'to' you can use tween as a generic delta tweener
// cool, eh?
isFinite(to) ?
fn((diff * ease(delta / time)) + from) :
- fn(ease(delta / time));
- frame(run);
+ fn(ease(delta / time))
+ frame(run)
}
return {
stop: function (jump) {
- stop = 1;
- end = jump; // jump to end of animation?
+ stop = 1
+ end = jump // jump to end of animation?
}
}
}
@@ -136,42 +132,42 @@
* @return [x, y]
*/
function bezier(points, pos) {
- var n = points.length, r = [], i, j;
+ var n = points.length, r = [], i, j
for (i = 0; i < n; ++i) {
- r[i] = [points[i][0], points[i][1]];
+ r[i] = [points[i][0], points[i][1]]
}
for (j = 1; j < n; ++j) {
for (i = 0; i < n - j; ++i) {
- r[i][0] = (1 - pos) * r[i][0] + pos * r[parseInt(i + 1, 10)][0];
- r[i][1] = (1 - pos) * r[i][1] + pos * r[parseInt(i + 1, 10)][1];
+ r[i][0] = (1 - pos) * r[i][0] + pos * r[parseInt(i + 1, 10)][0]
+ r[i][1] = (1 - pos) * r[i][1] + pos * r[parseInt(i + 1, 10)][1]
}
}
- return [r[0][0], r[0][1]];
+ return [r[0][0], r[0][1]]
}
// this gets you the next hex in line according to a 'position'
function nextColor(pos, start, finish) {
- var r = [], i, e;
+ var r = [], i, e
for (i = 0; i < 6; i++) {
- from = Math.min(15, parseInt(start.charAt(i), 16));
- to = Math.min(15, parseInt(finish.charAt(i), 16));
- e = Math.floor((to - from) * pos + from);
- e = e > 15 ? 15 : e < 0 ? 0 : e;
- r[i] = e.toString(16);
+ from = Math.min(15, parseInt(start.charAt(i), 16))
+ to = Math.min(15, parseInt(finish.charAt(i), 16))
+ e = Math.floor((to - from) * pos + from)
+ e = e > 15 ? 15 : e < 0 ? 0 : e
+ r[i] = e.toString(16)
}
- return '#' + r.join('');
+ return '#' + r.join('')
}
// this retreives the frame value within a sequence
function getTweenVal(pos, units, begin, end, k, i, v) {
if (typeof begin[i][k] == 'string') {
- return nextColor(pos, begin[i][k], end[i][k]);
+ return nextColor(pos, begin[i][k], end[i][k])
} else {
// round so we don't get crazy long floats
- v = Math.round(((end[i][k] - begin[i][k]) * pos + begin[i][k]) * 1000) / 1000;
+ v = Math.round(((end[i][k] - begin[i][k]) * pos + begin[i][k]) * 1000) / 1000
// some css properties don't require a unit (like zIndex, lineHeight, opacity)
- !(k in unitless) && (v += units[i][k] || 'px');
- return v;
+ if (!k in unitless) v += units[i][k] || 'px'
+ return v
}
}
@@ -180,7 +176,7 @@
return (m = relVal.exec(val)) ?
(i = parseFloat(m[2])) && (r = (start + i)) && m[1] == '+' ?
r : start - i :
- parseFloat(val);
+ parseFloat(val)
}
/**
@@ -198,17 +194,17 @@
* - this may also be a function that receives element to be animated. it must return a value
*/
function morpheus(elements, options) {
- var els = elements ? (els = isFinite(elements.length) ? elements : [elements]) : [], i,
- complete = options.complete,
- duration = options.duration,
- ease = options.easing,
- points = options.bezier,
- begin = [],
- end = [],
- units = [],
- bez = [],
- originalLeft,
- originalTop;
+ var els = elements ? (els = isFinite(elements.length) ? elements : [elements]) : [], i
+ , complete = options.complete
+ , duration = options.duration
+ , ease = options.easing
+ , points = options.bezier
+ , begin = []
+ , end = []
+ , units = []
+ , bez = []
+ , originalLeft
+ , originalTop
delete options.complete;
delete options.duration;
@@ -228,17 +224,17 @@
for (i = els.length; i--;) {
// record beginning and end states to calculate positions
- begin[i] = {};
- end[i] = {};
- units[i] = {};
+ begin[i] = {}
+ end[i] = {}
+ units[i] = {}
// are we 'moving'?
if (points) {
- var left = getStyle(els[i], 'left'),
- top = getStyle(els[i], 'top'),
- xy = [by(fun(originalLeft) ? originalLeft(els[i]) : originalLeft || 0, parseFloat(left)),
- by(fun(originalTop) ? originalTop(els[i]) : originalTop || 0, parseFloat(top))];
+ var left = getStyle(els[i], 'left')
+ , top = getStyle(els[i], 'top')
+ , xy = [by(fun(originalLeft) ? originalLeft(els[i]) : originalLeft || 0, parseFloat(left)),
+ by(fun(originalTop) ? originalTop(els[i]) : originalTop || 0, parseFloat(top))]
bez[i] = fun(points) ? points(els[i], xy) : points;
bez[i].push(xy);
@@ -249,8 +245,8 @@
}
for (var k in options) {
- var v = getStyle(els[i], k), unit,
- tmp = fun(options[k]) ? options[k](els[i]) : options[k]
+ var v = getStyle(els[i], k), unit
+ , tmp = fun(options[k]) ? options[k](els[i]) : options[k]
if (typeof tmp == 'string' &&
rgbOhex.test(tmp) &&
!rgbOhex.test(v)) {
@@ -266,7 +262,7 @@
toHex(tmp).slice(1) :
by(tmp, parseFloat(v));
// record original unit
- typeof tmp == 'string' && (unit = tmp.match(numUnit)) && (units[i][k] = unit[1]);
+ typeof tmp == 'string' && (unit = tmp.match(numUnit)) && (units[i][k] = unit[1])
}
}
// ONE TWEEN TO RULE THEM ALL
@@ -275,27 +271,26 @@
// fast for animating
for (i = els.length; i--;) {
if (points) {
- xy = bezier(bez[i], pos);
- els[i].style.left = xy[0] + 'px';
- els[i].style.top = xy[1] + 'px';
+ xy = bezier(bez[i], pos)
+ els[i].style.left = xy[0] + 'px'
+ els[i].style.top = xy[1] + 'px'
}
for (var k in options) {
- v = getTweenVal(pos, units, begin, end, k, i);
+ v = getTweenVal(pos, units, begin, end, k, i)
k == 'opacity' && !opasity ?
(els[i].style.filter = 'alpha(opacity=' + (v * 100) + ')') :
- (els[i].style[camelize(k)] = v);
+ (els[i].style[camelize(k)] = v)
}
}
- }, complete, ease);
+ }, complete, ease)
}
// expose useful methods
- morpheus.tween = tween;
- morpheus.getStyle = getStyle;
- morpheus.bezier = bezier;
+ morpheus.tween = tween
+ morpheus.getStyle = getStyle
+ morpheus.bezier = bezier
- typeof module !== 'undefined' && module.exports &&
- (module.exports = morpheus);
- context['morpheus'] = morpheus;
+ if (typeof module !== 'undefined') module.exports = morpheus
+ context['morpheus'] = morpheus
-}(this, document, window);
+}(this, document, window)

0 comments on commit b91f915

Please sign in to comment.
Something went wrong with that request. Please try again.