* Fixed some bug with Attr plugin
* preparing code for a bundle build script
* documentation updates
This commit is contained in:
thednp 2016-11-25 22:54:27 +02:00
parent bda5756889
commit 7aa15a43b5
23 changed files with 92 additions and 81 deletions

View file

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

View file

@ -1,10 +1,11 @@
// radius attribute
var radiusTween = KUTE.to('#circle', {attr: {r: 75} }, {repeat:1, yoyo: true, easing: 'easingCubicOut'});
// var radiusTween = KUTE.to('#circle', {attr: {r: '75px'} }, {repeat:1, yoyo: true, easing: 'easingCubicOut'});
var radiusTween = KUTE.to('#circle', {attr: {r: '75%'} }, {repeat:1, yoyo: true, easing: 'easingCubicOut'});
// coordinates of the circle center
var coordinatesTween1 = KUTE.to('#circle', {attr: {cx:40,cy:40}}, { duration: 300, easing: 'easingCubicOut'});
var coordinatesTween1 = KUTE.to('#circle', {attr: {cx:40,cy:40,fillOpacity:0.3}}, { duration: 300, easing: 'easingCubicOut'});
var coordinatesTween2 = KUTE.to('#circle', {attr: {cx:110,cy:40}}, { duration: 400, easing: 'linear'});
var coordinatesTween3 = KUTE.to('#circle', {attr: {cx:75,cy:75}}, { easing: 'easingCubicOut'});
var coordinatesTween3 = KUTE.to('#circle', {attr: {cx:75,cy:75,fillOpacity:1}}, { easing: 'easingCubicOut'});
coordinatesTween1.chain(coordinatesTween2);
coordinatesTween2.chain(coordinatesTween3);

View file

@ -135,7 +135,7 @@ var coordinatesTween = KUTE.to('#circle', {attr:{cx:0,cy:0}});
<p>A quick demo with the above:<p>
<div class="featurettes">
<svg class="example-box-model example-box" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 150 150">
<circle class="bg-orange" id="circle" cx="75" cy="75" r="40" />
<circle class="bg-orange" id="circle" cx="75" cy="75" r="40" />
</svg>
<div class="example-buttons">

View file

@ -162,7 +162,9 @@
<h3>Presentation Attributes</h3>
<p>The <a href="attr.html">Attributes Plugin</a> can animate any numerical presentation attribute such as <kbd class="bg-olive">width</kbd>, <kbd class="bg-olive">cx</kbd> or <kbd class="bg-olive">stop-opacity</kbd>, but the values can be also suffixed: <code>150px</code> or <code>50%</code>, and for that you must always provide a string value that include the measurement unit, and that, of course, depends on the attribute. This plugin can be a great addition to the above SVG Plugin for specific gradient attributes or specific geometric shapes' attributes.</p>
<p>The synthax is slightly different to make sure we don't mess up with CSS properties that have the same name because the presentation attribute may be a unitless attribute while the CSS property might require a suffix (%,px,etc). For instance <code>KUTE.to('selector', {attr:{width:150}})</code> is clearly different from <code>KUTE.to('selector', {width:150})</code> which is the the CSS property with the same name.</p>
<p>Starting KUTE.js 1.6.0 the <a href="attr.html">Attributes Plugin</a> can also animate color attributes such as <kbd class="bg-olive">stroke</kbd>, <kbd class="bg-olive">fill</kbd> or <kbd class="bg-olive">stop-color</kbd>, and they are removed from the SVG Plugin, and the reason for that is the new bundle build that incorporates both plugins into an unified file. More details to come.</p>
<p>Starting KUTE.js 1.6.0 the <a href="attr.html">Attributes Plugin</a> can also animate color attributes such as <kbd class="bg-olive">stroke</kbd>, <kbd class="bg-olive">fill</kbd> or <kbd class="bg-olive">stop-color</kbd>, and they are removed from the SVG Plugin, and the reason for that is the new bundle build that incorporates both plugins into an unified file.<p>
<p>The plugin handles attribute namespaces properly which means you can use both Javascript notation (like <kbd class="bg-olive">stopColor</kbd>) and HTML markup notation (like <kbd class="bg-olive">'stop-color'</kbd>), see the below example.</p>
<p>EG: <code>KUTE.to('selector', {attr:{stroke:'blue'}})</code> to animate the stroke of an SVG element or <code>KUTE.to('selector', {attr:{'stop-color':'rgb(135,16,122)'}})</code> to animate the stop color of some SVG gradient.</p>
<h3>Typography Properties</h3>
<p>The <a href="css.html">CSS Plugin</a> also cover the text properties, and these can be combinated with each other when applied to text elements (paragraphs, headings) as animation fallback for <code>scale</code> on browsers that don't support <code>transform</code> at all. Yes, IE8 and other legacy browsers.</p>

