deblan/kute.js
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

Changes:

Browse source 
* improved `selector` utility
* improved/simplified `getPrefix()` utility
* improve code readability for the core engine
* improved demos
This commit is contained in:
thednp 2017-01-31 19:15:15 +02:00
parent 38fcf9c127
commit 3215d770b4
31 changed files with 83 additions and 123 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
bower.json
View file

@ -1,6 +1,6 @@
{
"name": "KUTE.js",
"version": "1.6.2",
"version": "1.6.3",
"homepage": "http://thednp.github.io/kute.js",
"authors": [
"thednp"

2
demo/about.html
View file

@ -41,8 +41,6 @@
</head>
<body>
<div class="fill overlay"></div>
<div class="site-wrapper">
<div class="navbar-wrapper">

2
demo/api.html
View file

@ -44,8 +44,6 @@
</head>
<body>
<div class="fill overlay"></div>
<div class="site-wrapper">
<div class="navbar-wrapper">

20
demo/assets/css/kute.css
View file

@ -10,33 +10,15 @@ body {
font-size: 14px;
line-height: 2; /* ~25px */
color: #ccc;
background-color: #999;
background-color: #2e2e2e;
position: relative
}
body > .fill {
position: fixed; top: 0; left:0; right: 0; bottom:0;
}
/* the body and it's children can be irresponsive on scroll animations as well */
body[data-tweening="scroll"],
body[data-tweening="scroll"] * { pointer-events: none !important; }
.fill {
background-size: cover;
background-position: 50% 50%;
background-repeat: no-repeat;
width: 100%; height: 100%;
}
.ie8 .fill {background-size: auto 100%}
.overlay {
background-color: #000;
opacity: 0.7
}
.ie8 .overlay { filter: alpha(opacity=70) }
footer {
clear: both; overflow: hidden; margin-top: 60px

6
demo/assets/js/svg.js
View file

@ -228,6 +228,10 @@
var svgChained = document.getElementById('svgChained');
var chainedBtn = document.getElementById('chainedBtn');
var svgc = svgChained.getElementsByTagName('path')[0];
var svgcTransform = svgc.getAttribute('transform');
var resetSVGTransform = function(){
svgc.setAttribute('transform',svgcTransform);
};
var svgTween6 = KUTE.fromTo(svgc,
{ // from
@ -246,7 +250,7 @@
// skewX: -45
}
},
{transformOrigin: [256,256], yoyo: true, repeat: 1, duration: 1500, easing: "easingCubicOut"});
{transformOrigin: [256,256], complete: resetSVGTransform, yoyo: true, repeat: 1, duration: 1500, easing: "easingCubicOut"});
chainedBtn.addEventListener('click', function(){
!svgTween6.playing && svgTween6.start();

2
demo/attr.html
View file

@ -44,8 +44,6 @@
</head>
<body>
<div class="fill overlay"></div>
<div class="site-wrapper">
<div class="navbar-wrapper">

2
demo/css.html
View file

@ -43,8 +43,6 @@
</head>
<body>
<div class="fill overlay"></div>
<div class="site-wrapper">
<div class="navbar-wrapper">

1
demo/easing.html
View file

@ -45,7 +45,6 @@
</head>
<body>
<div class="fill overlay"></div>
<div class="site-wrapper">

11
demo/examples.html
View file

@ -42,8 +42,6 @@
</head>
<body>
<div class="fill overlay"></div>
<div class="site-wrapper">
<div class="navbar-wrapper">
@ -307,13 +305,10 @@ body[data-tweening="scroll"] * { pointer-events: none !important; }
<h3 id="crossbrowser">Cross Browser Animation Example</h3>
<p>Unlike the examples <a href="http://codepen.io/thednp/pens/public/" target="_blank">hosted on Codepen</a>, most examples here should be supported on legacy browsers. The next example is going to explain more details about how to target browsers
according to their supported properties, so stick around. So, if your target audience uses legacy browsers in a significant percent, check to have the proper polyfills and also make sure you target your browsers, here's a
<a href="http://browserhacks.com/"
target="_blank">complete reference</a>. Now we are ready:</li>
</ul>
<p>Unlike the examples <a href="http://codepen.io/thednp/pens/public/" target="_blank">hosted on Codepen</a>, most examples here should be supported on legacy browsers. The next example is going to explain more details about how to target browsers according to their supported properties, so stick around. So, if your target audience uses legacy browsers in a significant percent, check to have the proper polyfills and also make sure you target your browsers, here's a <a href="http://browserhacks.com/" target="_blank">complete reference</a>. Now we are ready:</p>
<h4>Collect Information And Cache It</h4>
<pre><code class="language-javascript">// grab an HTML element to build a tween object for it
<pre><code class="language-javascript">// grab an HTML element to build a tween object for it
var element = document.getElementById("myElement");
// check for IE legacy browsers

2
demo/extend.html
View file

@ -42,8 +42,6 @@
</head>
<body>
<div class="fill overlay"></div>
<div class="site-wrapper">
<div class="navbar-wrapper">

2
demo/features.html
View file

@ -39,8 +39,6 @@
</head>
<body>
<div class="fill overlay"></div>
<div class="site-wrapper">
<div class="navbar-wrapper">

2
demo/index.html
View file

@ -39,8 +39,6 @@
</head>
<body>
<div class="fill overlay"></div>
<div class="site-wrapper">
<div class="navbar-wrapper">

2
demo/options.html
View file

@ -44,8 +44,6 @@
</head>
<body>
<div class="fill overlay"></div>
<div class="site-wrapper">
<div class="navbar-wrapper">

2
demo/properties.html
View file

@ -41,8 +41,6 @@
</head>
<body>
<div class="fill overlay"></div>
<div class="site-wrapper">
<div class="navbar-wrapper">

2
demo/src/kute-attr.min.js vendored
View file

@ -1,2 +1,2 @@
// KUTE.js v1.6.2 | © dnp_theme | Attributes Plugin | MIT-License
// KUTE.js v1.6.3 | © 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});

2
demo/src/kute-css.min.js vendored
View file

@ -1,2 +1,2 @@
// KUTE.js v1.6.2 | © dnp_theme | CSS Plugin | MIT-License
// KUTE.js v1.6.3 | © 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<x;T++)g.indexOf(R[T])!==-1?C[R[T]]="rgba(0,0,0,0)":y.indexOf(R[T])!==-1?C[R[T]]=0:b.indexOf(R[T])!==-1?C[R[T]]=[50,50]:"clip"===R[T]&&(C[R[T]]=[0,0,0,0]);for(var T=0,W=g.length;T<W;T++)i[g[T]]=function(t,e){return t in n||(n[t]=function(t,e,r,n,i,o){t.style[e]=c(r,n,i,o.keepHex)}),l(e)},o[g[T]]=function(t){return d(this.element,t)||C[t]};for(var T=0,W=v.length;T<W;T++)i[v[T]]=function(t,e){return t in n||(p.indexOf(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<W;T++)i[s[T]]=function(t,e){return t in n||(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[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});

2
demo/src/kute-jquery.min.js vendored
View file

@ -1,2 +1,2 @@
// KUTE.js v1.6.2 | © dnp_theme | jQuery Plugin | MIT-License
// KUTE.js v1.6.3 | © 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});

2
demo/src/kute-svg.min.js vendored
View file

File diff suppressed because one or more lines are too long

2
demo/src/kute-text.min.js vendored
View file

@ -1,2 +1,2 @@
// KUTE.js v1.6.2 | © dnp_theme | Text Plugin | MIT-License
// KUTE.js v1.6.3 | © 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=n.defaultOptions,a=String("abcdefghijklmnopqrstuvwxyz").split(""),l=String("abcdefghijklmnopqrstuvwxyz".toUpperCase()).split(""),p=String("~!@#$%^&*()_+{}[];'<>,./?=-").split(""),f=String("0123456789").split(""),h=a.concat(l,f),c=(h.concat(p),Math.random),g=Math.min;return o.textChars="alpha",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?a:"upper"===s.textChars?l:"numeric"===s.textChars?f:"alphanumeric"===s.textChars?h:"symbols"===s.textChars?p:s.textChars?s.textChars.split(""):a,o=u.length,m=u[c()*o>>0],d="",x="",b=n.substring(0),y=r.substring(0);d=""!==n?b.substring(b.length,g(i*b.length,b.length)>>0):"",x=y.substring(0,g(i*y.length,y.length)>>0),t.innerHTML=i<1?x+m+d: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});

4
demo/src/kute.min.js vendored
View file

File diff suppressed because one or more lines are too long

2
demo/start.html
View file

@ -44,8 +44,6 @@
</head>
<body>
<div class="fill overlay"></div>
<div class="site-wrapper">
<div class="navbar-wrapper">

4
demo/svg.html
View file

@ -43,8 +43,6 @@
</head>
<body>
<div class="fill overlay"></div>
<div class="site-wrapper">
<div class="navbar-wrapper">
@ -513,7 +511,7 @@ KUTE.fromTo(element,
{transformOrigin: [256,256]} // tween options use the transform-origin of the target SVG element
).start();
</code></pre>
<p>Before you hit the <kbd>Start</kbd> button, make sure to check the <code>transform</code> attribute value.</p>
<p>Before you hit the <kbd>Start</kbd> button, make sure to check the <code>transform</code> attribute value. The below tween will reset the element's transform attribute to original value when the animation is complete.</p>
<div class="featurettes">
<svg id="svgChained" class="example-box-model example-box" style="overflow: visible;" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 513 513" xmlns:xml="http://www.w3.org/XML/1998/namespace" xml:space="preserve" version="1.1">
<path class="bg-blue"

2
demo/text.html
View file

@ -53,8 +53,6 @@
</head>
<body>
<div class="fill overlay"></div>
<div class="site-wrapper">
<div class="navbar-wrapper">

2
dist/kute-attr.min.js vendored
View file

@ -1,2 +1,2 @@
// KUTE.js v1.6.2 | © dnp_theme | Attributes Plugin | MIT-License
// KUTE.js v1.6.3 | © 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});

2
dist/kute-css.min.js vendored
View file

@ -1,2 +1,2 @@
// KUTE.js v1.6.2 | © dnp_theme | CSS Plugin | MIT-License
// KUTE.js v1.6.3 | © 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<x;T++)g.indexOf(R[T])!==-1?C[R[T]]="rgba(0,0,0,0)":y.indexOf(R[T])!==-1?C[R[T]]=0:b.indexOf(R[T])!==-1?C[R[T]]=[50,50]:"clip"===R[T]&&(C[R[T]]=[0,0,0,0]);for(var T=0,W=g.length;T<W;T++)i[g[T]]=function(t,e){return t in n||(n[t]=function(t,e,r,n,i,o){t.style[e]=c(r,n,i,o.keepHex)}),l(e)},o[g[T]]=function(t){return d(this.element,t)||C[t]};for(var T=0,W=v.length;T<W;T++)i[v[T]]=function(t,e){return t in n||(p.indexOf(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<W;T++)i[s[T]]=function(t,e){return t in n||(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[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});

2
dist/kute-jquery.min.js vendored
View file

@ -1,2 +1,2 @@
// KUTE.js v1.6.2 | © dnp_theme | jQuery Plugin | MIT-License
// KUTE.js v1.6.3 | © 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});

2
dist/kute-svg.min.js vendored
View file

File diff suppressed because one or more lines are too long

2
dist/kute-text.min.js vendored
View file

@ -1,2 +1,2 @@
// KUTE.js v1.6.2 | © dnp_theme | Text Plugin | MIT-License
// KUTE.js v1.6.3 | © 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=n.defaultOptions,a=String("abcdefghijklmnopqrstuvwxyz").split(""),l=String("abcdefghijklmnopqrstuvwxyz".toUpperCase()).split(""),p=String("~!@#$%^&*()_+{}[];'<>,./?=-").split(""),f=String("0123456789").split(""),h=a.concat(l,f),c=(h.concat(p),Math.random),g=Math.min;return o.textChars="alpha",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?a:"upper"===s.textChars?l:"numeric"===s.textChars?f:"alphanumeric"===s.textChars?h:"symbols"===s.textChars?p:s.textChars?s.textChars.split(""):a,o=u.length,m=u[c()*o>>0],d="",x="",b=n.substring(0),y=r.substring(0);d=""!==n?b.substring(b.length,g(i*b.length,b.length)>>0):"",x=y.substring(0,g(i*y.length,y.length)>>0),t.innerHTML=i<1?x+m+d: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});

4
dist/kute.min.js vendored
View file

File diff suppressed because one or more lines are too long

110
kute.js
View file

@ -18,29 +18,29 @@
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)
_boxModel = ['top', 'left', 'width', 'height'], // dimensions / box model
_transform = ['translate3d', 'translateX', 'translateY', 'translateZ', 'rotate', 'translate', 'rotateX', 'rotateY', 'rotateZ', 'skewX', 'skewY', 'scale'], // transform
_scroll = ['scroll'], //scroll, it has no default value, it's calculated on tween start
_opacity = ['opacity'], // opacity
_all = _colors.concat( _opacity, _boxModel, _transform), al = _all.length,
_defaults = {}; //all properties default values
var colorProps = ['color', 'backgroundColor'], // 'hex', 'rgb', 'rgba' '#fff' 'rgb(0,0,0)' / 'rgba(0,0,0,0)' 'red' (IE9+)
boxModelProps = ['top', 'left', 'width', 'height'],
transformFunctions = ['translate3d', 'translateX', 'translateY', 'translateZ', 'rotate', 'translate', 'rotateX', 'rotateY', 'rotateZ', 'skewX', 'skewY', 'scale'],
scrollProp = ['scroll'], // has no default value, it's calculated on tween start
opacityProp = ['opacity'], // opacity
coreProps = colorProps.concat( opacityProp, boxModelProps, transformFunctions), al = coreProps.length,
defaultPropsValues = {};
//populate default values object
for ( var i=0; i<al; i++ ){
var p = _all[i];
if (_colors.indexOf(p) !== -1){
_defaults[p] = 'rgba(0,0,0,0)'; // _defaults[p] = {r:0,g:0,b:0,a:1}; // no unit/suffix
} else if ( _boxModel.indexOf(p) !== -1 ) {
_defaults[p] = 0;
for ( var propertyIndex=0; propertyIndex<al; propertyIndex++ ){
var p = coreProps[propertyIndex];
if (colorProps.indexOf(p) !== -1){
defaultPropsValues[p] = 'rgba(0,0,0,0)'; // defaultPropsValues[p] = {r:0,g:0,b:0,a:1}; // no unit/suffix
} else if ( boxModelProps.indexOf(p) !== -1 ) {
defaultPropsValues[p] = 0;
} else if ( p === 'translate3d' ){ // px
_defaults[p] = [0,0,0];
defaultPropsValues[p] = [0,0,0];
} else if ( p === 'translate' ){ // px
_defaults[p] = [0,0];
defaultPropsValues[p] = [0,0];
} else if ( p === 'rotate' || /X|Y|Z/.test(p) ){ // deg
_defaults[p] = 0;
defaultPropsValues[p] = 0;
} else if ( p === 'scale' || p === 'opacity' ){ // unitless
_defaults[p] = 1;
defaultPropsValues[p] = 1;
}
p = null;
}
@ -58,47 +58,51 @@
},
// tools / utils
getPrefix = function() { //returns browser prefix
var div = document.createElement('div'), i = 0, pf = ['Moz', 'moz', 'Webkit', 'webkit', 'O', 'o', 'Ms', 'ms'],
s = ['MozTransform', 'mozTransform', 'WebkitTransform', 'webkitTransform', 'OTransform', 'oTransform', 'MsTransform', 'msTransform'];
for (var i = 0, pl = pf.length; i < pl; i++) { if (s[i] in div.style) { return pf[i]; } }
div = null;
var prefixes = ['Moz', 'moz', 'Webkit', 'webkit', 'O', 'o', 'Ms', 'ms'], thePrefix;
for (var pIndex = 0, pfl = prefixes.length; pIndex < pfl; pIndex++) {
if (prefixes[pIndex]+'Transform' in document.body.style) { thePrefix = prefixes[pIndex]; break; }
}
return thePrefix;
},
property = function(p){ // returns prefixed property | property
var r = (!(p in document.body.style)) ? true : false, f = getPrefix(); // is prefix required for property | prefix
return r ? f + (p.charAt(0).toUpperCase() + p.slice(1)) : p;
property = function(propertyToPrefix){ // returns prefixed property | property
var prefixRequired = (!(propertyToPrefix in document.body.style)) ? true : false, prefix = getPrefix(); // is prefix required for property | prefix
return prefixRequired ? prefix + (propertyToPrefix.charAt(0).toUpperCase() + propertyToPrefix.slice(1)) : propertyToPrefix;
},
selector = function(el,multi){ // a public selector utility
var nl;
if (multi){
nl = el instanceof Object || typeof el === 'object' ? el : document.querySelectorAll(el);
} else {
nl = typeof el === 'object' ? el
: /^#/.test(el) ? document.getElementById(el.replace('#','')) : document.querySelector(el);
nl = typeof el === 'object' ? el : document.querySelector(el);
}
if (nl === null && el !== 'window') throw new TypeError('Element not found or incorrect selector: '+el);
return nl;
},
radToDeg = function(a) { return a*180/Math.PI; },
trueDimension = function (d,p) { //true dimension returns { v = value, u = unit }
var x = parseInt(d) || 0, mu = ['px','%','deg','rad','em','rem','vh','vw'], y;
for (var i=0, l = mu.length; i<l; i++) { if ( typeof d === 'string' && d.indexOf(mu[i]) !== -1 ) { y = mu[i]; break; } }
y = y !== undefined ? y : (p ? 'deg' : 'px');
return { v: x, u: y };
trueDimension = function (dimValue,isAngle) { //true dimension returns { v = value, u = unit }
var intValue = parseInt(dimValue) || 0, mUnits = ['px','%','deg','rad','em','rem','vh','vw'], theUnit;
for (var mIndex=0; mIndex<mUnits.length; mIndex++) {
if ( typeof dimValue === 'string' && dimValue.indexOf(mUnits[mIndex]) !== -1 ) {
theUnit = mUnits[mIndex]; break;
}
}
theUnit = theUnit !== undefined ? theUnit : (isAngle ? 'deg' : 'px');
return { v: intValue, u: theUnit };
},
trueColor = function (v) { // replace transparent and transform any color to rgba()/rgb()
if (/rgb|rgba/.test(v)) { // first check if it's a rgb string
var vrgb = v.replace(/\s|\)/,'').split('(')[1].split(','), y = vrgb[3] ? vrgb[3] : null;
trueColor = function (colorString) { // replace transparent and transform any color to rgba()/rgb()
if (/rgb|rgba/.test(colorString)) { // first check if it's a rgb string
var vrgb = colorString.replace(/\s|\)/,'').split('(')[1].split(','), y = vrgb[3] ? vrgb[3] : null;
if (!y) {
return { r: parseInt(vrgb[0]), g: parseInt(vrgb[1]), b: parseInt(vrgb[2]) };
} else {
return { r: parseInt(vrgb[0]), g: parseInt(vrgb[1]), b: parseInt(vrgb[2]), a: parseFloat(y) };
}
} else if (/^#/.test(v)) {
var fromHex = hexToRGB(v); return { r: fromHex.r, g: fromHex.g, b: fromHex.b };
} else if (/transparent|none|initial|inherit/.test(v)) {
} else if (/^#/.test(colorString)) {
var fromHex = hexToRGB(colorString); return { r: fromHex.r, g: fromHex.g, b: fromHex.b };
} else if (/transparent|none|initial|inherit/.test(colorString)) {
return { r: 0, g: 0, b: 0, a: 0 };
} else if (!/^#|^rgb/.test(v) ) { // maybe we can check for web safe colors
var h = document.getElementsByTagName('head')[0]; h.style.color = v;
} else if (!/^#|^rgb/.test(colorString) ) { // maybe we can check for web safe colors
var h = document.getElementsByTagName('head')[0]; h.style.color = colorString;
var webColor = g.getComputedStyle(h,null).color; webColor = /rgb/.test(webColor) ? webColor.replace(/[^\d,]/g, '').split(',') : [0,0,0];
h.style.color = ''; return { r: parseInt(webColor[0]), g: parseInt(webColor[1]), b: parseInt(webColor[2]) };
}
@ -128,7 +132,7 @@
var tps = css[i].split(':')[1].split(')'); //all transform properties
for ( var k=0, tpl = tps.length-1; k< tpl; k++){
var tpv = tps[k].split('('), tp = tpv[0], tv = tpv[1]; //each transform property
if ( _transform.indexOf(tp) !== -1 ){
if ( transformFunctions.indexOf(tp) !== -1 ){
trsf[tp] = /translate3d/.test(tp) ? tv.split(',') : tv;
}
}
@ -148,7 +152,7 @@
return styleValue;
}
} else {
return _defaults[p];
return defaultPropsValues[p];
}
}
},
@ -390,7 +394,7 @@
skewObject = {}, rotateObject = {}, translateObject = {}, transformObject = {};
for (var x in obj) {
if (_transform.indexOf(x) !== -1) { // transform object gets built here
if (transformFunctions.indexOf(x) !== -1) { // transform object gets built here
if ( /^translate(?:[XYZ]|3d)$/.test(x) ) { //process translate3d
var ta = ['X', 'Y', 'Z']; //coordinates // translate[x] = pp(x, obj[x]);
@ -418,11 +422,11 @@
}
propertiesObject[transformProperty] = transformObject;
} else {
if ( _boxModel.indexOf(x) !== -1 ) {
if ( boxModelProps.indexOf(x) !== -1 ) {
propertiesObject[x] = parseProperty.boxModel.call(this,x,obj[x]);
} else if (_opacity.indexOf(x) !== -1 || x === 'scroll') {
} else if (opacityProp.indexOf(x) !== -1 || x === 'scroll') {
propertiesObject[x] = parseProperty.unitless.call(this,x,obj[x]);
} else if (_colors.indexOf(x) !== -1) {
} else if (colorProps.indexOf(x) !== -1) {
propertiesObject[x] = parseProperty.colors.call(this,x,obj[x]);
} else if (x in parseProperty) { // or any other property from css/ attr / svg / third party plugins
propertiesObject[x] = parseProperty[x].call(this,x,obj[x]);
@ -477,17 +481,17 @@
deg = ['rotate','skew'], ax = ['X','Y','Z'];
for (var p in this.valuesStart){
if ( _transform.indexOf(p) !== -1 ) {
if ( transformFunctions.indexOf(p) !== -1 ) {
var r2d = (/(rotate|translate|scale)$/.test(p));
if ( /translate/.test(p) && p !== 'translate' ) {
startValues['translate3d'] = currentStyle['translate3d'] || _defaults[p];
startValues['translate3d'] = currentStyle['translate3d'] || defaultPropsValues[p];
} else if ( r2d ) { // 2d transforms
startValues[p] = currentStyle[p] || _defaults[p];
startValues[p] = currentStyle[p] || defaultPropsValues[p];
} else if ( !r2d && /rotate|skew/.test(p) ) { // all angles
for (var d=0; d<2; d++) {
for (var a = 0; a<3; a++) {
var s = deg[d]+ax[a];
if (_transform.indexOf(s) !== -1 && (s in this.valuesStart) ) { startValues[s] = currentStyle[s] || _defaults[s]; }
if (transformFunctions.indexOf(s) !== -1 && (s in this.valuesStart) ) { startValues[s] = currentStyle[s] || defaultPropsValues[s]; }
}
}
}
@ -495,9 +499,9 @@
if ( p !== 'scroll' ) {
if (p === 'opacity' && isIE8 ) { // handle IE8 opacity
var currentOpacity = getCurrentStyle(this.element,'filter');
startValues['opacity'] = typeof currentOpacity === 'number' ? currentOpacity : _defaults['opacity'];
startValues['opacity'] = typeof currentOpacity === 'number' ? currentOpacity : defaultPropsValues['opacity'];
} else {
if ( _all.indexOf(p) !== -1 ) {
if ( coreProps.indexOf(p) !== -1 ) {
startValues[p] = getCurrentStyle(this.element,p) || d[p];
} else { // plugins register here
startValues[p] = p in prepareStart ? prepareStart[p].call(this,p,this.valuesStart[p]) : 0;
@ -509,8 +513,8 @@
}
}
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];
if ( transformFunctions.indexOf(p) !== -1 && (!( p in this.valuesStart )) ) {
startValues[p] = currentStyle[p] || defaultPropsValues[p];
}
}

2
package.json
View file

@ -1,6 +1,6 @@
{
"name": "kute.js",
"version": "1.6.2",
"version": "1.6.3",
"description": "Complete Native Javascript animation engine.",
"main": "kute.js",
"scripts": {