Changes:
* Fixed some bug with Attr plugin * preparing code for a bundle build script * documentation updates
This commit is contained in:
parent
bda5756889
commit
7aa15a43b5
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "KUTE.js",
|
||||
"version": "1.5.98",
|
||||
"version": "1.5.98a",
|
||||
"homepage": "http://thednp.github.io/kute.js",
|
||||
"authors": [
|
||||
"thednp"
|
||||
|
|
|
@ -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);
|
||||
|
|
|
@ -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">
|
||||
|
|
|
@ -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>
|
||||
|
|
4
demo/src/kute-attr.min.js
vendored
4
demo/src/kute-attr.min.js
vendored
|
@ -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});
|
2
demo/src/kute-css.min.js
vendored
2
demo/src/kute-css.min.js
vendored
|
@ -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});
|
2
demo/src/kute-jquery.min.js
vendored
2
demo/src/kute-jquery.min.js
vendored
|
@ -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});
|
4
demo/src/kute-svg.min.js
vendored
4
demo/src/kute-svg.min.js
vendored
File diff suppressed because one or more lines are too long
2
demo/src/kute-text.min.js
vendored
2
demo/src/kute-text.min.js
vendored
|
@ -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
demo/src/kute.min.js
vendored
4
demo/src/kute.min.js
vendored
File diff suppressed because one or more lines are too long
|
@ -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"><script src="https://cdn.jsdelivr.net/kute.js/1.5.9/kute.min.js"></script> <!-- core KUTE.js --></code></pre>
|
||||
<pre><code class="language-markup"><script src="https://cdn.jsdelivr.net/kute.js/1.6.0/kute.min.js"></script> <!-- core KUTE.js --></code></pre>
|
||||
<p>An alternate CDN link here:</p>
|
||||
<pre><code class="language-markup"><script src="https://cdnjs.cloudflare.com/ajax/libs/kute.js/1.5.9/kute.min.js"></script> <!-- core KUTE.js --></code></pre>
|
||||
<pre><code class="language-markup"><script src="https://cdnjs.cloudflare.com/ajax/libs/kute.js/1.6.0/kute.min.js"></script> <!-- 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"><script src="https://cdn.jsdelivr.net/kute.js/1.5.9/kute-jquery.min.js"></script> <!-- jQuery Plugin -->
|
||||
<script src="https://cdn.jsdelivr.net/kute.js/1.5.9/kute-css.min.js"></script> <!-- CSS Plugin -->
|
||||
<script src="https://cdn.jsdelivr.net/kute.js/1.5.9/kute-svg.min.js"></script> <!-- SVG Plugin -->
|
||||
<script src="https://cdn.jsdelivr.net/kute.js/1.5.9/kute-text.min.js"></script> <!-- Text Plugin -->
|
||||
<script src="https://cdn.jsdelivr.net/kute.js/1.5.9/kute-attr.min.js"></script> <!-- Attributes Plugin -->
|
||||
<pre><code class="language-markup"><script src="https://cdn.jsdelivr.net/kute.js/1.6.0/kute-jquery.min.js"></script> <!-- jQuery Plugin -->
|
||||
<script src="https://cdn.jsdelivr.net/kute.js/1.6.0/kute-css.min.js"></script> <!-- CSS Plugin -->
|
||||
<script src="https://cdn.jsdelivr.net/kute.js/1.6.0/kute-svg.min.js"></script> <!-- SVG Plugin -->
|
||||
<script src="https://cdn.jsdelivr.net/kute.js/1.6.0/kute-text.min.js"></script> <!-- Text Plugin -->
|
||||
<script src="https://cdn.jsdelivr.net/kute.js/1.6.0/kute-attr.min.js"></script> <!-- Attributes Plugin -->
|
||||
</code></pre>
|
||||
<p>Alternate CDN links:</p>
|
||||
<pre><code class="language-markup"><script src="https://cdnjs.cloudflare.com/ajax/libs/kute.js/1.5.9/kute-jquery.min.js"></script> <!-- jQuery Plugin -->
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/kute.js/1.5.9/kute-css.min.js"></script> <!-- CSS Plugin -->
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/kute.js/1.5.9/kute-svg.min.js"></script> <!-- SVG Plugin -->
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/kute.js/1.5.9/kute-text.min.js"></script> <!-- Text Plugin -->
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/kute.js/1.5.9/kute-attr.min.js"></script> <!-- Attributes Plugin -->
|
||||
<pre><code class="language-markup"><script src="https://cdnjs.cloudflare.com/ajax/libs/kute.js/1.6.0/kute-jquery.min.js"></script> <!-- jQuery Plugin -->
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/kute.js/1.6.0/kute-css.min.js"></script> <!-- CSS Plugin -->
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/kute.js/1.6.0/kute-svg.min.js"></script> <!-- SVG Plugin -->
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/kute.js/1.6.0/kute-text.min.js"></script> <!-- Text Plugin -->
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/kute.js/1.6.0/kute-attr.min.js"></script> <!-- Attributes Plugin -->
|
||||
</code></pre>
|
||||
<p>Your awesome animation coding would follow after these script links.</p>
|
||||
|
||||
|
|
4
dist/kute-attr.min.js
vendored
4
dist/kute-attr.min.js
vendored
|
@ -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});
|
2
dist/kute-css.min.js
vendored
2
dist/kute-css.min.js
vendored
|
@ -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});
|
2
dist/kute-jquery.min.js
vendored
2
dist/kute-jquery.min.js
vendored
|
@ -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});
|
4
dist/kute-svg.min.js
vendored
4
dist/kute-svg.min.js
vendored
File diff suppressed because one or more lines are too long
2
dist/kute-text.min.js
vendored
2
dist/kute-text.min.js
vendored
|
@ -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
4
dist/kute.min.js
vendored
File diff suppressed because one or more lines are too long
48
kute-attr.js
48
kute-attr.js
|
@ -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;
|
||||
}));
|
|
@ -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',
|
||||
|
|
24
kute-svg.js
24
kute-svg.js
|
@ -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;
|
||||
|
||||
}));
|
11
kute-text.js
11
kute-text.js
|
@ -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
12
kute.js
|
@ -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;
|
||||
|
|
|
@ -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": {
|
||||
|
|
Loading…
Reference in a new issue