View file

@ -1,2 +1,2 @@
// KUTE.js v1.5.98 | © 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=r.dom,o=n.prepareStart,u=n.parseProperty,a=r._unit,f=r._number,s=r._color,c=function(t,e){return t.getAttribute(e)},l=["fill","stroke","stop-color"],p=n.truC,d=n.truD,b=function(t){return t.replace(/[A-Z]/g,"-$&").toLowerCase()};o.attr=function(t,e,r){var n={};for(var i in r){var o=b(i).replace(/_+[a-z]+/,""),u=c(t,o);n[o]=l.indexOf(b(i))!==-1?u||"rgba(0,0,0,0)":u||(/opacity/i.test(i)?1:0)}return n},u.attr=function(t,r,n){"attr"in i||(i.attr=function(t,e,r,n,o){for(var u in n)i.attributes[u](t,u,r[u],n[u],o)},e=i.attributes={});var o={};for(var u in r){var v=b(u),y=c(n,v.replace(/_+[a-z]+/,""));if(l.indexOf(v)===-1&&(/(%|[a-z]+)$/.test(r[u])||/(%|[a-z]+)$/.test(y))){var _=d(y).u||d(r[u]).u,g=/%/.test(_)?"_percent":"_"+_;v+g in e||(e[v+g]=function(t,e,r,n,i){var o=o||e.replace(g,"");t.setAttribute(o,a(r.v,n.v,n.u,i))}),o[v+g]=d(r[u])}else l.indexOf(v)>-1?(v in e||(e[v]=function(t,e,n,i,o){t.setAttribute(e,s(n,i,o,r.keepHex))}),o[v]=p(r[u])):(v in e||(e[v]=function(t,e,r,n,i){t.setAttribute(e,f(r,n,i))}),o[v]=parseFloat(r[u]))}return o}});
// KUTE.js v1.5.98a | © 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=r.dom,u=n.prepareStart,o=n.parseProperty,a=n.truC,f=n.truD,s=(n.crossCheck,r._unit),l=r._number,c=r._color,p=function(t,e){return t.getAttribute(e)},d=["fill","stroke","stop-color"],b=function(t){return t.replace(/[A-Z]/g,"-$&").toLowerCase()};return u.attr=function(t,e,r){var n={};for(var i in r){var u=b(i).replace(/_+[a-z]+/,""),o=p(t,u);n[u]=d.indexOf(u)!==-1?o||"rgba(0,0,0,0)":o||(/opacity/i.test(i)?1:0)}return n},o.attr=function(t,r,n){"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 u={};for(var o in r){var v=b(o),y=p(n,v.replace(/_+[a-z]+/,""));if(d.indexOf(v)===-1)if(null!==y&&/(%|[a-z]+)$/.test(y)){var _=f(y).u||f(r[o]).u,g=/%/.test(_)?"_percent":"_"+_;v+g in e||(e[v+g]=function(t,e,r,n,i){var u=u||e.replace(g,"");t.setAttribute(u,s(r.v,n.v,n.u,i))}),u[v+g]=f(r[o])}else/(%|[a-z]+)$/.test(r[o])&&null!==y&&(null===y||/(%|[a-z]+)$/.test(y))||(v in e||(e[v]=function(t,e,r,n,i){t.setAttribute(e,l(r,n,i))}),u[v]=parseFloat(r[o]));else v in e||(e[v]=function(t,e,n,i,u){t.setAttribute(e,c(n,i,u,r.keepHex))}),u[v]=a(r[o])}return u},this});

View file

