Update kute.js
Improvements according to Dav's suggestion https://github.com/thednp/kute.js/pull/11
This commit is contained in:
thednp
parent
976fc30493
commit
934d666859
342
kute.js
342
kute.js
|
|
@ -4,23 +4,24 @@
|
|||
*/
|
||||
|
||||
(function (root, factory) {
|
||||
if (typeof define === 'function' && define.amd) {
|
||||
if (typeof define === 'function' && define.amd) {
|
||||
define([], factory); // AMD. Register as an anonymous module.
|
||||
} else if (typeof exports == 'object') {
|
||||
module.exports = factory(); // Node, not strict CommonJS
|
||||
} else {
|
||||
// Browser globals
|
||||
} else if (typeof exports == 'object') {
|
||||
module.exports = factory(); // Node, not strict CommonJS
|
||||
} else {
|
||||
// Browser globals
|
||||
root.KUTE = root.KUTE || factory();
|
||||
}
|
||||
}(this, function () {
|
||||
var K = K || {}, _tws = [], _t, _stk = false, // _stoppedTick // _tweens // KUTE, _tween, _tick,
|
||||
"use strict";
|
||||
var K = K || {}, _tws = [], _t, // _tweens // KUTE, _tick,
|
||||
_pf = getPrefix(), // prefix
|
||||
_rafR = _rafR || ((!('requestAnimationFrame' in window)) ? true : false), // is prefix required for requestAnimationFrame
|
||||
_pfT = _pfT || ((!('transform' in document.getElementsByTagName('div')[0].style)) ? true : false), // is prefix required for transform
|
||||
_pfB = _pfB || ((!('border-radius' in document.getElementsByTagName('div')[0].style)) ? true : false), // is prefix required for border-radius
|
||||
_tch = _tch || (('ontouchstart' in window || navigator.msMaxTouchPoints) || false), // support Touch?
|
||||
_ev = _ev || (_tch ? 'touchstart' : 'mousewheel'), //event to prevent on scroll
|
||||
|
||||
|
||||
_bd = document.body,
|
||||
_htm = document.getElementsByTagName('HTML')[0],
|
||||
_sct = (/webkit/i.test(navigator.userAgent) || document.compatMode == 'BackCompat' ? _bd : _htm),
|
||||
|
|
@ -39,16 +40,16 @@
|
|||
_brbr = _brbr || _pfB ? _pf + 'BorderBottomRightRadius' : 'borderBottomRightRadius',
|
||||
_raf = _raf || _rafR ? window[_pf + 'RequestAnimationFrame'] : window['requestAnimationFrame'],
|
||||
_caf = _caf || _rafR ? window[_pf + 'CancelAnimationFrame'] : window['cancelAnimationFrame'],
|
||||
|
||||
|
||||
//supported properties
|
||||
_cls = ['color', 'backgroundColor', 'borderColor', 'borderTopColor', 'borderRightColor', 'borderBottomColor', 'borderLeftColor'], // colors 'hex', 'rgb', 'rgba' -- #fff / rgb(0,0,0) / rgba(0,0,0,0)
|
||||
_sc = ['scrollTop', 'scroll'], //scroll, it has no default value, it's calculated on tween start
|
||||
_clp = ['clip'], // clip
|
||||
_op = ['opacity'], // opacity
|
||||
_rd = ['borderRadius', 'borderTopLeftRadius', 'borderTopRightRadius', 'borderBottomLeftRadius', 'borderBottomRightRadius'], // border radius px/any
|
||||
_bm = ['top', 'left', 'right', 'bottom',
|
||||
'width', 'height', 'minWidth', 'minHeight', 'maxWidth', 'maxHeight',
|
||||
'padding', 'margin', 'paddingTop','paddingBottom', 'paddingLeft', 'paddingRight', 'marginTop','marginBottom', 'marginLeft', 'marginRight',
|
||||
_bm = ['top', 'left', 'right', 'bottom',
|
||||
'width', 'height', 'minWidth', 'minHeight', 'maxWidth', 'maxHeight',
|
||||
'padding', 'margin', 'paddingTop','paddingBottom', 'paddingLeft', 'paddingRight', 'marginTop','marginBottom', 'marginLeft', 'marginRight',
|
||||
'borderWidth', 'borderTopWidth', 'borderRightWidth', 'borderBottomWidth', 'borderLeftWidth'], // dimensions / box model
|
||||
_tp = ['fontSize','lineHeight','letterSpacing'], // text properties
|
||||
_bg = ['backgroundPosition'], // background position
|
||||
|
|
@ -64,22 +65,22 @@
|
|||
if (_cls.indexOf(p) !== -1){
|
||||
_d[p] = 'rgba(0,0,0,0)'; // _d[p] = {r:0,g:0,b:0,a:1};
|
||||
} else if ( _rd.indexOf(p) !== -1 || _bm.indexOf(p) !== -1 || _tp.indexOf(p) !== -1) {
|
||||
_d[p] = 0;
|
||||
_d[p] = 0;
|
||||
} else if ( _bg.indexOf(p) !== -1 ){
|
||||
_d[p] = [50,50];
|
||||
} else if ( p === 'clip' ){
|
||||
_d[p] = [0,0,0,0];
|
||||
_d[p] = [0,0,0,0];
|
||||
} else if ( p === 'translate3d' ){
|
||||
_d[p] = [0,0,0];
|
||||
} else if ( p === 'translate' ){
|
||||
_d[p] = [0,0];
|
||||
} else if ( p === 'rotate' || /X|Y|Z/.test(p) ){
|
||||
_d[p] = 0;
|
||||
_d[p] = 0;
|
||||
} else if ( p === 'scale' || p === 'opacity' ){
|
||||
_d[p] = 1;
|
||||
_d[p] = 1;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//more internals
|
||||
K.getAll = function () { return _tws; };
|
||||
K.removeAll = function () { _tws = []; };
|
||||
|
|
@ -94,28 +95,23 @@
|
|||
// internal ticker
|
||||
K.t = function (t) {
|
||||
_t = _raf(K.t);
|
||||
var i = 0, l = _tws.length;
|
||||
while ( i < l ) {
|
||||
if (!_tws[i]) { return false; }
|
||||
var i = 0;
|
||||
while ( i < _tws.length ) {
|
||||
if (_tws[i].u(t)) {
|
||||
i++;
|
||||
} else {
|
||||
_tws.splice(i, 1);
|
||||
}
|
||||
}
|
||||
_stk = false;
|
||||
return true;
|
||||
};
|
||||
|
||||
|
||||
// internal stopTick
|
||||
K.s = function () {
|
||||
if ( _stk === false ) {
|
||||
_caf(_t);
|
||||
_stk = true;
|
||||
_t = null;
|
||||
}
|
||||
K.s = function () {
|
||||
_caf(_t);
|
||||
_t = null;
|
||||
};
|
||||
|
||||
|
||||
//main methods
|
||||
K.to = function (el, to, o) {
|
||||
if ( o === undefined ) { o = {}; }
|
||||
|
|
@ -136,8 +132,8 @@
|
|||
var _o = o;
|
||||
|
||||
_o.easing = _o && K.pe(_o.easing) || K.Easing.linear;
|
||||
|
||||
var _vS = K.prP(f, false),
|
||||
|
||||
var _vS = K.prP(f, false),
|
||||
_vE = K.prP(to, true),
|
||||
_tw = new K.Tween(_el, _vS, _vE, _o);
|
||||
return _tw;
|
||||
|
|
@ -155,12 +151,12 @@
|
|||
|
||||
var _start = w._vS[p],
|
||||
_end = w._vE[p],
|
||||
v1 = _start.value,
|
||||
v2 = _end.value,
|
||||
v1 = w._vS[p].value,
|
||||
v2 = w._vE[p].value,
|
||||
tv = v1 + (v2 - v1) * v,
|
||||
u = _end.unit,
|
||||
// checking array on every frame takes time so let's cache these
|
||||
cls = _cls.indexOf(p) !== -1,
|
||||
cls = _cls.indexOf(p) !== -1,
|
||||
bm = _tp.indexOf(p) !== -1 || _bm.indexOf(p) !== -1,
|
||||
rd = _rd.indexOf(p) !== -1 && !_isIE8,
|
||||
sc = _sc.indexOf(p) !== -1,
|
||||
|
|
@ -168,7 +164,7 @@
|
|||
clp = _clp.indexOf(p) !== -1,
|
||||
op = _op.indexOf(p) !== -1,
|
||||
tf = p === 'transform' && !_isIE8;
|
||||
|
||||
|
||||
//process styles by property / property type
|
||||
if ( rd ) {
|
||||
if (p === 'borderRadius') {
|
||||
|
|
@ -182,52 +178,52 @@
|
|||
} else if (p === 'borderBottomRightRadius') {
|
||||
css[_brbr] = tv + u;
|
||||
}
|
||||
|
||||
|
||||
} else if (tf) {
|
||||
var _tS = '', tP, rps, pps = 'perspective('+w._pp+'px) '; //transform style & property
|
||||
|
||||
|
||||
for (tP in _end) {
|
||||
var t1 = _start[tP], t2 = _end[tP];
|
||||
rps = _3d.indexOf(tP) !== -1 && !_isIE;
|
||||
rps = _3d.indexOf(tP) !== -1 && !_isIE;
|
||||
|
||||
if ( tP === 'translate' ) {
|
||||
var tls = '', ts = {}, ax;
|
||||
|
||||
|
||||
for (ax in t2){
|
||||
var x1 = t1[ax].value || 0, x2 = t2[ax].value || 0, xu = t2[ax].unit || 'px';
|
||||
ts[ax] = x1===x2 ? x2+xu : (x1 + ( x2 - x1 ) * v) + xu;
|
||||
ts[ax] = x1===x2 ? x2+xu : (x1 + ( x2 - x1 ) * v) + xu;
|
||||
}
|
||||
tls = t2.x ? 'translate(' + ts.x + ',' + ts.y + ')' :
|
||||
'translate3d(' + ts.translateX + ',' + ts.translateY + ',' + ts.translateZ + ')';
|
||||
|
||||
_tS = (_tS === '') ? tls : (tls + ' ' + _tS);
|
||||
'translate3d(' + ts.translateX + ',' + ts.translateY + ',' + ts.translateZ + ')';
|
||||
|
||||
_tS = (_tS === '') ? tls : (tls + ' ' + _tS);
|
||||
} else if ( tP === 'rotate' ) {
|
||||
var rt = '', rS = {}, rx;
|
||||
|
||||
|
||||
for ( rx in t2 ){
|
||||
if ( t1[rx] ) {
|
||||
var a1 = t1[rx].value, a2 = t2[rx].value, au = t2[rx].unit||'deg',
|
||||
var a1 = t1[rx].value, a2 = t2[rx].value, au = t2[rx].unit||'deg',
|
||||
av = a1 + (a2 - a1) * v;
|
||||
rS[rx] = rx ==='z' ? 'rotate('+av+au+')' : rx + '(' + av + au + ') ';
|
||||
}
|
||||
}
|
||||
rt = t2.z ? rS.z : (rS.rotateX||'') + (rS.rotateY||'') + (rS.rotateZ||'');
|
||||
|
||||
_tS = (_tS === '') ? rt : (_tS + ' ' + rt);
|
||||
|
||||
_tS = (_tS === '') ? rt : (_tS + ' ' + rt);
|
||||
} else if (tP==='skew') {
|
||||
var sk = '', sS = {};
|
||||
for ( var sx in t2 ){
|
||||
if ( t1[sx] ) {
|
||||
var s1 = t1[sx].value, s2 = t2[sx].value, su = t2[sx].unit||'deg',
|
||||
var s1 = t1[sx].value, s2 = t2[sx].value, su = t2[sx].unit||'deg',
|
||||
sv = s1 + (s2 - s1) * v;
|
||||
sS[sx] = sx + '(' + sv + su + ') ';
|
||||
}
|
||||
}
|
||||
sk = (sS.skewX||'') + (sS.skewY||'');
|
||||
_tS = (_tS === '') ? sk : (_tS + ' ' + sk);
|
||||
_tS = (_tS === '') ? sk : (_tS + ' ' + sk);
|
||||
} else if (tP === 'scale') {
|
||||
var sc1 = t1.value, sc2 = t2.value,
|
||||
s = sc1 + (sc2 - sc1) * v, scS = tP + '(' + s + ')';
|
||||
s = sc1 + (sc2 - sc1) * v, scS = tP + '(' + s + ')';
|
||||
_tS = (_tS === '') ? scS : (_tS + ' ' + scS);
|
||||
}
|
||||
}
|
||||
|
|
@ -237,45 +233,45 @@
|
|||
|
||||
for (c in v2) {
|
||||
if ( c !== 'a' ){
|
||||
_c[c] = parseInt(v1[c] + (v2[c] - v1[c]) * v)||0;
|
||||
_c[c] = parseInt(v1[c] + (v2[c] - v1[c]) * v)||0;
|
||||
} else {
|
||||
_c[c] = (v1[c] && v2[c]) ? parseFloat(v1[c] + (v2[c] - v1[c]) * v) : null;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
if ( w._hex ) {
|
||||
css[p] = K.rth( parseInt(_c.r), parseInt(_c.g), parseInt(_c.b) );
|
||||
} else {
|
||||
css[p] = !_c.a || _isIE8 ? 'rgb(' + _c.r + ',' + _c.g + ',' + _c.b + ')' : 'rgba(' + _c.r + ',' + _c.g + ',' + _c.b + ',' + _c.a + ')';
|
||||
css[p] = !_c.a || _isIE8 ? 'rgb(' + _c.r + ',' + _c.g + ',' + _c.b + ')' : 'rgba(' + _c.r + ',' + _c.g + ',' + _c.b + ',' + _c.a + ')';
|
||||
}
|
||||
} else if ( bm ) {
|
||||
css[p] = tv+u;
|
||||
} else if ( sc ) {
|
||||
} else if ( sc ) {
|
||||
ets.scrollTop = v1 + ( v2 - v1 ) * v;
|
||||
} else if ( bg ) {
|
||||
} else if ( bg ) {
|
||||
var px1 = _start.x.v, px2 = _end.x.v, py1 = _start.y.v, py2 = _end.y.v,
|
||||
px = (px1 + ( px2 - px1 ) * v), pxu = '%',
|
||||
py = (py1 + ( py2 - py1 ) * v), pyu = '%';
|
||||
py = (py1 + ( py2 - py1 ) * v), pyu = '%';
|
||||
css[p] = px + pxu + ' ' + py + pyu;
|
||||
} else if ( clp ) {
|
||||
var h = 0, cl = [];
|
||||
for (h;h<4;h++){
|
||||
var c1 = _start[h].v, c2 = _end[h].v, cu = _end[h].u || 'px';
|
||||
cl[h] = ((c1 + ( c2 - c1 ) * v)) + cu;
|
||||
}
|
||||
}
|
||||
css[p] = 'rect('+cl+')';
|
||||
} else if ( op ) {
|
||||
css[opp] = !_isIE8 ? tv : "alpha(opacity=" + parseInt(tv*100) + ")";
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
K.perspective = function (l,w) {
|
||||
if ( w._ppo !== undefined ) { l.style[_pfo] = w._ppo; } // element perspective origin
|
||||
if ( w._ppp !== undefined ) { l.parentNode.style[_pfp] = w._ppp + 'px'; } // parent perspective
|
||||
if ( w._ppp !== undefined ) { l.parentNode.style[_pfp] = w._ppp + 'px'; } // parent perspective
|
||||
if ( w._pppo !== undefined ) { l.parentNode.style[_pfo] = w._pppo; } // parent perspective origin
|
||||
};
|
||||
|
||||
|
||||
K.Tween = function (_el, _vS, _vE, _o) {
|
||||
this._el = this._el || _el; // element animation is applied to
|
||||
this._dr = this._dr || _o&&_o.duration || 700; //duration
|
||||
|
|
@ -290,11 +286,11 @@
|
|||
this._dl = this._dl || _o&&_o.delay || 0; //delay
|
||||
this._sT = null; // startTime
|
||||
this.paused = false; //_paused
|
||||
this._pST = null; //_pauseStartTime
|
||||
this._pp = this._pp || _o.perspective; // perspective
|
||||
this._ppo = this._ppo || _o.perspectiveOrigin; // perspective origin
|
||||
this._ppp = this._ppp || _o.parentPerspective; // parent perspective
|
||||
this._pppo = this._pppo || _o.parentPerspectiveOrigin; // parent perspective origin
|
||||
this._pST = null; //_pauseStartTime
|
||||
this._pp = this._pp || _o.perspective; // perspective
|
||||
this._ppo = this._ppo || _o.perspectiveOrigin; // perspective origin
|
||||
this._ppp = this._ppp || _o.parentPerspective; // parent perspective
|
||||
this._pppo = this._pppo || _o.parentPerspectiveOrigin; // parent perspective origin
|
||||
this._rpr = this._rpr || _o.rpr || false; // internal option to process inline/computed style at start instead of init true/false
|
||||
this._hex = this._hex || _o.keepHex || false; // option to keep hex for color tweens true/false
|
||||
this._e = this._e || _o.easing; // _easing
|
||||
|
|
@ -305,23 +301,23 @@
|
|||
this._cC = _o&&_o.complete || null; // _on CompleteCallback
|
||||
this._pC = _o&&_o.pause || null; // _on PauseCallback
|
||||
this._rC = _o&&_o.play || null; // _on ResumeCallback
|
||||
this._stC = _o&&_o.stop || null; // _on StopCallback
|
||||
this._stC = _o&&_o.stop || null; // _on StopCallback
|
||||
this.repeat = this._r; // we cache the number of repeats to be able to put it back after all cycles finish
|
||||
};
|
||||
|
||||
|
||||
var w = K.Tween.prototype;
|
||||
|
||||
|
||||
w.start = function (t) {
|
||||
this.scrollIn();
|
||||
var f = {};
|
||||
|
||||
|
||||
K.perspective(this._el,this); // apply the perspective
|
||||
|
||||
|
||||
if ( this._rpr ) { // on start we reprocess the valuesStart for TO() method
|
||||
f = this.prS();
|
||||
this._vS = {};
|
||||
this._vS = K.prP(f,false);
|
||||
|
||||
|
||||
for ( p in this._vS ) {
|
||||
if ( p === 'transform' && (p in this._vE) ){
|
||||
for ( var sp in this._vS[p]) {
|
||||
|
|
@ -336,10 +332,10 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
if ( 'value' in this._vS[p][sp] && (!('value' in this._vE[p][sp])) ) { // 2nd level
|
||||
for ( var spp in this._vS[p][sp] ) { // scale
|
||||
if (!(spp in this._vE[p][sp])) {
|
||||
this._vE[p][sp][spp] = this._vS[p][sp][spp]; // spp = unit | value
|
||||
if ( 'value' in this._vS[p][sp] && (!('value' in this._vE[p][sp])) ) { // 2nd level
|
||||
for ( var spp1 in this._vS[p][sp] ) { // scale
|
||||
if (!(spp1 in this._vE[p][sp])) {
|
||||
this._vE[p][sp][spp1] = this._vS[p][sp][spp1]; // spp = unit | value
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -347,12 +343,12 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
for ( p in this._vE ) {
|
||||
this._vSR[p] = this._vS[p];
|
||||
this._vSR[p] = this._vS[p];
|
||||
}
|
||||
|
||||
// now it's a good time to start
|
||||
// now it's a good time to start
|
||||
K.add(this);
|
||||
this.playing = true;
|
||||
this.paused = false;
|
||||
|
|
@ -362,7 +358,7 @@
|
|||
if (!_t) K.t();
|
||||
return this;
|
||||
};
|
||||
|
||||
|
||||
//main worker, doing update on tick
|
||||
w.u = function(t) {
|
||||
t = t || window.performance.now();
|
||||
|
|
@ -375,49 +371,49 @@
|
|||
|
||||
var e = ( t - this._sT ) / this._dr; //elapsed
|
||||
e = e > 1 ? 1 : e;
|
||||
|
||||
|
||||
//render the CSS update
|
||||
K.r(this,this._e(e));
|
||||
|
||||
|
||||
if (this._uC) { this._uC.call(); }
|
||||
|
||||
if (e === 1) {
|
||||
if (e === 1) {
|
||||
if (this._r > 0) {
|
||||
if ( this._r !== Infinity ) { this._r--; }
|
||||
|
||||
if ( this._r !== Infinity ) { this._r--; }
|
||||
|
||||
if (this._y) { this.reversed = !this.reversed; this.reverse(); } // handle yoyo
|
||||
|
||||
|
||||
this._sT = (this._y && !this.reversed) ? t + this._rD : t; //set the right time for delay
|
||||
return true;
|
||||
return true;
|
||||
} else {
|
||||
|
||||
|
||||
if (this._cC) { this._cC.call(); }
|
||||
|
||||
//stop preventing scroll when scroll tween finished
|
||||
|
||||
//stop preventing scroll when scroll tween finished
|
||||
this.scrollOut();
|
||||
var i = 0, ctl = this._cT.length;
|
||||
for (i; i < ctl; i++) {
|
||||
this._cT[i].start(this._sT + this._dr);
|
||||
}
|
||||
|
||||
|
||||
//stop ticking when finished
|
||||
this.close();
|
||||
this.close();
|
||||
return false;
|
||||
}
|
||||
}
|
||||
return true;
|
||||
};
|
||||
|
||||
|
||||
w.stop = function () {
|
||||
if (!this.paused && this.playing) {
|
||||
K.remove(this);
|
||||
this.playing = false;
|
||||
this.paused = false;
|
||||
this.scrollOut();
|
||||
|
||||
|
||||
if (this._stC !== null) {
|
||||
this._stC.call();
|
||||
}
|
||||
}
|
||||
this.stopChainedTweens();
|
||||
this.close();
|
||||
}
|
||||
|
|
@ -427,8 +423,8 @@
|
|||
w.pause = function() {
|
||||
if (!this.paused && this.playing) {
|
||||
K.remove(this);
|
||||
this.paused = true;
|
||||
this._pST = window.performance.now();
|
||||
this.paused = true;
|
||||
this._pST = window.performance.now();
|
||||
if (this._pC !== null) {
|
||||
this._pC.call();
|
||||
}
|
||||
|
|
@ -436,13 +432,13 @@
|
|||
return this;
|
||||
};
|
||||
|
||||
w.play = function () {
|
||||
w.play = function () {
|
||||
if (this.paused && this.playing) {
|
||||
this.paused = false;
|
||||
if (this._rC !== null) {
|
||||
this._rC.call();
|
||||
}
|
||||
this._sT += window.performance.now() - this._pST;
|
||||
}
|
||||
this._sT += window.performance.now() - this._pST;
|
||||
K.add(this);
|
||||
if (!_t) K.t(); // restart ticking if stopped
|
||||
}
|
||||
|
|
@ -456,13 +452,13 @@
|
|||
for (var p in this._vE) {
|
||||
var tmp = this._vSR[p];
|
||||
this._vSR[p] = this._vE[p];
|
||||
this._vE[p] = tmp;
|
||||
this._vS[p] = this._vSR[p];
|
||||
this._vE[p] = tmp;
|
||||
this._vS[p] = this._vSR[p];
|
||||
}
|
||||
}
|
||||
return this;
|
||||
return this;
|
||||
};
|
||||
|
||||
|
||||
w.chain = function () { this._cT = arguments; return this; };
|
||||
|
||||
w.stopChainedTweens = function () {
|
||||
|
|
@ -471,14 +467,14 @@
|
|||
this._cT[i].stop();
|
||||
}
|
||||
};
|
||||
|
||||
w.scrollOut = function(){ //prevent scroll when tweening scroll
|
||||
|
||||
w.scrollOut = function(){ //prevent scroll when tweening scroll
|
||||
if ( 'scroll' in this._vE || 'scrollTop' in this._vE ) {
|
||||
this.removeListeners();
|
||||
document.body.removeAttribute('data-tweening');
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
w.scrollIn = function(){
|
||||
if ( 'scroll' in this._vE || 'scrollTop' in this._vE ) {
|
||||
if (!document.body.getAttribute('data-tweening') ) {
|
||||
|
|
@ -487,7 +483,7 @@
|
|||
}
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
w.addListeners = function () {
|
||||
document.addEventListener(_ev, K.preventScroll, false);
|
||||
};
|
||||
|
|
@ -495,57 +491,57 @@
|
|||
w.removeListeners = function () {
|
||||
document.removeEventListener(_ev, K.preventScroll, false);
|
||||
};
|
||||
|
||||
|
||||
w.prS = function () { //prepare valuesStart for .to() method
|
||||
var f = {}, el = this._el, to = this._vS, cs = this.gIS('transform'), deg = ['rotate','skew'], ax = ['X','Y','Z'];
|
||||
|
||||
|
||||
for (var p in to){
|
||||
if ( _tf.indexOf(p) !== -1 ) {
|
||||
var r2d = (p === 'rotate' || p === 'translate' || p === 'scale');
|
||||
if ( /translate/.test(p) && p !== 'translate' ) {
|
||||
f['translate3d'] = cs['translate3d'] || _d[p];
|
||||
f['translate3d'] = cs['translate3d'] || _d[p];
|
||||
} else if ( r2d ) { // 2d transforms
|
||||
f[p] = cs[p] || _d[p];
|
||||
f[p] = cs[p] || _d[p];
|
||||
} else if ( !r2d && /rotate|skew/.test(p) ) { // all angles
|
||||
for (var d=0; d<2; d++) {
|
||||
for (var a = 0; a<3; a++) {
|
||||
var s = deg[d]+ax[a];
|
||||
var s = deg[d]+ax[a];
|
||||
if (_tf.indexOf(s) !== -1 && (s in to) ) { f[s] = cs[s] || _d[s]; }
|
||||
}
|
||||
}
|
||||
}
|
||||
} else {
|
||||
if ( _sc.indexOf(p) === -1 ) {
|
||||
if (p === 'opacity' && _isIE8 ) { // handle IE8 opacity
|
||||
var co = this.gCS('filter');
|
||||
if ( _sc.indexOf(p) === -1 ) {
|
||||
if (p === 'opacity' && _isIE8 ) { // handle IE8 opacity
|
||||
var co = this.gCS('filter');
|
||||
f['opacity'] = typeof co === 'number' ? co : _d['opacity'];
|
||||
} else {
|
||||
f[p] = this.gCS(p) || _d[p];
|
||||
}
|
||||
} else {
|
||||
f[p] = (el === null || el === undefined) ? (window.pageYOffset || _sct.scrollTop) : el.scrollTop;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
for ( var p in cs ){ // also add to _vS values from previous tweens
|
||||
for ( var p in cs ){ // also add to _vS values from previous tweens
|
||||
if ( _tf.indexOf(p) !== -1 && (!( p in to )) ) {
|
||||
f[p] = cs[p] || _d[p];
|
||||
}
|
||||
f[p] = cs[p] || _d[p];
|
||||
}
|
||||
}
|
||||
return f;
|
||||
};
|
||||
|
||||
return f;
|
||||
};
|
||||
|
||||
w.gIS = function(p) { // gIS = get transform style for element from cssText for .to() method, the sp is for transform property
|
||||
if (!this._el) return; // if the scroll applies to `window` it returns as it has no styling
|
||||
var l = this._el, cst = l.style.cssText,//the cssText
|
||||
var l = this._el, cst = l.style.cssText,//the cssText
|
||||
trsf = {}; //the transform object
|
||||
// if we have any inline style in the cssText attribute, usually it has higher priority
|
||||
var css = cst.replace(/\s/g,'').split(';'), i=0, csl = css.length;
|
||||
var css = cst.replace(/\s/g,'').split(';'), i=0, csl = css.length;
|
||||
for ( i; i<csl; i++ ){
|
||||
if ( /transform/.test(css[i])) {
|
||||
var tps = css[i].split(':')[1].split(')'), k=0, tpl = tps.length; //all transform properties
|
||||
var tps = css[i].split(':')[1].split(')'), k=0, tpl = tps.length; //all transform properties
|
||||
for ( k; k< tpl; k++){
|
||||
var tp = tps[k].split('('); //each transform property
|
||||
var tp = tps[k].split('('); //each transform property
|
||||
if ( tp[0] !== '' && _tf.indexOf(tp) ){
|
||||
trsf[tp[0]] = /translate3d/.test(tp[0]) ? tp[1].split(',') : tp[1];
|
||||
}
|
||||
|
|
@ -554,7 +550,7 @@
|
|||
}
|
||||
return trsf;
|
||||
};
|
||||
|
||||
|
||||
w.gCS = function (p) { // gCS = get style property for element from computedStyle for .to() method
|
||||
var el = this._el, cs = window.getComputedStyle(el) || el.currentStyle, //the computed style
|
||||
ppp = ( !_isIE8 && _pfT && ( /transform|Radius/.test(p) ) ) ? ('-'+ _pf.toLowerCase()+'-'+p) : p, //prefixed property for CSS match
|
||||
|
|
@ -569,26 +565,26 @@
|
|||
return si;
|
||||
} else {
|
||||
return s;
|
||||
}
|
||||
} else {
|
||||
}
|
||||
} else {
|
||||
return _d[p];
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
w.close = function () {
|
||||
var self = this;
|
||||
setTimeout(function(){
|
||||
var i = _tws.indexOf(self);
|
||||
if (i === _tws.length-1) { K.s(); }
|
||||
if (i === _tws.length-1) { K.s(); }
|
||||
if (self.repeat > 0) { self._r = self.repeat; }
|
||||
if (self._y && self.reversed===true) { self.reverse(); self.reversed = false; }
|
||||
self.playing = false;
|
||||
},100)
|
||||
};
|
||||
|
||||
|
||||
// process properties
|
||||
K.prP = function (t, e) { // process tween properties for .fromTo() method
|
||||
K.prP = function (t, e) { // process tween properties for .fromTo() method
|
||||
var _st = {},
|
||||
tr = e === true ? _tfE : _tfS,
|
||||
tl = e === true ? _tlE : _tlS,
|
||||
|
|
@ -598,14 +594,14 @@
|
|||
|
||||
for (var x in t) {
|
||||
if (_tf.indexOf(x) !== -1) {
|
||||
|
||||
|
||||
if (x !== 'translate' && /translate/.test(x)) { //process translate3d
|
||||
var ta = ['X', 'Y', 'Z'], f = 0; //coordinates // translate[x] = pp(x, t[x]);
|
||||
var ta = ['X', 'Y', 'Z'], f = 0; //coordinates // translate[x] = pp(x, t[x]);
|
||||
|
||||
for (f; f < 3; f++) {
|
||||
for (f; f < 3; f++) {
|
||||
var a = ta[f];
|
||||
if ( /3d/.test(x) ) {
|
||||
tl['translate' + a] = K.pp('translate' + a, t[x][f]);
|
||||
tl['translate' + a] = K.pp('translate' + a, t[x][f]);
|
||||
} else {
|
||||
tl['translate' + a] = ('translate' + a in t) ? K.pp('translate' + a, t['translate' + a]) : { value: 0, unit: 'px' };
|
||||
}
|
||||
|
|
@ -613,15 +609,15 @@
|
|||
|
||||
tr['translate'] = tl;
|
||||
} else if ( x !== 'rotate' && /rotate|skew/.test(x)) { //process rotation
|
||||
var ap = /rotate/.test(x) ? 'rotate' : 'skew', ra = ['X', 'Y', 'Z'], r = 0,
|
||||
_rt = {}, _sk = {}, rt = ap === 'rotate' ? _rt : _sk;
|
||||
var ap = /rotate/.test(x) ? 'rotate' : 'skew', ra = ['X', 'Y', 'Z'], r = 0,
|
||||
_rt = {}, _sk = {}, rt = ap === 'rotate' ? _rt : _sk;
|
||||
for (r; r < 3; r++) {
|
||||
var v = ra[r];
|
||||
if ( t[ap+v] !== undefined && x !== 'skewZ' ) {
|
||||
rt[ap+v] = K.pp(ap + v, t[ap+v]);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
tr[ap] = rt;
|
||||
} else if ( x === 'translate' || x === 'rotate' || x === 'scale' ) { //process 2d translation / rotation
|
||||
tr[x] = K.pp(x, t[x]);
|
||||
|
|
@ -635,13 +631,13 @@
|
|||
}
|
||||
return _st;
|
||||
};
|
||||
|
||||
// _cls _sc _op _bm _tp _bg _tf
|
||||
|
||||
// _cls _sc _op _bm _tp _bg _tf
|
||||
K.pp = function(p, v) {//process single property
|
||||
if (_tf.indexOf(p) !== -1) {
|
||||
var t = p.replace(/X|Y|Z/, ''), tv;
|
||||
if (p === 'translate3d') {
|
||||
tv = v.split(',');
|
||||
if (p === 'translate3d') {
|
||||
tv = v.split(',');
|
||||
return {
|
||||
translateX : { value: K.truD(tv[0]).v, unit: K.truD(tv[0]).u },
|
||||
translateY : { value: K.truD(tv[1]).v, unit: K.truD(tv[1]).u },
|
||||
|
|
@ -658,7 +654,7 @@
|
|||
t2d.y = { value: K.truD(tv[1]).v, unit: K.truD(tv[1]).u }
|
||||
} else {
|
||||
t2d.x = { value: K.truD(tv).v, unit: K.truD(tv).u },
|
||||
t2d.y = { value: 0, unit: 'px' }
|
||||
t2d.y = { value: 0, unit: 'px' }
|
||||
}
|
||||
return t2d;
|
||||
} else if (p === 'rotate') {
|
||||
|
|
@ -681,36 +677,36 @@
|
|||
if (_clp.indexOf(p) !== -1) {
|
||||
if ( v instanceof Array ){
|
||||
return [ K.truD(v[0]), K.truD(v[1]), K.truD(v[2]), K.truD(v[3]) ];
|
||||
} else {
|
||||
} else {
|
||||
var ci;
|
||||
if ( /rect/.test(v) ) {
|
||||
ci = v.replace(/rect|\(|\)/g,'').split(/\s|\,/);
|
||||
ci = v.replace(/rect|\(|\)/g,'').split(/\s|\,/);
|
||||
} else if ( /auto|none|initial/.test(v) ){
|
||||
ci = _d[p];
|
||||
}
|
||||
ci = _d[p];
|
||||
}
|
||||
return [ K.truD(ci[0]), K.truD(ci[1]), K.truD(ci[2]), K.truD(ci[3]) ];
|
||||
}
|
||||
}
|
||||
}
|
||||
if (_cls.indexOf(p) !== -1) {
|
||||
return { value: K.truC(v) };
|
||||
}
|
||||
if (_bg.indexOf(p) !== -1) {
|
||||
if ( v instanceof Array ){
|
||||
if ( v instanceof Array ){
|
||||
return { x: K.truD(v[0])||{ v: 50, u: '%' }, y: K.truD(v[1])||{ v: 50, u: '%' } };
|
||||
} else {
|
||||
var posxy = v.replace(/top|left/g,0).replace(/right|bottom/g,100).replace(/center|middle/,50).split(/\s|\,/g),
|
||||
xp = K.truD(posxy[0]), yp = K.truD(posxy[1]);
|
||||
return { x: xp, y: yp };
|
||||
}
|
||||
}
|
||||
}
|
||||
if (_rd.indexOf(p) !== -1) {
|
||||
var rad = K.truD(v);
|
||||
return { value: rad.v, unit: rad.u };
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
K.truD = function (d,p) { //true dimension returns { v = value, u = unit }
|
||||
var x = parseInt(d) || 0, mu = ['px','%','deg','rad','em','rem','vh','vw'], l = mu.length,
|
||||
var x = parseInt(d) || 0, mu = ['px','%','deg','rad','em','rem','vh','vw'], l = mu.length,
|
||||
y = getU();
|
||||
function getU() {
|
||||
var u,i=0;
|
||||
|
|
@ -720,14 +716,14 @@
|
|||
}
|
||||
return { v: x, u: y };
|
||||
};
|
||||
|
||||
|
||||
K.preventScroll = function (e) { // prevent mousewheel or touch events while tweening scroll
|
||||
var data = document.body.getAttribute('data-tweening');
|
||||
if (data && data === 'scroll') {
|
||||
e.preventDefault();
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
K.truC = function (v) { // replace transparent and transform any color to rgba()/rgb()
|
||||
var vrgb, y;
|
||||
if (/rgb|rgba/.test(v)) { //rgb will be fastest initialized
|
||||
|
|
@ -745,7 +741,7 @@
|
|||
return { r: 0, g: 0, b: 0, a: 0 };
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
K.rth = function (r, g, b) { // transform rgb to hex or vice-versa | webkit browsers ignore HEX, always use RGB/RGBA
|
||||
return "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);
|
||||
};
|
||||
|
|
@ -762,34 +758,34 @@
|
|||
g: parseInt(result[2], 16),
|
||||
b: parseInt(result[3], 16)
|
||||
} : null;
|
||||
};
|
||||
|
||||
};
|
||||
|
||||
K.pe = function (es) { //process easing
|
||||
if ( typeof es === 'function') {
|
||||
return es;
|
||||
} else if ( typeof es === 'string' ) {
|
||||
if ( /easing|linear/.test(es) ) {
|
||||
return K.Easing[es]; //regular Robert Penner Easing Functions
|
||||
} else if ( /bezier/.test(es) ) {
|
||||
} else if ( /bezier/.test(es) ) {
|
||||
var bz = es.replace(/bezier|\s|\(|\)/g,'').split(','), i = 0, l = bz.length;
|
||||
for (i; i<l;i++) { bz[i] = parseFloat(bz[i]); }
|
||||
return K.Ease.bezier(bz[0],bz[1],bz[2],bz[3]); //bezier easing
|
||||
return K.Ease.bezier(bz[0],bz[1],bz[2],bz[3]); //bezier easing
|
||||
} else if ( /physics/.test(es) ) {
|
||||
return K.Physics[es](); // predefined physics bezier based easing functions
|
||||
} else {
|
||||
return K.Ease[es](); // predefined bezier based easing functions
|
||||
return K.Ease[es](); // predefined bezier based easing functions
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
K.Easing = {}; // we build nice ease objects here
|
||||
|
||||
|
||||
//high performance for accuracy (smoothness) trade
|
||||
K.Easing.linear = function (t) { return t; };
|
||||
|
||||
var _PI = Math.PI, _2PI = Math.PI * 2, _hPI = Math.PI / 2,
|
||||
_kea = 0.1, _kep = 0.4;
|
||||
|
||||
|
||||
K.Easing.easingSinusoidalIn = function(t) { return -Math.cos(t * _hPI) + 1; };
|
||||
K.Easing.easingSinusoidalOut = function(t) { return Math.sin(t * _hPI); };
|
||||
K.Easing.easingSinusoidalInOut = function(t) { return -0.5 * (Math.cos(_PI * t) - 1); };
|
||||
|
|
@ -835,21 +831,21 @@
|
|||
};
|
||||
K.Easing.easingBounceIn = function(t) { return 1 - K.Easing.easingBounceOut( 1 - t ); };
|
||||
K.Easing.easingBounceOut = function(t) {
|
||||
if ( t < ( 1 / 2.75 ) ) { return 7.5625 * t * t; }
|
||||
else if ( t < ( 2 / 2.75 ) ) { return 7.5625 * ( t -= ( 1.5 / 2.75 ) ) * t + 0.75; }
|
||||
else if ( t < ( 2.5 / 2.75 ) ) { return 7.5625 * ( t -= ( 2.25 / 2.75 ) ) * t + 0.9375; }
|
||||
if ( t < ( 1 / 2.75 ) ) { return 7.5625 * t * t; }
|
||||
else if ( t < ( 2 / 2.75 ) ) { return 7.5625 * ( t -= ( 1.5 / 2.75 ) ) * t + 0.75; }
|
||||
else if ( t < ( 2.5 / 2.75 ) ) { return 7.5625 * ( t -= ( 2.25 / 2.75 ) ) * t + 0.9375; }
|
||||
else {return 7.5625 * ( t -= ( 2.625 / 2.75 ) ) * t + 0.984375; }
|
||||
};
|
||||
K.Easing.easingBounceInOut = function(t) { if ( t < 0.5 ) return K.Easing.easingBounceIn( t * 2 ) * 0.5; return K.Easing.easingBounceOut( t * 2 - 1 ) * 0.5 + 0.5;};
|
||||
|
||||
|
||||
//returns browser prefix
|
||||
function getPrefix() {
|
||||
function getPrefix() {
|
||||
var div = document.createElement('div'), i = 0, pf = ['Moz', 'moz', 'Webkit', 'webkit', 'O', 'o', 'Ms', 'ms'], pl = pf.length,
|
||||
s = ['MozTransform', 'mozTransform', 'WebkitTransform', 'webkitTransform', 'OTransform', 'oTransform', 'MsTransform', 'msTransform'];
|
||||
|
||||
|
||||
for (i; i < pl; i++) { if (s[i] in div.style) { return pf[i]; } }
|
||||
div = null;
|
||||
}
|
||||
|
||||
|
||||
return K;
|
||||
}));
|
||||
|
|
|
|||
Loading…
Reference in a new issue