Changes:
* 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
parent
545e253a30
commit
bda5756889
|
|
@ -41,6 +41,7 @@ For documentation, examples and other cool tips, check the <a href="http://thedn
|
|||
* properly handles the suffixes for you
|
||||
|
||||
# Easing Functions - [visit page](http://thednp.github.io/kute.js/easing.html)
|
||||
**NOTE:** Starting with KUTE.js v 1.6.0 the Cubic Bezier Functions are removed from the distribution folder and from CDN repositories, but you can find them in the [Experiments repository on Github](https://github.com/thednp/kute.js/tree/experiments).</p>
|
||||
|
||||
* optimized dynamics easing functions
|
||||
* optimized cubic-bezier easing functions
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "KUTE.js",
|
||||
"version": "1.5.97",
|
||||
"version": "1.5.98",
|
||||
"homepage": "http://thednp.github.io/kute.js",
|
||||
"authors": [
|
||||
"thednp"
|
||||
|
|
|
|||
|
|
@ -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 -->
|
||||
|
|
|
|||
|
|
@ -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){
|
||||
|
|
|
|||
|
|
@ -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'; }
|
||||
|
||||
|
|
|
|||
|
|
@ -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 -->
|
||||
|
|
|
|||
|
|
@ -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 -->
|
||||
|
|
|
|||
|
|
@ -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 -->
|
||||
|
|
|
|||
|
|
@ -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 -->
|
||||
|
|
|
|||
|
|
@ -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 -->
|
||||
|
|
|
|||
|
|
@ -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 -->
|
||||
|
|
|
|||
|
|
@ -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 -->
|
||||
|
|
|
|||
|
|
@ -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 -->
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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><path></code> or <code><glyph></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
demo/src/kute-attr.min.js
vendored
4
demo/src/kute-attr.min.js
vendored
|
|
@ -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
demo/src/kute-css.min.js
vendored
4
demo/src/kute-css.min.js
vendored
|
|
@ -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
demo/src/kute-jquery.min.js
vendored
2
demo/src/kute-jquery.min.js
vendored
|
|
@ -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
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.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
demo/src/kute.min.js
vendored
4
demo/src/kute.min.js
vendored
File diff suppressed because one or more lines are too long
|
|
@ -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 -->
|
||||
|
|
|
|||
|
|
@ -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 -->
|
||||
|
|
|
|||
|
|
@ -166,7 +166,7 @@ var myTextTween = KUTE.to('selector', {text: 'A text string with other <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 -->
|
||||
|
|
|
|||
4
dist/kute-attr.min.js
vendored
4
dist/kute-attr.min.js
vendored
|
|
@ -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
dist/kute-css.min.js
vendored
4
dist/kute-css.min.js
vendored
|
|
@ -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
dist/kute-jquery.min.js
vendored
2
dist/kute-jquery.min.js
vendored
|
|
@ -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
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.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
dist/kute.min.js
vendored
4
dist/kute.min.js
vendored
File diff suppressed because one or more lines are too long
12
kute-attr.js
12
kute-attr.js
|
|
@ -18,7 +18,8 @@
|
|||
}(this, function (KUTE) {
|
||||
'use strict';
|
||||
|
||||
var g = typeof global !== 'undefined' ? global : window, K = KUTE, DOM = g.dom, prepareStart = K.prepareStart, parseProperty = K.parseProperty,
|
||||
var g = typeof global !== 'undefined' ? global : window,
|
||||
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,
|
||||
|
|
@ -27,13 +28,13 @@
|
|||
};
|
||||
|
||||
prepareStart['attr'] = function(el,p,v){
|
||||
var attsStartValues = {};
|
||||
var attrStartValues = {};
|
||||
for (var a in v){
|
||||
var attribute = replaceUppercase(a).replace(/_+[a-z]+/,''),
|
||||
currentValue = getCurrentValue(el,attribute); // get the value for 'fill-opacity' not fillOpacity
|
||||
attsStartValues[attribute] = svgColors.indexOf(replaceUppercase(a)) !== -1 ? (currentValue || 'rgba(0,0,0,0)') : (currentValue || (/opacity/i.test(a) ? 1 : 0));
|
||||
attrStartValues[attribute] = svgColors.indexOf(replaceUppercase(a)) !== -1 ? (currentValue || 'rgba(0,0,0,0)') : (currentValue || (/opacity/i.test(a) ? 1 : 0));
|
||||
}
|
||||
return attsStartValues;
|
||||
return attrStartValues;
|
||||
};
|
||||
|
||||
// process attributes object K.pp.attr(t[x])
|
||||
|
|
@ -55,7 +56,8 @@
|
|||
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) {
|
||||
l.setAttribute(p.replace(s,''), unit(a.v,b.v,b.u,v) );
|
||||
var _p = _p || p.replace(s,'');
|
||||
l.setAttribute(_p, unit(a.v,b.v,b.u,v) );
|
||||
}
|
||||
}
|
||||
ats[prop+s] = trueDimension(o[p]);
|
||||
|
|
|
|||
|
|
@ -21,7 +21,7 @@
|
|||
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/any
|
||||
_radius = ['borderRadius', 'borderTopLeftRadius', 'borderTopRightRadius', 'borderBottomLeftRadius', 'borderBottomRightRadius'], // border radius px/%
|
||||
_boxModel = ['right', 'bottom', 'minWidth', 'minHeight', 'maxWidth', 'maxHeight',
|
||||
'padding', 'margin', 'paddingTop','paddingBottom', 'paddingLeft', 'paddingRight', 'marginTop','marginBottom', 'marginLeft', 'marginRight',
|
||||
'borderWidth', 'borderTopWidth', 'borderRightWidth', 'borderBottomWidth', 'borderLeftWidth', 'outlineWidth'], // dimensions / box model
|
||||
|
|
@ -87,7 +87,7 @@
|
|||
return trueDimension(v);
|
||||
};
|
||||
prepareStart[prefixedProp] = function(el,p,v){
|
||||
return getCurrentStyle(el,p) || _defaults[p];
|
||||
return getCurrentStyle(el,prefixedProp) || _defaults[p];
|
||||
};
|
||||
}
|
||||
|
||||
|
|
|
|||
161
kute-svg.js
161
kute-svg.js
|
|
@ -11,7 +11,7 @@
|
|||
} else if(typeof module == 'object' && typeof require == 'function') {
|
||||
module.exports = factory(require('kute.js'));
|
||||
} else if ( typeof root.KUTE !== 'undefined' ) {
|
||||
root.KUTE.svg = factory(root.KUTE);
|
||||
factory(root.KUTE);
|
||||
} else {
|
||||
throw new Error("SVG Plugin require KUTE.js.");
|
||||
}
|
||||
|
|
@ -21,10 +21,9 @@
|
|||
// variables, reference global objects, prepare properties
|
||||
var g = typeof global !== 'undefined' ? global : window, K = KUTE, p,
|
||||
DOM = g.dom, parseProperty = K.parseProperty, prepareStart = K.prepareStart, getCurrentStyle = K.getCurrentStyle,
|
||||
trueColor = K.truC, trueDimension = K.truD,
|
||||
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,
|
||||
_numeric = ['strokeWidth', 'strokeOpacity', 'fillOpacity', 'stopOpacity'], // numeric SVG CSS props
|
||||
_colors = ['fill', 'stroke', 'stopColor'], // colors 'hex', 'rgb', 'rgba' -- #fff / rgb(0,0,0) / rgba(0,0,0,0)
|
||||
|
||||
pathReg = /(m[^(h|v|l)]*|[vhl][^(v|h|l|z)]*)/gmi, ns = 'http://www.w3.org/2000/svg',
|
||||
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
|
||||
|
|
@ -129,9 +128,9 @@
|
|||
computePathCross = function(s,e){ // pathCross
|
||||
var s1, e1, pointsArray, largerPathLength, smallerPath, largerPath, simluatedSmallerPath, nsm = [], sml, cl = [], len, tl, cs;
|
||||
|
||||
if (!this._isP) {
|
||||
if (!this._isPolygon) {
|
||||
s = createPath(s); e = createPath(e);
|
||||
pointsArray = getSegments(s,e,this._mpr);
|
||||
pointsArray = getSegments(s,e,this.options.morphPrecision);
|
||||
s1 = pointsArray[0]; e1 = pointsArray[1]; largerPathLength = e1.length;
|
||||
} else {
|
||||
s = pathToAbsolute(s); e = pathToAbsolute(e);
|
||||
|
|
@ -155,40 +154,18 @@
|
|||
}
|
||||
|
||||
// reverse arrays
|
||||
if (this._rv1) { s1.reverse(); }
|
||||
if (this._rv2) { e1.reverse(); }
|
||||
if (this.options.reverseFirstPath) { s1.reverse(); }
|
||||
if (this.options.reverseSecondPath) { e1.reverse(); }
|
||||
|
||||
// shift second array to for smallest tween distance
|
||||
if (this._idx) {
|
||||
var e11 = e1.splice(this._idx,largerPathLength-this._idx);
|
||||
if (this.options.morphIndex) {
|
||||
var e11 = e1.splice(this.options.morphIndex,largerPathLength-this.options.morphIndex);
|
||||
e1 = e11.concat(e1);
|
||||
}
|
||||
|
||||
s = e = null;
|
||||
return [s1,e1]
|
||||
},
|
||||
SVG = {
|
||||
pathCross : function(w){ // pathCross
|
||||
var p1 = getOnePath(w._vS.path.o), p2 = getOnePath(w._vE.path.o), paths;
|
||||
|
||||
// path tween options
|
||||
this._mpr = w.options.morphPrecision || 15;
|
||||
this._idx = w.options.morphIndex;
|
||||
this._rv1 = w.options.reverseFirstPath;
|
||||
this._rv2 = w.options.reverseSecondPath;
|
||||
|
||||
// begin processing paths
|
||||
this._isP = !/[CSQTA]/i.test(p1) && !/[CSQTA]/i.test(p2); // check if both shapes are polygons
|
||||
|
||||
paths = computePathCross.apply(this,[p1,p2]);
|
||||
|
||||
w._vS.path.d = paths[0];
|
||||
w._vE.path.d = paths[1];
|
||||
}
|
||||
};
|
||||
|
||||
// a shortHand pathCross && SVG transform stack
|
||||
K.svq = function(w){ if ( w._vE.path ) SVG.pathCross(w); if ( w._vE.svgTransform ) stackTransform(w); }
|
||||
|
||||
// process path object and also register the render function
|
||||
parseProperty['path'] = function(a,o,l) { // K.pp['path']('path',value,element);
|
||||
|
|
@ -204,6 +181,20 @@
|
|||
return el.getAttribute('d');
|
||||
};
|
||||
|
||||
crossCheck['path'] = function() {
|
||||
var p1 = getOnePath(this._vS.path.o), p2 = getOnePath(this._vE.path.o), paths;
|
||||
|
||||
// path tween options
|
||||
this.options.morphPrecision = this.options.morphPrecision || 15;
|
||||
this._isPolygon = !/[CSQTA]/i.test(p1) && !/[CSQTA]/i.test(p2); // check if both shapes are polygons
|
||||
|
||||
// begin processing paths
|
||||
paths = computePathCross.apply(this,[p1,p2]);
|
||||
|
||||
this._vS.path.d = paths[0];
|
||||
this._vE.path.d = paths[1];
|
||||
};
|
||||
|
||||
|
||||
// SVG DRAW
|
||||
var percent = function(v,l){ return parseFloat(v) / 100 * l;}, // percent
|
||||
|
|
@ -302,47 +293,6 @@
|
|||
return getDraw(el);
|
||||
}
|
||||
|
||||
|
||||
// SVG CSS Color Properties
|
||||
for ( var i = 0, l = _colors.length; i< l; i++) {
|
||||
parseProperty[_colors[i]] = function(p,v){
|
||||
if (!(p in DOM)) {
|
||||
DOM[p] = function(l,p,a,b,v,o) {
|
||||
l.style[p] = color(a,b,v,o.keepHex);
|
||||
};
|
||||
}
|
||||
return trueColor(v);
|
||||
}
|
||||
prepareStart[_colors[i]] = function(el,p,v){
|
||||
return getCurrentStyle(el,p) || 'rgb(0,0,0)';
|
||||
}
|
||||
}
|
||||
|
||||
// Other SVG related CSS props
|
||||
for ( var i = 0, l = _numeric.length; i< l; i++) { // for numeric CSS props from any type of SVG shape
|
||||
if (_numeric[i] === 'strokeWidth'){ // stroke can be unitless or unit | http://stackoverflow.com/questions/1301685/fixed-stroke-width-in-svg
|
||||
parseProperty[_numeric[i]] = function(p,v){
|
||||
if (!(p in DOM)) {
|
||||
DOM[p] = function(l,p,a,b,v) {
|
||||
l.style[p] = typeof b === 'number' ? number(a,b,v) : unit(a.v,b.v,b.u,v);
|
||||
}
|
||||
}
|
||||
return /px|%|em|vh|vw/.test(v) ? trueDimension(v) : parseFloat(v);
|
||||
}
|
||||
} else {
|
||||
parseProperty[_numeric[i]] = function(p,v){
|
||||
if (!(p in DOM)) {
|
||||
DOM[p] = function(l,p,a,b,v) {
|
||||
l.style[p] = number(a,b,v);
|
||||
}
|
||||
}
|
||||
return parseFloat(v);
|
||||
}
|
||||
}
|
||||
prepareStart[_numeric[i]] = function(el,p,v){
|
||||
return getCurrentStyle(el,p) || 0;
|
||||
}
|
||||
}
|
||||
|
||||
// SVG Transform
|
||||
var parseTransform = function (a){ // helper function that turns transform value from string to object
|
||||
|
|
@ -363,36 +313,6 @@
|
|||
},
|
||||
scaleOrSkew = g._scaleOrSkewSVG = function (s,e,a,b,v){ // scale / skew
|
||||
return s + number(a,b,v) + e;
|
||||
},
|
||||
stackTransform = function (w){ // helper function that helps preserve current transform properties into the objects
|
||||
var bb = w._el.getBBox(), ctr = parseTransform(w._el.getAttribute('transform')), r, t, i,
|
||||
cx = bb.x + bb.width/2, cy = bb.y + bb.height/2;
|
||||
|
||||
for ( i in ctr ) { // populate the valuesStart
|
||||
if (i === 'translate'){
|
||||
t = ctr[i] instanceof Array ? ctr[i] : /\,|\s/.test(ctr[i]) ? ctr[i].split(/\,|\s/) : [ctr[i]*1,0];
|
||||
w._vS.svgTransform[i] = [t[0] * 1||0, t[1] * 1||0];
|
||||
} else if (i === 'scale'){
|
||||
w._vS.svgTransform[i] = ctr[i] * 1||1;
|
||||
} else if (i === 'rotate'){
|
||||
r = ctr[i] instanceof Array ? ctr[i]
|
||||
: /\s/.test(ctr[i]) ? [ctr[i].split(' ')[0]*1, ctr[i].split(' ')[1].split(',')[0]*1, ctr[i].split(' ')[1].split(',')[1]*1]
|
||||
: [ctr[i]*1,cx,cy];
|
||||
w._vS.svgTransform[i] = r;
|
||||
} else if (/skew/.test(i)) {
|
||||
w._vS.svgTransform[i] = ctr[i] * 1||0;
|
||||
}
|
||||
}
|
||||
|
||||
for (var i in w._vS.svgTransform) {
|
||||
if (!(i in w._vE.svgTransform)) { // copy existing and unused properties to the valuesEnd
|
||||
w._vE.svgTransform[i] = w._vS.svgTransform[i];
|
||||
}
|
||||
if (i === 'rotate' in w._vS.svgTransform && 'rotate' in w._vE.svgTransform){ // make sure to use the right transform origin when rotation is used
|
||||
w._vE.svgTransform.rotate[1] = w._vS.svgTransform.rotate[1] = cx;
|
||||
w._vE.svgTransform.rotate[2] = w._vS.svgTransform.rotate[2] = cy;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
parseProperty['svgTransform'] = function(p,v,l){
|
||||
|
|
@ -458,7 +378,6 @@
|
|||
return tf;
|
||||
}
|
||||
|
||||
// KUTE.prepareStart prepareStart[p](el,p,to[p])
|
||||
// returns an obect with current transform attribute value
|
||||
prepareStart['svgTransform'] = function(l,p,t) {
|
||||
var tr = {}, i, ctr = parseTransform(l.getAttribute('transform'));
|
||||
|
|
@ -466,6 +385,38 @@
|
|||
return tr;
|
||||
}
|
||||
|
||||
return SVG;
|
||||
crossCheck['svgTransform'] = function() { // helper function that helps preserve current transform properties into the objects
|
||||
var bb = this._el.getBBox(), ctr = parseTransform(this._el.getAttribute('transform')), r, t, i,
|
||||
cx = bb.x + bb.width/2, cy = bb.y + bb.height/2;
|
||||
|
||||
for ( i in ctr ) { // populate the valuesStart
|
||||
if (i === 'translate'){
|
||||
t = ctr[i] instanceof Array ? ctr[i] : /\,|\s/.test(ctr[i]) ? ctr[i].split(/\,|\s/) : [ctr[i]*1,0];
|
||||
this._vS.svgTransform[i] = [t[0] * 1||0, t[1] * 1||0];
|
||||
} else if (i === 'scale'){
|
||||
this._vS.svgTransform[i] = ctr[i] * 1||1;
|
||||
} else if (i === 'rotate'){
|
||||
r = ctr[i] instanceof Array ? ctr[i]
|
||||
: /\s/.test(ctr[i]) ? [ctr[i].split(' ')[0]*1, ctr[i].split(' ')[1].split(',')[0]*1, ctr[i].split(' ')[1].split(',')[1]*1]
|
||||
: [ctr[i]*1,cx,cy];
|
||||
this._vS.svgTransform[i] = r;
|
||||
} else if (/skew/.test(i)) {
|
||||
this._vS.svgTransform[i] = ctr[i] * 1||0;
|
||||
}
|
||||
}
|
||||
|
||||
for (var i in this._vS.svgTransform) {
|
||||
if (!(i in this._vE.svgTransform)) { // copy existing and unused properties to the valuesEnd
|
||||
this._vE.svgTransform[i] = this._vS.svgTransform[i];
|
||||
}
|
||||
if (i === 'rotate' in this._vS.svgTransform && 'rotate' in this._vE.svgTransform){ // make sure to use the right transform origin when rotation is used
|
||||
this._vE.svgTransform.rotate[1] = this._vS.svgTransform.rotate[1] = cx;
|
||||
this._vE.svgTransform.rotate[2] = this._vS.svgTransform.rotate[2] = cy;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// return SVG;
|
||||
return this;
|
||||
|
||||
}));
|
||||
275
kute.js
275
kute.js
|
|
@ -38,6 +38,7 @@
|
|||
if (nl === null && el !== 'window') throw new TypeError('Element not found or incorrect selector: '+el);
|
||||
return nl;
|
||||
},
|
||||
radToDeg = function(a) { return a*180/Math.PI; },
|
||||
trueDimension = function (d,p) { //true dimension returns { v = value, u = unit }
|
||||
var x = parseInt(d) || 0, mu = ['px','%','deg','rad','em','rem','vh','vw'], y;
|
||||
for (var i=0, l = mu.length; i<l; i++) { if ( typeof d === 'string' && d.indexOf(mu[i]) !== -1 ) { y = mu[i]; break; } }
|
||||
|
|
@ -69,7 +70,7 @@
|
|||
rgbToHex = function (r, g, b) { // transform rgb to hex or vice-versa | webkit browsers ignore HEX, always use RGB/RGBA
|
||||
return "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);
|
||||
},
|
||||
hexToRGB = function (hex) {
|
||||
hexToRGB = g._htr = function (hex) {
|
||||
var shr = /^#?([a-f\d])([a-f\d])([a-f\d])$/i; // Expand shorthand form (e.g. "03F") to full form (e.g. "0033FF")
|
||||
hex = hex.replace(shr, function (m, r, g, b) {
|
||||
return r + r + g + g + b + b;
|
||||
|
|
@ -100,9 +101,9 @@
|
|||
return trsf;
|
||||
},
|
||||
getCurrentStyle = function (el,p) { // gCS = get style property for element from computedStyle for .to() method
|
||||
var es = el.style, cs = g.getComputedStyle(el,null) || el.currentStyle, pp = property(p), //the computed style | prefixed property
|
||||
s = es[p] && !/auto|initial|none|unset/.test(es[p]) ? es[p] : cs[pp]; // s the property style value
|
||||
if ( p !== 'transform' && (pp in cs || pp in es) ) {
|
||||
var styleAttribute = el.style, computedStyle = g.getComputedStyle(el,null) || el.currentStyle, pp = property(p), //the computed style | prefixed property
|
||||
s = styleAttribute[p] && !/auto|initial|none|unset/.test(styleAttribute[p]) ? styleAttribute[p] : computedStyle[pp]; // s the property style value
|
||||
if ( p !== 'transform' && (pp in computedStyle || pp in styleAttribute) ) {
|
||||
if ( s ){
|
||||
if (pp==='filter') { // handle IE8 opacity
|
||||
var si1 = parseInt(s.split('=')[1].replace(')','')), si = parseFloat(si1/100);
|
||||
|
|
@ -165,8 +166,7 @@
|
|||
}
|
||||
|
||||
// KUTE.js INTERPOLATORS
|
||||
var /*Interpolate = g.Interpolate = {},*/
|
||||
number = g._number = function(a,b,v) { // number1, number2, progress
|
||||
var number = g._number = function(a,b,v) { // number1, number2, progress
|
||||
a = +a; b -= a; return a + b * v;
|
||||
},
|
||||
unit = g._unit = function(a,b,u,v) { // number1, number2, unit, progress
|
||||
|
|
@ -177,48 +177,39 @@
|
|||
for (c in b) { _c[c] = c !== 'a' ? (parseInt( number(a[c],b[c],v) ) || 0) : (a[c] && b[c]) ? parseFloat( number(a[c],b[c],v) ) : null; }
|
||||
return h ? rgbToHex( _c.r, _c.g, _c.b ) : !_c.a ? r + _c.r + cm + _c.g + cm + _c.b + ep : ra + _c.r + cm + _c.g + cm + _c.b + cm + _c.a + ep;
|
||||
},
|
||||
translate = g._translate = function (a,b,v){
|
||||
translate = g._translate = function (a,b,u,v){
|
||||
var translation = {};
|
||||
|
||||
for (var ax in b){
|
||||
var x1 = a[ax].value || 0, x2 = b[ax].value || 0, xu = b[ax].unit || 'px';
|
||||
translation[ax] = x1===x2 ? x2+xu : (x1 + ( x2 - x1 ) * v) + xu;
|
||||
var x1 = a[ax] || 0, x2 = b[ax] || 0;
|
||||
translation[ax] = x1===x2 ? x2+u : (x1 + ( x2 - x1 ) * v) + u;
|
||||
}
|
||||
return b.x ? 'translate(' + translation.x + ',' + translation.y + ')' :
|
||||
return translation.x ? 'translate(' + translation.x + ',' + translation.y + ')' :
|
||||
'translate3d(' + translation.translateX + ',' + translation.translateY + ',' + translation.translateZ + ')';
|
||||
},
|
||||
rotate = g._rotate = function (a,b,v){
|
||||
rotate = g._rotate = function (a,b,u,v){
|
||||
var rotation = {};
|
||||
for ( var rx in b ){
|
||||
if ( a[rx] ) {
|
||||
var a1 = a[rx].value, a2 = b[rx].value, au = b[rx].unit||'deg', av = a1 + (a2 - a1) * v;
|
||||
rotation[rx] = rx === 'z' ? 'rotate('+av+au+')' : rx + '(' + av + au + ')';
|
||||
}
|
||||
rotation[rx] = rx === 'z' ? 'rotate('+ (a[rx] + (b[rx] - a[rx]) * v) +u+')' : rx + '(' + (a[rx] + (b[rx] - a[rx]) * v) + u + ')';
|
||||
}
|
||||
return b.z ? rotation.z : (rotation.rotateX||'') + (rotation.rotateY||'') + (rotation.rotateZ||'');
|
||||
return rotation.z ? rotation.z : (rotation.rotateX||'') + (rotation.rotateY||'') + (rotation.rotateZ||'');
|
||||
},
|
||||
skew = g._skew = function (a,b,v){
|
||||
skew = g._skew = function (a,b,u,v){
|
||||
var skewProp = {};
|
||||
for ( var sx in b ){
|
||||
if ( a[sx] ) {
|
||||
var s1 = a[sx].value, s2 = b[sx].value, su = b[sx].unit||'deg';
|
||||
skewProp[sx] = sx + '(' + (s1 + (s2 - s1) * v) + su + ')';
|
||||
}
|
||||
skewProp[sx] = sx + '(' + (a[sx] + (b[sx] - a[sx]) * v) + u + ')';
|
||||
}
|
||||
return (skewProp.skewX||'') + (skewProp.skewY||'');
|
||||
},
|
||||
scale = g._scale = function(a,b,v){
|
||||
var scaleA = a.value, scaleB = b.value;
|
||||
return 'scale(' + (scaleA + (scaleB - scaleA) * v) + ')';
|
||||
return 'scale(' + (a + (b - a) * v) + ')';
|
||||
},
|
||||
|
||||
// KUTE.js DOM update functions
|
||||
DOM = g.dom = {},
|
||||
ticker = g._ticker = function(t) {
|
||||
var i = 0, l;
|
||||
while ( i < (l=_tws.length) ) {
|
||||
// while ( i < _tws.length ) {
|
||||
if ( update(_tws[i],t) ) {
|
||||
var i = 0;
|
||||
while ( i < _tws.length ) {
|
||||
if ( update.call(_tws[i],t) ) {
|
||||
i++;
|
||||
} else {
|
||||
_tws.splice(i, 1);
|
||||
|
|
@ -226,39 +217,35 @@
|
|||
}
|
||||
tick = _requestAnimationFrame(ticker);
|
||||
},
|
||||
update = g._update = function(w,t) {
|
||||
update = g._update = function(t) {
|
||||
t = t || time.now();
|
||||
// if (t < w._startTime && w.playing && !w.paused) { return true; }
|
||||
if ( t < w._startTime && w.playing ) { return true; }
|
||||
if ( t < this._startTime && this.playing ) { return true; }
|
||||
|
||||
// element/node, method, (prefixed)property, startValue, endValue, progress
|
||||
var elapsed = Math.min(( t - w._startTime ) / w.options.duration, 1); // calculate progress
|
||||
var elapsed = Math.min(( t - this._startTime ) / this.options.duration, 1); // calculate progress
|
||||
|
||||
// for (var p in w._vE){ DOM[p](w._el,p,w._vS[p],w._vE[p],w._e(elapsed),w.options); } //render the CSS update
|
||||
for (var p in w._vE){ DOM[p](w._el,p,w._vS[p],w._vE[p],w.options.easing(elapsed),w.options); } //render the CSS update
|
||||
for (var p in this._vE){ DOM[p](this._el,p,this._vS[p],this._vE[p],this.options.easing(elapsed),this.options); } //render the CSS update
|
||||
|
||||
if (w.options.update) { w.options.update.call(); } // fire the updateCallback, try to minimize recursion
|
||||
if (this.options.update) { this.options.update.call(); } // fire the updateCallback
|
||||
|
||||
if (elapsed === 1) {
|
||||
if (w.options.repeat > 0) {
|
||||
if ( w.options.repeat < 9999 ) { w.options.repeat--; } else { w.options.repeat = 0; } // we have to make it stop somewhere, infinity is too damn much
|
||||
if (this.options.repeat > 0) {
|
||||
if ( this.options.repeat < 9999 ) { this.options.repeat--; } else { this.options.repeat = 0; } // we have to make it stop somewhere, infinity is too damn much
|
||||
|
||||
if (w.options.yoyo) { w.reversed = !w.reversed; reverse.call(w); } // handle yoyo
|
||||
if (this.options.yoyo) { this.reversed = !this.reversed; reverse.call(this); } // handle yoyo
|
||||
|
||||
w._startTime = (w.options.yoyo && !w.reversed) ? t + w.options.repeatDelay : t; //set the right time for delay
|
||||
this._startTime = (this.options.yoyo && !this.reversed) ? t + this.options.repeatDelay : t; //set the right time for delay
|
||||
return true;
|
||||
} else {
|
||||
|
||||
if (w.options.complete) { w.options.complete.call(); }
|
||||
if (this.options.complete) { this.options.complete.call(); }
|
||||
|
||||
scrollOut.call(w); // unbind preventing scroll when scroll tween finished
|
||||
scrollOut.call(this); // unbind preventing scroll when scroll tween finished
|
||||
|
||||
// start animating chained tweens
|
||||
for (var i = 0, ctl = w.options.chain.length; i < ctl; i++) {
|
||||
w.options.chain[i].start();
|
||||
for (var i = 0, ctl = this.options.chain.length; i < ctl; i++) { // start animating chained tweens
|
||||
this.options.chain[i].start();
|
||||
}
|
||||
//stop ticking when finished
|
||||
close.call(w);
|
||||
close.call(this);
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
|
@ -266,13 +253,14 @@
|
|||
},
|
||||
|
||||
// applies the transform origin and perspective
|
||||
perspective = function (l,o) {
|
||||
if ( o.transformOrigin !== undefined ) { l.style[property('transformOrigin')] = o.transformOrigin; } // element transform origin
|
||||
if ( o.perspectiveOrigin !== undefined ) { l.style[property('perspectiveOrigin')] = o.perspectiveOrigin; } // element perspective origin
|
||||
if ( o.parentPerspective !== undefined ) { l.parentNode.style[property('perspective')] = o.parentPerspective + 'px'; } // parent perspective
|
||||
if ( o.parentPerspectiveOrigin !== undefined ) { l.parentNode.style[property('perspectiveOrigin')] = o.parentPerspectiveOrigin; } // parent perspective origin
|
||||
perspective = g._perspective = function () {
|
||||
if ( this.options.perspective !== undefined && transformProperty in this._vE ) { this._vS[transformProperty]['perspective'] = this._vE[transformProperty]['perspective']; } // element perspective
|
||||
if ( this.options.transformOrigin !== undefined ) { this._el.style[property('transformOrigin')] = this.options.transformOrigin; } // element transform origin
|
||||
if ( this.options.perspectiveOrigin !== undefined ) { this._el.style[property('perspectiveOrigin')] = this.options.perspectiveOrigin; } // element perspective origin
|
||||
if ( this.options.parentPerspective !== undefined ) { this._el.parentNode.style[property('perspective')] = this.options.parentPerspective + 'px'; } // parent perspective
|
||||
if ( this.options.parentPerspectiveOrigin !== undefined ) { this._el.parentNode.style[property('perspectiveOrigin')] = this.options.parentPerspectiveOrigin; } // parent perspective origin
|
||||
},
|
||||
|
||||
|
||||
// process properties for _vE and _vS or one of them
|
||||
preparePropertiesObject = function (t, l) {
|
||||
var skewObject = {}, rotateObject = {}, translateObject = {}, transformObject = {}, propertiesObject = {};
|
||||
|
|
@ -284,9 +272,9 @@
|
|||
for (var f = 0; f < 3; f++) {
|
||||
var a = ta[f];
|
||||
if ( /3d/.test(x) ) {
|
||||
translateObject['translate' + a] = parseProperty.transform('translate' + a, t[x][f]);
|
||||
translateObject['translate' + a] = parseProperty.transform('translate' + a, t[x][f], l);
|
||||
} else {
|
||||
translateObject['translate' + a] = ('translate' + a in t) ? parseProperty.transform('translate' + a, t['translate' + a]) : { value: 0, unit: 'px' };
|
||||
translateObject['translate' + a] = ('translate' + a in t) ? parseProperty.transform('translate' + a, t['translate' + a], l) : 0;
|
||||
}
|
||||
}
|
||||
transformObject['translate'] = translateObject;
|
||||
|
|
@ -301,7 +289,7 @@
|
|||
}
|
||||
transformObject[ap] = rtp;
|
||||
} else if ( /(rotate|translate|scale)$/.test(x) ) { //process 2d translation / rotation
|
||||
transformObject[x] = parseProperty.transform(x, t[x]);
|
||||
transformObject[x] = parseProperty.transform(x, t[x], l);
|
||||
}
|
||||
propertiesObject[transformProperty] = transformObject;
|
||||
} else if ( x !== 'transform') {
|
||||
|
|
@ -320,68 +308,76 @@
|
|||
// process properties object | registers the plugins prepareStart functions
|
||||
// string parsing and property specific value processing
|
||||
parseProperty = {
|
||||
boxModel : function(p,v){ // box model | text props | radius props
|
||||
boxModel : function(p,v,l){ // box model | text props | radius props
|
||||
if (!(p in DOM)){
|
||||
DOM[p] = function(l,p,a,b,v){
|
||||
l.style[p] = unit(a.value,b.value,b.unit,v);
|
||||
l.style[p] = unit(a,b,'px',v);
|
||||
}
|
||||
}
|
||||
return { value: trueDimension(v).v, unit: trueDimension(v).u };
|
||||
var boxValue = trueDimension(v);
|
||||
return boxValue.u === '%' ? boxValue.v * l.offsetWidth / 100 : boxValue.v;
|
||||
},
|
||||
transform : function(p,v){ // transform prop / value
|
||||
transform : function(p,v,l) { // transform prop / value
|
||||
if (!('transform' in DOM)) {
|
||||
DOM[transformProperty] = function(l,p,a,b,v,o){
|
||||
var _tS = '', t = '', r = '', sk = '', s = '', pp = pp || o.perspective && parseInt(o.perspective) !== 0 ? 'perspective('+parseInt(o.perspective)+'px) ' : 0;
|
||||
var t = '', r = '', sk = '', s = '', pp = '';
|
||||
|
||||
for (var tp in b){
|
||||
if (tp === 'translate'){
|
||||
t += translate(a[tp],b[tp],v);
|
||||
if (tp === 'perspective'){
|
||||
pp += a[tp];
|
||||
} else if (tp === 'translate'){
|
||||
t += translate(a[tp],b[tp],'px',v);
|
||||
} else if (tp === 'rotate'){
|
||||
r += rotate(a[tp],b[tp],v);
|
||||
r += rotate(a[tp],b[tp],'deg',v);
|
||||
} else if (tp === 'skew'){
|
||||
sk += skew(a[tp],b[tp],v);
|
||||
sk += skew(a[tp],b[tp],'deg',v);
|
||||
} else if (tp === 'scale'){
|
||||
s += scale(a[tp],b[tp],v);
|
||||
}
|
||||
}
|
||||
_tS = t + r + sk + s;
|
||||
|
||||
l.style[p] = pp ? pp + _tS : _tS;
|
||||
l.style[p] = pp + t + r + sk + s;
|
||||
}
|
||||
}
|
||||
|
||||
// process each transform property
|
||||
if (/translate/.test(p)) {
|
||||
if (p === 'translate3d') {
|
||||
var t3d = v.split(',');
|
||||
var t3d = v.split(','), t3d0 = trueDimension(t3d[0]), t3d1 = trueDimension(t3d[1], t3d2 = trueDimension(t3d[2]));
|
||||
return {
|
||||
translateX : { value: trueDimension(t3d[0]).v, unit: trueDimension(t3d[0]).u },
|
||||
translateY : { value: trueDimension(t3d[1]).v, unit: trueDimension(t3d[1]).u },
|
||||
translateZ : { value: trueDimension(t3d[2]).v, unit: trueDimension(t3d[2]).u }
|
||||
translateX : t3d0.u === '%' ? (t3d0.v * l.offsetWidth / 100) : t3d0.v,
|
||||
translateY : t3d1.u === '%' ? (t3d1.v * l.offsetHeight / 100) : t3d1.v,
|
||||
translateZ : t3d2.u === '%' ? (t3d2.v * (l.offsetHeight + l.offsetWidth) / 200) : t3d2.v // to be changed with something like element and/or parent perspective
|
||||
};
|
||||
} else if (/^translate(?:[XYZ])$/.test(p)) {
|
||||
return { value: trueDimension(v).v, unit: (trueDimension(v).u||'px') };
|
||||
var t1d = trueDimension(v), percentOffset = /X/.test(p) ? l.offsetWidth / 100 : /Y/.test(p) ? l.offsetHeight / 100 : (l.offsetWidth+l.offsetHeight) / 200;
|
||||
|
||||
return t1d.u === '%' ? (t1d.v * percentOffset) : t1d.v;
|
||||
} else if (p === 'translate') {
|
||||
var tv = typeof v === 'string' ? v.split(',') : v, t2d = {};
|
||||
var tv = typeof v === 'string' ? v.split(',') : v, t2d = {}, t2dv,
|
||||
t2d0 = trueDimension(tv[0]), t2d1 = tv.length ? trueDimension(tv[1]) : {v: 0, u: 'px'};
|
||||
if (tv instanceof Array) {
|
||||
t2d.x = { value: trueDimension(tv[0]).v, unit: trueDimension(tv[0]).u },
|
||||
t2d.y = { value: trueDimension(tv[1]).v, unit: trueDimension(tv[1]).u }
|
||||
t2d.x = t2d0.u === '%' ? (t2d0.v * l.offsetWidth / 100) : t2d0.v,
|
||||
t2d.y = t2d1.u === '%' ? (t2d1.v * l.offsetHeight / 100) : t2d1.v
|
||||
} else {
|
||||
t2d.x = { value: trueDimension(tv).v, unit: trueDimension(tv).u },
|
||||
t2d.y = { value: 0, unit: 'px' }
|
||||
t2dv = trueDimension(tv);
|
||||
t2d.x = t2dv.u === '%' ? (t2dv.v * l.offsetWidth / 100) : t2dv.v,
|
||||
t2d.y = 0
|
||||
}
|
||||
|
||||
return t2d;
|
||||
}
|
||||
} else if (/rotate|skew/.test(p)) {
|
||||
if (/^rotate(?:[XYZ])$|skew(?:[XY])$/.test(p)) {
|
||||
return { value: trueDimension(v,true).v, unit: (trueDimension(v,true).u||'deg') };
|
||||
var r3d = trueDimension(v,true);
|
||||
return r3d.u === 'rad' ? radToDeg(r3d.v) : r3d.v;
|
||||
} else if (p === 'rotate') {
|
||||
var r2d = {};
|
||||
r2d.z = { value: trueDimension(v,true).v, unit: (trueDimension(v,true).u||'deg') };
|
||||
var r2d = {}, r2dv = trueDimension(v,true);
|
||||
r2d.z = r2dv.u === 'rad' ? radToDeg(r2dv.v) : r2dv.v;
|
||||
return r2d;
|
||||
}
|
||||
} else if (p === 'scale') {
|
||||
return { value: parseFloat(v) }; // this must be parseFloat(v)
|
||||
return parseFloat(v); // this must be parseFloat(v)
|
||||
}
|
||||
},
|
||||
unitless : function(p,v){ // scroll | opacity | unitless
|
||||
|
|
@ -445,46 +441,39 @@
|
|||
document.body.setAttribute('data-tweening', 'scroll');
|
||||
}
|
||||
},
|
||||
processEasing = function (es) { //process easing
|
||||
if ( typeof es === 'function') {
|
||||
return es;
|
||||
} else if ( typeof es === 'string' ) {
|
||||
if ( /easing|linear/.test(es) ) {
|
||||
return easing[es]; // regular Robert Penner Easing Functions
|
||||
} else if ( /bezier/.test(es) ) {
|
||||
var bz = es.replace(/bezier|\s|\(|\)/g,'').split(',');
|
||||
return g.Bezier( bz[0]*1,bz[1]*1,bz[2]*1,bz[3]*1 ); //bezier easing
|
||||
} else if ( /physics/.test(es) ) {
|
||||
return g.Physics[es].apply(this); // predefined physics bezier based easing functions
|
||||
} else {
|
||||
return g.Ease[es].apply(this); // predefined bezier based easing functions
|
||||
}
|
||||
processEasing = function (fn) { //process easing function
|
||||
if ( typeof fn === 'function') {
|
||||
return fn;
|
||||
} else if ( typeof fn === 'string' ) {
|
||||
return easing[fn]; // regular Robert Penner Easing Functions
|
||||
}
|
||||
},
|
||||
prepareStart = {},
|
||||
crossCheck = {},
|
||||
getStartValues = function () { // stack transform props for .to() chains
|
||||
var startValues = {}, cs = getInlineStyle(this._el,'transform'),
|
||||
var startValues = {}, currentStyle = getInlineStyle(this._el,'transform'),
|
||||
deg = ['rotate','skew'], ax = ['X','Y','Z'];
|
||||
|
||||
for (var p in this._vS){
|
||||
if ( _transform.indexOf(p) !== -1 ) {
|
||||
var r2d = (/(rotate|translate|scale)$/.test(p));
|
||||
if ( /translate/.test(p) && p !== 'translate' ) {
|
||||
startValues['translate3d'] = cs['translate3d'] || _defaults[p];
|
||||
startValues['translate3d'] = currentStyle['translate3d'] || _defaults[p];
|
||||
} else if ( r2d ) { // 2d transforms
|
||||
startValues[p] = cs[p] || _defaults[p];
|
||||
startValues[p] = currentStyle[p] || _defaults[p];
|
||||
} else if ( !r2d && /rotate|skew/.test(p) ) { // all angles
|
||||
for (var d=0; d<2; d++) {
|
||||
for (var a = 0; a<3; a++) {
|
||||
var s = deg[d]+ax[a];
|
||||
if (_transform.indexOf(s) !== -1 && (s in this._vS) ) { startValues[s] = cs[s] || _defaults[s]; }
|
||||
if (_transform.indexOf(s) !== -1 && (s in this._vS) ) { startValues[s] = currentStyle[s] || _defaults[s]; }
|
||||
}
|
||||
}
|
||||
}
|
||||
} else {
|
||||
if ( _scroll.indexOf(p) === -1 ) {
|
||||
if (p === 'opacity' && _isIE8 ) { // handle IE8 opacity
|
||||
var co = getCurrentStyle(this._el,'filter');
|
||||
startValues['opacity'] = typeof co === 'number' ? co : _defaults['opacity'];
|
||||
var currentOpacity = getCurrentStyle(this._el,'filter');
|
||||
startValues['opacity'] = typeof currentOpacity === 'number' ? currentOpacity : _defaults['opacity'];
|
||||
} else {
|
||||
if ( _all.indexOf(p) !== -1 ) {
|
||||
startValues[p] = getCurrentStyle(this._el,p) || d[p];
|
||||
|
|
@ -493,47 +482,41 @@
|
|||
}
|
||||
}
|
||||
} else {
|
||||
startValues[p] = (this._el === null || this._el === undefined) ? (g.pageYOffset || scrollContainer.scrollTop) : this._el.scrollTop;
|
||||
startValues[p] = this._el === scrollContainer ? (g.pageYOffset || scrollContainer.scrollTop) : this._el.scrollTop;
|
||||
}
|
||||
}
|
||||
}
|
||||
for ( var p in cs ){ // also add to _vS values from previous tweens
|
||||
for ( var p in currentStyle ){ // also add to _vS values from previous tweens
|
||||
if ( _transform.indexOf(p) !== -1 && (!( p in this._vS )) ) {
|
||||
startValues[p] = cs[p] || _defaults[p];
|
||||
startValues[p] = currentStyle[p] || _defaults[p];
|
||||
}
|
||||
}
|
||||
|
||||
this._vS = {};
|
||||
this._vS = preparePropertiesObject(startValues,this._el);
|
||||
|
||||
if ( transformProperty in this._vE ){ // stack transform
|
||||
for ( var sp in this._vS[transformProperty]) {
|
||||
if (!(sp in this._vE[transformProperty])) { this._vE[transformProperty][sp] = {}; }
|
||||
for ( var spp in this._vS[transformProperty][sp] ) { // 3rd level
|
||||
if ( this._vS[transformProperty][sp][spp].value !== undefined ) {
|
||||
if (!(spp in this._vE[transformProperty][sp])) { this._vE[transformProperty][sp][spp] = {}; }
|
||||
for ( var sppp in this._vS[transformProperty][sp][spp]) { // spp = translateX | rotateX | skewX | rotate2d
|
||||
if ( !(sppp in this._vE[transformProperty][sp][spp])) {
|
||||
this._vE[transformProperty][sp][spp][sppp] = this._vS[transformProperty][sp][spp][sppp]; // sppp = unit | value
|
||||
this._vS = preparePropertiesObject(startValues,this._el);
|
||||
|
||||
if ( transformProperty in this._vE ) { // let's stack transform
|
||||
for ( var sp in this._vS[transformProperty]) { // sp is the object corresponding to the transform function objects translate / rotate / skew / scale
|
||||
if ( sp !== 'perspective') {
|
||||
if ( typeof this._vS[transformProperty][sp] === 'object' ) {
|
||||
for ( var spp in this._vS[transformProperty][sp] ) { // 3rd level
|
||||
if ( typeof this._vE[transformProperty][sp] === 'undefined' ) { this._vE[transformProperty][sp] = {}; }
|
||||
if ( typeof this._vS[transformProperty][sp][spp] === 'number' && typeof this._vE[transformProperty][sp][spp] === 'undefined' ) {
|
||||
this._vE[transformProperty][sp][spp] = this._vS[transformProperty][sp][spp];
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
if ( 'value' in this._vS[transformProperty][sp] && (!('value' in this._vE[transformProperty][sp])) ) { // 2nd level
|
||||
for ( var spp1 in this._vS[transformProperty][sp] ) { // scale
|
||||
if (!(spp1 in this._vE[transformProperty][sp])) {
|
||||
this._vE[transformProperty][sp][spp1] = this._vS[transformProperty][sp][spp1]; // spp = unit | value
|
||||
} else if ( typeof this._vS[transformProperty][sp] === 'number' ) {
|
||||
if ( typeof this._vE[transformProperty][sp] === 'undefined' ) { // scale
|
||||
this._vE[transformProperty][sp] = this._vS[transformProperty][sp];
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
prepareStart = {},
|
||||
crossCheck = {},
|
||||
};
|
||||
|
||||
// core easing functions
|
||||
easing = g.Easing = {};
|
||||
var easing = g.Easing = {};
|
||||
easing.linear = function (t) { return t; };
|
||||
easing.easingSinusoidalIn = function(t) { return -Math.cos(t * Math.PI / 2) + 1; };
|
||||
easing.easingSinusoidalOut = function(t) { return Math.sin(t * Math.PI / 2); };
|
||||
|
|
@ -591,13 +574,11 @@
|
|||
var start = g._start = function (t) { // move functions that use the ticker outside the prototype to be in the same scope with it
|
||||
scrollIn.call(this);
|
||||
|
||||
perspective(this._el,this.options); // apply the perspective and transform origin
|
||||
if ( this.options.rpr ) { getStartValues.apply(this); } // on start we reprocess the valuesStart for TO() method
|
||||
|
||||
K.svg && K.svq(this); // SVG Plugin | on start we process the SVG paths and SVG transforms
|
||||
perspective.apply(this); // apply the perspective and transform origin
|
||||
|
||||
for ( var e in this._vE ) {
|
||||
if (e in crossCheck) crossCheck[e]; // this is where we do the valuesStart and valuesEnd check
|
||||
if (e in crossCheck && this.options.rpr) crossCheck[e].call(this); // this is where we do the valuesStart and valuesEnd check for to() method
|
||||
this._vSR[e] = this._vS[e];
|
||||
}
|
||||
|
||||
|
|
@ -628,31 +609,40 @@
|
|||
},
|
||||
|
||||
// single Tween object construct
|
||||
Tween = g._Tween = function (_el, _vS, _vE, _o) {
|
||||
Tween = function (_el, _vS, _vE, _o) {
|
||||
this._el = 'scroll' in _vE && (_el === undefined || _el === null) ? scrollContainer : _el; // element animation is applied to
|
||||
|
||||
this.playing = false; // _isPlaying
|
||||
this.reversed = false; // _reversed
|
||||
this.paused = false; //_paused
|
||||
this.playing = false;
|
||||
this.reversed = false;
|
||||
this.paused = false;
|
||||
|
||||
this._startTime = null; // startTime
|
||||
this._pauseTime = null; //_pauseTime
|
||||
this._startTime = null;
|
||||
this._pauseTime = null;
|
||||
|
||||
this._startFired = false; //_on StartCallbackFIRED
|
||||
this._startFired = false;
|
||||
|
||||
this._vSR = {}; // internal valuesStartRepeat
|
||||
this._vS = _o.rpr ? _vS : preparePropertiesObject(_vS,_el); // valuesStart
|
||||
this._vE = preparePropertiesObject(_vE,_el); // valuesEnd
|
||||
|
||||
this.options = {}; for (var o in _o) { this.options[o] = _o[o]; }
|
||||
this.options.chain = []; //_chainedTweens
|
||||
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;
|
||||
}
|
||||
|
||||
this.options.chain = []; // chained Tweens
|
||||
this.options.easing = _o.easing && typeof processEasing(_o.easing) === 'function' ? processEasing(_o.easing) : easing.linear;
|
||||
this.options.repeat = _o.repeat || 0;
|
||||
this.options.repeatDelay = _o.repeatDelay || 0;
|
||||
this.options.yoyo = _o.yoyo || false; // _yoyo
|
||||
this.options.rpr = _o.rpr || false; // internal option to process inline/computed style at start instead of init true/false
|
||||
this.options.duration = _o.duration || 700; //duration
|
||||
this.options.delay = _o.delay || 0; //delay
|
||||
this.options.yoyo = _o.yoyo || false;
|
||||
this.options.duration = _o.duration || 700; // duration option | default
|
||||
this.options.delay = _o.delay || 0; // delay option | default
|
||||
this.repeat = this.options.repeat; // we cache the number of repeats to be able to put it back after all cycles finish
|
||||
|
||||
this.start = start; this.play = play; this.resume = play;
|
||||
|
|
@ -725,8 +715,7 @@
|
|||
},
|
||||
fromTo = function (el, f, to, o) {
|
||||
var _el = selector(el); o = o || {};
|
||||
var tw = new Tween(_el, f, to, o); K.svg && K.svq(tw); // on init we process the SVG paths
|
||||
return tw;
|
||||
return new Tween(_el, f, to, o);
|
||||
},
|
||||
|
||||
// multiple elements tweening
|
||||
|
|
@ -742,7 +731,7 @@
|
|||
return K = { // export core methods to public for plugins
|
||||
property: property, getPrefix: getPrefix, selector: selector, processEasing : processEasing, // utils
|
||||
to: to, fromTo: fromTo, allTo: allTo, allFromTo: allFromTo, // main methods
|
||||
parseProperty: parseProperty, prepareStart: prepareStart, crossCheck : crossCheck, // Tween : Tween, // property parsing & preparation | Tween | crossCheck
|
||||
parseProperty: parseProperty, prepareStart: prepareStart, crossCheck : crossCheck, Tween : Tween, // property parsing & preparation | Tween | crossCheck
|
||||
truD: trueDimension, truC: trueColor, rth: rgbToHex, htr: hexToRGB, getCurrentStyle: getCurrentStyle, // property parsing
|
||||
};
|
||||
}));
|
||||
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "kute.js",
|
||||
"version": "1.5.97",
|
||||
"version": "1.5.98",
|
||||
"description": "Complete Native Javascript animation engine.",
|
||||
"main": "kute.js",
|
||||
"scripts": {
|
||||
|
|
|
|||
Loading…
Reference in a new issue