@ -1,2 +1,2 @@
// KUTE.js v1.5.98 | © dnp_theme | CSS Plugin | MIT-License
// KUTE.js v1.5.98a | © dnp_theme | CSS Plugin | MIT-License
!function(t,r){if("function"==typeof define&&define.amd)define(["kute.js"],r);else if("object"==typeof module&&"function"==typeof require)module.exports=r(require("kute.js"));else{if("undefined"==typeof t.KUTE)throw new Error("CSS Plugin require KUTE.js.");r(t.KUTE)}}(this,function(t){"use strict";for(var r="undefined"!=typeof global?global:window,e=t,o=r.dom,n=e.parseProperty,i=e.prepareStart,u=e.property,d=e.getCurrentStyle,f=e.truD,a=e.truC,c=(r._number,r._unit),g=r._color,l=["borderColor","borderTopColor","borderRightColor","borderBottomColor","borderLeftColor","outlineColor"],p=["borderRadius","borderTopLeftRadius","borderTopRightRadius","borderBottomLeftRadius","borderBottomRightRadius"],s=["right","bottom","minWidth","minHeight","maxWidth","maxHeight","padding","margin","paddingTop","paddingBottom","paddingLeft","paddingRight","marginTop","marginBottom","marginLeft","marginRight","borderWidth","borderTopWidth","borderRightWidth","borderBottomWidth","borderLeftWidth","outlineWidth"],h=["fontSize","lineHeight","letterSpacing","wordSpacing"],b=["clip"],m=["backgroundPosition"],v=s.concat(h),y=p.concat(s,h),x=l.concat(b,p,s,h,m),R=x.length,C=C||{},T=0;T<R;T++)l.indexOf(x[T])!==-1?C[x[T]]="rgba(0,0,0,0)":y.indexOf(x[T])!==-1?C[x[T]]=0:m.indexOf(x[T])!==-1?C[x[T]]=[50,50]:"clip"===x[T]&&(C[x[T]]=[0,0,0,0]);for(var T=0,W=l.length;T<W;T++)n[l[T]]=function(t,r){return t in o||(o[t]=function(t,r,e,o,n,i){t.style[r]=g(e,o,n,i.keepHex)}),a(r)},i[l[T]]=function(t,r,e){return d(t,r)||C[r]};for(var T=0,W=v.length;T<W;T++)n[v[T]]=function(t,r){return t in o||(o[t]=function(t,r,e,o,n){t.style[r]=c(e.v,o.v,o.u,n)}),f(r)},i[v[T]]=function(t,r,e){return d(t,r)||C[r]};for(var T=0,W=p.length;T<W;T++){var S=u(p[T]);n[S]=function(t,r){return t in o||(o[t]=function(t,r,e,o,n){t.style[r]=c(e.v,o.v,o.u,n)}),f(r)},i[S]=function(t,r,e){return d(t,S)||C[r]}}return n.clip=function(t,r){if(t in o||(o[t]=function(t,r,e,o,n){var i=0,u=[];for(i;i<4;i++){var d=e[i].v,f=o[i].v,a=o[i].u||"px";u[i]=c(d,f,a,n)}t.style[r]="rect("+u+")"}),r instanceof Array)return[f(r[0]),f(r[1]),f(r[2]),f(r[3])];var e=r.replace(/rect|\(|\)/g,"");return e=/\,/g.test(e)?e.split(/\,/g):e.split(/\s/g),[f(e[0]),f(e[1]),f(e[2]),f(e[3])]},i.clip=function(t,r,e){var o=d(t,r),n=d(t,"width"),i=d(t,"height");return/rect/.test(o)?o:[0,n,i,0]},n.backgroundPosition=function(t,r){if(t in o||(o[t]=function(t,r,e,o,n){t.style[r]=c(e.x.v,o.x.v,"%",n)+" "+c(e.y.v,o.y.v,"%",n)}),r instanceof Array)return{x:f(r[0])||{v:50,u:"%"},y:f(r[1])||{v:50,u:"%"}};var e,n,i=r.replace(/top|left/g,0).replace(/right|bottom/g,100).replace(/center|middle/g,50);return i=/\,/g.test(i)?i.split(/\,/g):i.split(/\s/g),i=2===i.length?i:[i[0],50],e=f(i[0]),n=f(i[1]),{x:e,y:n}},i.backgroundPosition=function(t,r,e){return d(t,r)||C[r]},this});

View file

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

File diff suppressed because one or more lines are too long

View file

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

File diff suppressed because one or more lines are too long

View file

