From fc75dd130f6d3bc4be40ebcf3406b6af47dfd313 Mon Sep 17 00:00:00 2001 From: thednp Date: Sun, 11 Dec 2016 03:48:37 +0200 Subject: [PATCH] Major change: * fixing SVG transforms for good https://github.com/thednp/kute.js/issues/33 * major changes to the tween objects https://github.com/thednp/kute.js/issues/39 * back to Infinity repeat https://github.com/thednp/kute.js/issues/43 * all round performance improvements --- README.md | 56 +++++----- bower.json | 2 +- demo/about.html | 2 +- demo/assets/js/perf.js | 2 +- demo/assets/js/svg.js | 85 ++++++++------- demo/options.html | 4 +- demo/performance.html | 5 +- demo/properties.html | 8 +- demo/src/kute-attr.min.js | 2 +- demo/src/kute-css.min.js | 2 +- demo/src/kute-jquery.min.js | 4 +- demo/src/kute-svg.min.js | 4 +- demo/src/kute-text.min.js | 2 +- demo/src/kute.min.js | 4 +- demo/svg.html | 109 +++++++++---------- dist/kute-attr.min.js | 2 +- dist/kute-css.min.js | 2 +- dist/kute-jquery.min.js | 4 +- dist/kute-svg.min.js | 4 +- dist/kute-text.min.js | 2 +- dist/kute.min.js | 4 +- kute-attr.js | 32 +++--- kute-css.js | 3 +- kute-jquery.js | 4 +- kute-svg.js | 201 +++++++++++++++++++----------------- kute.js | 124 ++++++++++++---------- package.json | 2 +- 27 files changed, 358 insertions(+), 317 deletions(-) diff --git a/README.md b/README.md index 77af858..c70cb84 100644 --- a/README.md +++ b/README.md @@ -1,5 +1,7 @@ # KUTE.js -A minimal native Javascript animation engine with jQuery plugin and with most essential features for web developers, designers and animators, delivering easy to use methods to set up high performance, cross-browser animations. The focus is flexibility, performance and size (core engine is 15.8k min and 5.6k gzipped). +A fully fledged native Javascript animation engine with most essential features for web developers, designers and animators, delivering easy to use methods to set up high performance, cross-browser animations. The focus is code quality, flexibility, performance and size (core engine is 17k min and 5.5k gzipped). Along with a simple jQuery plugin, KUTE.js packs plugins for presentation attibutes, SVG transform, draw stroke and path morph, text string write up or number countdowns, plus additional CSS properties like colors, border-radius or typographic properties. + +Because of it's modularity, KUTE.js makes it super easy to extend or override functionality, making it unique among Javascript animation engines. # Demo / CDN For documentation, examples and other cool tips, check the demo. Thanks to jsdelivr, we have a CDN link here. We also have cdnjs link right here. Sweet! @@ -17,17 +19,16 @@ For documentation, examples and other cool tips, check the +**NOTE:** Starting with KUTE.js v 1.6.0 the Physics and Cubic Bezier Functions are removed from the distribution folder and from CDN repositories, but you can find them in the [Experiments repository on Github](https://github.com/thednp/kute.js/tree/experiments). The reasons for that is to make it easy to maintain what's more important: core code quality and the ability to create custom builds.

* optimized dynamics easing functions * optimized cubic-bezier easing functions @@ -49,7 +50,7 @@ For documentation, examples and other cool tips, check the KUTE.js Project

KUTE.js continues what was started with jQueryTween (removed) and the main goal is to improve usability, compatibility, code quality and performance. KUTE.js includes a jQuery plugin to help you easily implement it in your jQuery applications, and also packs a set of tools such as bezier and physics based easing functions, all elegantly packed for convenience and distributed via CDN.

-

It all started with a fork of the popular tween.js and ended up having a KUTE.js version 0.9.5 that's almost as good as the boss, GSAP, at least in terms of performance and browser support. TweenMax have been an outstanding source of wonderful coding practices, and a very tough competitor.

+

It all started with a fork of the popular tween.js and ended up having a KUTE.js version 0.9.5 that's very fast, memory efficient and super easy to use.

In the hystory of the making there were consistent contributions of Dav aka @dalisoft for features such as play & pause, Text Plugin, as well as for performance related issues. Generally I would stress that the code is a joint work of me and Dav. Big thanks Dav, well done.

Also I would like to thank Ingwie Phoenix for the npm/Bower and UMD implementations.

