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

Changes:

Browse source 
* fixed minor issue with `borderRadius` on legacy browsers
* removed CSS properties from SVG plugin (forgot in previous commit)
* simplified core box model properties and CSS transform tween objects to always use `px` or `deg` as unit, with converted values
* implemented the `crossCheck` function for SVG transforms (for stacking transform chains) and the SVG morph
* simplified the `coords` interpolation used for SVG morph
* general code cleanup
* simplified the `processEasing` since the additional easing plugins have been removed, the old version can be found in the js file for easing examples page
* doc updates
This commit is contained in:
thednp 2016-11-24 22:57:33 +02:00
parent 112b35aa5f
commit 5b61b7a1fe
22 changed files with 53 additions and 48 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
api.html
View file

@ -251,7 +251,7 @@ tween2.chain(tweensCollection2.tweens);
<!-- highlighter -->
<script src="./assets/js/prism.js" type="text/javascript"></script>
<!--<script src="http://cdn.jsdelivr.net/kute.js/1.5.9/kute.min.js"></script> KUTE CDN -->
<!--<script src="http://cdn.jsdelivr.net/kute.js/1.6.0/kute.min.js"></script> KUTE CDN -->
<script src="./src/kute.min.js"></script> <!-- KUTE.js core -->
<script src="./assets/js/scripts.js"></script> <!-- some stuff -->

18
assets/js/easing.js
View file