@ -116,23 +116,23 @@ define([
<h3>Websites</h3>
<p>In your website add the following code, the best would be to put it at the end of your <code>body</code> tag:</p>
<pre><code class="language-markup">&lt;script src="https://cdn.jsdelivr.net/kute.js/1.5.9/kute.min.js">&lt;/script> &lt;!-- core KUTE.js --></code></pre>
<pre><code class="language-markup">&lt;script src="https://cdn.jsdelivr.net/kute.js/1.6.0/kute.min.js">&lt;/script> &lt;!-- core KUTE.js --></code></pre>
<p>An alternate CDN link here:</p>
<pre><code class="language-markup">&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/kute.js/1.5.9/kute.min.js">&lt;/script> &lt;!-- core KUTE.js --></code></pre>
<pre><code class="language-markup">&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/kute.js/1.6.0/kute.min.js">&lt;/script> &lt;!-- core KUTE.js --></code></pre>
<p>The CDN repositories receive latest updates <a target="_blank" href="http://www.jsdelivr.com/#!kute.js">here</a> and <a href="https://cdnjs.com/libraries/kute.js" target="_blank">right here</a>. You might also want to include the tools that you need for your project:</p>
<pre><code class="language-markup">&lt;script src="https://cdn.jsdelivr.net/kute.js/1.5.9/kute-jquery.min.js">&lt;/script> &lt;!-- jQuery Plugin -->
&lt;script src="https://cdn.jsdelivr.net/kute.js/1.5.9/kute-css.min.js">&lt;/script> &lt;!-- CSS Plugin -->
&lt;script src="https://cdn.jsdelivr.net/kute.js/1.5.9/kute-svg.min.js">&lt;/script> &lt;!-- SVG Plugin -->
&lt;script src="https://cdn.jsdelivr.net/kute.js/1.5.9/kute-text.min.js">&lt;/script> &lt;!-- Text Plugin -->
&lt;script src="https://cdn.jsdelivr.net/kute.js/1.5.9/kute-attr.min.js">&lt;/script> &lt;!-- Attributes Plugin -->
<pre><code class="language-markup">&lt;script src="https://cdn.jsdelivr.net/kute.js/1.6.0/kute-jquery.min.js">&lt;/script> &lt;!-- jQuery Plugin -->
&lt;script src="https://cdn.jsdelivr.net/kute.js/1.6.0/kute-css.min.js">&lt;/script> &lt;!-- CSS Plugin -->
&lt;script src="https://cdn.jsdelivr.net/kute.js/1.6.0/kute-svg.min.js">&lt;/script> &lt;!-- SVG Plugin -->
&lt;script src="https://cdn.jsdelivr.net/kute.js/1.6.0/kute-text.min.js">&lt;/script> &lt;!-- Text Plugin -->
&lt;script src="https://cdn.jsdelivr.net/kute.js/1.6.0/kute-attr.min.js">&lt;/script> &lt;!-- Attributes Plugin -->
</code></pre>
<p>Alternate CDN links:</p>
<pre><code class="language-markup">&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/kute.js/1.5.9/kute-jquery.min.js">&lt;/script> &lt;!-- jQuery Plugin -->
&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/kute.js/1.5.9/kute-css.min.js">&lt;/script> &lt;!-- CSS Plugin -->
&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/kute.js/1.5.9/kute-svg.min.js">&lt;/script> &lt;!-- SVG Plugin -->
&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/kute.js/1.5.9/kute-text.min.js">&lt;/script> &lt;!-- Text Plugin -->
&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/kute.js/1.5.9/kute-attr.min.js">&lt;/script> &lt;!-- Attributes Plugin -->
<pre><code class="language-markup">&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/kute.js/1.6.0/kute-jquery.min.js">&lt;/script> &lt;!-- jQuery Plugin -->
&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/kute.js/1.6.0/kute-css.min.js">&lt;/script> &lt;!-- CSS Plugin -->
&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/kute.js/1.6.0/kute-svg.min.js">&lt;/script> &lt;!-- SVG Plugin -->
&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/kute.js/1.6.0/kute-text.min.js">&lt;/script> &lt;!-- Text Plugin -->
&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/kute.js/1.6.0/kute-attr.min.js">&lt;/script> &lt;!-- Attributes Plugin -->
</code></pre>
<p>Your awesome animation coding would follow after these script links.</p>

View file

@ -1,2 +1,2 @@
// KUTE.js v1.5.98 | © 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=r.dom,o=n.prepareStart,u=n.parseProperty,a=r._unit,f=r._number,s=r._color,c=function(t,e){return t.getAttribute(e)},l=["fill","stroke","stop-color"],p=n.truC,d=n.truD,b=function(t){return t.replace(/[A-Z]/g,"-$&").toLowerCase()};o.attr=function(t,e,r){var n={};for(var i in r){var o=b(i).replace(/_+[a-z]+/,""),u=c(t,o);n[o]=l.indexOf(b(i))!==-1?u||"rgba(0,0,0,0)":u||(/opacity/i.test(i)?1:0)}return n},u.attr=function(t,r,n){"attr"in i||(i.attr=function(t,e,r,n,o){for(var u in n)i.attributes[u](t,u,r[u],n[u],o)},e=i.attributes={});var o={};for(var u in r){var v=b(u),y=c(n,v.replace(/_+[a-z]+/,""));if(l.indexOf(v)===-1&&(/(%|[a-z]+)$/.test(r[u])||/(%|[a-z]+)$/.test(y))){var _=d(y).u||d(r[u]).u,g=/%/.test(_)?"_percent":"_"+_;v+g in e||(e[v+g]=function(t,e,r,n,i){var o=o||e.replace(g,"");t.setAttribute(o,a(r.v,n.v,n.u,i))}),o[v+g]=d(r[u])}else l.indexOf(v)>-1?(v in e||(e[v]=function(t,e,n,i,o){t.setAttribute(e,s(n,i,o,r.keepHex))}),o[v]=p(r[u])):(v in e||(e[v]=function(t,e,r,n,i){t.setAttribute(e,f(r,n,i))}),o[v]=parseFloat(r[u]))}return o}});
// KUTE.js v1.5.98a | © 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=r.dom,u=n.prepareStart,o=n.parseProperty,a=n.truC,f=n.truD,s=(n.crossCheck,r._unit),l=r._number,c=r._color,p=function(t,e){return t.getAttribute(e)},d=["fill","stroke","stop-color"],b=function(t){return t.replace(/[A-Z]/g,"-$&").toLowerCase()};return u.attr=function(t,e,r){var n={};for(var i in r){var u=b(i).replace(/_+[a-z]+/,""),o=p(t,u);n[u]=d.indexOf(u)!==-1?o||"rgba(0,0,0,0)":o||(/opacity/i.test(i)?1:0)}return n},o.attr=function(t,r,n){"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 u={};for(var o in r){var v=b(o),y=p(n,v.replace(/_+[a-z]+/,""));if(d.indexOf(v)===-1)if(null!==y&&/(%|[a-z]+)$/.test(y)){var _=f(y).u||f(r[o]).u,g=/%/.test(_)?"_percent":"_"+_;v+g in e||(e[v+g]=function(t,e,r,n,i){var u=u||e.replace(g,"");t.setAttribute(u,s(r.v,n.v,n.u,i))}),u[v+g]=f(r[o])}else/(%|[a-z]+)$/.test(r[o])&&null!==y&&(null===y||/(%|[a-z]+)$/.test(y))||(v in e||(e[v]=function(t,e,r,n,i){t.setAttribute(e,l(r,n,i))}),u[v]=parseFloat(r[o]));else v in e||(e[v]=function(t,e,n,i,u){t.setAttribute(e,c(n,i,u,r.keepHex))}),u[v]=a(r[o])}return u},this});

View file

@ -1,2 +1,2 @@
// KUTE.js v1.5.98 | © dnp_theme | CSS Plugin | MIT-License
// KUTE.js v1.5.98a | © dnp_theme | CSS Plugin | MIT-License
!function(t,r){if("function"==typeof define&&define.amd)define(["kute.js"],r);else if("object"==typeof module&&"function"==typeof require)module.exports=r(require("kute.js"));else{if("undefined"==typeof t.KUTE)throw new Error("CSS Plugin require KUTE.js.");r(t.KUTE)}}(this,function(t){"use strict";for(var r="undefined"!=typeof global?global:window,e=t,o=r.dom,n=e.parseProperty,i=e.prepareStart,u=e.property,d=e.getCurrentStyle,f=e.truD,a=e.truC,c=(r._number,r._unit),g=r._color,l=["borderColor","borderTopColor","borderRightColor","borderBottomColor","borderLeftColor","outlineColor"],p=["borderRadius","borderTopLeftRadius","borderTopRightRadius","borderBottomLeftRadius","borderBottomRightRadius"],s=["right","bottom","minWidth","minHeight","maxWidth","maxHeight","padding","margin","paddingTop","paddingBottom","paddingLeft","paddingRight","marginTop","marginBottom","marginLeft","marginRight","borderWidth","borderTopWidth","borderRightWidth","borderBottomWidth","borderLeftWidth","outlineWidth"],h=["fontSize","lineHeight","letterSpacing","wordSpacing"],b=["clip"],m=["backgroundPosition"],v=s.concat(h),y=p.concat(s,h),x=l.concat(b,p,s,h,m),R=x.length,C=C||{},T=0;T<R;T++)l.indexOf(x[T])!==-1?C[x[T]]="rgba(0,0,0,0)":y.indexOf(x[T])!==-1?C[x[T]]=0:m.indexOf(x[T])!==-1?C[x[T]]=[50,50]:"clip"===x[T]&&(C[x[T]]=[0,0,0,0]);for(var T=0,W=l.length;T<W;T++)n[l[T]]=function(t,r){return t in o||(o[t]=function(t,r,e,o,n,i){t.style[r]=g(e,o,n,i.keepHex)}),a(r)},i[l[T]]=function(t,r,e){return d(t,r)||C[r]};for(var T=0,W=v.length;T<W;T++)n[v[T]]=function(t,r){return t in o||(o[t]=function(t,r,e,o,n){t.style[r]=c(e.v,o.v,o.u,n)}),f(r)},i[v[T]]=function(t,r,e){return d(t,r)||C[r]};for(var T=0,W=p.length;T<W;T++){var S=u(p[T]);n[S]=function(t,r){return t in o||(o[t]=function(t,r,e,o,n){t.style[r]=c(e.v,o.v,o.u,n)}),f(r)},i[S]=function(t,r,e){return d(t,S)||C[r]}}return n.clip=function(t,r){if(t in o||(o[t]=function(t,r,e,o,n){var i=0,u=[];for(i;i<4;i++){var d=e[i].v,f=o[i].v,a=o[i].u||"px";u[i]=c(d,f,a,n)}t.style[r]="rect("+u+")"}),r instanceof Array)return[f(r[0]),f(r[1]),f(r[2]),f(r[3])];var e=r.replace(/rect|\(|\)/g,"");return e=/\,/g.test(e)?e.split(/\,/g):e.split(/\s/g),[f(e[0]),f(e[1]),f(e[2]),f(e[3])]},i.clip=function(t,r,e){var o=d(t,r),n=d(t,"width"),i=d(t,"height");return/rect/.test(o)?o:[0,n,i,0]},n.backgroundPosition=function(t,r){if(t in o||(o[t]=function(t,r,e,o,n){t.style[r]=c(e.x.v,o.x.v,"%",n)+" "+c(e.y.v,o.y.v,"%",n)}),r instanceof Array)return{x:f(r[0])||{v:50,u:"%"},y:f(r[1])||{v:50,u:"%"}};var e,n,i=r.replace(/top|left/g,0).replace(/right|bottom/g,100).replace(/center|middle/g,50);return i=/\,/g.test(i)?i.split(/\,/g):i.split(/\s/g),i=2===i.length?i:[i[0],50],e=f(i[0]),n=f(i[1]),{x:e,y:n}},i.backgroundPosition=function(t,r,e){return d(t,r)||C[r]},this});

View file

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

File diff suppressed because one or more lines are too long

View file

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

4
dist/kute.min.js vendored

File diff suppressed because one or more lines are too long

View file

@ -18,11 +18,14 @@
}(this, function (KUTE) {
'use strict';
var g = typeof global !== 'undefined' ? global : window,
var g = typeof global !== 'undefined' ? global : window, // connect to KUTE object and global
K = KUTE, DOM = g.dom, prepareStart = K.prepareStart, parseProperty = K.parseProperty,
unit = g._unit, number = g._number, color = g._color,
getCurrentValue = function(e,a){ return e.getAttribute(a); }, // get current attribute value
svgColors = ['fill','stroke','stop-color'], trueColor = K.truC, trueDimension = K.truD, atts,
trueColor = K.truC, trueDimension = K.truD, crossCheck = K.crossCheck,
unit = g._unit, number = g._number, color = g._color;
// here we go with the plugin
var getCurrentValue = function(e,a){ return e.getAttribute(a); }, // get current attribute value
svgColors = ['fill','stroke','stop-color'], atts,
replaceUppercase = function(a) {
return a.replace(/[A-Z]/g, "-$&").toLowerCase();
};
@ -32,7 +35,7 @@
for (var a in v){
var attribute = replaceUppercase(a).replace(/_+[a-z]+/,''),
currentValue = getCurrentValue(el,attribute); // get the value for 'fill-opacity' not fillOpacity
attrStartValues[attribute] = svgColors.indexOf(replaceUppercase(a)) !== -1 ? (currentValue || 'rgba(0,0,0,0)') : (currentValue || (/opacity/i.test(a) ? 1 : 0));
attrStartValues[attribute] = svgColors.indexOf(attribute) !== -1 ? (currentValue || 'rgba(0,0,0,0)') : (currentValue || (/opacity/i.test(a) ? 1 : 0));
}
return attrStartValues;
};
@ -52,32 +55,35 @@
var ats = {};
for ( var p in o ) {
var prop = replaceUppercase(p), cv = getCurrentValue(l,prop.replace(/_+[a-z]+/,''));
if ( svgColors.indexOf(prop) === -1 && (/(%|[a-z]+)$/.test(o[p]) || /(%|[a-z]+)$/.test(cv)) ) {
var u = trueDimension(cv).u || trueDimension(o[p]).u, s = /%/.test(u) ? '_percent' : '_'+u;
if (!(prop+s in atts)) {
atts[prop+s] = function(l,p,a,b,v) {
var _p = _p || p.replace(s,'');
l.setAttribute(_p, unit(a.v,b.v,b.u,v) );
if ( svgColors.indexOf(prop) === -1) {
if ( cv !== null && /(%|[a-z]+)$/.test(cv) ) {
var u = trueDimension(cv).u || trueDimension(o[p]).u, s = /%/.test(u) ? '_percent' : '_'+u;
if (!(prop+s in atts)) {
atts[prop+s] = function(l,p,a,b,v) {
var _p = _p || p.replace(s,'');
l.setAttribute(_p, unit(a.v,b.v,b.u,v) );
}
}
}
ats[prop+s] = trueDimension(o[p]);
} else if ( svgColors.indexOf(prop) > -1 ) {
ats[prop+s] = trueDimension(o[p]);
} else if ( !/(%|[a-z]+)$/.test(o[p]) || cv === null || cv !== null && !/(%|[a-z]+)$/.test(cv) ) {
if (!(prop in atts)) {
atts[prop] = function(l,o,a,b,v) {
l.setAttribute(o, number(a,b,v));
}
}
ats[prop] = parseFloat(o[p]);
}
} else {
if (!(prop in atts)) {
atts[prop] = function(l,u,a,b,v) {
l.setAttribute(u, color(a,b,v,o.keepHex));
}
}
ats[prop] = trueColor(o[p]);
} else {
if (!(prop in atts)) {
atts[prop] = function(l,o,a,b,v) {
l.setAttribute(o, number(a,b,v));
}
}
ats[prop] = parseFloat(o[p]);
}
}
return ats;
}
return this;
}));