diff --git a/demo/assets/js/perf.js b/demo/assets/js/perf.js index e431719..70b042b 100644 --- a/demo/assets/js/perf.js +++ b/demo/assets/js/perf.js @@ -52,7 +52,7 @@ function random(min, max) { // the variables var container = document.getElementById('container'); -// vendor prefix handle +// vendor prefix handle for Tween.js var transformProperty = KUTE.property('transform'), tws = []; diff --git a/demo/assets/js/svg.js b/demo/assets/js/svg.js index 43c2bca..878cdff 100644 --- a/demo/assets/js/svg.js +++ b/demo/assets/js/svg.js @@ -94,24 +94,52 @@ var draw5 = KUTE.allFromTo(drawEls,{draw:'0% 100%'}, {draw:'50% 50%'}, {duration draw1.chain(draw2); draw2.chain(draw3); draw3.chain(draw4); draw4.chain(draw5); drawBtn.addEventListener('click', function(){ - !draw1.playing && !draw2.playing && !draw3.playing && !draw4.playing && !draw5.playing && draw1.start(); + !draw1.tweens[0].playing && !draw1.tweens[1].playing && !draw1.tweens[2].playing && !draw1.tweens[3].playing && !draw1.tweens[4].playing + && !draw2.tweens[0].playing && !draw2.tweens[1].playing && !draw2.tweens[2].playing && !draw2.tweens[3].playing && !draw2.tweens[4].playing + && !draw3.tweens[0].playing && !draw3.tweens[1].playing && !draw3.tweens[2].playing && !draw3.tweens[3].playing && !draw3.tweens[4].playing + && !draw4.tweens[0].playing && !draw4.tweens[1].playing && !draw4.tweens[2].playing && !draw4.tweens[3].playing && !draw4.tweens[4].playing + && !draw5.tweens[0].playing && !draw5.tweens[1].playing && !draw5.tweens[2].playing && !draw5.tweens[3].playing && !draw5.tweens[4].playing + + && draw1.start(); }, false); -// // svgTransform examples +// svgTransform examples + +// rotation around shape center point var svgRotate = document.getElementById('svgRotate'); var rotateBtn = document.getElementById('rotateBtn'); var svgr1 = svgRotate.getElementsByTagName('path')[0]; var svgr2 = svgRotate.getElementsByTagName('path')[1]; -var svgTween11 = KUTE.to(svgr1, { rotate: 360 }, {transformOrigin: '50% 50%', yoyo: true, repeat: 1, duration: 1500, easing: "easingCubicOut"}); -var svgTween12 = KUTE.to(svgr2, { svgTransform: { translate: 580, rotate: 360 } }, {yoyo: true, repeat: 1, duration: 1500, easing: "easingCubicOut"}); +var svgTween11 = KUTE.to(svgr1, { rotate: 360 }, { transformOrigin: '50% 50%', yoyo: true, repeat: 1, duration: 1500, easing: "easingCubicOut"}); +var svgTween12 = KUTE.to(svgr2, { svgTransform: { translate: 580, rotate: 360 } }, { yoyo: true, repeat: 1, duration: 1500, easing: "easingCubicOut"}); rotateBtn.addEventListener('click', function(){ !svgTween11.playing && svgTween11.start(); !svgTween12.playing && svgTween12.start(); }, false); +// rotation around shape's parent center point +var svgRotate1 = document.getElementById('svgRotate1'); +var rotateBtn1 = document.getElementById('rotateBtn1'); +var svgr11 = svgRotate1.getElementsByTagName('path')[0]; +var svgr21 = svgRotate1.getElementsByTagName('path')[1]; +var bb = svgr21.getBBox(); +var translation = [580, 0]; +var svgBB = svgr21.ownerSVGElement.getBBox(); +var svgOriginX = (svgBB.width * 50 / 100) - translation[0]; +var svgOriginY = (svgBB.height * 50 / 100)- translation[1]; + +var svgTween111 = KUTE.to(svgr11, { rotate: 360 }, { transformOrigin: (svgBB.width * 50 / 100) + 'px 50%', yoyo: true, repeat: 1, duration: 1500, easing: "easingCubicOut"}); +var svgTween121 = KUTE.to(svgr21, { svgTransform: { translate: translation, rotate: 360 } }, { transformOrigin: [svgOriginX, svgOriginY], yoyo: true, repeat: 1, duration: 1500, easing: "easingCubicOut"}); + +rotateBtn1.addEventListener('click', function(){ + !svgTween111.playing && svgTween111.start(); + !svgTween121.playing && svgTween121.start(); +}, false); + +// translate var svgTranslate = document.getElementById('svgTranslate'); var translateBtn = document.getElementById('translateBtn'); var svgt1 = svgTranslate.getElementsByTagName('path')[0]; @@ -124,29 +152,18 @@ translateBtn.addEventListener('click', function(){ !svgTween22.playing && svgTween22.start(); }, false); +// skews in chain var svgSkew = document.getElementById('svgSkew'); var skewBtn = document.getElementById('skewBtn'); var svgsk1 = svgSkew.getElementsByTagName('path')[0]; var svgsk2 = svgSkew.getElementsByTagName('path')[1]; -var svgTween31 = KUTE.to(svgsk1, { skewX: -15 }, {transformOrigin: '0px 0px 0px', - // yoyo: true, repeat: 1, - duration: 1500, easing: "easingCubicOut"}); -var svgTween311 = KUTE.to(svgsk1, { skewY: 15 }, { - // yoyo: true, repeat: 1, - duration: 1500, easing: "easingCubicOut"}); -var svgTween313 = KUTE.to(svgsk1, { skewX: 0, skewY: 0 }, { - // yoyo: true, repeat: 1, - duration: 1500, easing: "easingCubicOut"}); +var svgTween31 = KUTE.to(svgsk1, { skewX: -15 }, {transformOrigin: '50% 50% 0px', duration: 1500, easing: "easingCubicInOut"}); +var svgTween311 = KUTE.to(svgsk1, { skewY: 15 }, {transformOrigin: '50% 50% 0px', duration: 2500, easing: "easingCubicInOut"}); +var svgTween313 = KUTE.to(svgsk1, { skewX: 0, skewY: 0 }, {transformOrigin: '50% 50% 0px', duration: 1500, easing: "easingCubicInOut"}); -var svgTween32 = KUTE.to(svgsk2, {svgTransform: { translate: 580, skewX: -15 } }, { - // yoyo: true, repeat: 1, - duration: 1500, easing: "easingCubicOut"}); -var svgTween322 = KUTE.to(svgsk2, {svgTransform: { translate: 580, skewY: 15 } }, { - // yoyo: true, repeat: 1, - duration: 1500, easing: "easingCubicOut"}); -var svgTween323 = KUTE.to(svgsk2, {svgTransform: { translate: 580, skewY: 0, skewX: 0 } }, { - // yoyo: true, repeat: 1, - duration: 1500, easing: "easingCubicOut"}); +var svgTween32 = KUTE.to(svgsk2, {svgTransform: { translate: 580, skewX: -15 } }, { transformOrigin: '50% 50%', duration: 1500, easing: "easingCubicInOut"}); +var svgTween322 = KUTE.to(svgsk2, {svgTransform: { translate: 580, skewY: 15 } }, { transformOrigin: '50% 50%', duration: 2500, easing: "easingCubicInOut"}); +var svgTween323 = KUTE.to(svgsk2, {svgTransform: { translate: 580, skewY: 0, skewX: 0 } }, { transformOrigin: '50% 50%', duration: 1500, easing: "easingCubicInOut"}); svgTween31.chain(svgTween311); svgTween311.chain(svgTween313); @@ -159,6 +176,7 @@ skewBtn.addEventListener('click', function(){ !svgTween32.playing && !svgTween322.playing && !svgTween323.playing && svgTween32.start(); }, false); +// scale var svgScale = document.getElementById('svgScale'); var scaleBtn = document.getElementById('scaleBtn'); var svgs1 = svgScale.getElementsByTagName('path')[0]; @@ -167,36 +185,33 @@ var svgTween41 = KUTE.to(svgs1, { scale: 1.5 }, {transformOrigin: '50% 50%', yoy var svgTween42 = KUTE.to(svgs2, {svgTransform: { translate: 580, scale: 0.5, -} }, {yoyo: true, repeat: 1, duration: 1500, easing: "easingCubicOut"}); +} }, {transformOrigin: '50% 50%', yoyo: true, repeat: 1, duration: 1500, easing: "easingCubicOut"}); scaleBtn.addEventListener('click', function(){ !svgTween41.playing && svgTween41.start(); !svgTween42.playing && svgTween42.start(); }, false); +// mixed transforms var svgMixed = document.getElementById('svgMixed'); var mixedBtn = document.getElementById('mixedBtn'); var svgm1 = svgMixed.getElementsByTagName('path')[0]; var svgm2 = svgMixed.getElementsByTagName('path')[1]; -var svgTween51 = KUTE.to(svgm1, { // a regular transform without svg plugin -// svgTransform: { +var svgTween51 = KUTE.to(svgm1, { // a regular CSS3 transform without svg plugin, works in modern browsers only, EXCEPT IE/Edge translate: 250, - rotate: 360, - skewX: -25, - // skewY: 25, scale: 1.5, -// } + rotate: 320, + skewX: -15 }, {transformOrigin: "50% 50%", yoyo: true, repeat: 1, duration: 1500, easing: "easingCubicOut"}); var svgTween52 = KUTE.to(svgm2, { svgTransform: { - translate: 580+250, + translate: 830, scale: 1.5, - rotate: 360, - skewX: -25, - // skewY: 25, - } -}, {yoyo: true, repeat: 1, duration: 1500, easing: "easingCubicOut"}); + rotate: 320, + skewX: -15 +} +}, {transformOrigin: "50% 50%", yoyo: true, repeat: 1, duration: 1500, easing: "easingCubicOut"}); mixedBtn.addEventListener('click', function(){ !svgTween51.playing && svgTween51.start(); diff --git a/demo/options.html b/demo/options.html index c8e6c6d..b42d5ad 100644 --- a/demo/options.html +++ b/demo/options.html @@ -98,10 +98,10 @@

These options only affect animation involving any 3D property from CSS3 transform and have no effect on other CSS properties. While you can set perspective or perspective origin via CSS, these options are here to help, especially with full browser support and preffix free handling.

SVG Plugin Options

diff --git a/demo/performance.html b/demo/performance.html index 72985cb..320a185 100644 --- a/demo/performance.html +++ b/demo/performance.html @@ -101,9 +101,9 @@ - + -

These tests are only for modern browsers. In Google Chrome you can enable the FPS metter in developer tools, here's how.

+

These tests are only for modern browsers. In Webkit browsers like Google Chrome and Opera you can enable the FPS metter in developer tools, here's how.

Please know that a local copy of this page will outperform the live site demo on Google Chrome, the reason is unknown.

@@ -125,6 +125,7 @@ + diff --git a/demo/properties.html b/demo/properties.html index 1348088..ba61d2b 100644 --- a/demo/properties.html +++ b/demo/properties.html @@ -113,14 +113,16 @@

The SVG Plugin features cross browser 2D transform animations via the svgTransform tween property and the transform presentation attribute, similar in functionality as the Attributes Plugin.

+

As a quick note, the translation is normalized and computed in a way to handle the transformOrigin tween option in all cases, not just for rotations, but also scaling or skews.

SVG Properties

-

The SVG Plugin can animate the d attribute of a given <path> or <glyph> element with the tween property called path. The animation effect is widelly known as morph SVG and implemented in various scripts, but the KUTE.js implementation is similar to the D3.js examples for wider usability.

+

The SVG Plugin can animate the d attribute of a given <path> or <glyph> element with the tween property called path. The animation effect is widelly known as morph SVG and implemented in various scripts, but the KUTE.js implementation is similar to the D3.js examples for wider usability and the ability to optimize the visual and performance of the morph, all with the help of special tween options and utilities.

Further more, the SVG Plugin can animate the stroke in a way that you probably know as drawSVG. KUTE.js implements it as draw tween property that deals with the well known CSS properties: strokeDasharray and strokeDashoffset. diff --git a/demo/src/kute-attr.min.js b/demo/src/kute-attr.min.js index a0e5e0a..7db3ad1 100644 --- a/demo/src/kute-attr.min.js +++ b/demo/src/kute-attr.min.js @@ -1,2 +1,2 @@ -// KUTE.js v1.5.99 | © dnp_theme | Attributes Plugin | MIT-License +// KUTE.js v1.6.0 | © dnp_theme | Attributes Plugin | MIT-License !function(t,e){if("function"==typeof define&&define.amd)define(["kute.js"],e);else if("object"==typeof module&&"function"==typeof require)module.exports=e(require("kute.js"));else{if("undefined"==typeof t.KUTE)throw new Error("Attributes Plugin require KUTE.js.");e(t.KUTE)}}(this,function(t){"use strict";var e,r="undefined"!=typeof global?global:window,n=t,i=n.dom,u=n.prepareStart,o=n.parseProperty,a=n.truC,s=n.truD,f=(n.crossCheck,r.Interpolate.unit,r.Interpolate.number),l=r.Interpolate.color,c=function(t,e){return t.getAttribute(e)},p=["fill","stroke","stop-color"],v=function(t){return t.replace(/[A-Z]/g,"-$&").toLowerCase()};return u.attr=function(t,e){var r={};for(var n in e){var i=v(n).replace(/_+[a-z]+/,""),u=c(this.element,i);r[i]=p.indexOf(i)!==-1?u||"rgba(0,0,0,0)":u||(/opacity/i.test(n)?1:0)}return r},o.attr=function(t,r){"attr"in i||(i.attr=function(t,e,r,n,u){for(var o in n)i.attributes[o](t,o,r[o],n[o],u)},e=i.attributes={});var n={};for(var u in r){var o=v(u),b=/(%|[a-z]+)$/,d=c(this.element,o.replace(/_+[a-z]+/,""));if(p.indexOf(o)===-1)if(null!==d&&b.test(d)){var y=s(d).u||s(r[u]).u,A=/%/.test(y)?"_percent":"_"+y;o+A in e||(/%/.test(y)?e[o+A]=function(t,e,r,n,i){var u=u||e.replace(A,"");t.setAttribute(u,(100*f(r.v,n.v,i)>>0)/100+n.u)}:e[o+A]=function(t,e,r,n,i){var u=u||e.replace(A,"");t.setAttribute(u,(f(r.v,n.v,i)>>0)+n.u)}),n[o+A]=s(r[u])}else b.test(r[u])&&null!==d&&(null===d||b.test(d))||(o in e||(/opacity/i.test(u)?e[o]=function(t,e,r,n,i){t.setAttribute(e,(100*f(r,n,i)>>0)/100)}:e[o]=function(t,e,r,n,i){t.setAttribute(e,(10*f(r,n,i)>>0)/10)}),n[o]=parseFloat(r[u]));else o in e||(e[o]=function(t,e,n,i,u){t.setAttribute(e,l(n,i,u,r.keepHex))}),n[o]=a(r[u])}return n},this}); \ No newline at end of file diff --git a/demo/src/kute-css.min.js b/demo/src/kute-css.min.js index a9bcc0e..ea372f6 100644 --- a/demo/src/kute-css.min.js +++ b/demo/src/kute-css.min.js @@ -1,2 +1,2 @@ -// KUTE.js v1.5.99 | © dnp_theme | CSS Plugin | MIT-License +// KUTE.js v1.6.0 | © dnp_theme | CSS Plugin | MIT-License !function(t,e){if("function"==typeof define&&define.amd)define(["kute.js"],e);else if("object"==typeof module&&"function"==typeof require)module.exports=e(require("kute.js"));else{if("undefined"==typeof t.KUTE)throw new Error("CSS Plugin require KUTE.js.");e(t.KUTE)}}(this,function(t){"use strict";for(var e="undefined"!=typeof global?global:window,r=t,n=r.dom,i=r.parseProperty,o=r.prepareStart,u=r.property,d=r.getCurrentStyle,a=r.truD,l=r.truC,f=e.Interpolate.number,c=(e.Interpolate.unit,e.Interpolate.color),g=["borderColor","borderTopColor","borderRightColor","borderBottomColor","borderLeftColor","outlineColor"],p=["right","bottom","minWidth","minHeight","maxWidth","maxHeight","padding","margin","paddingTop","paddingBottom","paddingLeft","paddingRight","marginTop","marginBottom","marginLeft","marginRight","borderWidth","borderTopWidth","borderRightWidth","borderBottomWidth","borderLeftWidth","outlineWidth"],s=["borderRadius","borderTopLeftRadius","borderTopRightRadius","borderBottomLeftRadius","borderBottomRightRadius"],h=["fontSize","lineHeight","letterSpacing","wordSpacing"],m=["clip"],b=["backgroundPosition"],v=p.concat(h),y=s.concat(p,h),R=g.concat(m,s,p,h,b),x=R.length,C=C||{},T=0;T-1?n[t]=function(t,e,r,n,i){t.style[e]=(i>.98||i<.02?(100*f(r.v,n.v,i)>>0)/100:f(r.v,n.v,i)>>0)+n.u}:n[t]=function(t,e,r,n,i){t.style[e]=(100*f(r.v,n.v,i)>>0)/100+n.u}),a(e)},o[v[T]]=function(t,e){return d(this.element,t)||C[t]};for(var T=0,W=s.length;T>0)/100+n.u}),a(e)},o[s[T]]=function(t,e){var r=t===s[0]?s[1]:t;return r=u(r),d(this.element,r)||C[t]};return i.clip=function(t,e){if(t in n||(n[t]=function(t,e,r,n,i){var o=0,u=[];for(o;o<4;o++){var d=r[o].v,a=n[o].v,l=n[o].u||"px";u[o]=(100*f(d,a,i)>>0)/100+l}t.style[e]="rect("+u+")"}),e instanceof Array)return[a(e[0]),a(e[1]),a(e[2]),a(e[3])];var r=e.replace(/rect|\(|\)/g,"");return r=/\,/g.test(r)?r.split(/\,/g):r.split(/\s/g),[a(r[0]),a(r[1]),a(r[2]),a(r[3])]},o.clip=function(t,e){var r=d(this.element,t),n=d(this.element,"width"),i=d(this.element,"height");return/rect/.test(r)?r:[0,n,i,0]},i.backgroundPosition=function(t,e){if(t in n||(n[t]=function(t,e,r,n,i){t.style[e]=(100*f(r[0],n[0],i)>>0)/100+"% "+(100*f(r[1],n[1],i)>>0)/100+"%"}),e instanceof Array){var r=a(e[0]).v,i=a(e[1]).v;return[NaN!==r?r:50,NaN!==i?i:50]}var o=e.replace(/top|left/g,0).replace(/right|bottom/g,100).replace(/center|middle/g,50);return o=o.split(/(\,|\s)/g),o=2===o.length?o:[o[0],50],[a(o[0]).v,a(o[1]).v]},o.backgroundPosition=function(t,e){return d(this.element,t)||C[t]},this}); \ No newline at end of file diff --git a/demo/src/kute-jquery.min.js b/demo/src/kute-jquery.min.js index a4695ad..6105e6e 100644 --- a/demo/src/kute-jquery.min.js +++ b/demo/src/kute-jquery.min.js @@ -1,2 +1,2 @@ -// KUTE.js v1.5.99 | © dnp_theme | jQuery Plugin | MIT-License -!function(e,t){if("function"==typeof define&&define.amd)define(["./kute.js","jquery"],function(e,n){return t(n,e),e});else if("object"==typeof module&&"function"==typeof require){var n=require("./kute.js"),r=require("jquery");module.exports=t(r,n)}else{if("undefined"==typeof e.KUTE||"undefined"==typeof e.$&&"undefined"==typeof e.jQuery)throw new Error("jQuery Plugin for KUTE.js depend on KUTE.js and jQuery");var r=e.jQuery||e.$,n=e.KUTE;r.fn.KUTE=t(r,n)}}(this,function(e,t){"use strict";return e.fn.fromTo=function(e,n,r){var i=this.length>1?this:this[0],o=this.length>1?"allFromTo":"fromTo";return t[o](i,e,n,r)},e.fn.to=function(e,n){var r=this.length>1?this:this[0],i=this.length>1?"allTo":"to";return t[i](r,e,n)},this}); \ No newline at end of file +// KUTE.js v1.6.0 | © dnp_theme | jQuery Plugin | MIT-License +!function(e,t){if("function"==typeof define&&define.amd)define(["./kute.js","jquery"],function(e,n){return t(n,e),e});else if("object"==typeof module&&"function"==typeof require){var n=require("./kute.js"),r=require("jquery");module.exports=t(r,n)}else{if("undefined"==typeof e.KUTE||"undefined"==typeof e.$&&"undefined"==typeof e.jQuery)throw new Error("jQuery Plugin for KUTE.js depend on KUTE.js and jQuery");var r=e.jQuery||e.$,n=e.KUTE;t(r,n)}}(this,function(e,t){"use strict";return e.fn.fromTo=function(e,n,r){var i=this.length>1?this:this[0],o=this.length>1?"allFromTo":"fromTo";return t[o](i,e,n,r)},e.fn.to=function(e,n){var r=this.length>1?this:this[0],i=this.length>1?"allTo":"to";return t[i](r,e,n)},this}); \ No newline at end of file diff --git a/demo/src/kute-svg.min.js b/demo/src/kute-svg.min.js index fb4841b..eeb6868 100644 --- a/demo/src/kute-svg.min.js +++ b/demo/src/kute-svg.min.js @@ -1,2 +1,2 @@ -// KUTE.js v1.5.99 | © dnp_theme | SVG Plugin | MIT-License -!function(t,e){if("function"==typeof define&&define.amd)define(["kute.js"],e);else if("object"==typeof module&&"function"==typeof require)module.exports=e(require("kute.js"));else{if("undefined"==typeof t.KUTE)throw new Error("SVG Plugin require KUTE.js.");e(t.KUTE)}}(this,function(t){"use strict";var e="undefined"!=typeof global?global:window,r=t,n=r.dom,s=r.parseProperty,a=r.prepareStart,o=r.getCurrentStyle,l=(r.truC,r.truD,r.crossCheck),h=e.Interpolate.number,u=(e.Interpolate.unit,e.Interpolate.color,!(!navigator||null===new RegExp("MSIE ([0-9]{1,}[.0-9]{0,})").exec(navigator.userAgent))&&parseFloat(RegExp.$1)),p=/(m[^(h|v|l)]*|[vhl][^(v|h|l|z)]*)/gim,f="http://www.w3.org/2000/svg",g=e.Interpolate.coords=function(t,e,r,n){for(var s=[],a=0;a>0)}return s};if(!(u&&u<9)){var c=function(t,e,r){for(var n=[],s=[],a=t.getTotalLength(),i=e.getTotalLength(),o=Math.max(a,i),l=o/r,h=0,u=l*r;(h+=r)1){var n=function(t){var e=t.split(",");if(2==e.length&&!isNaN(e[0])&&!isNaN(e[1]))return[parseFloat(e[0]),parseFloat(e[1])]},s=function(t,e){return void 0!=t&&void 0!=e?Math.sqrt(Math.pow(e[0]-t[0],2)+Math.pow(e[1]-t[1],2)):0};if(e.length>2)for(var a=0;a>0,i=h(r.s,n.s,s)>>0,o=h(r.e,n.e,s)>>0,l=0-i;t.style.strokeDashoffset=l+"px",t.style.strokeDasharray=(o+l-.5>>0)+"px, "+a+"px"}),I(this.element,e)},a.draw=function(){return I(this.element)};var N=function(t){var e,r,n=t&&/\)/.test(t)?t.split(")"):"none",s={};if(n instanceof Array)for(e=0;e>0)/10:(10*h(r[0],n[0],s)>>0)/10+" "+(10*h(r[1],n[1],s)>>0)/10)+e},L=e.Interpolate.rotateSVG=function(t,e,r,n,s){return t+((10*h(r[0],n[0],s)>>0)/10+" "+n[1]+","+n[2])+e},j=e.Interpolate.scaleSVG=function(t,e,r,n,s){return t+(1e3*h(r,n,s)>>0)/1e3+e},q=e.Interpolate.skewSVG=function(t,e,r,n,s){return t+(10*h(r,n,s)>>0)/10+e};return s.svgTransform=function(t,e){"svgTransform"in n||(n.svgTransform=function(t,e,r,n,s){t.setAttribute("transform",("translate"in r?F("translate(",")",r.translate,n.translate,s):"")+("rotate"in r?L("rotate(",")",r.rotate,n.rotate,s):"")+("scale"in r?j("scale(",")",r.scale,n.scale,s):"")+("skewX"in r?q("skewX(",")",r.skewX,n.skewX,s):"")+("skewY"in r?q("skewY(",")",r.skewY,n.skewY,s):""))});var r,s,a={},o=this.element.getBBox(),l=o.x+o.width/2,h=o.y+o.height/2;for(i in e)"rotate"===i?(r=e[i]instanceof Array?e[i]:/\s/.test(e[i])?[1*e[i].split(" ")[0],1*e[i].split(" ")[1].split(",")[0],1*e[i].split(" ")[1].split(",")[1]]:[1*e[i],l,h],a[i]=r):"translate"===i?(s=e[i]instanceof Array?e[i]:/\,|\s/.test(e[i])?e[i].split(/\,|\s/):[1*e[i],0],a[i]=[1*s[0]||0,1*s[1]||0]):"scale"===i?a[i]=1*e[i]||1:/skew/.test(i)&&(a[i]=1*e[i]||0);return"scale"in a&&(!("translate"in a)&&(a.translate=[0,0]),a.translate[0]+=(1-a.scale)*o.width/2,a.translate[1]+=(1-a.scale)*o.height/2,"rotate"in a&&(a.rotate[1]-="skewX"in a?Math.tan(a.skewX)*o.height:0,a.rotate[2]-="skewY"in a?Math.tan(a.skewY)*o.width:0),a.translate[0]+="skewX"in a?Math.tan(a.skewX)*o.height*2:0,a.translate[1]+="skewY"in a?Math.tan(a.skewY)*o.width*2:0),a},a.svgTransform=function(t,e){var r,n={},s=N(this.element.getAttribute("transform"));for(r in e)n[r]=r in s?s[r]:"scale"===r?1:0;return n},l.svgTransform=function(){var t,e,r,n=this.element.getBBox(),s=N(this.element.getAttribute("transform")),a=n.x+n.width/2,i=n.y+n.height/2;for(r in s)"translate"===r?(e=s[r]instanceof Array?s[r]:/\,|\s/.test(s[r])?s[r].split(/\,|\s/):[1*s[r],0],this.valuesStart.svgTransform[r]=[1*e[0]||0,1*e[1]||0]):"scale"===r?this.valuesStart.svgTransform[r]=1*s[r]||1:"rotate"===r?(t=s[r]instanceof Array?s[r]:/\s/.test(s[r])?[1*s[r].split(" ")[0],1*s[r].split(" ")[1].split(",")[0],1*s[r].split(" ")[1].split(",")[1]]:[1*s[r],a,i],this.valuesStart.svgTransform[r]=t):/skew/.test(r)&&(this.valuesStart.svgTransform[r]=1*s[r]||0);for(var r in this.valuesStart.svgTransform)r in this.valuesEnd.svgTransform||(this.valuesEnd.svgTransform[r]=this.valuesStart.svgTransform[r]),r==="rotate"in this.valuesStart.svgTransform&&"rotate"in this.valuesEnd.svgTransform&&(this.valuesEnd.svgTransform.rotate[1]=this.valuesStart.svgTransform.rotate[1]=a,this.valuesEnd.svgTransform.rotate[2]=this.valuesStart.svgTransform.rotate[2]=i)},this}}); \ No newline at end of file +// KUTE.js v1.6.0 | © dnp_theme | SVG Plugin | MIT-License +!function(t,e){if("function"==typeof define&&define.amd)define(["kute.js"],e);else if("object"==typeof module&&"function"==typeof require)module.exports=e(require("kute.js"));else{if("undefined"==typeof t.KUTE)throw new Error("SVG Plugin require KUTE.js.");e(t.KUTE)}}(this,function(t){"use strict";var e="undefined"!=typeof global?global:window,r=t,n=r.dom,a=r.parseProperty,s=r.prepareStart,o=r.getCurrentStyle,l=(r.truC,r.truD,r.crossCheck),h=e.Interpolate.number,u=(e.Interpolate.unit,e.Interpolate.color,null!==new RegExp("MSIE ([0-9]{1,}[.0-9]{0,})").exec(navigator.userAgent)&&parseFloat(RegExp.$1)),p=/iPhone|iPad|iPod|Android/i.test(navigator.userAgent);if(!(u&&u<9)){var f=/(m[^(h|v|l)]*|[vhl][^(v|h|l|z)]*)/gim,g="http://www.w3.org/2000/svg",c=e.Interpolate.coords=p?function(t,e,r,n){for(var a=[],i=0;i>0)/10)}return a},v=function(t,e,r){for(var n=[],a=[],i=t.getTotalLength(),s=e.getTotalLength(),o=Math.max(i,s),l=o/r,h=0,u=l*r;(h+=r)1){var n=function(t){var e=t.split(",");if(2==e.length&&!isNaN(e[0])&&!isNaN(e[1]))return[parseFloat(e[0]),parseFloat(e[1])]},a=function(t,e){return void 0!=t&&void 0!=e?Math.sqrt(Math.pow(e[0]-t[0],2)+Math.pow(e[1]-t[1],2)):0};if(e.length>2)for(var i=0;i>0,s=h(r.s,n.s,a)>>0,o=h(r.e,n.e,a)>>0,l=0-s;t.style.strokeDashoffset=l+"px",t.style.strokeDasharray=(o+l-.5>>0)+"px, "+i+"px"}),E(this.element,e)},s.draw=function(){return E(this.element)};var I=function(t,e){return/[a-zA-Z]/.test(t)&&!/px/.test(t)?t.replace(/top|left/,0).replace(/right|bottom/,100).replace(/center|middle/,50):/%/.test(t)?e.x+parseFloat(t)*e.width/100:parseFloat(t)},L=function(t){var e=t&&/\)/.test(t)?t.substring(0,t.length-1).split(/\)\s|\)/):"none",r={};if(e instanceof Array)for(var n=0,a=e.length;n>0)/10+(o?","+(10*o>>0)/10:"")+")":"")+(p?"rotate("+(10*p>>0)/10+")":"")+(c?"skewX("+(10*c>>0)/10+")":"")+(v?"skewY("+(10*v>>0)/10+")":"")+(1!==u?"scale("+(1e3*u>>0)/1e3+")":""))}),j.call(this,e)},s.svgTransform=function(t,e){var r={},n=L(this.element.getAttribute("transform"));for(var a in e)r[a]=a in n?n[a]:"scale"===a?1:0;return r},l.svgTransform=function(){var t=this.valuesStart.svgTransform,e=this.valuesEnd.svgTransform,r=j.call(this,L(this.element.getAttribute("transform")));for(var n in r)t[n]=r[n];var a=this.element.ownerSVGElement,i=a.createSVGTransformFromMatrix(a.createSVGMatrix().translate(-t.origin[0],-t.origin[1]).translate(t.translate[0]||0,t.translate[1]||0).rotate(t.rotate||0).skewX(t.skewX||0).skewY(t.skewY||0).scale(t.scale||1).translate(+t.origin[0],+t.origin[1]));t.translate=[i.matrix.e,i.matrix.f],i=null;for(var n in t)n in e||(e[n]=t[n])},this}}); \ No newline at end of file diff --git a/demo/src/kute-text.min.js b/demo/src/kute-text.min.js index 82bffe8..6f02fed 100644 --- a/demo/src/kute-text.min.js +++ b/demo/src/kute-text.min.js @@ -1,2 +1,2 @@ -// KUTE.js v1.5.99 | © dnp_theme | Text Plugin | MIT-License +// KUTE.js v1.6.0 | © dnp_theme | Text Plugin | MIT-License !function(t,e){if("function"==typeof define&&define.amd)define(["kute.js"],e);else if("object"==typeof module&&"function"==typeof require)module.exports=e(require("kute.js"));else{if("undefined"==typeof t.KUTE)throw new Error("Text-Plugin require KUTE.js.");e(t.KUTE)}}(this,function(t){"use strict";var e="undefined"!=typeof global?global:window,n=t,r=n.dom,i=n.prepareStart,s=n.parseProperty,u=e.Interpolate.number,o=String("abcdefghijklmnopqrstuvwxyz").split(""),a=String("abcdefghijklmnopqrstuvwxyz".toUpperCase()).split(""),l=String("~!@#$%^&*()_+{}[];'<>,./?=-").split(""),p=String("0123456789").split(""),f=o.concat(a,p),h=(f.concat(l),Math.random),c=Math.min;return i.text=i.number=function(t,e){return this.element.innerHTML},s.text=function(t,e){return"text"in r||(r.text=function(t,e,n,r,i,s){var u=u||"alpha"===s.textChars?o:"upper"===s.textChars?a:"numeric"===s.textChars?p:"alphanumeric"===s.textChars?f:"symbols"===s.textChars?l:s.textChars?s.textChars.split(""):o,g=u.length,m=u[h()*g>>0],b="",d="",x=n.substring(0),y=r.substring(0);b=""!==n?x.substring(x.length,c(i*x.length,x.length)>>0):"",d=y.substring(0,c(i*y.length,y.length)>>0),t.innerHTML=i<1?d+m+b:r}),e},s.number=function(t,e,n){return"number"in r||(r.number=function(t,e,n,r,i){t.innerHTML=u(n,r,i)>>0}),parseInt(e)||0},this}); \ No newline at end of file diff --git a/demo/src/kute.min.js b/demo/src/kute.min.js index 782a3ae..fba444d 100644 --- a/demo/src/kute.min.js +++ b/demo/src/kute.min.js @@ -1,2 +1,2 @@ -// KUTE.js v1.5.99 | © dnp_theme | Core Engine | MIT-License -!function(t,e){"function"==typeof define&&define.amd?define([],e):"object"==typeof exports?module.exports=e():t.KUTE=e()}(this,function(){"use strict";for(var t="undefined"!=typeof global?global:window,e=t.performance,n=[],i=null,s=["color","backgroundColor"],r=["top","left","width","height"],a=["translate3d","translateX","translateY","translateZ","rotate","translate","rotateX","rotateY","rotateZ","skewX","skewY","scale"],o=["opacity"],u=s.concat(o,r,a),l=u.length,h={},c=0;c>0||0:t[s]&&e[s]?(100*q(t[s],e[s],n)>>0)/100:null;return i?b(r.r,r.g,r.b):r.a?l+r.r+o+r.g+o+r.b+o+r.a+a:u+r.r+o+r.g+o+r.b+a}),R=$.translate=function(t,e,n,i){var s={};for(var r in e)s[r]=(t[r]===e[r]?e[r]:(10*(t[r]+(e[r]-t[r])*i)>>0)/10)+n;return s.x?"translate("+s.x+","+s.y+")":"translate3d("+s.translateX+","+s.translateY+","+s.translateZ+")"},W=$.rotate=function(t,e,n,i){var s={};for(var r in e)s[r]="z"===r?"rotate("+(10*(t[r]+(e[r]-t[r])*i)>>0)/10+n+")":r+"("+(10*(t[r]+(e[r]-t[r])*i)>>0)/10+n+")";return s.z?s.z:(s.rotateX||"")+(s.rotateY||"")+(s.rotateZ||"")},z=$.skew=function(t,e,n,i){var s={};for(var r in e)s[r]=r+"("+(10*(t[r]+(e[r]-t[r])*i)>>0)/10+n+")";return(s.skewX||"")+(s.skewY||"")},H=$.scale=function(t,e,n){return"scale("+(1e3*(t+(e-t)*n)>>0)/1e3+")"},j={},D=function(t){for(var e=0;e0)return this.options.repeat<9999?this.options.repeat--:this.options.repeat=0,this.options.yoyo&&(this.reversed=!this.reversed,V.call(this)),this._startTime=this.options.yoyo&&!this.reversed?t+this.options.repeatDelay:t,!0;this.options.complete&&this.options.complete.call(),et.call(this);for(var r=0,a=this.options.chain.length;r.99||s<.01?(10*q(n,i,s)>>0)/10:q(n,i,s)>>0)+"px"});var n=m(e);return"%"===n.u?n.v*this.element.offsetWidth/100:n.v},transform:function(t,e){if(C in j||(j[C]=function(t,e,n,i,s,r){t.style[e]=(n.perspective||"")+(n.translate?R(n.translate,i.translate,"px",s):"")+(n.rotate?W(n.rotate,i.rotate,"deg",s):"")+(n.skew?z(n.skew,i.skew,"deg",s):"")+(n.scale?H(n.scale,i.scale,s):"")}),/translate/.test(t)){if("translate3d"===t){var n=e.split(","),i=m(n[0]),s=m(n[1],t3d2=m(n[2]));return{translateX:"%"===i.u?i.v*this.element.offsetWidth/100:i.v,translateY:"%"===s.u?s.v*this.element.offsetHeight/100:s.v,translateZ:"%"===t3d2.u?t3d2.v*(this.element.offsetHeight+this.element.offsetWidth)/200:t3d2.v}}if(/^translate(?:[XYZ])$/.test(t)){var r=m(e),a=/X/.test(t)?this.element.offsetWidth/100:/Y/.test(t)?this.element.offsetHeight/100:(this.element.offsetWidth+this.element.offsetHeight)/200;return"%"===r.u?r.v*a:r.v}if("translate"===t){var o,u="string"==typeof e?e.split(","):e,l={},h=m(u[0]),c=u.length?m(u[1]):{v:0,u:"px"};return u instanceof Array?(l.x="%"===h.u?h.v*this.element.offsetWidth/100:h.v,l.y="%"===c.u?c.v*this.element.offsetHeight/100:c.v):(o=m(u),l.x="%"===o.u?o.v*this.element.offsetWidth/100:o.v,l.y=0),l}}else if(/rotate|skew/.test(t)){if(/^rotate(?:[XYZ])$|skew(?:[XY])$/.test(t)){var p=m(e,!0);return"rad"===p.u?g(p.v):p.v}if("rotate"===t){var f={},v=m(e,!0);return f.z="rad"===v.u?g(v.v):v.v,f}}else if("scale"===t)return parseFloat(e)},unitless:function(t,e){return!/scroll/.test(t)||t in j?"opacity"===t&&(t in j||(B?j[t]=function(t,e,n,i,s){var r="alpha(opacity=",a=")";t.style.filter=r+(100*q(n,i,s)>>0)+a}:j[t]=function(t,e,n,i,s){t.style.opacity=(100*q(n,i,s)>>0)/100})):j[t]=function(t,e,n,i,s){t.scrollTop=q(n,i,s)>>0},parseFloat(e)},colors:function(t,e){return t in j||(j[t]=function(t,e,n,i,s,r){t.style[e]=Q(n,i,s,r.keepHex)}),y(e)}},J=function(t,e){var n=(this.element,"start"===e?this.valuesStart:this.valuesEnd),i={},u={},l={},h={};for(var c in t)if(a.indexOf(c)!==-1){if(/^translate(?:[XYZ]|3d)$/.test(c)){for(var p=["X","Y","Z"],f=0;f<3;f++){var v=p[f];/3d/.test(c)?l["translate"+v]=G.transform.call(this,"translate"+v,t[c][f]):l["translate"+v]="translate"+v in t?G.transform.call(this,"translate"+v,t["translate"+v]):0}h.translate=l}else if(/^rotate(?:[XYZ])$|^skew(?:[XY])$/.test(c)){for(var d=/rotate/.test(c)?"rotate":"skew",g=["X","Y","Z"],m="rotate"===d?u:i,y=0;y<3;y++){var w=g[y];void 0!==t[d+w]&&"skewZ"!==c&&(m[d+w]=G.transform.call(this,d+w,t[d+w]))}h[d]=m}else/(rotate|translate|scale)$/.test(c)&&(h[c]=G.transform.call(this,c,t[c]));n[C]=h}else r.indexOf(c)!==-1?n[c]=G.boxModel.call(this,c,t[c]):o.indexOf(c)!==-1||"scroll"===c?n[c]=G.unitless.call(this,c,t[c]):s.indexOf(c)!==-1?n[c]=G.colors.call(this,c,t[c]):c in G&&(n[c]=G[c].call(this,c,t[c]))},V=function(){if(this.options.yoyo)for(var t in this.valuesEnd){var e=this.valuesRepeat[t];this.valuesRepeat[t]=this.valuesEnd[t],this.valuesEnd[t]=e,this.valuesStart[t]=this.valuesRepeat[t]}},tt=function(){this.repeat>0&&(this.options.repeat=this.repeat),this.options.yoyo&&this.reversed===!0&&(V.call(this),this.reversed=!1),this.playing=!1,setTimeout(function(){n.length||T()},48)},et=function(){("scroll"in this.valuesEnd||"scrollTop"in this.valuesEnd)&&document.body.getAttribute("data-tweening")&&(document.removeEventListener(S,w,!1),document.removeEventListener(Y,w,!1),document.body.removeAttribute("data-tweening"))},nt=function(){("scroll"in this.valuesEnd||"scrollTop"in this.valuesEnd)&&!document.body.getAttribute("data-tweening")&&(document.addEventListener(S,w,!1),document.addEventListener(Y,w,!1),document.body.setAttribute("data-tweening","scroll"))},it=function(t){return"function"==typeof t?t:"string"==typeof t?rt[t]:void 0},st=function(){var e={},n=O(this.element,"transform"),i=["rotate","skew"],s=["X","Y","Z"];for(var r in this.valuesStart)if(a.indexOf(r)!==-1){var o=/(rotate|translate|scale)$/.test(r);if(/translate/.test(r)&&"translate"!==r)e.translate3d=n.translate3d||h[r];else if(o)e[r]=n[r]||h[r];else if(!o&&/rotate|skew/.test(r))for(var l=0;l<2;l++)for(var c=0;c<3;c++){var p=i[l]+s[c];a.indexOf(p)!==-1&&p in this.valuesStart&&(e[p]=n[p]||h[p])}}else if("scroll"!==r)if("opacity"===r&&B){var f=E(this.element,"filter");e.opacity="number"==typeof f?f:h.opacity}else u.indexOf(r)!==-1?e[r]=E(this.element,r)||l[r]:e[r]=r in U?U[r].call(this,r,this.valuesStart[r]):0;else e[r]=this.element===Z?t.pageYOffset||Z.scrollTop:this.element.scrollTop;for(var r in n)a.indexOf(r)===-1||r in this.valuesStart||(e[r]=n[r]||h[r]);if(this.valuesStart={},J.call(this,e,"start"),C in this.valuesEnd)for(var v in this.valuesStart[C])if("perspective"!==v)if("object"==typeof this.valuesStart[C][v])for(var d in this.valuesStart[C][v])"undefined"==typeof this.valuesEnd[C][v]&&(this.valuesEnd[C][v]={}),"number"==typeof this.valuesStart[C][v][d]&&"undefined"==typeof this.valuesEnd[C][v][d]&&(this.valuesEnd[C][v][d]=this.valuesStart[C][v][d]);else"number"==typeof this.valuesStart[C][v]&&"undefined"==typeof this.valuesEnd[C][v]&&(this.valuesEnd[C][v]=this.valuesStart[C][v])},rt=t.Easing={};rt.linear=function(t){return t},rt.easingSinusoidalIn=function(t){return-Math.cos(t*Math.PI/2)+1},rt.easingSinusoidalOut=function(t){return Math.sin(t*Math.PI/2)},rt.easingSinusoidalInOut=function(t){return-.5*(Math.cos(Math.PI*t)-1)},rt.easingQuadraticIn=function(t){return t*t},rt.easingQuadraticOut=function(t){return t*(2-t)},rt.easingQuadraticInOut=function(t){return t<.5?2*t*t:-1+(4-2*t)*t},rt.easingCubicIn=function(t){return t*t*t},rt.easingCubicOut=function(t){return--t*t*t+1},rt.easingCubicInOut=function(t){return t<.5?4*t*t*t:(t-1)*(2*t-2)*(2*t-2)+1},rt.easingQuarticIn=function(t){return t*t*t*t},rt.easingQuarticOut=function(t){return 1- --t*t*t*t},rt.easingQuarticInOut=function(t){return t<.5?8*t*t*t*t:1-8*--t*t*t*t},rt.easingQuinticIn=function(t){return t*t*t*t*t},rt.easingQuinticOut=function(t){return 1+--t*t*t*t*t},rt.easingQuinticInOut=function(t){return t<.5?16*t*t*t*t*t:1+16*--t*t*t*t*t},rt.easingCircularIn=function(t){return-(Math.sqrt(1-t*t)-1)},rt.easingCircularOut=function(t){return Math.sqrt(1-(t-=1)*t)},rt.easingCircularInOut=function(t){return(t*=2)<1?-.5*(Math.sqrt(1-t*t)-1):.5*(Math.sqrt(1-(t-=2)*t)+1)},rt.easingExponentialIn=function(t){return Math.pow(2,10*(t-1))-.001},rt.easingExponentialOut=function(t){return 1-Math.pow(2,-10*t)},rt.easingExponentialInOut=function(t){return(t*=2)<1?.5*Math.pow(2,10*(t-1)):.5*(2-Math.pow(2,-10*(t-1)))},rt.easingBackIn=function(t){var e=1.70158;return t*t*((e+1)*t-e)},rt.easingBackOut=function(t){var e=1.70158;return--t*t*((e+1)*t+e)+1},rt.easingBackInOut=function(t){var e=2.5949095;return(t*=2)<1?.5*(t*t*((e+1)*t-e)):.5*((t-=2)*t*((e+1)*t+e)+2)},rt.easingElasticIn=function(t){var e,n=.1,i=.4;return 0===t?0:1===t?1:(!n||n<1?(n=1,e=i/4):e=i*Math.asin(1/n)/Math.PI*2,-(n*Math.pow(2,10*(t-=1))*Math.sin((t-e)*Math.PI*2/i)))},rt.easingElasticOut=function(t){var e,n=.1,i=.4;return 0===t?0:1===t?1:(!n||n<1?(n=1,e=i/4):e=i*Math.asin(1/n)/Math.PI*2,n*Math.pow(2,-10*t)*Math.sin((t-e)*Math.PI*2/i)+1)},rt.easingElasticInOut=function(t){var e,n=.1,i=.4;return 0===t?0:1===t?1:(!n||n<1?(n=1,e=i/4):e=i*Math.asin(1/n)/Math.PI*2,(t*=2)<1?-.5*(n*Math.pow(2,10*(t-=1))*Math.sin((t-e)*Math.PI*2/i)):n*Math.pow(2,-10*(t-=1))*Math.sin((t-e)*Math.PI*2/i)*.5+1)},rt.easingBounceIn=function(t){return 1-rt.easingBounceOut(1-t)},rt.easingBounceOut=function(t){return t<1/2.75?7.5625*t*t:t<2/2.75?7.5625*(t-=1.5/2.75)*t+.75:t<2.5/2.75?7.5625*(t-=2.25/2.75)*t+.9375:7.5625*(t-=2.625/2.75)*t+.984375},rt.easingBounceInOut=function(t){return t<.5?.5*rt.easingBounceIn(2*t):.5*rt.easingBounceOut(2*t-1)+.5};var at=function(t,e,n,i){this.element="scroll"in n&&(void 0===t||null===t)?Z:t,this.playing=!1,this.reversed=!1,this.paused=!1,this._startTime=null,this._pauseTime=null,this._startFired=!1,this.options={};for(var s in i)this.options[s]=i[s];if(this.options.rpr=i.rpr||!1,this.valuesRepeat={},this.valuesEnd={},this.valuesStart={},J.call(this,n,"end"),i.rpr?this.valuesStart=e:J.call(this,e,"start"),void 0!==this.options.perspective&&C in this.valuesEnd){var r="perspective("+parseInt(this.options.perspective)+"px)";this.valuesEnd[C].perspective=r}for(var a in this.valuesEnd)a in K&&!i.rpr&&K[a].call(this);this.options.chain=[],this.options.easing=i.easing&&"function"==typeof it(i.easing)?it(i.easing):rt.linear,this.options.repeat=i.repeat||0,this.options.repeatDelay=i.repeatDelay||0,this.options.yoyo=i.yoyo||!1,this.options.duration=i.duration||700,this.options.delay=i.delay||0,this.repeat=this.options.repeat},ot=(at.prototype={start:function(t){nt.call(this),this.options.rpr&&st.apply(this),N.apply(this);for(var s in this.valuesEnd)s in K&&this.options.rpr&&K[s].call(this),this.valuesRepeat[s]=this.valuesStart[s];return n.push(this),this.playing=!0,this.paused=!1,this._startFired=!1,this._startTime=t||e.now(),this._startTime+=this.options.delay,this._startFired||(this.options.start&&this.options.start.call(),this._startFired=!0),!i&&D(),this},play:function(){return this.paused&&this.playing&&(this.paused=!1,this.options.resume&&this.options.resume.call(),this._startTime+=e.now()-this._pauseTime,M(this),!i&&D()),this},resume:function(){return this.play()},pause:function(){return!this.paused&&this.playing&&(x(this),this.paused=!0,this._pauseTime=(1e3*e.now()>>0)/1e3,this.options.pause&&this.options.pause.call()),this},stop:function(){return!this.paused&&this.playing&&(x(this),this.playing=!1,this.paused=!1,et.call(this),this.options.stop&&this.options.stop.call(),this.stopChainedTweens(),tt.call(this)),this},chain:function(){return this.options.chain=arguments,this},stopChainedTweens:function(){for(var t=0,e=this.options.chain.length;t0?n.delay+(n.offset||0):n.delay,this.tweens.push(lt(t[s],e,i[s]))}),ut=function(t,e,n,i){this.tweens=[];for(var s=[],r=0,a=t.length;r0?i.delay+(i.offset||0):i.delay,this.tweens.push(ht(t[r],e,n,s[r]))},lt=(ot.prototype=ut.prototype={start:function(t){t=t||e.now();for(var n=0,i=this.tweens.length;n>0||0:t[s]&&e[s]?(100*Q(t[s],e[s],n)>>0)/100:null;return i?b(r.r,r.g,r.b):r.a?l+r.r+o+r.g+o+r.b+o+r.a+a:u+r.r+o+r.g+o+r.b+a}),W=q.translate=$?function(t,e,n,i){var s={};for(var r in e)s[r]=(t[r]===e[r]?e[r]:t[r]+(e[r]-t[r])*i>>0)+n;return s.x||s.y?"translate("+s.x+","+s.y+")":"translate3d("+s.translateX+","+s.translateY+","+s.translateZ+")"}:function(t,e,n,i){var s={};for(var r in e)s[r]=(t[r]===e[r]?e[r]:(10*(t[r]+(e[r]-t[r])*i)>>0)/10)+n;return s.x||s.y?"translate("+s.x+","+s.y+")":"translate3d("+s.translateX+","+s.translateY+","+s.translateZ+")"},z=q.rotate=function(t,e,n,i){var s={};for(var r in e)s[r]="z"===r?"rotate("+(10*(t[r]+(e[r]-t[r])*i)>>0)/10+n+")":r+"("+(10*(t[r]+(e[r]-t[r])*i)>>0)/10+n+")";return s.z?s.z:(s.rotateX||"")+(s.rotateY||"")+(s.rotateZ||"")},H=q.skew=function(t,e,n,i){var s={};for(var r in e)s[r]=r+"("+(10*(t[r]+(e[r]-t[r])*i)>>0)/10+n+")";return(s.skewX||"")+(s.skewY||"")},j=q.scale=function(t,e,n){return"scale("+(1e3*(t+(e-t)*n)>>0)/1e3+")"},D={},L=function(t){for(var e=0;e0)return isFinite(this.options.repeat)&&this.options.repeat--,this.options.yoyo&&(this.reversed=!this.reversed,tt.call(this)),this._startTime=this.options.yoyo&&!this.reversed?t+this.options.repeatDelay:t,!0;this.options.complete&&this.options.complete.call(),nt.call(this);for(var r=0,a=this.options.chain.length;r.99||s<.01?(10*Q(n,i,s)>>0)/10:Q(n,i,s)>>0)+"px"});var n=m(e);return"%"===n.u?n.v*this.element.offsetWidth/100:n.v},transform:function(t,e){if(C in D||(D[C]=function(t,e,n,i,s,r){t.style[e]=(n.perspective||"")+("translate"in n?W(n.translate,i.translate,"px",s):"")+("rotate"in n?z(n.rotate,i.rotate,"deg",s):"")+("skew"in n?H(n.skew,i.skew,"deg",s):"")+("scale"in n?j(n.scale,i.scale,s):"")}),/translate/.test(t)){if("translate3d"===t){var n=e.split(","),i=m(n[0]),s=m(n[1],t3d2=m(n[2]));return{translateX:"%"===i.u?i.v*this.element.offsetWidth/100:i.v,translateY:"%"===s.u?s.v*this.element.offsetHeight/100:s.v,translateZ:"%"===t3d2.u?t3d2.v*(this.element.offsetHeight+this.element.offsetWidth)/200:t3d2.v}}if(/^translate(?:[XYZ])$/.test(t)){var r=m(e),a=/X/.test(t)?this.element.offsetWidth/100:/Y/.test(t)?this.element.offsetHeight/100:(this.element.offsetWidth+this.element.offsetHeight)/200;return"%"===r.u?r.v*a:r.v}if("translate"===t){var o,u="string"==typeof e?e.split(","):e,l={},h=m(u[0]),c=u.length?m(u[1]):{v:0,u:"px"};return u instanceof Array?(l.x="%"===h.u?h.v*this.element.offsetWidth/100:h.v,l.y="%"===c.u?c.v*this.element.offsetHeight/100:c.v):(o=m(u),l.x="%"===o.u?o.v*this.element.offsetWidth/100:o.v,l.y=0),l}}else if(/rotate|skew/.test(t)){if(/^rotate(?:[XYZ])$|skew(?:[XY])$/.test(t)){var p=m(e,!0);return"rad"===p.u?g(p.v):p.v}if("rotate"===t){var f={},v=m(e,!0);return f.z="rad"===v.u?g(v.v):v.v,f}}else if("scale"===t)return parseFloat(e)},unitless:function(t,e){return!/scroll/.test(t)||t in D?"opacity"===t&&(t in D||(B?D[t]=function(t,e,n,i,s){var r="alpha(opacity=",a=")";t.style.filter=r+(100*Q(n,i,s)>>0)+a}:D[t]=function(t,e,n,i,s){t.style.opacity=(100*Q(n,i,s)>>0)/100})):D[t]=function(t,e,n,i,s){t.scrollTop=Q(n,i,s)>>0},parseFloat(e)},colors:function(t,e){return t in D||(D[t]=function(t,e,n,i,s,r){t.style[e]=R(n,i,s,r.keepHex)}),y(e)}},V=function(t,e){var n=(this.element,"start"===e?this.valuesStart:this.valuesEnd),i={},u={},l={},h={};for(var c in t)if(a.indexOf(c)!==-1){if(/^translate(?:[XYZ]|3d)$/.test(c)){for(var p=["X","Y","Z"],f=0;f<3;f++){var v=p[f];/3d/.test(c)?l["translate"+v]=J.transform.call(this,"translate"+v,t[c][f]):l["translate"+v]="translate"+v in t?J.transform.call(this,"translate"+v,t["translate"+v]):0}h.translate=l}else if(/^rotate(?:[XYZ])$|^skew(?:[XY])$/.test(c)){for(var d=/rotate/.test(c)?"rotate":"skew",g=["X","Y","Z"],m="rotate"===d?u:i,y=0;y<3;y++){var w=g[y];void 0!==t[d+w]&&"skewZ"!==c&&(m[d+w]=J.transform.call(this,d+w,t[d+w]))}h[d]=m}else/(rotate|translate|scale)$/.test(c)&&(h[c]=J.transform.call(this,c,t[c]));n[C]=h}else r.indexOf(c)!==-1?n[c]=J.boxModel.call(this,c,t[c]):o.indexOf(c)!==-1||"scroll"===c?n[c]=J.unitless.call(this,c,t[c]):s.indexOf(c)!==-1?n[c]=J.colors.call(this,c,t[c]):c in J&&(n[c]=J[c].call(this,c,t[c]))},tt=function(){if(this.options.yoyo)for(var t in this.valuesEnd){var e=this.valuesRepeat[t];this.valuesRepeat[t]=this.valuesEnd[t],this.valuesEnd[t]=e,this.valuesStart[t]=this.valuesRepeat[t]}},et=function(){this.repeat>0&&(this.options.repeat=this.repeat),this.options.yoyo&&this.reversed===!0&&(tt.call(this),this.reversed=!1),this.playing=!1,setTimeout(function(){n.length||T()},48)},nt=function(){("scroll"in this.valuesEnd||"scrollTop"in this.valuesEnd)&&document.body.getAttribute("data-tweening")&&(document.removeEventListener(S,w,!1),document.removeEventListener(P,w,!1),document.body.removeAttribute("data-tweening"))},it=function(){("scroll"in this.valuesEnd||"scrollTop"in this.valuesEnd)&&!document.body.getAttribute("data-tweening")&&(document.addEventListener(S,w,!1),document.addEventListener(P,w,!1),document.body.setAttribute("data-tweening","scroll"))},st=function(t){return"function"==typeof t?t:"string"==typeof t?at[t]:void 0},rt=function(){var e={},n=O(this.element,"transform"),i=["rotate","skew"],s=["X","Y","Z"];for(var r in this.valuesStart)if(a.indexOf(r)!==-1){var o=/(rotate|translate|scale)$/.test(r);if(/translate/.test(r)&&"translate"!==r)e.translate3d=n.translate3d||h[r];else if(o)e[r]=n[r]||h[r];else if(!o&&/rotate|skew/.test(r))for(var l=0;l<2;l++)for(var c=0;c<3;c++){var p=i[l]+s[c];a.indexOf(p)!==-1&&p in this.valuesStart&&(e[p]=n[p]||h[p])}}else if("scroll"!==r)if("opacity"===r&&B){var f=E(this.element,"filter");e.opacity="number"==typeof f?f:h.opacity}else u.indexOf(r)!==-1?e[r]=E(this.element,r)||l[r]:e[r]=r in K?K[r].call(this,r,this.valuesStart[r]):0;else e[r]=this.element===Z?t.pageYOffset||Z.scrollTop:this.element.scrollTop;for(var r in n)a.indexOf(r)===-1||r in this.valuesStart||(e[r]=n[r]||h[r]);if(this.valuesStart={},V.call(this,e,"start"),C in this.valuesEnd)for(var v in this.valuesStart[C])if("perspective"!==v)if("object"==typeof this.valuesStart[C][v])for(var d in this.valuesStart[C][v])"undefined"==typeof this.valuesEnd[C][v]&&(this.valuesEnd[C][v]={}),"number"==typeof this.valuesStart[C][v][d]&&"undefined"==typeof this.valuesEnd[C][v][d]&&(this.valuesEnd[C][v][d]=this.valuesStart[C][v][d]);else"number"==typeof this.valuesStart[C][v]&&"undefined"==typeof this.valuesEnd[C][v]&&(this.valuesEnd[C][v]=this.valuesStart[C][v])},at=t.Easing={};at.linear=function(t){return t},at.easingSinusoidalIn=function(t){return-Math.cos(t*Math.PI/2)+1},at.easingSinusoidalOut=function(t){return Math.sin(t*Math.PI/2)},at.easingSinusoidalInOut=function(t){return-.5*(Math.cos(Math.PI*t)-1)},at.easingQuadraticIn=function(t){return t*t},at.easingQuadraticOut=function(t){return t*(2-t)},at.easingQuadraticInOut=function(t){return t<.5?2*t*t:-1+(4-2*t)*t},at.easingCubicIn=function(t){return t*t*t},at.easingCubicOut=function(t){return--t*t*t+1},at.easingCubicInOut=function(t){return t<.5?4*t*t*t:(t-1)*(2*t-2)*(2*t-2)+1},at.easingQuarticIn=function(t){return t*t*t*t},at.easingQuarticOut=function(t){return 1- --t*t*t*t},at.easingQuarticInOut=function(t){return t<.5?8*t*t*t*t:1-8*--t*t*t*t},at.easingQuinticIn=function(t){return t*t*t*t*t},at.easingQuinticOut=function(t){return 1+--t*t*t*t*t},at.easingQuinticInOut=function(t){return t<.5?16*t*t*t*t*t:1+16*--t*t*t*t*t},at.easingCircularIn=function(t){return-(Math.sqrt(1-t*t)-1)},at.easingCircularOut=function(t){return Math.sqrt(1-(t-=1)*t)},at.easingCircularInOut=function(t){return(t*=2)<1?-.5*(Math.sqrt(1-t*t)-1):.5*(Math.sqrt(1-(t-=2)*t)+1)},at.easingExponentialIn=function(t){return Math.pow(2,10*(t-1))-.001},at.easingExponentialOut=function(t){return 1-Math.pow(2,-10*t)},at.easingExponentialInOut=function(t){return(t*=2)<1?.5*Math.pow(2,10*(t-1)):.5*(2-Math.pow(2,-10*(t-1)))},at.easingBackIn=function(t){var e=1.70158;return t*t*((e+1)*t-e)},at.easingBackOut=function(t){var e=1.70158;return--t*t*((e+1)*t+e)+1},at.easingBackInOut=function(t){var e=2.5949095;return(t*=2)<1?.5*(t*t*((e+1)*t-e)):.5*((t-=2)*t*((e+1)*t+e)+2)},at.easingElasticIn=function(t){var e,n=.1,i=.4;return 0===t?0:1===t?1:(!n||n<1?(n=1,e=i/4):e=i*Math.asin(1/n)/Math.PI*2,-(n*Math.pow(2,10*(t-=1))*Math.sin((t-e)*Math.PI*2/i)))},at.easingElasticOut=function(t){var e,n=.1,i=.4;return 0===t?0:1===t?1:(!n||n<1?(n=1,e=i/4):e=i*Math.asin(1/n)/Math.PI*2,n*Math.pow(2,-10*t)*Math.sin((t-e)*Math.PI*2/i)+1)},at.easingElasticInOut=function(t){var e,n=.1,i=.4;return 0===t?0:1===t?1:(!n||n<1?(n=1,e=i/4):e=i*Math.asin(1/n)/Math.PI*2,(t*=2)<1?-.5*(n*Math.pow(2,10*(t-=1))*Math.sin((t-e)*Math.PI*2/i)):n*Math.pow(2,-10*(t-=1))*Math.sin((t-e)*Math.PI*2/i)*.5+1)},at.easingBounceIn=function(t){return 1-at.easingBounceOut(1-t)},at.easingBounceOut=function(t){return t<1/2.75?7.5625*t*t:t<2/2.75?7.5625*(t-=1.5/2.75)*t+.75:t<2.5/2.75?7.5625*(t-=2.25/2.75)*t+.9375:7.5625*(t-=2.625/2.75)*t+.984375},at.easingBounceInOut=function(t){return t<.5?.5*at.easingBounceIn(2*t):.5*at.easingBounceOut(2*t-1)+.5};var ot=function(t,e,n,i){this.element="scroll"in n&&(void 0===t||null===t)?Z:t,this.playing=!1,this.reversed=!1,this.paused=!1,this._startTime=null,this._pauseTime=null,this._startFired=!1,this.options={};for(var s in i)this.options[s]=i[s];if(this.options.rpr=i.rpr||!1,this.valuesRepeat={},this.valuesEnd={},this.valuesStart={},V.call(this,n,"end"),i.rpr?this.valuesStart=e:V.call(this,e,"start"),void 0!==this.options.perspective&&C in this.valuesEnd){var r="perspective("+parseInt(this.options.perspective)+"px)";this.valuesEnd[C].perspective=r}for(var a in this.valuesEnd)a in G&&!i.rpr&&G[a].call(this);this.options.chain=[],this.options.easing=i.easing&&"function"==typeof st(i.easing)?st(i.easing):at.linear,this.options.repeat=i.repeat||0,this.options.repeatDelay=i.repeatDelay||0,this.options.yoyo=i.yoyo||!1,this.options.duration=i.duration||700,this.options.delay=i.delay||0,this.repeat=this.options.repeat},ut=(ot.prototype={start:function(t){it.call(this),this.options.rpr&&rt.apply(this),U.apply(this);for(var s in this.valuesEnd)s in G&&this.options.rpr&&G[s].call(this),this.valuesRepeat[s]=this.valuesStart[s];return n.push(this),this.playing=!0,this.paused=!1,this._startFired=!1,this._startTime=t||e.now(),this._startTime+=this.options.delay,this._startFired||(this.options.start&&this.options.start.call(),this._startFired=!0),!i&&L(),this},play:function(){return this.paused&&this.playing&&(this.paused=!1,this.options.resume&&this.options.resume.call(),this._startTime+=e.now()-this._pauseTime,M(this),!i&&L()),this},resume:function(){return this.play()},pause:function(){return!this.paused&&this.playing&&(x(this),this.paused=!0,this._pauseTime=e.now(),this.options.pause&&this.options.pause.call()),this},stop:function(){return!this.paused&&this.playing&&(x(this),this.playing=!1,this.paused=!1,nt.call(this),this.options.stop&&this.options.stop.call(),this.stopChainedTweens(),et.call(this)),this},chain:function(){return this.options.chain=arguments,this},stopChainedTweens:function(){for(var t=0,e=this.options.chain.length;t0?n.delay+(n.offset||0):n.delay,this.tweens.push(ht(t[s],e,i[s]))}),lt=function(t,e,n,i){this.tweens=[];for(var s=[],r=0,a=t.length;r0?i.delay+(i.offset||0):i.delay,this.tweens.push(ct(t[r],e,n,s[r]))},ht=(ut.prototype=lt.prototype={start:function(t){t=t||e.now();for(var n=0,i=this.tweens.length;n + --> - + + diff --git a/dist/kute-attr.min.js b/dist/kute-attr.min.js index a0e5e0a..7db3ad1 100644 --- a/dist/kute-attr.min.js +++ b/dist/kute-attr.min.js @@ -1,2 +1,2 @@ -// KUTE.js v1.5.99 | © dnp_theme | Attributes Plugin | MIT-License +// KUTE.js v1.6.0 | © dnp_theme | Attributes Plugin | MIT-License !function(t,e){if("function"==typeof define&&define.amd)define(["kute.js"],e);else if("object"==typeof module&&"function"==typeof require)module.exports=e(require("kute.js"));else{if("undefined"==typeof t.KUTE)throw new Error("Attributes Plugin require KUTE.js.");e(t.KUTE)}}(this,function(t){"use strict";var e,r="undefined"!=typeof global?global:window,n=t,i=n.dom,u=n.prepareStart,o=n.parseProperty,a=n.truC,s=n.truD,f=(n.crossCheck,r.Interpolate.unit,r.Interpolate.number),l=r.Interpolate.color,c=function(t,e){return t.getAttribute(e)},p=["fill","stroke","stop-color"],v=function(t){return t.replace(/[A-Z]/g,"-$&").toLowerCase()};return u.attr=function(t,e){var r={};for(var n in e){var i=v(n).replace(/_+[a-z]+/,""),u=c(this.element,i);r[i]=p.indexOf(i)!==-1?u||"rgba(0,0,0,0)":u||(/opacity/i.test(n)?1:0)}return r},o.attr=function(t,r){"attr"in i||(i.attr=function(t,e,r,n,u){for(var o in n)i.attributes[o](t,o,r[o],n[o],u)},e=i.attributes={});var n={};for(var u in r){var o=v(u),b=/(%|[a-z]+)$/,d=c(this.element,o.replace(/_+[a-z]+/,""));if(p.indexOf(o)===-1)if(null!==d&&b.test(d)){var y=s(d).u||s(r[u]).u,A=/%/.test(y)?"_percent":"_"+y;o+A in e||(/%/.test(y)?e[o+A]=function(t,e,r,n,i){var u=u||e.replace(A,"");t.setAttribute(u,(100*f(r.v,n.v,i)>>0)/100+n.u)}:e[o+A]=function(t,e,r,n,i){var u=u||e.replace(A,"");t.setAttribute(u,(f(r.v,n.v,i)>>0)+n.u)}),n[o+A]=s(r[u])}else b.test(r[u])&&null!==d&&(null===d||b.test(d))||(o in e||(/opacity/i.test(u)?e[o]=function(t,e,r,n,i){t.setAttribute(e,(100*f(r,n,i)>>0)/100)}:e[o]=function(t,e,r,n,i){t.setAttribute(e,(10*f(r,n,i)>>0)/10)}),n[o]=parseFloat(r[u]));else o in e||(e[o]=function(t,e,n,i,u){t.setAttribute(e,l(n,i,u,r.keepHex))}),n[o]=a(r[u])}return n},this}); \ No newline at end of file diff --git a/dist/kute-css.min.js b/dist/kute-css.min.js index a9bcc0e..ea372f6 100644 --- a/dist/kute-css.min.js +++ b/dist/kute-css.min.js @@ -1,2 +1,2 @@ -// KUTE.js v1.5.99 | © dnp_theme | CSS Plugin | MIT-License +// KUTE.js v1.6.0 | © dnp_theme | CSS Plugin | MIT-License !function(t,e){if("function"==typeof define&&define.amd)define(["kute.js"],e);else if("object"==typeof module&&"function"==typeof require)module.exports=e(require("kute.js"));else{if("undefined"==typeof t.KUTE)throw new Error("CSS Plugin require KUTE.js.");e(t.KUTE)}}(this,function(t){"use strict";for(var e="undefined"!=typeof global?global:window,r=t,n=r.dom,i=r.parseProperty,o=r.prepareStart,u=r.property,d=r.getCurrentStyle,a=r.truD,l=r.truC,f=e.Interpolate.number,c=(e.Interpolate.unit,e.Interpolate.color),g=["borderColor","borderTopColor","borderRightColor","borderBottomColor","borderLeftColor","outlineColor"],p=["right","bottom","minWidth","minHeight","maxWidth","maxHeight","padding","margin","paddingTop","paddingBottom","paddingLeft","paddingRight","marginTop","marginBottom","marginLeft","marginRight","borderWidth","borderTopWidth","borderRightWidth","borderBottomWidth","borderLeftWidth","outlineWidth"],s=["borderRadius","borderTopLeftRadius","borderTopRightRadius","borderBottomLeftRadius","borderBottomRightRadius"],h=["fontSize","lineHeight","letterSpacing","wordSpacing"],m=["clip"],b=["backgroundPosition"],v=p.concat(h),y=s.concat(p,h),R=g.concat(m,s,p,h,b),x=R.length,C=C||{},T=0;T-1?n[t]=function(t,e,r,n,i){t.style[e]=(i>.98||i<.02?(100*f(r.v,n.v,i)>>0)/100:f(r.v,n.v,i)>>0)+n.u}:n[t]=function(t,e,r,n,i){t.style[e]=(100*f(r.v,n.v,i)>>0)/100+n.u}),a(e)},o[v[T]]=function(t,e){return d(this.element,t)||C[t]};for(var T=0,W=s.length;T>0)/100+n.u}),a(e)},o[s[T]]=function(t,e){var r=t===s[0]?s[1]:t;return r=u(r),d(this.element,r)||C[t]};return i.clip=function(t,e){if(t in n||(n[t]=function(t,e,r,n,i){var o=0,u=[];for(o;o<4;o++){var d=r[o].v,a=n[o].v,l=n[o].u||"px";u[o]=(100*f(d,a,i)>>0)/100+l}t.style[e]="rect("+u+")"}),e instanceof Array)return[a(e[0]),a(e[1]),a(e[2]),a(e[3])];var r=e.replace(/rect|\(|\)/g,"");return r=/\,/g.test(r)?r.split(/\,/g):r.split(/\s/g),[a(r[0]),a(r[1]),a(r[2]),a(r[3])]},o.clip=function(t,e){var r=d(this.element,t),n=d(this.element,"width"),i=d(this.element,"height");return/rect/.test(r)?r:[0,n,i,0]},i.backgroundPosition=function(t,e){if(t in n||(n[t]=function(t,e,r,n,i){t.style[e]=(100*f(r[0],n[0],i)>>0)/100+"% "+(100*f(r[1],n[1],i)>>0)/100+"%"}),e instanceof Array){var r=a(e[0]).v,i=a(e[1]).v;return[NaN!==r?r:50,NaN!==i?i:50]}var o=e.replace(/top|left/g,0).replace(/right|bottom/g,100).replace(/center|middle/g,50);return o=o.split(/(\,|\s)/g),o=2===o.length?o:[o[0],50],[a(o[0]).v,a(o[1]).v]},o.backgroundPosition=function(t,e){return d(this.element,t)||C[t]},this}); \ No newline at end of file diff --git a/dist/kute-jquery.min.js b/dist/kute-jquery.min.js index a4695ad..6105e6e 100644 --- a/dist/kute-jquery.min.js +++ b/dist/kute-jquery.min.js @@ -1,2 +1,2 @@ -// KUTE.js v1.5.99 | © dnp_theme | jQuery Plugin | MIT-License -!function(e,t){if("function"==typeof define&&define.amd)define(["./kute.js","jquery"],function(e,n){return t(n,e),e});else if("object"==typeof module&&"function"==typeof require){var n=require("./kute.js"),r=require("jquery");module.exports=t(r,n)}else{if("undefined"==typeof e.KUTE||"undefined"==typeof e.$&&"undefined"==typeof e.jQuery)throw new Error("jQuery Plugin for KUTE.js depend on KUTE.js and jQuery");var r=e.jQuery||e.$,n=e.KUTE;r.fn.KUTE=t(r,n)}}(this,function(e,t){"use strict";return e.fn.fromTo=function(e,n,r){var i=this.length>1?this:this[0],o=this.length>1?"allFromTo":"fromTo";return t[o](i,e,n,r)},e.fn.to=function(e,n){var r=this.length>1?this:this[0],i=this.length>1?"allTo":"to";return t[i](r,e,n)},this}); \ No newline at end of file +// KUTE.js v1.6.0 | © dnp_theme | jQuery Plugin | MIT-License +!function(e,t){if("function"==typeof define&&define.amd)define(["./kute.js","jquery"],function(e,n){return t(n,e),e});else if("object"==typeof module&&"function"==typeof require){var n=require("./kute.js"),r=require("jquery");module.exports=t(r,n)}else{if("undefined"==typeof e.KUTE||"undefined"==typeof e.$&&"undefined"==typeof e.jQuery)throw new Error("jQuery Plugin for KUTE.js depend on KUTE.js and jQuery");var r=e.jQuery||e.$,n=e.KUTE;t(r,n)}}(this,function(e,t){"use strict";return e.fn.fromTo=function(e,n,r){var i=this.length>1?this:this[0],o=this.length>1?"allFromTo":"fromTo";return t[o](i,e,n,r)},e.fn.to=function(e,n){var r=this.length>1?this:this[0],i=this.length>1?"allTo":"to";return t[i](r,e,n)},this}); \ No newline at end of file diff --git a/dist/kute-svg.min.js b/dist/kute-svg.min.js index fb4841b..eeb6868 100644 --- a/dist/kute-svg.min.js +++ b/dist/kute-svg.min.js @@ -1,2 +1,2 @@ -// KUTE.js v1.5.99 | © dnp_theme | SVG Plugin | MIT-License -!function(t,e){if("function"==typeof define&&define.amd)define(["kute.js"],e);else if("object"==typeof module&&"function"==typeof require)module.exports=e(require("kute.js"));else{if("undefined"==typeof t.KUTE)throw new Error("SVG Plugin require KUTE.js.");e(t.KUTE)}}(this,function(t){"use strict";var e="undefined"!=typeof global?global:window,r=t,n=r.dom,s=r.parseProperty,a=r.prepareStart,o=r.getCurrentStyle,l=(r.truC,r.truD,r.crossCheck),h=e.Interpolate.number,u=(e.Interpolate.unit,e.Interpolate.color,!(!navigator||null===new RegExp("MSIE ([0-9]{1,}[.0-9]{0,})").exec(navigator.userAgent))&&parseFloat(RegExp.$1)),p=/(m[^(h|v|l)]*|[vhl][^(v|h|l|z)]*)/gim,f="http://www.w3.org/2000/svg",g=e.Interpolate.coords=function(t,e,r,n){for(var s=[],a=0;a>0)}return s};if(!(u&&u<9)){var c=function(t,e,r){for(var n=[],s=[],a=t.getTotalLength(),i=e.getTotalLength(),o=Math.max(a,i),l=o/r,h=0,u=l*r;(h+=r)1){var n=function(t){var e=t.split(",");if(2==e.length&&!isNaN(e[0])&&!isNaN(e[1]))return[parseFloat(e[0]),parseFloat(e[1])]},s=function(t,e){return void 0!=t&&void 0!=e?Math.sqrt(Math.pow(e[0]-t[0],2)+Math.pow(e[1]-t[1],2)):0};if(e.length>2)for(var a=0;a>0,i=h(r.s,n.s,s)>>0,o=h(r.e,n.e,s)>>0,l=0-i;t.style.strokeDashoffset=l+"px",t.style.strokeDasharray=(o+l-.5>>0)+"px, "+a+"px"}),I(this.element,e)},a.draw=function(){return I(this.element)};var N=function(t){var e,r,n=t&&/\)/.test(t)?t.split(")"):"none",s={};if(n instanceof Array)for(e=0;e>0)/10:(10*h(r[0],n[0],s)>>0)/10+" "+(10*h(r[1],n[1],s)>>0)/10)+e},L=e.Interpolate.rotateSVG=function(t,e,r,n,s){return t+((10*h(r[0],n[0],s)>>0)/10+" "+n[1]+","+n[2])+e},j=e.Interpolate.scaleSVG=function(t,e,r,n,s){return t+(1e3*h(r,n,s)>>0)/1e3+e},q=e.Interpolate.skewSVG=function(t,e,r,n,s){return t+(10*h(r,n,s)>>0)/10+e};return s.svgTransform=function(t,e){"svgTransform"in n||(n.svgTransform=function(t,e,r,n,s){t.setAttribute("transform",("translate"in r?F("translate(",")",r.translate,n.translate,s):"")+("rotate"in r?L("rotate(",")",r.rotate,n.rotate,s):"")+("scale"in r?j("scale(",")",r.scale,n.scale,s):"")+("skewX"in r?q("skewX(",")",r.skewX,n.skewX,s):"")+("skewY"in r?q("skewY(",")",r.skewY,n.skewY,s):""))});var r,s,a={},o=this.element.getBBox(),l=o.x+o.width/2,h=o.y+o.height/2;for(i in e)"rotate"===i?(r=e[i]instanceof Array?e[i]:/\s/.test(e[i])?[1*e[i].split(" ")[0],1*e[i].split(" ")[1].split(",")[0],1*e[i].split(" ")[1].split(",")[1]]:[1*e[i],l,h],a[i]=r):"translate"===i?(s=e[i]instanceof Array?e[i]:/\,|\s/.test(e[i])?e[i].split(/\,|\s/):[1*e[i],0],a[i]=[1*s[0]||0,1*s[1]||0]):"scale"===i?a[i]=1*e[i]||1:/skew/.test(i)&&(a[i]=1*e[i]||0);return"scale"in a&&(!("translate"in a)&&(a.translate=[0,0]),a.translate[0]+=(1-a.scale)*o.width/2,a.translate[1]+=(1-a.scale)*o.height/2,"rotate"in a&&(a.rotate[1]-="skewX"in a?Math.tan(a.skewX)*o.height:0,a.rotate[2]-="skewY"in a?Math.tan(a.skewY)*o.width:0),a.translate[0]+="skewX"in a?Math.tan(a.skewX)*o.height*2:0,a.translate[1]+="skewY"in a?Math.tan(a.skewY)*o.width*2:0),a},a.svgTransform=function(t,e){var r,n={},s=N(this.element.getAttribute("transform"));for(r in e)n[r]=r in s?s[r]:"scale"===r?1:0;return n},l.svgTransform=function(){var t,e,r,n=this.element.getBBox(),s=N(this.element.getAttribute("transform")),a=n.x+n.width/2,i=n.y+n.height/2;for(r in s)"translate"===r?(e=s[r]instanceof Array?s[r]:/\,|\s/.test(s[r])?s[r].split(/\,|\s/):[1*s[r],0],this.valuesStart.svgTransform[r]=[1*e[0]||0,1*e[1]||0]):"scale"===r?this.valuesStart.svgTransform[r]=1*s[r]||1:"rotate"===r?(t=s[r]instanceof Array?s[r]:/\s/.test(s[r])?[1*s[r].split(" ")[0],1*s[r].split(" ")[1].split(",")[0],1*s[r].split(" ")[1].split(",")[1]]:[1*s[r],a,i],this.valuesStart.svgTransform[r]=t):/skew/.test(r)&&(this.valuesStart.svgTransform[r]=1*s[r]||0);for(var r in this.valuesStart.svgTransform)r in this.valuesEnd.svgTransform||(this.valuesEnd.svgTransform[r]=this.valuesStart.svgTransform[r]),r==="rotate"in this.valuesStart.svgTransform&&"rotate"in this.valuesEnd.svgTransform&&(this.valuesEnd.svgTransform.rotate[1]=this.valuesStart.svgTransform.rotate[1]=a,this.valuesEnd.svgTransform.rotate[2]=this.valuesStart.svgTransform.rotate[2]=i)},this}}); \ No newline at end of file +// KUTE.js v1.6.0 | © dnp_theme | SVG Plugin | MIT-License +!function(t,e){if("function"==typeof define&&define.amd)define(["kute.js"],e);else if("object"==typeof module&&"function"==typeof require)module.exports=e(require("kute.js"));else{if("undefined"==typeof t.KUTE)throw new Error("SVG Plugin require KUTE.js.");e(t.KUTE)}}(this,function(t){"use strict";var e="undefined"!=typeof global?global:window,r=t,n=r.dom,a=r.parseProperty,s=r.prepareStart,o=r.getCurrentStyle,l=(r.truC,r.truD,r.crossCheck),h=e.Interpolate.number,u=(e.Interpolate.unit,e.Interpolate.color,null!==new RegExp("MSIE ([0-9]{1,}[.0-9]{0,})").exec(navigator.userAgent)&&parseFloat(RegExp.$1)),p=/iPhone|iPad|iPod|Android/i.test(navigator.userAgent);if(!(u&&u<9)){var f=/(m[^(h|v|l)]*|[vhl][^(v|h|l|z)]*)/gim,g="http://www.w3.org/2000/svg",c=e.Interpolate.coords=p?function(t,e,r,n){for(var a=[],i=0;i>0)/10)}return a},v=function(t,e,r){for(var n=[],a=[],i=t.getTotalLength(),s=e.getTotalLength(),o=Math.max(i,s),l=o/r,h=0,u=l*r;(h+=r)1){var n=function(t){var e=t.split(",");if(2==e.length&&!isNaN(e[0])&&!isNaN(e[1]))return[parseFloat(e[0]),parseFloat(e[1])]},a=function(t,e){return void 0!=t&&void 0!=e?Math.sqrt(Math.pow(e[0]-t[0],2)+Math.pow(e[1]-t[1],2)):0};if(e.length>2)for(var i=0;i>0,s=h(r.s,n.s,a)>>0,o=h(r.e,n.e,a)>>0,l=0-s;t.style.strokeDashoffset=l+"px",t.style.strokeDasharray=(o+l-.5>>0)+"px, "+i+"px"}),E(this.element,e)},s.draw=function(){return E(this.element)};var I=function(t,e){return/[a-zA-Z]/.test(t)&&!/px/.test(t)?t.replace(/top|left/,0).replace(/right|bottom/,100).replace(/center|middle/,50):/%/.test(t)?e.x+parseFloat(t)*e.width/100:parseFloat(t)},L=function(t){var e=t&&/\)/.test(t)?t.substring(0,t.length-1).split(/\)\s|\)/):"none",r={};if(e instanceof Array)for(var n=0,a=e.length;n>0)/10+(o?","+(10*o>>0)/10:"")+")":"")+(p?"rotate("+(10*p>>0)/10+")":"")+(c?"skewX("+(10*c>>0)/10+")":"")+(v?"skewY("+(10*v>>0)/10+")":"")+(1!==u?"scale("+(1e3*u>>0)/1e3+")":""))}),j.call(this,e)},s.svgTransform=function(t,e){var r={},n=L(this.element.getAttribute("transform"));for(var a in e)r[a]=a in n?n[a]:"scale"===a?1:0;return r},l.svgTransform=function(){var t=this.valuesStart.svgTransform,e=this.valuesEnd.svgTransform,r=j.call(this,L(this.element.getAttribute("transform")));for(var n in r)t[n]=r[n];var a=this.element.ownerSVGElement,i=a.createSVGTransformFromMatrix(a.createSVGMatrix().translate(-t.origin[0],-t.origin[1]).translate(t.translate[0]||0,t.translate[1]||0).rotate(t.rotate||0).skewX(t.skewX||0).skewY(t.skewY||0).scale(t.scale||1).translate(+t.origin[0],+t.origin[1]));t.translate=[i.matrix.e,i.matrix.f],i=null;for(var n in t)n in e||(e[n]=t[n])},this}}); \ No newline at end of file diff --git a/dist/kute-text.min.js b/dist/kute-text.min.js index 82bffe8..6f02fed 100644 --- a/dist/kute-text.min.js +++ b/dist/kute-text.min.js @@ -1,2 +1,2 @@ -// KUTE.js v1.5.99 | © dnp_theme | Text Plugin | MIT-License +// KUTE.js v1.6.0 | © dnp_theme | Text Plugin | MIT-License !function(t,e){if("function"==typeof define&&define.amd)define(["kute.js"],e);else if("object"==typeof module&&"function"==typeof require)module.exports=e(require("kute.js"));else{if("undefined"==typeof t.KUTE)throw new Error("Text-Plugin require KUTE.js.");e(t.KUTE)}}(this,function(t){"use strict";var e="undefined"!=typeof global?global:window,n=t,r=n.dom,i=n.prepareStart,s=n.parseProperty,u=e.Interpolate.number,o=String("abcdefghijklmnopqrstuvwxyz").split(""),a=String("abcdefghijklmnopqrstuvwxyz".toUpperCase()).split(""),l=String("~!@#$%^&*()_+{}[];'<>,./?=-").split(""),p=String("0123456789").split(""),f=o.concat(a,p),h=(f.concat(l),Math.random),c=Math.min;return i.text=i.number=function(t,e){return this.element.innerHTML},s.text=function(t,e){return"text"in r||(r.text=function(t,e,n,r,i,s){var u=u||"alpha"===s.textChars?o:"upper"===s.textChars?a:"numeric"===s.textChars?p:"alphanumeric"===s.textChars?f:"symbols"===s.textChars?l:s.textChars?s.textChars.split(""):o,g=u.length,m=u[h()*g>>0],b="",d="",x=n.substring(0),y=r.substring(0);b=""!==n?x.substring(x.length,c(i*x.length,x.length)>>0):"",d=y.substring(0,c(i*y.length,y.length)>>0),t.innerHTML=i<1?d+m+b:r}),e},s.number=function(t,e,n){return"number"in r||(r.number=function(t,e,n,r,i){t.innerHTML=u(n,r,i)>>0}),parseInt(e)||0},this}); \ No newline at end of file diff --git a/dist/kute.min.js b/dist/kute.min.js index 782a3ae..fba444d 100644 --- a/dist/kute.min.js +++ b/dist/kute.min.js @@ -1,2 +1,2 @@ -// KUTE.js v1.5.99 | © dnp_theme | Core Engine | MIT-License -!function(t,e){"function"==typeof define&&define.amd?define([],e):"object"==typeof exports?module.exports=e():t.KUTE=e()}(this,function(){"use strict";for(var t="undefined"!=typeof global?global:window,e=t.performance,n=[],i=null,s=["color","backgroundColor"],r=["top","left","width","height"],a=["translate3d","translateX","translateY","translateZ","rotate","translate","rotateX","rotateY","rotateZ","skewX","skewY","scale"],o=["opacity"],u=s.concat(o,r,a),l=u.length,h={},c=0;c>0||0:t[s]&&e[s]?(100*q(t[s],e[s],n)>>0)/100:null;return i?b(r.r,r.g,r.b):r.a?l+r.r+o+r.g+o+r.b+o+r.a+a:u+r.r+o+r.g+o+r.b+a}),R=$.translate=function(t,e,n,i){var s={};for(var r in e)s[r]=(t[r]===e[r]?e[r]:(10*(t[r]+(e[r]-t[r])*i)>>0)/10)+n;return s.x?"translate("+s.x+","+s.y+")":"translate3d("+s.translateX+","+s.translateY+","+s.translateZ+")"},W=$.rotate=function(t,e,n,i){var s={};for(var r in e)s[r]="z"===r?"rotate("+(10*(t[r]+(e[r]-t[r])*i)>>0)/10+n+")":r+"("+(10*(t[r]+(e[r]-t[r])*i)>>0)/10+n+")";return s.z?s.z:(s.rotateX||"")+(s.rotateY||"")+(s.rotateZ||"")},z=$.skew=function(t,e,n,i){var s={};for(var r in e)s[r]=r+"("+(10*(t[r]+(e[r]-t[r])*i)>>0)/10+n+")";return(s.skewX||"")+(s.skewY||"")},H=$.scale=function(t,e,n){return"scale("+(1e3*(t+(e-t)*n)>>0)/1e3+")"},j={},D=function(t){for(var e=0;e0)return this.options.repeat<9999?this.options.repeat--:this.options.repeat=0,this.options.yoyo&&(this.reversed=!this.reversed,V.call(this)),this._startTime=this.options.yoyo&&!this.reversed?t+this.options.repeatDelay:t,!0;this.options.complete&&this.options.complete.call(),et.call(this);for(var r=0,a=this.options.chain.length;r.99||s<.01?(10*q(n,i,s)>>0)/10:q(n,i,s)>>0)+"px"});var n=m(e);return"%"===n.u?n.v*this.element.offsetWidth/100:n.v},transform:function(t,e){if(C in j||(j[C]=function(t,e,n,i,s,r){t.style[e]=(n.perspective||"")+(n.translate?R(n.translate,i.translate,"px",s):"")+(n.rotate?W(n.rotate,i.rotate,"deg",s):"")+(n.skew?z(n.skew,i.skew,"deg",s):"")+(n.scale?H(n.scale,i.scale,s):"")}),/translate/.test(t)){if("translate3d"===t){var n=e.split(","),i=m(n[0]),s=m(n[1],t3d2=m(n[2]));return{translateX:"%"===i.u?i.v*this.element.offsetWidth/100:i.v,translateY:"%"===s.u?s.v*this.element.offsetHeight/100:s.v,translateZ:"%"===t3d2.u?t3d2.v*(this.element.offsetHeight+this.element.offsetWidth)/200:t3d2.v}}if(/^translate(?:[XYZ])$/.test(t)){var r=m(e),a=/X/.test(t)?this.element.offsetWidth/100:/Y/.test(t)?this.element.offsetHeight/100:(this.element.offsetWidth+this.element.offsetHeight)/200;return"%"===r.u?r.v*a:r.v}if("translate"===t){var o,u="string"==typeof e?e.split(","):e,l={},h=m(u[0]),c=u.length?m(u[1]):{v:0,u:"px"};return u instanceof Array?(l.x="%"===h.u?h.v*this.element.offsetWidth/100:h.v,l.y="%"===c.u?c.v*this.element.offsetHeight/100:c.v):(o=m(u),l.x="%"===o.u?o.v*this.element.offsetWidth/100:o.v,l.y=0),l}}else if(/rotate|skew/.test(t)){if(/^rotate(?:[XYZ])$|skew(?:[XY])$/.test(t)){var p=m(e,!0);return"rad"===p.u?g(p.v):p.v}if("rotate"===t){var f={},v=m(e,!0);return f.z="rad"===v.u?g(v.v):v.v,f}}else if("scale"===t)return parseFloat(e)},unitless:function(t,e){return!/scroll/.test(t)||t in j?"opacity"===t&&(t in j||(B?j[t]=function(t,e,n,i,s){var r="alpha(opacity=",a=")";t.style.filter=r+(100*q(n,i,s)>>0)+a}:j[t]=function(t,e,n,i,s){t.style.opacity=(100*q(n,i,s)>>0)/100})):j[t]=function(t,e,n,i,s){t.scrollTop=q(n,i,s)>>0},parseFloat(e)},colors:function(t,e){return t in j||(j[t]=function(t,e,n,i,s,r){t.style[e]=Q(n,i,s,r.keepHex)}),y(e)}},J=function(t,e){var n=(this.element,"start"===e?this.valuesStart:this.valuesEnd),i={},u={},l={},h={};for(var c in t)if(a.indexOf(c)!==-1){if(/^translate(?:[XYZ]|3d)$/.test(c)){for(var p=["X","Y","Z"],f=0;f<3;f++){var v=p[f];/3d/.test(c)?l["translate"+v]=G.transform.call(this,"translate"+v,t[c][f]):l["translate"+v]="translate"+v in t?G.transform.call(this,"translate"+v,t["translate"+v]):0}h.translate=l}else if(/^rotate(?:[XYZ])$|^skew(?:[XY])$/.test(c)){for(var d=/rotate/.test(c)?"rotate":"skew",g=["X","Y","Z"],m="rotate"===d?u:i,y=0;y<3;y++){var w=g[y];void 0!==t[d+w]&&"skewZ"!==c&&(m[d+w]=G.transform.call(this,d+w,t[d+w]))}h[d]=m}else/(rotate|translate|scale)$/.test(c)&&(h[c]=G.transform.call(this,c,t[c]));n[C]=h}else r.indexOf(c)!==-1?n[c]=G.boxModel.call(this,c,t[c]):o.indexOf(c)!==-1||"scroll"===c?n[c]=G.unitless.call(this,c,t[c]):s.indexOf(c)!==-1?n[c]=G.colors.call(this,c,t[c]):c in G&&(n[c]=G[c].call(this,c,t[c]))},V=function(){if(this.options.yoyo)for(var t in this.valuesEnd){var e=this.valuesRepeat[t];this.valuesRepeat[t]=this.valuesEnd[t],this.valuesEnd[t]=e,this.valuesStart[t]=this.valuesRepeat[t]}},tt=function(){this.repeat>0&&(this.options.repeat=this.repeat),this.options.yoyo&&this.reversed===!0&&(V.call(this),this.reversed=!1),this.playing=!1,setTimeout(function(){n.length||T()},48)},et=function(){("scroll"in this.valuesEnd||"scrollTop"in this.valuesEnd)&&document.body.getAttribute("data-tweening")&&(document.removeEventListener(S,w,!1),document.removeEventListener(Y,w,!1),document.body.removeAttribute("data-tweening"))},nt=function(){("scroll"in this.valuesEnd||"scrollTop"in this.valuesEnd)&&!document.body.getAttribute("data-tweening")&&(document.addEventListener(S,w,!1),document.addEventListener(Y,w,!1),document.body.setAttribute("data-tweening","scroll"))},it=function(t){return"function"==typeof t?t:"string"==typeof t?rt[t]:void 0},st=function(){var e={},n=O(this.element,"transform"),i=["rotate","skew"],s=["X","Y","Z"];for(var r in this.valuesStart)if(a.indexOf(r)!==-1){var o=/(rotate|translate|scale)$/.test(r);if(/translate/.test(r)&&"translate"!==r)e.translate3d=n.translate3d||h[r];else if(o)e[r]=n[r]||h[r];else if(!o&&/rotate|skew/.test(r))for(var l=0;l<2;l++)for(var c=0;c<3;c++){var p=i[l]+s[c];a.indexOf(p)!==-1&&p in this.valuesStart&&(e[p]=n[p]||h[p])}}else if("scroll"!==r)if("opacity"===r&&B){var f=E(this.element,"filter");e.opacity="number"==typeof f?f:h.opacity}else u.indexOf(r)!==-1?e[r]=E(this.element,r)||l[r]:e[r]=r in U?U[r].call(this,r,this.valuesStart[r]):0;else e[r]=this.element===Z?t.pageYOffset||Z.scrollTop:this.element.scrollTop;for(var r in n)a.indexOf(r)===-1||r in this.valuesStart||(e[r]=n[r]||h[r]);if(this.valuesStart={},J.call(this,e,"start"),C in this.valuesEnd)for(var v in this.valuesStart[C])if("perspective"!==v)if("object"==typeof this.valuesStart[C][v])for(var d in this.valuesStart[C][v])"undefined"==typeof this.valuesEnd[C][v]&&(this.valuesEnd[C][v]={}),"number"==typeof this.valuesStart[C][v][d]&&"undefined"==typeof this.valuesEnd[C][v][d]&&(this.valuesEnd[C][v][d]=this.valuesStart[C][v][d]);else"number"==typeof this.valuesStart[C][v]&&"undefined"==typeof this.valuesEnd[C][v]&&(this.valuesEnd[C][v]=this.valuesStart[C][v])},rt=t.Easing={};rt.linear=function(t){return t},rt.easingSinusoidalIn=function(t){return-Math.cos(t*Math.PI/2)+1},rt.easingSinusoidalOut=function(t){return Math.sin(t*Math.PI/2)},rt.easingSinusoidalInOut=function(t){return-.5*(Math.cos(Math.PI*t)-1)},rt.easingQuadraticIn=function(t){return t*t},rt.easingQuadraticOut=function(t){return t*(2-t)},rt.easingQuadraticInOut=function(t){return t<.5?2*t*t:-1+(4-2*t)*t},rt.easingCubicIn=function(t){return t*t*t},rt.easingCubicOut=function(t){return--t*t*t+1},rt.easingCubicInOut=function(t){return t<.5?4*t*t*t:(t-1)*(2*t-2)*(2*t-2)+1},rt.easingQuarticIn=function(t){return t*t*t*t},rt.easingQuarticOut=function(t){return 1- --t*t*t*t},rt.easingQuarticInOut=function(t){return t<.5?8*t*t*t*t:1-8*--t*t*t*t},rt.easingQuinticIn=function(t){return t*t*t*t*t},rt.easingQuinticOut=function(t){return 1+--t*t*t*t*t},rt.easingQuinticInOut=function(t){return t<.5?16*t*t*t*t*t:1+16*--t*t*t*t*t},rt.easingCircularIn=function(t){return-(Math.sqrt(1-t*t)-1)},rt.easingCircularOut=function(t){return Math.sqrt(1-(t-=1)*t)},rt.easingCircularInOut=function(t){return(t*=2)<1?-.5*(Math.sqrt(1-t*t)-1):.5*(Math.sqrt(1-(t-=2)*t)+1)},rt.easingExponentialIn=function(t){return Math.pow(2,10*(t-1))-.001},rt.easingExponentialOut=function(t){return 1-Math.pow(2,-10*t)},rt.easingExponentialInOut=function(t){return(t*=2)<1?.5*Math.pow(2,10*(t-1)):.5*(2-Math.pow(2,-10*(t-1)))},rt.easingBackIn=function(t){var e=1.70158;return t*t*((e+1)*t-e)},rt.easingBackOut=function(t){var e=1.70158;return--t*t*((e+1)*t+e)+1},rt.easingBackInOut=function(t){var e=2.5949095;return(t*=2)<1?.5*(t*t*((e+1)*t-e)):.5*((t-=2)*t*((e+1)*t+e)+2)},rt.easingElasticIn=function(t){var e,n=.1,i=.4;return 0===t?0:1===t?1:(!n||n<1?(n=1,e=i/4):e=i*Math.asin(1/n)/Math.PI*2,-(n*Math.pow(2,10*(t-=1))*Math.sin((t-e)*Math.PI*2/i)))},rt.easingElasticOut=function(t){var e,n=.1,i=.4;return 0===t?0:1===t?1:(!n||n<1?(n=1,e=i/4):e=i*Math.asin(1/n)/Math.PI*2,n*Math.pow(2,-10*t)*Math.sin((t-e)*Math.PI*2/i)+1)},rt.easingElasticInOut=function(t){var e,n=.1,i=.4;return 0===t?0:1===t?1:(!n||n<1?(n=1,e=i/4):e=i*Math.asin(1/n)/Math.PI*2,(t*=2)<1?-.5*(n*Math.pow(2,10*(t-=1))*Math.sin((t-e)*Math.PI*2/i)):n*Math.pow(2,-10*(t-=1))*Math.sin((t-e)*Math.PI*2/i)*.5+1)},rt.easingBounceIn=function(t){return 1-rt.easingBounceOut(1-t)},rt.easingBounceOut=function(t){return t<1/2.75?7.5625*t*t:t<2/2.75?7.5625*(t-=1.5/2.75)*t+.75:t<2.5/2.75?7.5625*(t-=2.25/2.75)*t+.9375:7.5625*(t-=2.625/2.75)*t+.984375},rt.easingBounceInOut=function(t){return t<.5?.5*rt.easingBounceIn(2*t):.5*rt.easingBounceOut(2*t-1)+.5};var at=function(t,e,n,i){this.element="scroll"in n&&(void 0===t||null===t)?Z:t,this.playing=!1,this.reversed=!1,this.paused=!1,this._startTime=null,this._pauseTime=null,this._startFired=!1,this.options={};for(var s in i)this.options[s]=i[s];if(this.options.rpr=i.rpr||!1,this.valuesRepeat={},this.valuesEnd={},this.valuesStart={},J.call(this,n,"end"),i.rpr?this.valuesStart=e:J.call(this,e,"start"),void 0!==this.options.perspective&&C in this.valuesEnd){var r="perspective("+parseInt(this.options.perspective)+"px)";this.valuesEnd[C].perspective=r}for(var a in this.valuesEnd)a in K&&!i.rpr&&K[a].call(this);this.options.chain=[],this.options.easing=i.easing&&"function"==typeof it(i.easing)?it(i.easing):rt.linear,this.options.repeat=i.repeat||0,this.options.repeatDelay=i.repeatDelay||0,this.options.yoyo=i.yoyo||!1,this.options.duration=i.duration||700,this.options.delay=i.delay||0,this.repeat=this.options.repeat},ot=(at.prototype={start:function(t){nt.call(this),this.options.rpr&&st.apply(this),N.apply(this);for(var s in this.valuesEnd)s in K&&this.options.rpr&&K[s].call(this),this.valuesRepeat[s]=this.valuesStart[s];return n.push(this),this.playing=!0,this.paused=!1,this._startFired=!1,this._startTime=t||e.now(),this._startTime+=this.options.delay,this._startFired||(this.options.start&&this.options.start.call(),this._startFired=!0),!i&&D(),this},play:function(){return this.paused&&this.playing&&(this.paused=!1,this.options.resume&&this.options.resume.call(),this._startTime+=e.now()-this._pauseTime,M(this),!i&&D()),this},resume:function(){return this.play()},pause:function(){return!this.paused&&this.playing&&(x(this),this.paused=!0,this._pauseTime=(1e3*e.now()>>0)/1e3,this.options.pause&&this.options.pause.call()),this},stop:function(){return!this.paused&&this.playing&&(x(this),this.playing=!1,this.paused=!1,et.call(this),this.options.stop&&this.options.stop.call(),this.stopChainedTweens(),tt.call(this)),this},chain:function(){return this.options.chain=arguments,this},stopChainedTweens:function(){for(var t=0,e=this.options.chain.length;t0?n.delay+(n.offset||0):n.delay,this.tweens.push(lt(t[s],e,i[s]))}),ut=function(t,e,n,i){this.tweens=[];for(var s=[],r=0,a=t.length;r0?i.delay+(i.offset||0):i.delay,this.tweens.push(ht(t[r],e,n,s[r]))},lt=(ot.prototype=ut.prototype={start:function(t){t=t||e.now();for(var n=0,i=this.tweens.length;n>0||0:t[s]&&e[s]?(100*Q(t[s],e[s],n)>>0)/100:null;return i?b(r.r,r.g,r.b):r.a?l+r.r+o+r.g+o+r.b+o+r.a+a:u+r.r+o+r.g+o+r.b+a}),W=q.translate=$?function(t,e,n,i){var s={};for(var r in e)s[r]=(t[r]===e[r]?e[r]:t[r]+(e[r]-t[r])*i>>0)+n;return s.x||s.y?"translate("+s.x+","+s.y+")":"translate3d("+s.translateX+","+s.translateY+","+s.translateZ+")"}:function(t,e,n,i){var s={};for(var r in e)s[r]=(t[r]===e[r]?e[r]:(10*(t[r]+(e[r]-t[r])*i)>>0)/10)+n;return s.x||s.y?"translate("+s.x+","+s.y+")":"translate3d("+s.translateX+","+s.translateY+","+s.translateZ+")"},z=q.rotate=function(t,e,n,i){var s={};for(var r in e)s[r]="z"===r?"rotate("+(10*(t[r]+(e[r]-t[r])*i)>>0)/10+n+")":r+"("+(10*(t[r]+(e[r]-t[r])*i)>>0)/10+n+")";return s.z?s.z:(s.rotateX||"")+(s.rotateY||"")+(s.rotateZ||"")},H=q.skew=function(t,e,n,i){var s={};for(var r in e)s[r]=r+"("+(10*(t[r]+(e[r]-t[r])*i)>>0)/10+n+")";return(s.skewX||"")+(s.skewY||"")},j=q.scale=function(t,e,n){return"scale("+(1e3*(t+(e-t)*n)>>0)/1e3+")"},D={},L=function(t){for(var e=0;e0)return isFinite(this.options.repeat)&&this.options.repeat--,this.options.yoyo&&(this.reversed=!this.reversed,tt.call(this)),this._startTime=this.options.yoyo&&!this.reversed?t+this.options.repeatDelay:t,!0;this.options.complete&&this.options.complete.call(),nt.call(this);for(var r=0,a=this.options.chain.length;r.99||s<.01?(10*Q(n,i,s)>>0)/10:Q(n,i,s)>>0)+"px"});var n=m(e);return"%"===n.u?n.v*this.element.offsetWidth/100:n.v},transform:function(t,e){if(C in D||(D[C]=function(t,e,n,i,s,r){t.style[e]=(n.perspective||"")+("translate"in n?W(n.translate,i.translate,"px",s):"")+("rotate"in n?z(n.rotate,i.rotate,"deg",s):"")+("skew"in n?H(n.skew,i.skew,"deg",s):"")+("scale"in n?j(n.scale,i.scale,s):"")}),/translate/.test(t)){if("translate3d"===t){var n=e.split(","),i=m(n[0]),s=m(n[1],t3d2=m(n[2]));return{translateX:"%"===i.u?i.v*this.element.offsetWidth/100:i.v,translateY:"%"===s.u?s.v*this.element.offsetHeight/100:s.v,translateZ:"%"===t3d2.u?t3d2.v*(this.element.offsetHeight+this.element.offsetWidth)/200:t3d2.v}}if(/^translate(?:[XYZ])$/.test(t)){var r=m(e),a=/X/.test(t)?this.element.offsetWidth/100:/Y/.test(t)?this.element.offsetHeight/100:(this.element.offsetWidth+this.element.offsetHeight)/200;return"%"===r.u?r.v*a:r.v}if("translate"===t){var o,u="string"==typeof e?e.split(","):e,l={},h=m(u[0]),c=u.length?m(u[1]):{v:0,u:"px"};return u instanceof Array?(l.x="%"===h.u?h.v*this.element.offsetWidth/100:h.v,l.y="%"===c.u?c.v*this.element.offsetHeight/100:c.v):(o=m(u),l.x="%"===o.u?o.v*this.element.offsetWidth/100:o.v,l.y=0),l}}else if(/rotate|skew/.test(t)){if(/^rotate(?:[XYZ])$|skew(?:[XY])$/.test(t)){var p=m(e,!0);return"rad"===p.u?g(p.v):p.v}if("rotate"===t){var f={},v=m(e,!0);return f.z="rad"===v.u?g(v.v):v.v,f}}else if("scale"===t)return parseFloat(e)},unitless:function(t,e){return!/scroll/.test(t)||t in D?"opacity"===t&&(t in D||(B?D[t]=function(t,e,n,i,s){var r="alpha(opacity=",a=")";t.style.filter=r+(100*Q(n,i,s)>>0)+a}:D[t]=function(t,e,n,i,s){t.style.opacity=(100*Q(n,i,s)>>0)/100})):D[t]=function(t,e,n,i,s){t.scrollTop=Q(n,i,s)>>0},parseFloat(e)},colors:function(t,e){return t in D||(D[t]=function(t,e,n,i,s,r){t.style[e]=R(n,i,s,r.keepHex)}),y(e)}},V=function(t,e){var n=(this.element,"start"===e?this.valuesStart:this.valuesEnd),i={},u={},l={},h={};for(var c in t)if(a.indexOf(c)!==-1){if(/^translate(?:[XYZ]|3d)$/.test(c)){for(var p=["X","Y","Z"],f=0;f<3;f++){var v=p[f];/3d/.test(c)?l["translate"+v]=J.transform.call(this,"translate"+v,t[c][f]):l["translate"+v]="translate"+v in t?J.transform.call(this,"translate"+v,t["translate"+v]):0}h.translate=l}else if(/^rotate(?:[XYZ])$|^skew(?:[XY])$/.test(c)){for(var d=/rotate/.test(c)?"rotate":"skew",g=["X","Y","Z"],m="rotate"===d?u:i,y=0;y<3;y++){var w=g[y];void 0!==t[d+w]&&"skewZ"!==c&&(m[d+w]=J.transform.call(this,d+w,t[d+w]))}h[d]=m}else/(rotate|translate|scale)$/.test(c)&&(h[c]=J.transform.call(this,c,t[c]));n[C]=h}else r.indexOf(c)!==-1?n[c]=J.boxModel.call(this,c,t[c]):o.indexOf(c)!==-1||"scroll"===c?n[c]=J.unitless.call(this,c,t[c]):s.indexOf(c)!==-1?n[c]=J.colors.call(this,c,t[c]):c in J&&(n[c]=J[c].call(this,c,t[c]))},tt=function(){if(this.options.yoyo)for(var t in this.valuesEnd){var e=this.valuesRepeat[t];this.valuesRepeat[t]=this.valuesEnd[t],this.valuesEnd[t]=e,this.valuesStart[t]=this.valuesRepeat[t]}},et=function(){this.repeat>0&&(this.options.repeat=this.repeat),this.options.yoyo&&this.reversed===!0&&(tt.call(this),this.reversed=!1),this.playing=!1,setTimeout(function(){n.length||T()},48)},nt=function(){("scroll"in this.valuesEnd||"scrollTop"in this.valuesEnd)&&document.body.getAttribute("data-tweening")&&(document.removeEventListener(S,w,!1),document.removeEventListener(P,w,!1),document.body.removeAttribute("data-tweening"))},it=function(){("scroll"in this.valuesEnd||"scrollTop"in this.valuesEnd)&&!document.body.getAttribute("data-tweening")&&(document.addEventListener(S,w,!1),document.addEventListener(P,w,!1),document.body.setAttribute("data-tweening","scroll"))},st=function(t){return"function"==typeof t?t:"string"==typeof t?at[t]:void 0},rt=function(){var e={},n=O(this.element,"transform"),i=["rotate","skew"],s=["X","Y","Z"];for(var r in this.valuesStart)if(a.indexOf(r)!==-1){var o=/(rotate|translate|scale)$/.test(r);if(/translate/.test(r)&&"translate"!==r)e.translate3d=n.translate3d||h[r];else if(o)e[r]=n[r]||h[r];else if(!o&&/rotate|skew/.test(r))for(var l=0;l<2;l++)for(var c=0;c<3;c++){var p=i[l]+s[c];a.indexOf(p)!==-1&&p in this.valuesStart&&(e[p]=n[p]||h[p])}}else if("scroll"!==r)if("opacity"===r&&B){var f=E(this.element,"filter");e.opacity="number"==typeof f?f:h.opacity}else u.indexOf(r)!==-1?e[r]=E(this.element,r)||l[r]:e[r]=r in K?K[r].call(this,r,this.valuesStart[r]):0;else e[r]=this.element===Z?t.pageYOffset||Z.scrollTop:this.element.scrollTop;for(var r in n)a.indexOf(r)===-1||r in this.valuesStart||(e[r]=n[r]||h[r]);if(this.valuesStart={},V.call(this,e,"start"),C in this.valuesEnd)for(var v in this.valuesStart[C])if("perspective"!==v)if("object"==typeof this.valuesStart[C][v])for(var d in this.valuesStart[C][v])"undefined"==typeof this.valuesEnd[C][v]&&(this.valuesEnd[C][v]={}),"number"==typeof this.valuesStart[C][v][d]&&"undefined"==typeof this.valuesEnd[C][v][d]&&(this.valuesEnd[C][v][d]=this.valuesStart[C][v][d]);else"number"==typeof this.valuesStart[C][v]&&"undefined"==typeof this.valuesEnd[C][v]&&(this.valuesEnd[C][v]=this.valuesStart[C][v])},at=t.Easing={};at.linear=function(t){return t},at.easingSinusoidalIn=function(t){return-Math.cos(t*Math.PI/2)+1},at.easingSinusoidalOut=function(t){return Math.sin(t*Math.PI/2)},at.easingSinusoidalInOut=function(t){return-.5*(Math.cos(Math.PI*t)-1)},at.easingQuadraticIn=function(t){return t*t},at.easingQuadraticOut=function(t){return t*(2-t)},at.easingQuadraticInOut=function(t){return t<.5?2*t*t:-1+(4-2*t)*t},at.easingCubicIn=function(t){return t*t*t},at.easingCubicOut=function(t){return--t*t*t+1},at.easingCubicInOut=function(t){return t<.5?4*t*t*t:(t-1)*(2*t-2)*(2*t-2)+1},at.easingQuarticIn=function(t){return t*t*t*t},at.easingQuarticOut=function(t){return 1- --t*t*t*t},at.easingQuarticInOut=function(t){return t<.5?8*t*t*t*t:1-8*--t*t*t*t},at.easingQuinticIn=function(t){return t*t*t*t*t},at.easingQuinticOut=function(t){return 1+--t*t*t*t*t},at.easingQuinticInOut=function(t){return t<.5?16*t*t*t*t*t:1+16*--t*t*t*t*t},at.easingCircularIn=function(t){return-(Math.sqrt(1-t*t)-1)},at.easingCircularOut=function(t){return Math.sqrt(1-(t-=1)*t)},at.easingCircularInOut=function(t){return(t*=2)<1?-.5*(Math.sqrt(1-t*t)-1):.5*(Math.sqrt(1-(t-=2)*t)+1)},at.easingExponentialIn=function(t){return Math.pow(2,10*(t-1))-.001},at.easingExponentialOut=function(t){return 1-Math.pow(2,-10*t)},at.easingExponentialInOut=function(t){return(t*=2)<1?.5*Math.pow(2,10*(t-1)):.5*(2-Math.pow(2,-10*(t-1)))},at.easingBackIn=function(t){var e=1.70158;return t*t*((e+1)*t-e)},at.easingBackOut=function(t){var e=1.70158;return--t*t*((e+1)*t+e)+1},at.easingBackInOut=function(t){var e=2.5949095;return(t*=2)<1?.5*(t*t*((e+1)*t-e)):.5*((t-=2)*t*((e+1)*t+e)+2)},at.easingElasticIn=function(t){var e,n=.1,i=.4;return 0===t?0:1===t?1:(!n||n<1?(n=1,e=i/4):e=i*Math.asin(1/n)/Math.PI*2,-(n*Math.pow(2,10*(t-=1))*Math.sin((t-e)*Math.PI*2/i)))},at.easingElasticOut=function(t){var e,n=.1,i=.4;return 0===t?0:1===t?1:(!n||n<1?(n=1,e=i/4):e=i*Math.asin(1/n)/Math.PI*2,n*Math.pow(2,-10*t)*Math.sin((t-e)*Math.PI*2/i)+1)},at.easingElasticInOut=function(t){var e,n=.1,i=.4;return 0===t?0:1===t?1:(!n||n<1?(n=1,e=i/4):e=i*Math.asin(1/n)/Math.PI*2,(t*=2)<1?-.5*(n*Math.pow(2,10*(t-=1))*Math.sin((t-e)*Math.PI*2/i)):n*Math.pow(2,-10*(t-=1))*Math.sin((t-e)*Math.PI*2/i)*.5+1)},at.easingBounceIn=function(t){return 1-at.easingBounceOut(1-t)},at.easingBounceOut=function(t){return t<1/2.75?7.5625*t*t:t<2/2.75?7.5625*(t-=1.5/2.75)*t+.75:t<2.5/2.75?7.5625*(t-=2.25/2.75)*t+.9375:7.5625*(t-=2.625/2.75)*t+.984375},at.easingBounceInOut=function(t){return t<.5?.5*at.easingBounceIn(2*t):.5*at.easingBounceOut(2*t-1)+.5};var ot=function(t,e,n,i){this.element="scroll"in n&&(void 0===t||null===t)?Z:t,this.playing=!1,this.reversed=!1,this.paused=!1,this._startTime=null,this._pauseTime=null,this._startFired=!1,this.options={};for(var s in i)this.options[s]=i[s];if(this.options.rpr=i.rpr||!1,this.valuesRepeat={},this.valuesEnd={},this.valuesStart={},V.call(this,n,"end"),i.rpr?this.valuesStart=e:V.call(this,e,"start"),void 0!==this.options.perspective&&C in this.valuesEnd){var r="perspective("+parseInt(this.options.perspective)+"px)";this.valuesEnd[C].perspective=r}for(var a in this.valuesEnd)a in G&&!i.rpr&&G[a].call(this);this.options.chain=[],this.options.easing=i.easing&&"function"==typeof st(i.easing)?st(i.easing):at.linear,this.options.repeat=i.repeat||0,this.options.repeatDelay=i.repeatDelay||0,this.options.yoyo=i.yoyo||!1,this.options.duration=i.duration||700,this.options.delay=i.delay||0,this.repeat=this.options.repeat},ut=(ot.prototype={start:function(t){it.call(this),this.options.rpr&&rt.apply(this),U.apply(this);for(var s in this.valuesEnd)s in G&&this.options.rpr&&G[s].call(this),this.valuesRepeat[s]=this.valuesStart[s];return n.push(this),this.playing=!0,this.paused=!1,this._startFired=!1,this._startTime=t||e.now(),this._startTime+=this.options.delay,this._startFired||(this.options.start&&this.options.start.call(),this._startFired=!0),!i&&L(),this},play:function(){return this.paused&&this.playing&&(this.paused=!1,this.options.resume&&this.options.resume.call(),this._startTime+=e.now()-this._pauseTime,M(this),!i&&L()),this},resume:function(){return this.play()},pause:function(){return!this.paused&&this.playing&&(x(this),this.paused=!0,this._pauseTime=e.now(),this.options.pause&&this.options.pause.call()),this},stop:function(){return!this.paused&&this.playing&&(x(this),this.playing=!1,this.paused=!1,nt.call(this),this.options.stop&&this.options.stop.call(),this.stopChainedTweens(),et.call(this)),this},chain:function(){return this.options.chain=arguments,this},stopChainedTweens:function(){for(var t=0,e=this.options.chain.length;t0?n.delay+(n.offset||0):n.delay,this.tweens.push(ht(t[s],e,i[s]))}),lt=function(t,e,n,i){this.tweens=[];for(var s=[],r=0,a=t.length;r0?i.delay+(i.offset||0):i.delay,this.tweens.push(ct(t[r],e,n,s[r]))},ht=(ut.prototype=lt.prototype={start:function(t){t=t||e.now();for(var n=0,i=this.tweens.length;n>0)/100) + b.u ); } } else { - atts[prop+s] = function(l,p,a,b,v) { + attributes[prop+s] = function(l,p,a,b,v) { var _p = _p || p.replace(s,''); l.setAttribute(_p, (number(a.v,b.v,v)>>0) + b.u ); } } } - ats[prop+s] = trueDimension(o[p]); + attributesObject[prop+s] = trueDimension(o[p]); } else if ( !regex.test(o[p]) || cv === null || cv !== null && !regex.test(cv) ) { - if (!(prop in atts)) { + if (!(prop in attributes)) { if (/opacity/i.test(p)) { - atts[prop] = function(l,o,a,b,v) { + attributes[prop] = function(l,o,a,b,v) { l.setAttribute(o, (number(a,b,v) * 100 >> 0) / 100 ); } } else { - atts[prop] = function(l,o,a,b,v) { + attributes[prop] = function(l,o,a,b,v) { l.setAttribute(o, (number(a,b,v) *10 >> 0 ) / 10 ); } } } - ats[prop] = parseFloat(o[p]); + attributesObject[prop] = parseFloat(o[p]); } } else { - if (!(prop in atts)) { - atts[prop] = function(l,u,a,b,v) { + if (!(prop in attributes)) { + attributes[prop] = function(l,u,a,b,v) { l.setAttribute(u, color(a,b,v,o.keepHex)); } } - ats[prop] = trueColor(o[p]); + attributesObject[prop] = trueColor(o[p]); } } - return ats; + return attributesObject; } return this; diff --git a/kute-css.js b/kute-css.js index 0acf194..b584c12 100644 --- a/kute-css.js +++ b/kute-css.js @@ -16,11 +16,12 @@ })(this, function(KUTE){ 'use strict'; - var g = typeof global !== 'undefined' ? global : window, K = KUTE, DOM = K.dom, + var g = typeof global !== 'undefined' ? global : window, K = KUTE, DOM = K.dom, // connect to KUTE object and global parseProperty = K.parseProperty, prepareStart = K.prepareStart, property = K.property, getCurrentStyle = K.getCurrentStyle, trueDimension = K.truD, trueColor = K.truC, number = g.Interpolate.number, unit = g.Interpolate.unit, color = g.Interpolate.color; + // supported properties var _colors = ['borderColor', 'borderTopColor', 'borderRightColor', 'borderBottomColor', 'borderLeftColor', 'outlineColor'], // colors 'hex', 'rgb', 'rgba' -- #fff / rgb(0,0,0) / rgba(0,0,0,0) _boxModel = ['right', 'bottom', 'minWidth', 'minHeight', 'maxWidth', 'maxHeight', 'padding', 'margin', 'paddingTop','paddingBottom', 'paddingLeft', 'paddingRight', 'marginTop','marginBottom', 'marginLeft', 'marginRight', diff --git a/kute-jquery.js b/kute-jquery.js index 7c65773..b9b3c00 100644 --- a/kute-jquery.js +++ b/kute-jquery.js @@ -21,7 +21,7 @@ } else if (typeof root.KUTE !== "undefined" && (typeof root.$ !== 'undefined' || typeof root.jQuery !== 'undefined' ) ) { // jQuery always has two ways of existing... Find one, and pass. var $ = root.jQuery || root.$, KUTE = root.KUTE; - $.fn.KUTE = factory($, KUTE); + factory($, KUTE); } else { throw new Error("jQuery Plugin for KUTE.js depend on KUTE.js and jQuery"); } @@ -39,4 +39,4 @@ }; return this; -}); +}); \ No newline at end of file diff --git a/kute-svg.js b/kute-svg.js index e576b28..0a58541 100644 --- a/kute-svg.js +++ b/kute-svg.js @@ -22,24 +22,33 @@ DOM = K.dom, parseProperty = K.parseProperty, prepareStart = K.prepareStart, getCurrentStyle = K.getCurrentStyle, trueColor = K.truC, trueDimension = K.truD, crossCheck = K.crossCheck, number = g.Interpolate.number, unit = g.Interpolate.unit, color = g.Interpolate.color, // interpolate functions - _isIE = navigator && (new RegExp("MSIE ([0-9]{1,}[\.0-9]{0,})").exec(navigator.userAgent) !== null) ? parseFloat( RegExp.$1 ) : false; + isIE = new RegExp("MSIE ([0-9]{1,}[\.0-9]{0,})").exec(navigator.userAgent) !== null ? parseFloat( RegExp.$1 ) : false, + isMobile = /iPhone|iPad|iPod|Android/i.test(navigator.userAgent); // we optimize morph depending on device type + + if (isIE&&isIE<9) {return;} // return if SVG API is not supported // here we go with the plugin var pathReg = /(m[^(h|v|l)]*|[vhl][^(v|h|l|z)]*)/gmi, ns = 'http://www.w3.org/2000/svg', - coords = g.Interpolate.coords = function(a,b,l,v) { // function(array1, array2, length, progress) for SVG morph + coords = g.Interpolate.coords = isMobile ? function(a,b,l,v) { // function(array1, array2, length, progress) for SVG morph var points =[]; for(var i=0;i> 0 ); + points[i].push( a[i][j]+(b[i][j]-a[i][j])*v ); + } + } + return points; + } : function(a,b,l,v) { // on desktop devices we use more accuracy for morph + var points =[]; + for(var i=0;i> 0)/10 ); } } return points; }; - if (_isIE&&_isIE<9) {return;} // return if SVG API is not supported - - // SVG MORPH var getSegments = function(s,e,r){ // getSegments returns an array of points based on a sample size morphPrecision var s1 = [], e1 = [], le1 = s.getTotalLength(), le2 = e.getTotalLength(), ml = Math.max(le1,le2), @@ -126,7 +135,8 @@ return p; }, computePathCross = function(s,e){ // pathCross - var s1, e1, pointsArray, largerPathLength, smallerPath, largerPath, simulatedSmallerPath, nsm = [], sml, cl = [], len, tl, cs; + var s1, e1, pointsArray, largerPathLength, smallerPath, largerPath, simulatedSmallerPath, nsm = [], sml, cl = [], len, tl, cs, + index = this.options.morphIndex; if (!this._isPolygon) { s = createPath(s); e = createPath(e); @@ -158,8 +168,8 @@ if (this.options.reverseSecondPath) { e1.reverse(); } // shift second array to for smallest tween distance - if (this.options.morphIndex) { - var e11 = e1.splice(this.options.morphIndex,largerPathLength-this.options.morphIndex); + if (index) { + var e11 = e1.splice(index,largerPathLength-index); e1 = e11.concat(e1); } @@ -197,7 +207,7 @@ // SVG DRAW - var percent = function(v,l){ return parseFloat(v) / 100 * l; }, // percent + var percent = function(v,l){ return parseFloat(v) / 100 * l; }, // SVG DRAW UTILITITES // http://stackoverflow.com/a/30376660 getRectLength = function(el){ // returns the length of a Rect @@ -295,116 +305,117 @@ // SVG Transform - var parseTransform = function (a){ // helper function that turns transform value from string to object - var d = a && /\)/.test(a) ? a.split(')') : 'none', j, c ={}, p; + var parseStringOrigin = function(origin,box){ + return /[a-zA-Z]/.test(origin) && !/px/.test(origin) ? origin.replace(/top|left/,0).replace(/right|bottom/,100).replace(/center|middle/,50) + : /%/.test(origin) ? (box.x + parseFloat(origin) * box.width / 100) : parseFloat(origin); + }, + parseTransformString = function (a){ // helper function that turns transform value from string to object + var d = a && /\)/.test(a) ? a.substring(0, a.length-1).split(/\)\s|\)/) : 'none', c = {}; if (d instanceof Array) { - for (j=0; j> 0)/10) - : (((number(a[0],b[0],v) * 10 >> 0)/10) + ' ' + ((number(a[1],b[1],v)) *10 >> 0)/10) ) + e; - }, - rotateSVG = g.Interpolate.rotateSVG = function (s,e,a,b,v){ - return s + ( (number(a[0],b[0],v)*10 >> 0)/10 + ' ' + b[1] + ',' + b[2] ) + e; - }, - scaleSVG = g.Interpolate.scaleSVG = function (s,e,a,b,v){ // scale would very much like to have 3 decimals - return s + ( (number(a,b,v)*1000 >> 0)/1000 ) + e; - }, - skewSVG = g.Interpolate.skewSVG = function (s,e,a,b,v){ // skew - return s + ( (number(a,b,v)*10 >> 0)/10 ) + e; + parseTransformObject = function(v){ + var svgTransformObject = {}, bb = this.element.getBBox(), + cx = bb.x + bb.width/2, cy = bb.y + bb.height/2, // by default the transformOrigin is "50% 50%" of the shape box + origin = this.options.transformOrigin, translation; + + origin = !!origin ? (origin instanceof Array ? origin : origin.split(/\s/)) : [cx,cy]; + + origin[0] = typeof origin[0] === 'number' ? origin[0] : parseStringOrigin(origin[0],bb); + origin[1] = typeof origin[1] === 'number' ? origin[1] : parseStringOrigin(origin[1],bb); + + svgTransformObject.origin = origin; + + for ( var i in v ) { // populate the valuesStart and / or valuesEnd + if (i === 'rotate'){ + svgTransformObject[i] = typeof v[i] === 'number' ? v[i] : v[i] instanceof Array ? v[i][0] : v[i].split(/\s/)[0]*1; + } else if (i === 'translate'){ + translation = v[i] instanceof Array ? v[i] : /\,|\s/.test(v[i]) ? v[i].split(',') : [v[i],0]; + svgTransformObject[i] = [translation[0]*1||0, translation[1]*1||0]; + } else if (/skew/.test(i)) { + svgTransformObject[i] = v[i]*1||0; + } else if (i === 'scale'){ + svgTransformObject[i] = parseFloat(v[i])||1; + } + } + + return svgTransformObject; }; parseProperty.svgTransform = function(p,v){ // register the render function if (!('svgTransform' in DOM)) { - DOM.svgTransform = function(l,p,a,b,v){ - l.setAttribute('transform', ('translate' in a ? translateSVG('translate(',')',a.translate,b.translate,v) : '') - +('rotate' in a ? rotateSVG('rotate(',')',a.rotate,b.rotate,v) : '') - +('scale' in a ? scaleSVG('scale(',')',a.scale,b.scale,v) : '') - +('skewX' in a ? skewSVG('skewX(',')',a.skewX,b.skewX,v) : '') - +('skewY' in a ? skewSVG('skewY(',')',a.skewY,b.skewY,v) : '')); + var x = 0, y = 0, tmp, deg = Math.PI/180, + scale = 'scale' in b ? number(a.scale,b.scale,v) : 1, + rotate = 'rotate' in b ? number(a.rotate,b.rotate,v) : 0, + sin = Math.sin(rotate*deg), cos = Math.cos(rotate*deg), + skewX = 'skewX' in b ? number(a.skewX,b.skewX,v) : 0, + skewY = 'skewY' in b ? number(a.skewY,b.skewY,v) : 0, + complex = rotate||skewX||skewY||scale!==1 || 0; + + // start normalizing the translation, we start from last to first (from last chained translation) + // the normalized translation will handle the transformOrigin tween option and makes sure to have a consistent transformation + x -= complex ? b.origin[0] : 0; y -= complex ? b.origin[1] : 0; // we start with removing transformOrigin from translation + x *= scale; y *= scale; // we now apply the scale + y += skewY ? x*Math.tan(skewY*deg) : 0; x += skewX ? y*Math.tan(skewX*deg) : 0; // now we apply skews + tmp = cos*x - sin*y; // apply rotation as well + y = rotate ? sin*x + cos*y : y; x = rotate ? tmp : x; + x += 'translate' in b ? number(a.translate[0],b.translate[0],v) : 0; // now we apply the actual translation + y += 'translate' in b ? number(a.translate[1],b.translate[1],v) : 0; + x += complex ? b.origin[0] : 0; y += complex ? b.origin[1] : 0; // normalizing ends with the addition of the transformOrigin to the translation + + // finally we apply the transform attribute value + l.setAttribute('transform', + ( x||y ? ('translate(' + (x*10>>0)/10 + ( y ? (',' + ((y*10>>0)/10)) : '') + ')') : '' ) + +( rotate ? 'rotate(' + (rotate*10>>0)/10 + ')' : '' ) + +( skewX ? 'skewX(' + (skewX*10>>0)/10 + ')' : '' ) + +( skewY ? 'skewY(' + (skewY*10>>0)/10 + ')' : '' ) + +( scale !== 1 ? 'scale(' + (scale*1000>>0)/1000 +')' : '' ) ); } } // now prepare transform - var svgTransformObject = {}, bb = this.element.getBBox(), cx = bb.x + bb.width/2, cy = bb.y + bb.height/2, r, cr, t, ct; - - for ( i in v ) { // populate the valuesStart and / or valuesEnd - if (i === 'rotate'){ - r = v[i] instanceof Array ? v[i] - : /\s/.test(v[i]) ? [v[i].split(' ')[0]*1, v[i].split(' ')[1].split(',')[0]*1, v[i].split(' ')[1].split(',')[1]*1] - : [v[i]*1,cx,cy]; - svgTransformObject[i] = r; - } else if (i === 'translate'){ - t = v[i] instanceof Array ? v[i] : /\,|\s/.test(v[i]) ? v[i].split(/\,|\s/) : [v[i]*1,0]; - svgTransformObject[i] = [t[0] * 1||0, t[1] * 1||0]; - } else if (i === 'scale'){ - svgTransformObject[i] = v[i] * 1||1; - } else if (/skew/.test(i)) { - svgTransformObject[i] = v[i] * 1||0; - } - } - - // try to adjust translation when scale is used, probably we should do the same when using skews, but I think it's a waste of time - // http://www.petercollingridge.co.uk/interactive-svg-components/pan-and-zoom-control - if ('scale' in svgTransformObject) { - !('translate' in svgTransformObject) && ( svgTransformObject['translate'] = [0,0] ); // if no translate is found in current value or next value, we default to 0 - svgTransformObject['translate'][0] += (1-svgTransformObject['scale']) * bb.width/2; - svgTransformObject['translate'][1] += (1-svgTransformObject['scale']) * bb.height/2; - // adjust rotation transform origin and translation when skews are used, to make the animation look exactly the same as if we were't using svgTransform - // http://stackoverflow.com/questions/39191054/how-to-compensate-translate-when-skewx-and-skewy-are-used-on-svg/39192565#39192565 - if ('rotate' in svgTransformObject) { - svgTransformObject['rotate'][1] -= 'skewX' in svgTransformObject ? Math.tan(svgTransformObject['skewX']) * bb.height : 0; - svgTransformObject['rotate'][2] -= 'skewY' in svgTransformObject ? Math.tan(svgTransformObject['skewY']) * bb.width : 0; - } - svgTransformObject['translate'][0] += 'skewX' in svgTransformObject ? Math.tan(svgTransformObject['skewX']) * bb.height*2 : 0; - svgTransformObject['translate'][1] += 'skewY' in svgTransformObject ? Math.tan(svgTransformObject['skewY']) * bb.width*2 : 0; - } // more variations here https://gist.github.com/thednp/0b93068e20adb84658b5840ead0a07f8 - - return svgTransformObject; + return parseTransformObject.call(this,v); } // returns an obect with current transform attribute value prepareStart.svgTransform = function(p,t) { - var tr = {}, i, ctr = parseTransform(this.element.getAttribute('transform')); - for (i in t) { tr[i] = i in ctr ? ctr[i] : (i==='scale'?1:0); } // find a value in current attribute value or add a default value - return tr; + var transformObject = {}, currentTransform = parseTransformString(this.element.getAttribute('transform')); + for (var i in t) { transformObject[i] = i in currentTransform ? currentTransform[i] : (i==='scale'?1:0); } // find a value in current attribute value or add a default value + return transformObject; } crossCheck.svgTransform = function() { // helper function that helps preserve current transform properties into the objects - var bb = this.element.getBBox(), ctr = parseTransform(this.element.getAttribute('transform')), r, t, i, - cx = bb.x + bb.width/2, cy = bb.y + bb.height/2; - - for ( i in ctr ) { // populate the valuesStart - if (i === 'translate'){ - t = ctr[i] instanceof Array ? ctr[i] : /\,|\s/.test(ctr[i]) ? ctr[i].split(/\,|\s/) : [ctr[i]*1,0]; - this.valuesStart.svgTransform[i] = [t[0] * 1||0, t[1] * 1||0]; - } else if (i === 'scale'){ - this.valuesStart.svgTransform[i] = ctr[i] * 1||1; - } else if (i === 'rotate'){ - r = ctr[i] instanceof Array ? ctr[i] - : /\s/.test(ctr[i]) ? [ctr[i].split(' ')[0]*1, ctr[i].split(' ')[1].split(',')[0]*1, ctr[i].split(' ')[1].split(',')[1]*1] - : [ctr[i]*1,cx,cy]; - this.valuesStart.svgTransform[i] = r; - } else if (/skew/.test(i)) { - this.valuesStart.svgTransform[i] = ctr[i] * 1||0; - } + var valuesStart = this.valuesStart.svgTransform, valuesEnd = this.valuesEnd.svgTransform, + currentTransform = parseTransformObject.call(this, parseTransformString(this.element.getAttribute('transform')) ); + + for ( var i in currentTransform ) { // populate the valuesStart first + valuesStart[i] = currentTransform[i]; } - for (var i in this.valuesStart.svgTransform) { - if (!(i in this.valuesEnd.svgTransform)) { // copy existing and unused properties to the valuesEnd - this.valuesEnd.svgTransform[i] = this.valuesStart.svgTransform[i]; - } - if (i === 'rotate' in this.valuesStart.svgTransform && 'rotate' in this.valuesEnd.svgTransform){ // make sure to use the right transform origin when rotation is used - this.valuesEnd.svgTransform.rotate[1] = this.valuesStart.svgTransform.rotate[1] = cx; - this.valuesEnd.svgTransform.rotate[2] = this.valuesStart.svgTransform.rotate[2] = cy; - } + // now try to determine the REAL translation + var parentSVG = this.element.ownerSVGElement, + newTransform = parentSVG.createSVGTransformFromMatrix( + parentSVG.createSVGMatrix() + .translate(-valuesStart.origin[0],-valuesStart.origin[1]) // - origin + .translate(valuesStart.translate[0]||0,valuesStart.translate[1]||0) // the current translate + .rotate(valuesStart.rotate||0).skewX(valuesStart.skewX||0).skewY(valuesStart.skewY||0).scale(valuesStart.scale||1)// the other functions + .translate(+valuesStart.origin[0],+valuesStart.origin[1]) // + origin + ); + + valuesStart.translate = [newTransform.matrix.e,newTransform.matrix.f]; // finally the translate we're looking for + + newTransform = null; + + // copy existing and unused properties to the valuesEnd + for ( var i in valuesStart) { + if ( !(i in valuesEnd)) { valuesEnd[i] = valuesStart[i]; } } } diff --git a/kute.js b/kute.js index ba0c902..c14c3e1 100644 --- a/kute.js +++ b/kute.js @@ -15,7 +15,7 @@ // set a custom scope for KUTE.js var g = typeof global !== 'undefined' ? global : window, time = g.performance, - tweens = [], tick = null; + tweens = [], tick = null; // tick must be null!! //supported properties var _colors = ['color', 'backgroundColor'], // colors 'hex', 'rgb', 'rgba' -- #fff / rgb(0,0,0) / rgba(0,0,0,0) @@ -163,9 +163,9 @@ body = document.body, html = document.getElementsByTagName('HTML')[0], scrollContainer = navigator && /webkit/i.test(navigator.userAgent) || document.compatMode == 'BackCompat' ? body : html, - _isIE = navigator && (new RegExp("MSIE ([0-9]{1,}[\.0-9]{0,})").exec(navigator.userAgent) !== null) ? parseFloat( RegExp.$1 ) : false, - _isIE8 = _isIE === 8; // check IE8/IE - + isIE = navigator && (new RegExp("MSIE ([0-9]{1,}[\.0-9]{0,})").exec(navigator.userAgent) !== null) ? parseFloat( RegExp.$1 ) : false, + isIE8 = isIE === 8, // check IE8/IE + isMobile = /iPhone|iPad|iPod|Android/i.test(navigator.userAgent); // we optimize morph depending on device type // KUTE.js INTERPOLATORS var interpolate = g.Interpolate = {}, @@ -180,12 +180,19 @@ for (c in b) { _c[c] = c !== 'a' ? (number(a[c],b[c],v)>>0 || 0) : (a[c] && b[c]) ? (number(a[c],b[c],v) * 100 >> 0 )/100 : null; } return h ? rgbToHex( _c.r, _c.g, _c.b ) : !_c.a ? r + _c.r + cm + _c.g + cm + _c.b + ep : ra + _c.r + cm + _c.g + cm + _c.b + cm + _c.a + ep; }, - translate = interpolate.translate = function (a,b,u,v){ + translate = interpolate.translate = isMobile ? function (a,b,u,v){ + var translation = {}; + for (var ax in b){ + translation[ax] = ( a[ax]===b[ax] ? b[ax] : (a[ax] + ( b[ax] - a[ax] ) * v ) >> 0 ) + u; + } + return translation.x||translation.y ? 'translate(' + translation.x + ',' + translation.y + ')' : + 'translate3d(' + translation.translateX + ',' + translation.translateY + ',' + translation.translateZ + ')'; + } : function (a,b,u,v){ var translation = {}; for (var ax in b){ translation[ax] = ( a[ax]===b[ax] ? b[ax] : ( (a[ax] + ( b[ax] - a[ax] ) * v ) * 10 >> 0 ) /10 ) + u; } - return translation.x ? 'translate(' + translation.x + ',' + translation.y + ')' : + return translation.x||translation.y ? 'translate(' + translation.x + ',' + translation.y + ')' : 'translate3d(' + translation.translateX + ',' + translation.translateY + ',' + translation.translateZ + ')'; }, rotate = interpolate.rotate = function (a,b,u,v){ @@ -232,7 +239,7 @@ if (elapsed === 1) { if (this.options.repeat > 0) { - if ( this.options.repeat < 9999 ) { this.options.repeat--; } else { this.options.repeat = 0; } // we have to make it stop somewhere, infinity is too damn much + if ( isFinite(this.options.repeat ) ) { this.options.repeat--; } if (this.options.yoyo) { // handle yoyo this.reversed = !this.reversed; @@ -261,11 +268,15 @@ // applies the transform origin and perspective perspective = function () { - if ( this.options.perspective !== undefined && transformProperty in this.valuesEnd ) { this.valuesStart[transformProperty]['perspective'] = this.valuesEnd[transformProperty]['perspective']; } // element perspective - if ( this.options.transformOrigin !== undefined ) { this.element.style[property('transformOrigin')] = this.options.transformOrigin; } // element transform origin - if ( this.options.perspectiveOrigin !== undefined ) { this.element.style[property('perspectiveOrigin')] = this.options.perspectiveOrigin; } // element perspective origin - if ( this.options.parentPerspective !== undefined ) { this.element.parentNode.style[property('perspective')] = this.options.parentPerspective + 'px'; } // parent perspective - if ( this.options.parentPerspectiveOrigin !== undefined ) { this.element.parentNode.style[property('perspectiveOrigin')] = this.options.parentPerspectiveOrigin; } // parent perspective origin + var el = this.element, ops = this.options; + if ( ops.perspective !== undefined && transformProperty in this.valuesEnd ) { // element perspective + this.valuesStart[transformProperty]['perspective'] = this.valuesEnd[transformProperty]['perspective']; + } + // element transform origin / we filter it out for svgTransform to fix the Firefox transformOrigin bug https://bugzilla.mozilla.org/show_bug.cgi?id=923193 + if ( ops.transformOrigin !== undefined && (!('svgTransform' in this.valuesEnd)) ) { el.style[property('transformOrigin')] = ops.transformOrigin; } + if ( ops.perspectiveOrigin !== undefined ) { el.style[property('perspectiveOrigin')] = ops.perspectiveOrigin; } // element perspective origin + if ( ops.parentPerspective !== undefined ) { el.parentNode.style[property('perspective')] = ops.parentPerspective + 'px'; } // parent perspective + if ( ops.parentPerspectiveOrigin !== undefined ) { el.parentNode.style[property('perspectiveOrigin')] = ops.parentPerspectiveOrigin; } // parent perspective origin }, // plugin connector objects @@ -278,7 +289,7 @@ boxModel : function(p,v){ if (!(p in DOM)){ DOM[p] = function(l,p,a,b,v){ - l.style[p] = ( v > 0.99 || v < 0.01 ? ((number(a,b,v)*10)>>0)/10 : (number(a,b,v) ) >> 0 ) + 'px' ; + l.style[p] = ( v > 0.99 || v < 0.01 ? ((number(a,b,v)*10)>>0)/10 : (number(a,b,v) ) >> 0 ) + 'px'; } } var boxValue = trueDimension(v); @@ -288,10 +299,10 @@ if (!(transformProperty in DOM)) { DOM[transformProperty] = function(l,p,a,b,v,o){ l.style[p] = (a.perspective||'') - + (a.translate ? translate(a.translate,b.translate,'px',v):'') - + (a.rotate ? rotate(a.rotate,b.rotate,'deg',v):'') - + (a.skew ? skew(a.skew,b.skew,'deg',v):'') - + (a.scale ? scale(a.scale,b.scale,v):''); + + ('translate' in a ? translate(a.translate,b.translate,'px',v):'') + + ('rotate' in a ? rotate(a.rotate,b.rotate,'deg',v):'') + + ('skew' in a ? skew(a.skew,b.skew,'deg',v):'') + + ('scale' in a ? scale(a.scale,b.scale,v):''); } } @@ -342,7 +353,7 @@ }; } else if (p === 'opacity') { if (!(p in DOM)) { - if (_isIE8) { + if (isIE8) { DOM[p] = function(l,p,a,b,v) { var st = "alpha(opacity=", ep = ')'; l.style.filter = st + ((number(a,b,v) * 100)>>0) + ep; @@ -366,7 +377,7 @@ } }, - // process properties for _vE and _vS or one of them + // process properties for endValues and startValues or one of them preparePropertiesObject = function(obj, fn) { // this, props object, type: start/end var element = this.element, propertiesObject = fn === 'start' ? this.valuesStart : this.valuesEnd, skewObject = {}, rotateObject = {}, translateObject = {}, transformObject = {}; @@ -471,7 +482,7 @@ } } else { if ( p !== 'scroll' ) { - if (p === 'opacity' && _isIE8 ) { // handle IE8 opacity + if (p === 'opacity' && isIE8 ) { // handle IE8 opacity var currentOpacity = getCurrentStyle(this.element,'filter'); startValues['opacity'] = typeof currentOpacity === 'number' ? currentOpacity : _defaults['opacity']; } else { @@ -486,7 +497,7 @@ } } } - for ( var p in currentStyle ){ // also add to _vS values from previous tweens + for ( var p in currentStyle ){ // also add to startValues values from previous tweens if ( _transform.indexOf(p) !== -1 && (!( p in this.valuesStart )) ) { startValues[p] = currentStyle[p] || _defaults[p]; } @@ -571,8 +582,8 @@ easing.easingBounceInOut = function(t) { if ( t < 0.5 ) return easing.easingBounceIn( t * 2 ) * 0.5; return easing.easingBounceOut( t * 2 - 1 ) * 0.5 + 0.5;}; // single Tween object construct - var Tween = function (_el, _vS, _vE, _o) { - this.element = 'scroll' in _vE && (_el === undefined || _el === null) ? scrollContainer : _el; // element animation is applied to + var Tween = function (targetElement, startObject, endObject, options) { + this.element = 'scroll' in endObject && (targetElement === undefined || targetElement === null) ? scrollContainer : targetElement; // element animation is applied to this.playing = false; this.reversed = false; @@ -582,15 +593,15 @@ this._pauseTime = null; this._startFired = false; - this.options = {}; for (var o in _o) { this.options[o] = _o[o]; } - this.options.rpr = _o.rpr || false; // internal option to process inline/computed style at start instead of init true/false + this.options = {}; for (var o in options) { this.options[o] = options[o]; } + this.options.rpr = options.rpr || false; // internal option to process inline/computed style at start instead of init true/false this.valuesRepeat = {}; // internal valuesStartRepeat this.valuesEnd = {}; // valuesEnd this.valuesStart = {}; // valuesStart - preparePropertiesObject.call(this,_vE,'end'); // valuesEnd - if ( _o.rpr ) { this.valuesStart = _vS; } else { preparePropertiesObject.call(this,_vS,'start'); } // valuesStart + preparePropertiesObject.call(this,endObject,'end'); // valuesEnd + if ( options.rpr ) { this.valuesStart = startObject; } else { preparePropertiesObject.call(this,startObject,'start'); } // valuesStart if ( this.options.perspective !== undefined && transformProperty in this.valuesEnd ) { // element transform perspective var perspectiveString = 'perspective('+parseInt(this.options.perspective)+'px)'; @@ -598,20 +609,21 @@ } for ( var e in this.valuesEnd ) { - if (e in crossCheck && !_o.rpr) crossCheck[e].call(this); // this is where we do the valuesStart and valuesEnd check for fromTo() method + if (e in crossCheck && !options.rpr) crossCheck[e].call(this); // this is where we do the valuesStart and valuesEnd check for fromTo() method } this.options.chain = []; // chained Tweens - this.options.easing = _o.easing && typeof processEasing(_o.easing) === 'function' ? processEasing(_o.easing) : easing.linear; - this.options.repeat = _o.repeat || 0; - this.options.repeatDelay = _o.repeatDelay || 0; - this.options.yoyo = _o.yoyo || false; - this.options.duration = _o.duration || 700; // duration option | default - this.options.delay = _o.delay || 0; // delay option | default + this.options.easing = options.easing && typeof processEasing(options.easing) === 'function' ? processEasing(options.easing) : easing.linear; + this.options.repeat = options.repeat || 0; + this.options.repeatDelay = options.repeatDelay || 0; + this.options.yoyo = options.yoyo || false; + this.options.duration = options.duration || 700; // duration option | default + this.options.delay = options.delay || 0; // delay option | default this.repeat = this.options.repeat; // we cache the number of repeats to be able to put it back after all cycles finish }, // tween control and chain TweenProto = Tween.prototype = { + // queue tween object to main frame update start : function (t) { // move functions that use the ticker outside the prototype to be in the same scope with it scrollIn.call(this); @@ -653,7 +665,7 @@ if (!this.paused && this.playing) { remove(this); this.paused = true; - this._pauseTime = (time.now() * 1000 >> 0) / 1000; + this._pauseTime = time.now(); if (this.options.pause) { this.options.pause.call(); } } return this; @@ -681,19 +693,19 @@ // the multi elements Tween constructs TweensTO = function (els, vE, o) { // .to - this.tweens = []; var _o = []; + this.tweens = []; var options = []; for ( var i = 0, tl = els.length; i < tl; i++ ) { - _o[i] = o || {}; o.delay = o.delay || 0; - _o[i].delay = i>0 ? o.delay + (o.offset||0) : o.delay; - this.tweens.push( to(els[i], vE, _o[i]) ); + options[i] = o || {}; o.delay = o.delay || 0; + options[i].delay = i>0 ? o.delay + (o.offset||0) : o.delay; + this.tweens.push( to(els[i], vE, options[i]) ); } }, TweensFT = function (els, vS, vE, o) { // .fromTo - this.tweens = []; var _o = []; + this.tweens = []; var options = []; for ( var i = 0, l = els.length; i < l; i++ ) { - _o[i] = o || {}; o.delay = o.delay || 0; - _o[i].delay = i>0 ? o.delay + (o.offset||0) : o.delay; - this.tweens.push( fromTo(els[i], vS, vE, _o[i]) ); + options[i] = o || {}; o.delay = o.delay || 0; + options[i].delay = i>0 ? o.delay + (o.offset||0) : o.delay; + this.tweens.push( fromTo(els[i], vS, vE, options[i]) ); } }, ws = TweensTO.prototype = TweensFT.prototype = { @@ -712,30 +724,28 @@ }, // main methods - to = function (el, to, o) { - var _el = selector(el); o = o || {}; o.rpr = true; - return new Tween(_el, to, to, o); + to = function (element, endObject, options) { + options = options || {}; options.rpr = true; + return new Tween(selector(element), endObject, endObject, options); }, - fromTo = function (el, f, to, o) { - var _el = selector(el); o = o || {}; - return new Tween(_el, f, to, o); + fromTo = function (element, startObject, endObject, options) { + options = options || {}; + return new Tween(selector(element), startObject, endObject, options); }, // multiple elements tweening - allTo = function (els, to, o) { - var _els = selector(els,true); - return new TweensTO(_els, to, o); + allTo = function (elements, endObject, options) { + return new TweensTO(selector(elements,true), endObject, options); }, - allFromTo = function (els, f, to, o) { - var _els = selector(els,true); - return new TweensFT(_els, f, to, o); + allFromTo = function (elements, f, endObject, options) { + return new TweensFT(selector(elements,true), f, endObject, options); }; return { // export core methods to public for plugins property: property, getPrefix: getPrefix, selector: selector, processEasing : processEasing, // utils to: to, fromTo: fromTo, allTo: allTo, allFromTo: allFromTo, // main methods - ticker : ticker, tweens : tweens, update: update, dom : DOM, // update + ticker : ticker, tick : tick, tweens : tweens, update: update, dom : DOM, // update parseProperty: parseProperty, prepareStart: prepareStart, crossCheck : crossCheck, Tween : Tween, // property parsing & preparation | Tween | crossCheck truD: trueDimension, truC: trueColor, rth: rgbToHex, htr: hexToRGB, getCurrentStyle: getCurrentStyle, // property parsing }; -})); +})); \ No newline at end of file diff --git a/package.json b/package.json index 8a81ee8..0513bb0 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "kute.js", - "version": "1.5.99", + "version": "1.6.0", "description": "Complete Native Javascript animation engine.", "main": "kute.js", "scripts": {