@ -19,6 +19,24 @@ for (var i=0; i<l; i++) {
tweenEasing2.push(KUTE.fromTo(featurettes[i].querySelectorAll('.easing-example')[1], esProp1, esProp2, { duration: 1000, easing: 'linear', repeat: 1, yoyo: true}));
}
// override core processEasing to be able to use predefined bezier and physics functions
KUTE.processEasing = function (fn) { //process easing function
if ( typeof fn === 'function') {
return fn;
} else if ( typeof fn === 'string' ) {
if ( /easing|linear/.test(fn) ) {
return window.Easing[fn]; // regular Robert Penner Easing Functions
} else if ( /bezier/.test(fn) ) {
var bz = fn.replace(/bezier|\s|\(|\)/g,'').split(',');
return window.Bezier( bz[0]*1,bz[1]*1,bz[2]*1,bz[3]*1 ); //bezier fn
} else if ( /physics/.test(fn) ) {
return window.Physics[fn].apply(this); // predefined physics bezier based fn functions
} else {
return window.Ease[fn].apply(this); // predefined bezier based fn functions
}
}
};
// update tween objects and update dropdown
for (var j=0; j<l; j++) {
function cHandler(e){

6
assets/js/examples.js
View file

@ -132,12 +132,8 @@ bm3.chain(bm4);
//callback functions
// function onWidth() { var css = box.currentStyle || window.getComputedStyle(box); box.innerHTML = 'WIDTH<br>'+parseInt(css.width)+'px'; }
// function onHeight() { var css = box.currentStyle || window.getComputedStyle(box); box.innerHTML = 'HEIGHT<br>'+parseInt(css.height)+'px'; }
// function onLeft() { var css = box.currentStyle || window.getComputedStyle(box); box.innerHTML = 'LEFT<br>'+parseInt(css.left)+'px'; }
// function onTop() { var css = box.currentStyle || window.getComputedStyle(box); box.innerHTML = 'TOP<br>'+parseInt(css.top)+'px'; }
function onWidth() { box.innerHTML = 'WIDTH<br>'+parseInt(box.offsetWidth)+'px'; }
function onHeight() { box.innerHTML = 'HEIGHT<br>'+parseInt(box.offsetWidth)+'px'; }
function onHeight() { box.innerHTML = 'HEIGHT<br>'+parseInt(box.offsetHeight)+'px'; }
function onLeft() { box.innerHTML = 'LEFT<br>'+parseInt(box.offsetLeft)+'px'; }
function onTop() { box.innerHTML = 'TOP<br>'+parseInt(box.offsetTop)+'px'; }

2
attr.html
View file

@ -198,7 +198,7 @@ var rotatingGradient = KUTE.to('#gradient', {attr: {x1:'49%', x2:'51%', y1:'51%'
<!-- highlighter -->
<script src="./assets/js/prism.js" type="text/javascript"></script>
<!--<script src="http://cdn.jsdelivr.net/kute.js/1.5.9/kute.min.js"></script> KUTE CDN -->
<!--<script src="http://cdn.jsdelivr.net/kute.js/1.6.0/kute.min.js"></script> KUTE CDN -->
<script src="./src/kute.min.js"></script> <!-- KUTE.js core -->
<script src="./src/kute-attr.min.js"></script> <!-- KUTE.js Attributes Plugin -->
<script src="./assets/js/scripts.js"></script> <!-- global scripts stuff -->

2
css.html
View file

@ -224,7 +224,7 @@ KUTE.to('selector1',{outlineColor:'#069'}).start();
<!-- highlighter -->
<script src="./assets/js/prism.js" type="text/javascript"></script>
<!--<script src="http://cdn.jsdelivr.net/kute.js/1.5.9/kute.min.js"></script> KUTE CDN -->
<!--<script src="http://cdn.jsdelivr.net/kute.js/1.6.0/kute.min.js"></script> KUTE CDN -->
<script src="./src/kute.min.js"></script> <!-- KUTE.js core -->
<script src="./src/kute-css.min.js"></script> <!-- KUTE.js CSS Plugin -->
<script src="./assets/js/scripts.js"></script> <!-- global scripts stuff -->

2
easing.html
View file

@ -323,7 +323,7 @@ easing: BezierMultiPoint({points: [{"x":0,"y":0,"cp":[{"x":0.387,"y":0.007}]},{"
<!-- highlighter -->
<script src="./assets/js/prism.js" type="text/javascript"></script>
<!--<script src="http://cdn.jsdelivr.net/kute.js/1.5.9/kute.min.js"></script> KUTE CDN -->
<!--<script src="http://cdn.jsdelivr.net/kute.js/1.6.0/kute.min.js"></script> KUTE CDN -->
<script src="./src/kute.min.js"></script> <!-- KUTE.js core -->
<script src="./assets/js/kute-bezier.min.js"></script> <!-- KUTE.js Bezier Easing -->

2
examples.html
View file

@ -489,7 +489,7 @@ var myMultiTween2 = KUTE.allFromTo(
<!-- highlighter -->
<script src="./assets/js/prism.js" type="text/javascript"></script>
<!--<script src="http://cdn.jsdelivr.net/kute.js/1.5.9/kute.min.js"></script> KUTE CDN -->
<!--<script src="http://cdn.jsdelivr.net/kute.js/1.6.0/kute.min.js"></script> KUTE CDN -->
<script src="./src/kute.min.js"></script> <!-- KUTE.js core -->
<script src="./assets/js/scripts.js"></script> <!-- global scripts stuff -->
<script src="./assets/js/examples.js"></script> <!-- examples stuff -->

13
extend.html
View file

@ -119,7 +119,7 @@
<h3>Extend Tween Control</h3>
<p>In some cases, you may want to extend with additional tween control methods, so before you do that, make sure to check <code>Tween</code> function to get the internal references notation:</p>
<pre><code class="language-javascript">//add a reference to _tween function
var Tween = window._Tween;
var Tween = KUTE.Tween;
// let's add a timescale method
Tween.prototype.timescale = function(factor){
@ -166,10 +166,11 @@ Tween.prototype.onUpdate = function(){
<p>KUTE.js core engine and plugins cover what I consider to be most essential for animation, but you may have a different opinion. In case you may want to know how to animate properties that are not currently supported, stick to this guide and you'll master it real quick, it's very easy.</p>
<p>We need basically 3 functions:</p>
<ul>
<li><code>KUTE.prepareStart['propertyName']</code> a function to get the current value of the property required for the <code>.to()</code> method;</li>
<li><code>KUTE.parseProperty['propertyName']</code> a function to process the user value / current value to have it ready to tween;</li>
<li><code>window.dom['propertyName']</code> a <strong>domUpdate</strong> function that will update the property value into the DOM;</li>
<li><strong>optional</strong> a function that will work as an utility for your value processing.</li>
<li><code>KUTE.prepareStart['propertyName']</code> <kbd class="bg-red">required</kbd> a function to get the current value of the property required for the <code>.to()</code> method;</li>
<li><code>KUTE.parseProperty['propertyName']</code> <kbd class="bg-red">required</kbd> a function to process the user value / current value to have it ready to tween;</li>
<li><code>KUTE.crossCheck['propertyName']</code> <kbd class="bg-green">optional</kbd> a function to help you set proper values when for instance startValues unit is different than endValues unit; so far this is used for CSS3/SVG transforms and SVG Morph, but it can be extended for many properties such as box-model properties or border-radius properties;</li>
<li><code>window.dom['propertyName']</code> <kbd class="bg-red">required</kbd> a <strong>domUpdate</strong> function that will update the property value into the DOM;</li>
<li><strong>optional</strong> one or more functions that will work as an utility for your value processing.</li>
</ul>
<p>So let's add support for <kbd class="bg-olive">boxShadow</kbd>! It should be a medium difficulty guide most developers can follow and the purpose of this guide is to showcase how easy it actually is to extend KUTE.js. So grab the above template and let's break it down to pieces:</p>
<pre><code class="language-javascript">// add a reference to global and KUTE object
@ -343,7 +344,7 @@ var myBSTween3 = KUTE.fromTo('selector', {boxShadow: [5, 5, 0, '#069', 'inset']}
<!-- highlighter -->
<script src="./assets/js/prism.js" type="text/javascript"></script>
<!--<script src="http://cdn.jsdelivr.net/kute.js/1.5.9/kute.min.js"></script> KUTE CDN -->
<!--<script src="http://cdn.jsdelivr.net/kute.js/1.6.0/kute.min.js"></script> KUTE CDN -->
<script src="./src/kute.min.js"></script> <!-- KUTE.js core -->
<script src="./assets/js/scripts.js"></script> <!-- some stuff -->

2
features.html
View file

@ -165,7 +165,7 @@
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<!--<script src="http://cdn.jsdelivr.net/kute.js/1.5.9/kute.min.js"></script> KUTE CDN -->
<!--<script src="http://cdn.jsdelivr.net/kute.js/1.6.0/kute.min.js"></script> KUTE CDN -->
<script src="./src/kute.min.js"></script> <!-- KUTE.js core -->
<script src="./assets/js/scripts.js"></script> <!-- some stuff -->

2
index.html
View file

@ -207,7 +207,7 @@
<!-- JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<!--<script src="http://cdn.jsdelivr.net/kute.js/0.9.5/kute.min.js"></script> KUTE CDN -->
<!--<script src="http://cdn.jsdelivr.net/kute.js/1.6.0/kute.min.js"></script> KUTE CDN -->
<script src="./src/kute.min.js"></script> <!-- KUTE.js core -->
<script src="./src/kute-css.min.js"></script> <!-- KUTE.js CSS Plugin -->

2
options.html
View file

@ -170,7 +170,7 @@ KUTE.fromTo(div,{left:150},{left:0},{complete: callback}).start();
<!-- highlighter -->
<script src="./assets/js/prism.js" type="text/javascript"></script>
<!--<script src="http://cdn.jsdelivr.net/kute.js/1.5.9/kute.min.js"></script> KUTE CDN -->
<!--<script src="http://cdn.jsdelivr.net/kute.js/1.6.0/kute.min.js"></script> KUTE CDN -->
<script src="./src/kute.min.js"></script> <!-- KUTE.js core -->
<script src="./assets/js/scripts.js"></script> <!-- some stuff -->

2
performance.html
View file

@ -119,7 +119,7 @@
<!-- JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<!--<script src="http://cdn.jsdelivr.net/kute.js/1.5.9/kute.min.js"></script> KUTE CDN -->
<!--<script src="http://cdn.jsdelivr.net/kute.js/1.6.0/kute.min.js"></script> KUTE CDN -->
<!--[if !IE ]><!-->
<script type="text/javascript" src="https://cdn.jsdelivr.net/bootstrap.native/1.0.1/bootstrap-native.min.js"></script>

20
properties.html
View file

@ -86,7 +86,7 @@
<p>In most cases, the best animation possible is the <code class="bg-blue">opacity</code>, for performance, aesthetics and maybe more other reasons such as avoiding unwanted layout changes. KUTE.js also covers IE8 here with the help of proprietary synthax <code>filter: alpha(opacity=0)</code>. Also, opacity can be used for instance on legacy browsers that don't support <code>RGBA</code> colors. Eg. <code>opacity:0.5</code> will make an element semitransparent.</p>
<h3>2D Transform Properties</h3>
<p>The core engine supports all 2D transform properties except <code>matrix</code>.</p>
<p>The core engine supports most 2D transform properties, but the most important part is that starting with KUTE.js v1.6.0 the values used for animation are always converted from percentage based translation to pixels and radians based angles to degrees, to help improve memory efficiency.</p>
<ul>
<li><kbd class="bg-blue">translate</kbd> property can be used for horizontal and / or vertical movement. EG. <code>translate:150</code> to translate an element 150px to the right or <code>translate:[-150,200]</code> to move the element to the left by 150px and to bottom by 200px. <kbd class="bg-lime">IE9+</kbd></li>
<li><kbd class="bg-blue">rotate</kbd> property applies rotation to an element on the Z axis or the plain document. Eg. <code>rotate:250</code> will rotate an element clockwise by 250 degrees. <kbd class="bg-lime">IE9+</kbd></li>
@ -97,7 +97,7 @@
</ul>
<h3>3D Transform Properties</h3>
<p>The core engine supports all 3D transform properties except <code>matrix3d</code> and <code>rotate3d</code>.</p>
<p>The core engine supports all 3D transform properties except <code>matrix3d</code> and <code>rotate3d</code>. Just as the above, these properties' values are also converted to traditional pixels and degrees measurements to help improve memory usage.</p>
<ul>
<li><kbd class="bg-blue">translateX</kbd> property is for horizontal translation. EG. <code>translateX:150</code> to translate an element 150px to the right. <kbd class="bg-lime">IE10+</kbd></li>
<li><kbd class="bg-blue">translateY</kbd> property is for vertical translation. EG. <code>translateY:-250</code> to translate an element 250px towards the top. <kbd class="bg-lime">IE10+</kbd></li>
@ -123,17 +123,6 @@
<p>The <a href="svg.html">SVG Plugin</a> can animate the <code>d</code> attribute of a given <code>&lt;path&gt;</code> or <code>&lt;glyph&gt;</code> element with the tween property called <kbd class="bg-olive">path</kbd>. The animation effect is widelly known as morph SVG and implemented in various scripts, but the KUTE.js implementation is similar to <a href="http://bl.ocks.org/mbostock/3081153" target="_blank">the D3.js examples</a> for wider usability.</p>
<p>Further more, the SVG Plugin can animate the stroke in a way that you probably know as <code>drawSVG</code>. KUTE.js implements it as <kbd class="bg-olive">draw</kbd> tween property that deals with the well known CSS properties: <kbd>strokeDasharray</kbd> and <kbd>strokeDashoffset</kbd>.
<!--<p>The SVG Plugin also manages animation for most useful CSS properties that are specific to SVG elements, since SMIL animations tend to go extinct, this plugin can get quite useful.</p>
<ul>
<li><kbd class="bg-olive">strokeWidth</kbd> allows you to animate the <code>stroke-width</code> for a given SVG element.</li>
<li><kbd class="bg-olive">strokeOpacity</kbd> allows you to animate the <code>stroke-opacity</code> for a given SVG element.</li>
<li><kbd class="bg-olive">fillOpacity</kbd> allows you to animate the <code>fill-opacity</code> for a given SVG element.</li>
<li><kbd class="bg-olive">stopOpacity</kbd> allows you to animate the <code>stop-opacity</code> for a given gradient SVG element.</li>
<li><kbd class="bg-olive">fill</kbd> allows you to animate the <code>fill</code> color property for a given SVG element.</li>
<li><kbd class="bg-olive">stroke</kbd> allows you to animate the <code>stroke</code> color for a given SVG element.</li>
<li><kbd class="bg-olive">stopColor</kbd> allows you to animate the <code>stop-color</code> for a given gradient SVG element.</li>
</ul>-->
<h3>Box Model Properties</h3>
<p>The core engine supports <code>width</code>, <code>height</code>, <code>left</code> and <code>top</code> while the <a href="css.html">CSS Plugin</a> adds support for all other box-model properties.</p>
@ -143,7 +132,8 @@
<li><kbd class="bg-olive">padding</kbd>, <kbd class="bg-olive">margin</kbd>, <kbd class="bg-olive">paddingTop</kbd>, <kbd class="bg-olive">paddingBottom</kbd>, <kbd class="bg-olive">paddingLeft</kbd>, <kbd class="bg-olive">paddingRight</kbd>, <kbd class="bg-olive">marginTop</kbd>, <kbd class="bg-olive">marginBottom</kbd>, <kbd class="bg-olive">marginLeft</kbd> and <kbd class="bg-olive">marginRight</kbd> are properties that allow you to animate the spacing of an element inside (via padding) and outside (via margin). Shorthand notations such as <code>margin: "20px 50px"</code> or any other type are not supported.</li>
<li><kbd class="bg-olive">borderWidth</kbd>, <kbd class="bg-olive">borderTopWidth</kbd>, <kbd class="bg-olive">borderRightWidth</kbd>, <kbd class="bg-olive">borderBottomWidth</kbd> are <kbd class="bg-olive">borderLeftWidth</kbd> are properties that allow you to animate the border of an element either on all sides at once or each side separatelly. Shorthand notations are not supported.</li>
<li><kbd class="bg-olive">outlineWidth</kbd> property allows you to animate the <code>outline-width</code> of an element.</li>
</ul>
</ul>
<p>As a quick side note, starting with KUTE.js v1.6.0 the core engine supported box model properties values are converted from percent based into pixel based values, using the <code>element.offsetWidth</code> as a refference. The idea is the same as presented on the above supported transform properties.</p>
<p><strong>Remember</strong>: these properties are <strong>layout modifiers</strong> that may force repaint of the entire DOM, drastically affecting performance on lower end and mobile devices. They also trigger <code>resize</code> event that may cause crashes on old browsers such as IE8 when using handlers bound on <code>resize</code>, so use with caution.</p>
<h3>Border Radius</h3>
@ -236,7 +226,7 @@
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<!--<script src="http://cdn.jsdelivr.net/kute.js/1.5.9/kute.min.js"></script> KUTE CDN -->
<!--<script src="http://cdn.jsdelivr.net/kute.js/1.6.0/kute.min.js"></script> KUTE CDN -->
<script src="./src/kute.min.js"></script> <!-- some stuff -->
<script src="./assets/js/scripts.js"></script> <!-- some stuff -->

4
src/kute-attr.min.js vendored
View file

@ -1,2 +1,2 @@
// KUTE.js v1.5.97 | © 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){t.setAttribute(e.replace(g,""),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.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}});

4
src/kute-css.min.js vendored
View file

@ -1,2 +1,2 @@
// KUTE.js v1.5.97 | © 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,r)||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});
// KUTE.js v1.5.98 | © 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
src/kute-jquery.min.js vendored
View file

@ -1,2 +1,2 @@
// KUTE.js v1.5.97 | © dnp_theme | jQuery Plugin | MIT-License
// KUTE.js v1.5.98 | © 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
src/kute-svg.min.js vendored
View file

File diff suppressed because one or more lines are too long

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

@ -1,2 +1,2 @@
// KUTE.js v1.5.97 | © dnp_theme | Text Plugin | MIT-License
// KUTE.js v1.5.98 | © 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
src/kute.min.js vendored
View file

File diff suppressed because one or more lines are too long

2
start.html
View file

@ -169,7 +169,7 @@ define([
<!-- highlighter -->
<script src="./assets/js/prism.js" type="text/javascript"></script>
<!--<script src="http://cdn.jsdelivr.net/kute.js/1.0.0/kute.full.min.js"></script> KUTE CDN -->
<!--<script src="http://cdn.jsdelivr.net/kute.js/1.6.0/kute.min.js"></script> KUTE CDN -->
<script src="./src/kute.min.js"></script> <!-- some stuff -->
<script src="./assets/js/scripts.js"></script> <!-- some stuff -->

2
svg.html
View file

@ -468,7 +468,7 @@ var rotationTween = KUTE.to(element, {svgTransform: {rotate: [150, svgOriginX, s
<!-- highlighter -->
<script src="./assets/js/prism.js" type="text/javascript"></script>
<!--<script src="http://cdn.jsdelivr.net/kute.js/1.5.9/kute.min.js"></script> KUTE CDN -->
<!--<script src="http://cdn.jsdelivr.net/kute.js/1.6.0/kute.min.js"></script> KUTE CDN -->
<script src="./src/kute.min.js"></script> <!-- some stuff -->
<script src="./src/kute-attr.min.js"></script> <!-- some stuff -->
<script src="./src/kute-svg.min.js"></script> <!-- some stuff -->

2
text.html
View file

@ -166,7 +166,7 @@ var myTextTween = KUTE.to('selector', {text: 'A text string with other &lt;span&
<!-- highlighter -->
<script src="./assets/js/prism.js" type="text/javascript"></script>
<!--<script src="http://cdn.jsdelivr.net/kute.js/1.5.9/kute.min.js"></script> KUTE CDN -->
<!--<script src="http://cdn.jsdelivr.net/kute.js/1.6.0/kute.min.js"></script> KUTE CDN -->
<script src="./src/kute.min.js"></script> <!-- KUTE.js core -->
<script src="./src/kute-text.min.js"></script> <!-- KUTE.js Text Plugin -->
<script src="./assets/js/scripts.js"></script> <!-- global scripts stuff -->