View file

@ -20,6 +20,7 @@
parseProperty = K.parseProperty, prepareStart = K.prepareStart, property = K.property,
getCurrentStyle = K.getCurrentStyle, trueDimension = K.truD, trueColor = K.truC,
number = g._number, unit = g._unit, color = g._color,
_colors = ['borderColor', 'borderTopColor', 'borderRightColor', 'borderBottomColor', 'borderLeftColor', 'outlineColor'], // colors 'hex', 'rgb', 'rgba' -- #fff / rgb(0,0,0) / rgba(0,0,0,0)
_radius = ['borderRadius', 'borderTopLeftRadius', 'borderTopRightRadius', 'borderBottomLeftRadius', 'borderBottomRightRadius'], // border radius px/%
_boxModel = ['right', 'bottom', 'minWidth', 'minHeight', 'maxWidth', 'maxHeight',

View file

@ -1,6 +1,6 @@
/* KUTE.js - The Light Tweening Engine
* package - SVG Plugin
* desc - draw strokes, morph paths and SVG color props
* desc - draw SVG strokes, morph SVG and SVG transforms
* by dnp_theme
* Licensed under MIT-License
*/
@ -18,15 +18,15 @@
}(this, function(KUTE) {
'use strict';
// variables, reference global objects, prepare properties
var g = typeof global !== 'undefined' ? global : window, K = KUTE, p,
var g = typeof global !== 'undefined' ? global : window, K = KUTE, // connect plugin to KUTE object and global
DOM = g.dom, parseProperty = K.parseProperty, prepareStart = K.prepareStart, getCurrentStyle = K.getCurrentStyle,
trueColor = K.truC, trueDimension = K.truD, crossCheck = K.crossCheck,
_isIE = navigator && (new RegExp("MSIE ([0-9]{1,}[\.0-9]{0,})").exec(navigator.userAgent) !== null) ? parseFloat( RegExp.$1 ) : false,
pathReg = /(m[^(h|v|l)]*|[vhl][^(v|h|l|z)]*)/gmi, ns = 'http://www.w3.org/2000/svg',
trueColor = K.truC, trueDimension = K.truD, crossCheck = K.crossCheck,
number = g._number, unit = g._unit, color = g._color, // interpolate functions
coords = g._coords = function(a,b,l,v) { // function(array1, array2, array2.length, progress) for SVG morph
_isIE = navigator && (new RegExp("MSIE ([0-9]{1,}[\.0-9]{0,})").exec(navigator.userAgent) !== null) ? parseFloat( RegExp.$1 ) : false;
// 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._coords = function(a,b,l,v) { // function(array1, array2, length, progress) for SVG morph
var points =[];
for(var i=0;i<l;i++) { // for each point
points[i] = [];
@ -126,7 +126,7 @@
return p;
},
computePathCross = function(s,e){ // pathCross
var s1, e1, pointsArray, largerPathLength, smallerPath, largerPath, simluatedSmallerPath, nsm = [], sml, cl = [], len, tl, cs;
var s1, e1, pointsArray, largerPathLength, smallerPath, largerPath, simulatedSmallerPath, nsm = [], sml, cl = [], len, tl, cs;
if (!this._isPolygon) {
s = createPath(s); e = createPath(e);
@ -140,9 +140,9 @@
if ( largerPathLength === e.length) { smallerPath = s; largerPath = e; } else { smallerPath = e; largerPath = s; }
sml = smallerPath.length;
simluatedSmallerPath = createPath('M'+smallerPath.join('L')+'z'); len = simluatedSmallerPath.getTotalLength() / largerPathLength;
simulatedSmallerPath = createPath('M'+smallerPath.join('L')+'z'); len = simulatedSmallerPath.getTotalLength() / largerPathLength;
for (var i=0; i<largerPathLength; i++){
tl = simluatedSmallerPath.getPointAtLength(len*i);
tl = simulatedSmallerPath.getPointAtLength(len*i);
cs = getClosestPoint(len,tl,smallerPath);
nsm.push( [ cs[0], cs[1] ] );
}
@ -416,7 +416,5 @@
}
}
// return SVG;
return this;
}));

View file

@ -16,10 +16,13 @@
}
}(this, function (KUTE) {
'use strict';
var g = typeof global !== 'undefined' ? global : window,
var g = typeof global !== 'undefined' ? global : window, // connect to KUTE object and global
K = KUTE, DOM = g.dom, prepareStart = K.prepareStart,
parseProperty = K.parseProperty, number = g._number,
_string = String("abcdefghijklmnopqrstuvwxyz").split(""), // lowercase
parseProperty = K.parseProperty, number = g._number;
// let's go with the plugin
var _string = String("abcdefghijklmnopqrstuvwxyz").split(""), // lowercase
_stringUppercase = String("abcdefghijklmnopqrstuvwxyz".toUpperCase()).split(""), // uppercase
_symbols = String("~!@#$%^&*()_+{}[];'<>,./?\=-").split(""), // symbols
_numeric = String("0123456789").split(""), // numeric
@ -43,7 +46,7 @@
: _string, ll = tp.length,
t = tp[floor((random() * ll))], ix = '', tx = '', fi = a.substring(0), f = b.substring(0);
// use string.replace(/<\/?[^>]+(>|$)/g, "") to strip HTML tags while animating ? this is definatelly a to do
// use string.replace(/<\/?[^>]+(>|$)/g, "") to strip HTML tags while animating ? this is definatelly a smart to do
ix = a !== '' ? fi.substring(fi.length,floor(min(v * fi.length, fi.length))) : ''; // initial text, A value
tx = f.substring(0,floor(min(v * f.length, f.length))); // end text, B value
l.innerHTML = v < 1 ? tx + t + ix : b;

12
kute.js
View file

@ -120,7 +120,7 @@
//more internals
getAll = function () { return _tws; },
removeAll = function () { _tws = []; },
add = function (tw) { _tws.push(tw); },
add = g._queueTween = function (tw) { _tws.push(tw); },
remove = function (tw) { var i = _tws.indexOf(tw); if (i !== -1) { _tws.splice(i, 1); }},
stop = function () { if (tick) { _cancelAnimationFrame(tick); tick = null; } },
@ -622,15 +622,15 @@
this._startFired = false;
this._vSR = {}; // internal valuesStartRepeat
this._vS = _o.rpr ? _vS : preparePropertiesObject(_vS,_el); // valuesStart
this._vE = preparePropertiesObject(_vE,_el); // valuesEnd
this._vS = _o.rpr ? _vS : preparePropertiesObject(_vS,_el); // valuesStart
for ( var e in this._vE ) {
if (e in crossCheck && !_o.rpr) crossCheck[e].call(this); // this is where we do the valuesStart and valuesEnd check for fromTo() method
}
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
for ( var e in this._vE ) {
if (e in crossCheck && !this.options.rpr) crossCheck[e].call(this); // this is where we do the valuesStart and valuesEnd check for fromTo() method
}
if ( this.options.perspective !== undefined && transformProperty in this._vE ) { // element transform perspective
var perspectiveString = 'perspective('+parseInt(this.options.perspective)+'px) ';
this._vE[transformProperty]['perspective'] = perspectiveString;

View file

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