Changes:
* fixed polyfill * fixed IE10+ issues with scroll * reworked files and folders structure of the sources * solved some demo issues * code cleanup * version bump
This commit is contained in:
thednp
parent
b3ba7299a0
commit
0435d00b11
|
|
@ -98,8 +98,6 @@ footer p {margin: 0 0 10px}
|
|||
}
|
||||
|
||||
.nav-wrapper {
|
||||
border-bottom: 1px solid #555;
|
||||
padding: 0 0 10px;
|
||||
flex-basis: 100%
|
||||
}
|
||||
.navbar-wrapper { position: relative; clear: both; background: rgba(0,0,0,0.7); padding-bottom: 20px; }
|
||||
|
|
@ -121,10 +119,10 @@ footer p {margin: 0 0 10px}
|
|||
.nav li a:hover, .nav li a:focus { text-decoration: none }
|
||||
|
||||
/* share */
|
||||
#share { display: flex; flex-direction: row; margin: 0; position: absolute; top: 15px; right: 0; }
|
||||
#share { display: flex; flex-direction: row; margin: 0; padding: 0 }
|
||||
#share li { list-style: none }
|
||||
#share a { text-decoration: none; }
|
||||
#share .icon {width:26px; height:auto; vertical-align: middle;}
|
||||
#share .icon {width:26px; height:26px; vertical-align: middle;}
|
||||
#share path { fill: none; stroke: currentColor; stroke-width: 50; }
|
||||
#share li:not(:last-child) { margin-right: 10px; }
|
||||
#share li:hover path { fill: currentColor; }
|
||||
|
|
@ -136,7 +134,6 @@ footer p {margin: 0 0 10px}
|
|||
.navbar-wrapper h1 {border: 0}
|
||||
.navbar-wrapper .nav,
|
||||
.navbar-wrapper h1 { float: none; }
|
||||
#share { top: 30px; }
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -275,16 +272,6 @@ h1.example-item span {
|
|||
.col9 { max-width: 66.65%; flex: 0 0 66.65% }
|
||||
}
|
||||
|
||||
/* @media (min-width: 480px) and (max-width: 768px){
|
||||
.col3,
|
||||
.col4 { width: 50%; flex: 0 0 50% }
|
||||
.col8,
|
||||
.col9 { width: 50%; flex: 0 0 50% }
|
||||
}
|
||||
@media (max-width: 479px){
|
||||
.columns > [class*="col"] { width: 100%; }
|
||||
} */
|
||||
|
||||
.table { display: table; height: 480px }
|
||||
.cell { display: table-cell; vertical-align: middle }
|
||||
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@ var scrollProperty = document.getElementById('scrollProperty'),
|
|||
|
||||
button.addEventListener('click', function(e){
|
||||
e.preventDefault();
|
||||
let scrollTween = target.scrollTop !==0 ?
|
||||
var scrollTween = target.scrollTop !==0 ?
|
||||
KUTE.to(target,{scroll:0},{duration:2000, easing: "easingCircularOut"}) :
|
||||
KUTE.to(target,{scroll:(target.scrollHeight-target.offsetHeight+10)},{duration:2000, easing: "easingCircularOut"})
|
||||
!scrollTween.playing && scrollTween.start()
|
||||
|
|
|
|||
|
|
@ -127,7 +127,7 @@ let bgPosTween = KUTE.to('selector1',{backgroundPosition:"left center"}).start()
|
|||
<li>Unfortunatelly this property also has no access at the sub-pixel level, animations are as good as it gets, despite the fact that the <code>%</code> suffix is used.</li>
|
||||
<li>There are thankfully replacements for this forgotten property that strangelly supports CSS3 transitions, you can simply use all kinds of SVG masks and filters
|
||||
and the <a href="htmlAttributes.html">HTML Attributes</a> component for much more animation potential and supreme animation quality.</li>
|
||||
<li>This component is bundled with the <i>kute-extra.js</i> distribution file.</li>
|
||||
<li>This component is bundled with the <i>demo/src/kute-extra.js</i> file.</li>
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -138,7 +138,7 @@ KUTE.to('selector5',{borderBottomRightRadius:'20px'}).start();
|
|||
<li>The component does not use vendor property preffixes anymore, the major browsers don't need for quite some time now. If you want to support
|
||||
legacy browsers, you still have the utilities available.</li>
|
||||
<li>Early implementations from any browser that have been deprecated are also not supported.</li>
|
||||
<li>This component is bundled with <i>kute-extra.js</i> distribution file.</li>
|
||||
<li>This component is bundled with <i>demo/src/kute-extra.js</i> file.</li>
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -147,7 +147,7 @@ let tween8 = KUTE.to('selector1',{margin:'5px'})
|
|||
<li>Shorthand notations such as <code>margin: "20px 50px"</code> or any other property are not supported.</li>
|
||||
<li>Most box-model properties (except <code>top</code>, <code>left</code>, <code>bottom</code> and <code>right</code>) are layout modifiers and will not
|
||||
produce the best visual experience mainly because they force re-paint on all page layout and they don't support animation under the pixel level.</li>
|
||||
<li>The <i>baseBoxModel</i> component is featured in all distributions, while the full component is featured in <i>kute-extra.js</i> distribution file.</li>
|
||||
<li>The <i>baseBoxModel</i> component is featured in all distributions, while the full component is bundled with <i>demo/src/kute-extra.js</i> file.</li>
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -93,6 +93,7 @@
|
|||
<p>Generally you can set the CSS rule for this property like this <b>clip: rect(top,right,bottom,left)</b> which forms a rectangular masking shape above
|
||||
a target element making parts of it invisible.</p>
|
||||
<p>While the CSS <b>clip</b> property has been deprecated, it can still be used to emulate a type of scale/reveal animation for legacy browsers in certain cases.</p>
|
||||
<p>This component is bundled with the <i>demo/src/kute-extra.js</i> file.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -137,7 +137,7 @@ KUTE.to('selector1',{borderColor:'turquoise'}).start(); // IE9+
|
|||
<li>You can also use <code>RGB</code> or <code>RGBA</code>, but the last one is not supported on legacy browsers and it should fallback to <code>RGB</code>.</li>
|
||||
<li>Some properties like <code>borderColor</code> and its variations or <code>outlineColor</code> won't have any visible effect if no border or outline style is applied to
|
||||
your target element.</li>
|
||||
<li>This component is bundled with the standard <i>kute.js</i> and <i>kute-extra.js</i> distribution files.</li>
|
||||
<li>This component is bundled with the standard <i>kute.js</i> distribution file and the <i>demo/src/kute-extra.js</i> file.</li>
|
||||
|
||||
</ul>
|
||||
|
||||
|
|
|
|||
|
|
@ -161,7 +161,7 @@ let fe4 = KUTE.to('selector4', {filter :{ url: '#mySVGFilter', opacity: 40, drop
|
|||
complement greatly for even more animation potential.</li>
|
||||
<li>Similar to the <a href="htmlAttributes.html">HTML Attributes</a> component, this one can also deal with specific function namespace, for instance <code>hue-rotate</code> and
|
||||
<code>hueRotate</code>.</li>
|
||||
<li>This component is bundled with the <i>kute-extra.js</i> distribution file.</li>
|
||||
<li>This component is bundled with the <i>demo/src/kute-extra.js</i> file.</li>
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -207,7 +207,7 @@ var rotatingGradient = KUTE.to('#gradient', {attr: {x1:'49%', x2:'51%', y1:'51%'
|
|||
(EG: <code>fillOpacity</code> becomes <code>fill-opacity</code>).</li>
|
||||
<li>This component is a great addition to complement any SVG related component as well as a great complement to <a href="filterEffects.html">Filter Effects</a> component.</li>
|
||||
<li>Remember to check your elements markup for changes, your animation might not be visible because equivalent CSS is used.</li>
|
||||
<li>This component is bundled with the standard <i>kute.js</i> and <i>kute-extra.js</i> distribution files.</li>
|
||||
<li>This component is bundled with the standard <i>kute.js</i> distribution file and the <i>demo/src/kute-extra.js</i> file.</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -150,21 +150,8 @@ KUTE.to('#myElement',{scroll: 0 }).start()
|
|||
with various easing functions and durations to find the best possible outcome.</li>
|
||||
<li>All pages in this documentation have a <code><a>Back to top</a></code> button at the bottom, just in case you didn't notice.</li>
|
||||
<li>The component is an essential part in ALL KUTE.js distributions.</li>
|
||||
|
||||
</ul>
|
||||
|
||||
<ul id="share">
|
||||
<li>
|
||||
<a class="facebook-link" target="_blank" href="https://www.facebook.com/sharer/sharer.php?u=http://thednp.github.io/kute.js/index.html" title="Share KUTE.js on Facebook">
|
||||
<svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024"><path class="icon-demo" d="M1008 511.996c0 247.56-181.381 452.76-418.5 490v-346.62h115.561l22-143.381h-137.561v-93.1c0-39.221 19.221-77.461 80.82-77.461h62.561v-122s-56.762-9.68-111.041-9.68c-113.34 0-187.34 68.66-187.34 192.961v109.279h-126v143.381h126v346.62c-237.12-37.24-418.5-242.44-418.5-490 0-274 222-496 496-496s496 222 496 496z" fill="currentColor"></path></svg>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="twitter-link" target="_blank" href="https://twitter.com/intent/tweet?text=Spread the word about %23KUTEJS animation engine by @dnp_theme and download here http://thednp.github.io/kute.js/index.html" title="Share KUTE.js on Twitter">
|
||||
<svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024"><path class="icon-demo" d="M886.579 306.995c0.41 8.294 0.563 16.691 0.563 24.986 0 255.488-194.406 549.99-549.888 549.99-109.21 0-210.739-32-296.294-86.886 15.155 1.792 30.515 2.714 46.08 2.714 90.624 0 173.926-30.925 240.026-82.688-84.531-1.587-155.955-57.395-180.531-134.195 11.776 2.202 23.91 3.379 36.352 3.379 17.664 0 34.765-2.304 50.944-6.707-88.422-17.818-155.034-95.898-155.034-189.594 0-0.819 0-1.587 0-2.406 26.061 14.49 55.91 23.194 87.552 24.218-51.866-34.714-86.016-93.798-86.016-160.922 0-35.379 9.523-68.608 26.214-97.178 95.283 116.992 237.773 193.894 398.387 201.984-3.277-14.182-4.966-28.877-4.966-44.083 0-106.701 86.477-193.178 193.229-193.178 55.603 0 105.83 23.398 141.107 60.979 43.981-8.704 85.35-24.781 122.726-46.899-14.438 45.107-45.107 82.995-84.992 106.906 39.117-4.71 76.288-15.002 111.002-30.413-25.907 38.81-58.675 72.806-96.461 99.994z" fill="currentColor"></path></svg>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- FOOTER -->
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
/*!
|
||||
* KUTE.js Base v2.0.0 (http://thednp.github.io/kute.js)
|
||||
* KUTE.js Base v2.0.1 (http://thednp.github.io/kute.js)
|
||||
* Copyright 2015-2020 © thednp
|
||||
* Licensed under MIT (https://github.com/thednp/kute.js/blob/master/LICENSE)
|
||||
*/
|
||||
|
|
@ -9,28 +9,32 @@
|
|||
(global = global || self, global.KUTE = factory());
|
||||
}(this, (function () { 'use strict';
|
||||
|
||||
var version = "2.0.0";
|
||||
var version = "2.0.1";
|
||||
|
||||
var Tweens = [];
|
||||
var supportedProperties = {};
|
||||
var defaultOptions = {
|
||||
duration: 700,
|
||||
delay: 0,
|
||||
easing: 'linear'
|
||||
};
|
||||
var crossCheck = {};
|
||||
var onComplete = {};
|
||||
var onStart = {};
|
||||
|
||||
var linkProperty = {};
|
||||
var Util = {};
|
||||
var BaseObjects = {
|
||||
|
||||
var onStart = {};
|
||||
|
||||
var onComplete = {};
|
||||
|
||||
var supportedProperties = {};
|
||||
|
||||
var Objects = {
|
||||
defaultOptions: defaultOptions,
|
||||
linkProperty: linkProperty,
|
||||
onComplete: onComplete,
|
||||
onStart: onStart,
|
||||
onComplete: onComplete,
|
||||
supportedProperties: supportedProperties
|
||||
};
|
||||
|
||||
var Util = {};
|
||||
|
||||
function linear (t) { return t; }
|
||||
function easingQuadraticIn (t) { return t*t; }
|
||||
function easingQuadraticOut (t) { return t*(2-t); }
|
||||
|
|
@ -70,12 +74,25 @@
|
|||
}
|
||||
Util.processEasing = processEasing;
|
||||
|
||||
var globalObject = typeof (global) !== 'undefined' ? global
|
||||
: typeof(self) !== 'undefined' ? self
|
||||
: typeof(window) !== 'undefined' ? window : {};
|
||||
var TweenConstructor = {};
|
||||
var Tweens = [];
|
||||
|
||||
function add (tw) { return Tweens.push(tw); }
|
||||
|
||||
function remove (tw) {
|
||||
var i = Tweens.indexOf(tw);
|
||||
i !== -1 && Tweens.splice(i, 1);
|
||||
}
|
||||
|
||||
function getAll () { return Tweens; }
|
||||
|
||||
function removeAll () { Tweens.length = 0; }
|
||||
|
||||
var KUTE = {};
|
||||
|
||||
var globalObject = typeof (global) !== 'undefined' ? global
|
||||
: typeof(self) !== 'undefined' ? self
|
||||
: typeof(window) !== 'undefined' ? window : {};
|
||||
|
||||
function numbers(a, b, v) {
|
||||
a = +a; b -= a; return a + b * v;
|
||||
}
|
||||
|
|
@ -95,22 +112,6 @@
|
|||
arrays: arrays
|
||||
};
|
||||
|
||||
var add = function(tw) { Tweens.push(tw); };
|
||||
var remove = function(tw) { var i = Tweens.indexOf(tw); if (i !== -1) { Tweens.splice(i, 1); }};
|
||||
var getAll = function() { return Tweens };
|
||||
var removeAll = function() { Tweens.length = 0; };
|
||||
var Tick = 0;
|
||||
function Ticker(time) {
|
||||
var i = 0;
|
||||
while ( i < Tweens.length ) {
|
||||
if ( Tweens[i].update(time) ) {
|
||||
i++;
|
||||
} else {
|
||||
Tweens.splice(i, 1);
|
||||
}
|
||||
}
|
||||
Tick = requestAnimationFrame(Ticker);
|
||||
}
|
||||
var Time = {};
|
||||
if (typeof (self) === 'undefined' && typeof (process) !== 'undefined' && process.hrtime) {
|
||||
Time.now = function () {
|
||||
|
|
@ -122,7 +123,19 @@
|
|||
self.performance.now !== undefined) {
|
||||
Time.now = self.performance.now.bind(self.performance);
|
||||
}
|
||||
function stop () {
|
||||
var Tick = 0;
|
||||
var Ticker = function (time) {
|
||||
var i = 0;
|
||||
while ( i < Tweens.length ) {
|
||||
if ( Tweens[i].update(time) ) {
|
||||
i++;
|
||||
} else {
|
||||
Tweens.splice(i, 1);
|
||||
}
|
||||
}
|
||||
Tick = requestAnimationFrame(Ticker);
|
||||
};
|
||||
function stop() {
|
||||
setTimeout(function () {
|
||||
if (!Tweens.length && Tick) {
|
||||
cancelAnimationFrame(Tick);
|
||||
|
|
@ -142,15 +155,23 @@
|
|||
}
|
||||
},64);
|
||||
}
|
||||
function linkInterpolation(){
|
||||
var Render = {Tick: Tick,Ticker: Ticker,Tweens: Tweens,Time: Time};
|
||||
for ( var blob in Render ) {
|
||||
if (!KUTE[blob]) {
|
||||
KUTE[blob] = blob === 'Time' ? Time.now : Render[blob];
|
||||
}
|
||||
}
|
||||
globalObject["_KUTE"] = KUTE;
|
||||
|
||||
function linkInterpolation() {
|
||||
var this$1 = this;
|
||||
var loop = function ( component ) {
|
||||
var componentLink = linkProperty[component];
|
||||
var componentProps = supportedProperties[component];
|
||||
for ( var fnObj in componentLink ) {
|
||||
if ( typeof(componentLink[fnObj]) === 'function'
|
||||
&& Object.keys(this$1.valuesEnd).some(function (i) { return componentProps.includes(i)
|
||||
|| i=== 'attr' && Object.keys(this$1.valuesEnd[i]).some(function (j) { return componentProps.includes(j); }); } ) )
|
||||
&& Object.keys(this$1.valuesEnd).some(function (i) { return componentProps && componentProps.includes(i)
|
||||
|| i=== 'attr' && Object.keys(this$1.valuesEnd[i]).some(function (j) { return componentProps && componentProps.includes(j); }); } ) )
|
||||
{
|
||||
!KUTE[fnObj] && (KUTE[fnObj] = componentLink[fnObj]);
|
||||
} else {
|
||||
|
|
@ -172,13 +193,7 @@
|
|||
};
|
||||
for (var component in linkProperty)loop( component );
|
||||
}
|
||||
var Render = {Tick: Tick,Ticker: Ticker,Tweens: Tweens,Time: Time};
|
||||
for (var blob in Render ) {
|
||||
if (!KUTE[blob]) {
|
||||
KUTE[blob] = blob === 'Time' ? Time.now : Render[blob];
|
||||
}
|
||||
}
|
||||
globalObject["_KUTE"] = KUTE;
|
||||
|
||||
var Internals = {
|
||||
add: add,
|
||||
remove: remove,
|
||||
|
|
@ -207,6 +222,8 @@
|
|||
}
|
||||
}
|
||||
|
||||
var crossCheck = {};
|
||||
|
||||
var AnimationBase = function AnimationBase(Component){
|
||||
this.Component = Component;
|
||||
return this.setComponent()
|
||||
|
|
@ -254,6 +271,8 @@
|
|||
return {name:ComponentName}
|
||||
};
|
||||
|
||||
var TweenConstructor = {};
|
||||
|
||||
var TweenBase = function TweenBase(targetElement, startObject, endObject, options){
|
||||
this.element = targetElement;
|
||||
this.playing = false;
|
||||
|
|
@ -488,9 +507,10 @@
|
|||
|
||||
var mouseHoverEvents = ('onmouseleave' in document) ? [ 'mouseenter', 'mouseleave'] : [ 'mouseover', 'mouseout' ];
|
||||
|
||||
var canTouch = ('ontouchstart' in window || navigator && navigator.msMaxTouchPoints) || false;
|
||||
var touchOrWheel = canTouch ? 'touchstart' : 'mousewheel';
|
||||
var scrollContainer = navigator && /(EDGE|Mac)/i.test(navigator.userAgent) ? document.body : document.getElementsByTagName('HTML')[0];
|
||||
var supportTouch = ('ontouchstart' in window || navigator.msMaxTouchPoints)||false;
|
||||
|
||||
var touchOrWheel = supportTouch ? 'touchstart' : 'mousewheel';
|
||||
var scrollContainer = navigator && /(EDGE|Mac)/i.test(navigator.userAgent) ? document.body : document.documentElement;
|
||||
var passiveHandler = supportPassive ? { passive: false } : false;
|
||||
function preventScroll(e) {
|
||||
this.scrolling && e.preventDefault();
|
||||
|
|
@ -538,6 +558,25 @@
|
|||
Util: { preventScroll: preventScroll, scrollIn: scrollIn, scrollOut: scrollOut, scrollContainer: scrollContainer, passiveHandler: passiveHandler, getScrollTargets: getScrollTargets }
|
||||
};
|
||||
|
||||
function getPrefix() {
|
||||
var thePrefix, prefixes = ['Moz', 'moz', 'Webkit', 'webkit', 'O', 'o', 'Ms', 'ms'];
|
||||
for (var i = 0, pfl = prefixes.length; i < pfl; i++) {
|
||||
if (((prefixes[i]) + "Transform") in document.body.style) {
|
||||
thePrefix = prefixes[i]; break;
|
||||
}
|
||||
}
|
||||
return thePrefix;
|
||||
}
|
||||
|
||||
function trueProperty(property) {
|
||||
return !(property in document.body.style)
|
||||
? getPrefix() + (property.charAt(0).toUpperCase() + property.slice(1))
|
||||
: property;
|
||||
}
|
||||
|
||||
var transformProperty = trueProperty('transform');
|
||||
var supportTransform = transformProperty in document.body.style ? 1 : 0;
|
||||
|
||||
var BaseTransform = new AnimationBase(baseTransformOps);
|
||||
var BaseBoxModel = new AnimationBase(baseBoxModelOps);
|
||||
var BaseOpacity = new AnimationBase(baseOpacityOps);
|
||||
|
|
@ -552,7 +591,7 @@
|
|||
},
|
||||
TweenBase: TweenBase,
|
||||
fromTo: fromTo,
|
||||
Objects: BaseObjects,
|
||||
Objects: Objects,
|
||||
Easing: Easing,
|
||||
Util: Util,
|
||||
Render: Render,
|
||||
|
|
|
|||
4
demo/src/kute-base.min.js
vendored
4
demo/src/kute-base.min.js
vendored
File diff suppressed because one or more lines are too long
|
|
@ -1,5 +1,5 @@
|
|||
/*!
|
||||
* KUTE.js Extra v2.0.0 (http://thednp.github.io/kute.js)
|
||||
* KUTE.js Extra v2.0.1 (http://thednp.github.io/kute.js)
|
||||
* Copyright 2015-2020 © thednp
|
||||
* Licensed under MIT (https://github.com/thednp/kute.js/blob/master/LICENSE)
|
||||
*/
|
||||
|
|
@ -9,27 +9,34 @@
|
|||
(global = global || self, global.KUTE = factory());
|
||||
}(this, (function () { 'use strict';
|
||||
|
||||
var version = "2.0.0";
|
||||
var version = "2.0.1";
|
||||
|
||||
var Tweens = [];
|
||||
var supportedProperties = {};
|
||||
|
||||
var defaultValues = {};
|
||||
|
||||
var defaultOptions = {
|
||||
duration: 700,
|
||||
delay: 0,
|
||||
easing: 'linear'
|
||||
};
|
||||
var prepareStart = {};
|
||||
|
||||
var prepareProperty = {};
|
||||
|
||||
var prepareStart = {};
|
||||
|
||||
var crossCheck = {};
|
||||
var onComplete = {};
|
||||
|
||||
var onStart = {};
|
||||
|
||||
var onComplete = {};
|
||||
|
||||
var linkProperty = {};
|
||||
var Util = {};
|
||||
|
||||
var Objects = {
|
||||
supportedProperties: supportedProperties,
|
||||
defaultOptions: defaultOptions,
|
||||
defaultValues: defaultValues,
|
||||
defaultOptions: defaultOptions,
|
||||
prepareProperty: prepareProperty,
|
||||
prepareStart: prepareStart,
|
||||
crossCheck: crossCheck,
|
||||
|
|
@ -38,6 +45,10 @@
|
|||
linkProperty: linkProperty
|
||||
};
|
||||
|
||||
var Util = {};
|
||||
|
||||
var Components = {};
|
||||
|
||||
function numbers(a, b, v) {
|
||||
a = +a; b -= a; return a + b * v;
|
||||
}
|
||||
|
|
@ -57,92 +68,59 @@
|
|||
arrays: arrays
|
||||
};
|
||||
|
||||
function getPrefix() {
|
||||
var prefixes = ['Moz', 'moz', 'Webkit', 'webkit', 'O', 'o', 'Ms', 'ms'];
|
||||
var thePrefix;
|
||||
for (var i = 0, pfl = prefixes.length; i < pfl; i++) {
|
||||
if (((prefixes[i]) + "Transform") in document.body.style) { thePrefix = prefixes[i]; break; }
|
||||
}
|
||||
return thePrefix;
|
||||
}
|
||||
function trueProperty(property) {
|
||||
var prefixRequired = (!(property in document.body.style)) ? true : false;
|
||||
var prefix = getPrefix();
|
||||
return prefixRequired ? prefix + (property.charAt(0).toUpperCase() + property.slice(1)) : property;
|
||||
}
|
||||
function trueDimension(dimValue, isAngle) {
|
||||
var intValue = parseInt(dimValue) || 0;
|
||||
var mUnits = ['px','%','deg','rad','em','rem','vh','vw'];
|
||||
var theUnit;
|
||||
for (var mIndex=0; mIndex<mUnits.length; mIndex++) {
|
||||
if ( typeof dimValue === 'string' && dimValue.includes(mUnits[mIndex]) ) {
|
||||
theUnit = mUnits[mIndex]; break;
|
||||
}
|
||||
}
|
||||
theUnit = theUnit !== undefined ? theUnit : (isAngle ? 'deg' : 'px');
|
||||
return { v: intValue, u: theUnit };
|
||||
}
|
||||
function trueColor(colorString) {
|
||||
if (/rgb|rgba/.test(colorString)) {
|
||||
var vrgb = colorString.replace(/\s|\)/,'').split('(')[1].split(',');
|
||||
var colorAlpha = vrgb[3] ? vrgb[3] : null;
|
||||
if (!colorAlpha) {
|
||||
return { r: parseInt(vrgb[0]), g: parseInt(vrgb[1]), b: parseInt(vrgb[2]) };
|
||||
} else {
|
||||
return { r: parseInt(vrgb[0]), g: parseInt(vrgb[1]), b: parseInt(vrgb[2]), a: parseFloat(colorAlpha) };
|
||||
}
|
||||
} else if (/^#/.test(colorString)) {
|
||||
var fromHex = hexToRGB(colorString); return { r: fromHex.r, g: fromHex.g, b: fromHex.b };
|
||||
} else if (/transparent|none|initial|inherit/.test(colorString)) {
|
||||
return { r: 0, g: 0, b: 0, a: 0 };
|
||||
} else if (!/^#|^rgb/.test(colorString) ) {
|
||||
var siteHead = document.getElementsByTagName('head')[0]; siteHead.style.color = colorString;
|
||||
var webColor = getComputedStyle(siteHead,null).color; webColor = /rgb/.test(webColor) ? webColor.replace(/[^\d,]/g, '').split(',') : [0,0,0];
|
||||
siteHead.style.color = ''; return { r: parseInt(webColor[0]), g: parseInt(webColor[1]), b: parseInt(webColor[2]) };
|
||||
}
|
||||
}
|
||||
function hexToRGB(hex) {
|
||||
var hexShorthand = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
|
||||
hex = hex.replace(hexShorthand, function (m, r, g, b) { return r + r + g + g + b + b; });
|
||||
var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
|
||||
return result ? {
|
||||
r: parseInt(result[1], 16),
|
||||
g: parseInt(result[2], 16),
|
||||
b: parseInt(result[3], 16)
|
||||
} : null;
|
||||
}
|
||||
|
||||
function getInlineStyle(el) {
|
||||
if ( !el.style ) { return; }
|
||||
var css = el.style.cssText.replace(/\s/g,'').split(';');
|
||||
var transformObject = {};
|
||||
var arrayFn = ['translate3d','translate','scale3d','skew'];
|
||||
for ( var i=0, csl = css.length; i<csl; i++ ){
|
||||
if ( /transform/i.test(css[i])) {
|
||||
var tps = css[i].split(':')[1].split(')');
|
||||
for ( var k=0, tpl = tps.length-1; k< tpl; k++){
|
||||
var tpv = tps[k].split('(');
|
||||
var tp = tpv[0];
|
||||
var tv = tpv[1];
|
||||
var css = el.style.cssText.replace(/\s/g,'').split(';'),
|
||||
transformObject = {},
|
||||
arrayFn = ['translate3d','translate','scale3d','skew'];
|
||||
css.map(function (cs) {
|
||||
if ( /transform/i.test(cs)) {
|
||||
var tps = cs.split(':')[1].split(')');
|
||||
tps.map(function (tpi) {
|
||||
var tpv = tpi.split('('), tp = tpv[0], tv = tpv[1];
|
||||
if ( !/matrix/.test(tp) ){
|
||||
transformObject[tp] = arrayFn.includes(tp) ? tv.split(',') : tv;
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
return transformObject;
|
||||
}
|
||||
|
||||
function getStyleForProperty(elem, propertyName) {
|
||||
var styleAttribute = elem.style;
|
||||
var computedStyle = getComputedStyle(elem) || elem.currentStyle;
|
||||
var prefixedProp = trueProperty(propertyName);
|
||||
var styleValue = styleAttribute[propertyName] && !/auto|initial|none|unset/.test(styleAttribute[propertyName])
|
||||
? styleAttribute[propertyName]
|
||||
: computedStyle[prefixedProp];
|
||||
if ( propertyName !== 'transform' && (prefixedProp in computedStyle || prefixedProp in styleAttribute) ) {
|
||||
var styleAttribute = elem.style,
|
||||
computedStyle = getComputedStyle(elem) || elem.currentStyle,
|
||||
styleValue = styleAttribute[propertyName] && !/auto|initial|none|unset/.test(styleAttribute[propertyName])
|
||||
? styleAttribute[propertyName]
|
||||
: computedStyle[propertyName];
|
||||
if ( propertyName !== 'transform' && (propertyName in computedStyle || propertyName in styleAttribute) ) {
|
||||
return styleValue ? styleValue : defaultValues[propertyName];
|
||||
}
|
||||
}
|
||||
|
||||
function prepareObject (obj, fn) {
|
||||
var propertiesObject = fn === 'start' ? this.valuesStart : this.valuesEnd;
|
||||
for ( var component in prepareProperty ) {
|
||||
var prepareComponent = prepareProperty[component],
|
||||
supportComponent = supportedProperties[component];
|
||||
for ( var tweenCategory in prepareComponent ) {
|
||||
var transformObject = {};
|
||||
for (var tweenProp in obj) {
|
||||
if ( defaultValues[tweenProp] && prepareComponent[tweenProp] ) {
|
||||
propertiesObject[tweenProp] = prepareComponent[tweenProp].call(this,tweenProp,obj[tweenProp]);
|
||||
} else if ( !defaultValues[tweenCategory] && tweenCategory === 'transform' && supportComponent.includes(tweenProp) ) {
|
||||
transformObject[tweenProp] = obj[tweenProp];
|
||||
} else if ( !defaultValues[tweenCategory] && supportComponent && supportComponent.includes(tweenProp) ) {
|
||||
propertiesObject[tweenProp] = prepareComponent[tweenCategory].call(this,tweenProp,obj[tweenProp]);
|
||||
}
|
||||
}
|
||||
if (Object.keys && Object.keys(transformObject).length){
|
||||
propertiesObject[tweenCategory] = prepareComponent[tweenCategory].call(this,tweenCategory,transformObject);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function getStartValues () {
|
||||
var startValues = {},
|
||||
currentStyle = getInlineStyle(this.element);
|
||||
|
|
@ -152,7 +130,7 @@
|
|||
for ( var tweenCategory in componentStart) {
|
||||
if ( tweenCategory === tweenProp && componentStart[tweenProp] ) {
|
||||
startValues[tweenProp] = componentStart[tweenCategory].call(this,tweenProp,this.valuesStart[tweenProp]);
|
||||
} else if ( supportedProperties[component].includes(tweenProp) ) {
|
||||
} else if ( supportedProperties[component] && supportedProperties[component].includes(tweenProp) ) {
|
||||
startValues[tweenProp] = componentStart[tweenCategory].call(this,tweenProp,this.valuesStart[tweenProp]);
|
||||
}
|
||||
}
|
||||
|
|
@ -166,28 +144,7 @@
|
|||
this.valuesStart = {};
|
||||
prepareObject.call(this,startValues,'start');
|
||||
}
|
||||
function prepareObject (obj, fn) {
|
||||
var propertiesObject = fn === 'start' ? this.valuesStart : this.valuesEnd;
|
||||
for ( var component in prepareProperty ) {
|
||||
var prepareComponent = prepareProperty[component];
|
||||
var supportComponent = supportedProperties[component];
|
||||
for ( var tweenCategory in prepareComponent ) {
|
||||
var transformObject = {};
|
||||
for (var tweenProp in obj) {
|
||||
if ( defaultValues[tweenProp] && prepareComponent[tweenProp] ) {
|
||||
propertiesObject[tweenProp] = prepareComponent[tweenProp].call(this,tweenProp,obj[tweenProp]);
|
||||
} else if ( !defaultValues[tweenCategory] && tweenCategory === 'transform' && supportComponent.includes(tweenProp) ) {
|
||||
transformObject[tweenProp] = obj[tweenProp];
|
||||
} else if ( !defaultValues[tweenCategory] && supportComponent.includes(tweenProp) ) {
|
||||
propertiesObject[tweenProp] = prepareComponent[tweenCategory].call(this,tweenProp,obj[tweenProp]);
|
||||
}
|
||||
}
|
||||
if (Object.keys && Object.keys(transformObject).length){
|
||||
propertiesObject[tweenCategory] = prepareComponent[tweenCategory].call(this,tweenCategory,transformObject);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
var Process = {
|
||||
getInlineStyle: getInlineStyle,
|
||||
getStyleForProperty: getStyleForProperty,
|
||||
|
|
@ -195,28 +152,25 @@
|
|||
prepareObject: prepareObject
|
||||
};
|
||||
|
||||
var globalObject = typeof (global) !== 'undefined' ? global
|
||||
: typeof(self) !== 'undefined' ? self
|
||||
: typeof(window) !== 'undefined' ? window : {};
|
||||
var TweenConstructor = {};
|
||||
var Tweens = [];
|
||||
|
||||
function add (tw) { return Tweens.push(tw); }
|
||||
|
||||
function remove (tw) {
|
||||
var i = Tweens.indexOf(tw);
|
||||
i !== -1 && Tweens.splice(i, 1);
|
||||
}
|
||||
|
||||
function getAll () { return Tweens; }
|
||||
|
||||
function removeAll () { Tweens.length = 0; }
|
||||
|
||||
var KUTE = {};
|
||||
|
||||
var add = function(tw) { Tweens.push(tw); };
|
||||
var remove = function(tw) { var i = Tweens.indexOf(tw); if (i !== -1) { Tweens.splice(i, 1); }};
|
||||
var getAll = function() { return Tweens };
|
||||
var removeAll = function() { Tweens.length = 0; };
|
||||
var Tick = 0;
|
||||
function Ticker(time) {
|
||||
var i = 0;
|
||||
while ( i < Tweens.length ) {
|
||||
if ( Tweens[i].update(time) ) {
|
||||
i++;
|
||||
} else {
|
||||
Tweens.splice(i, 1);
|
||||
}
|
||||
}
|
||||
Tick = requestAnimationFrame(Ticker);
|
||||
}
|
||||
var globalObject = typeof (global) !== 'undefined' ? global
|
||||
: typeof(self) !== 'undefined' ? self
|
||||
: typeof(window) !== 'undefined' ? window : {};
|
||||
|
||||
var Time = {};
|
||||
if (typeof (self) === 'undefined' && typeof (process) !== 'undefined' && process.hrtime) {
|
||||
Time.now = function () {
|
||||
|
|
@ -228,7 +182,19 @@
|
|||
self.performance.now !== undefined) {
|
||||
Time.now = self.performance.now.bind(self.performance);
|
||||
}
|
||||
function stop () {
|
||||
var Tick = 0;
|
||||
var Ticker = function (time) {
|
||||
var i = 0;
|
||||
while ( i < Tweens.length ) {
|
||||
if ( Tweens[i].update(time) ) {
|
||||
i++;
|
||||
} else {
|
||||
Tweens.splice(i, 1);
|
||||
}
|
||||
}
|
||||
Tick = requestAnimationFrame(Ticker);
|
||||
};
|
||||
function stop() {
|
||||
setTimeout(function () {
|
||||
if (!Tweens.length && Tick) {
|
||||
cancelAnimationFrame(Tick);
|
||||
|
|
@ -248,15 +214,23 @@
|
|||
}
|
||||
},64);
|
||||
}
|
||||
function linkInterpolation(){
|
||||
var Render = {Tick: Tick,Ticker: Ticker,Tweens: Tweens,Time: Time};
|
||||
for ( var blob in Render ) {
|
||||
if (!KUTE[blob]) {
|
||||
KUTE[blob] = blob === 'Time' ? Time.now : Render[blob];
|
||||
}
|
||||
}
|
||||
globalObject["_KUTE"] = KUTE;
|
||||
|
||||
function linkInterpolation() {
|
||||
var this$1 = this;
|
||||
var loop = function ( component ) {
|
||||
var componentLink = linkProperty[component];
|
||||
var componentProps = supportedProperties[component];
|
||||
for ( var fnObj in componentLink ) {
|
||||
if ( typeof(componentLink[fnObj]) === 'function'
|
||||
&& Object.keys(this$1.valuesEnd).some(function (i) { return componentProps.includes(i)
|
||||
|| i=== 'attr' && Object.keys(this$1.valuesEnd[i]).some(function (j) { return componentProps.includes(j); }); } ) )
|
||||
&& Object.keys(this$1.valuesEnd).some(function (i) { return componentProps && componentProps.includes(i)
|
||||
|| i=== 'attr' && Object.keys(this$1.valuesEnd[i]).some(function (j) { return componentProps && componentProps.includes(j); }); } ) )
|
||||
{
|
||||
!KUTE[fnObj] && (KUTE[fnObj] = componentLink[fnObj]);
|
||||
} else {
|
||||
|
|
@ -278,13 +252,7 @@
|
|||
};
|
||||
for (var component in linkProperty)loop( component );
|
||||
}
|
||||
var Render = {Tick: Tick,Ticker: Ticker,Tweens: Tweens,Time: Time};
|
||||
for (var blob in Render ) {
|
||||
if (!KUTE[blob]) {
|
||||
KUTE[blob] = blob === 'Time' ? Time.now : Render[blob];
|
||||
}
|
||||
}
|
||||
globalObject["_KUTE"] = KUTE;
|
||||
|
||||
var Internals = {
|
||||
add: add,
|
||||
remove: remove,
|
||||
|
|
@ -406,6 +374,8 @@
|
|||
}
|
||||
}
|
||||
|
||||
var TweenConstructor = {};
|
||||
|
||||
var TweenBase = function TweenBase(targetElement, startObject, endObject, options){
|
||||
this.element = targetElement;
|
||||
this.playing = false;
|
||||
|
|
@ -809,15 +779,19 @@
|
|||
optionsObj.resetStart = endObject;
|
||||
return new TC(selector(element), endObject, endObject, optionsObj)
|
||||
}
|
||||
|
||||
var TC$1 = TweenConstructor.Tween;
|
||||
function fromTo(element, startObject, endObject, optionsObj) {
|
||||
optionsObj = optionsObj || {};
|
||||
return new TC(selector(element), startObject, endObject, optionsObj)
|
||||
return new TC$1(selector(element), startObject, endObject, optionsObj)
|
||||
}
|
||||
|
||||
function allTo(elements, endObject, optionsObj) {
|
||||
optionsObj = optionsObj || {};
|
||||
optionsObj.resetStart = endObject;
|
||||
return new TweenCollection(selector(elements,true), endObject, endObject, optionsObj)
|
||||
}
|
||||
|
||||
function allFromTo(elements, startObject, endObject, optionsObj) {
|
||||
optionsObj = optionsObj || {};
|
||||
return new TweenCollection(selector(elements,true), startObject, endObject, optionsObj)
|
||||
|
|
@ -976,6 +950,19 @@
|
|||
return AnimationDevelopment;
|
||||
}(Animation));
|
||||
|
||||
function trueDimension (dimValue, isAngle) {
|
||||
var intValue = parseInt(dimValue) || 0;
|
||||
var mUnits = ['px','%','deg','rad','em','rem','vh','vw'];
|
||||
var theUnit;
|
||||
for (var mIndex=0; mIndex<mUnits.length; mIndex++) {
|
||||
if ( typeof dimValue === 'string' && dimValue.includes(mUnits[mIndex]) ) {
|
||||
theUnit = mUnits[mIndex]; break;
|
||||
}
|
||||
}
|
||||
theUnit = theUnit !== undefined ? theUnit : (isAngle ? 'deg' : 'px');
|
||||
return { v: intValue, u: theUnit };
|
||||
}
|
||||
|
||||
function getBgPos(prop){
|
||||
return getStyleForProperty(this.element,prop) || defaultValues[prop];
|
||||
}
|
||||
|
|
@ -1011,6 +998,7 @@
|
|||
functions: bgPositionFunctions,
|
||||
Util: {trueDimension: trueDimension}
|
||||
};
|
||||
Components.BackgroundPositionProperty = bgPosOps;
|
||||
|
||||
var radiusProps = ['borderRadius', 'borderTopLeftRadius', 'borderTopRightRadius', 'borderBottomLeftRadius', 'borderBottomRightRadius'];
|
||||
var radiusValues = {};
|
||||
|
|
@ -1046,6 +1034,7 @@
|
|||
functions: radiusFunctions,
|
||||
Util: {trueDimension: trueDimension}
|
||||
};
|
||||
Components.BorderRadiusProperties = radiusOps;
|
||||
|
||||
var boxModelProperties = ['top', 'left', 'width', 'height', 'right', 'bottom', 'minWidth', 'minHeight', 'maxWidth', 'maxHeight',
|
||||
'padding', 'paddingTop','paddingBottom', 'paddingLeft', 'paddingRight',
|
||||
|
|
@ -1082,6 +1071,7 @@
|
|||
Interpolate: {numbers: numbers},
|
||||
functions: boxModelFunctions
|
||||
};
|
||||
Components.BoxModelProperties = boxModelOps;
|
||||
|
||||
function getClip(tweenProp,v){
|
||||
var currentClip = getStyleForProperty(this.element,tweenProp),
|
||||
|
|
@ -1123,6 +1113,38 @@
|
|||
functions: clipFunctions,
|
||||
Util: {trueDimension: trueDimension}
|
||||
};
|
||||
Components.ClipProperty = clipOps;
|
||||
|
||||
function hexToRGB (hex) {
|
||||
var hexShorthand = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
|
||||
hex = hex.replace(hexShorthand, function (m, r, g, b) { return r + r + g + g + b + b; });
|
||||
var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
|
||||
return result ? {
|
||||
r: parseInt(result[1], 16),
|
||||
g: parseInt(result[2], 16),
|
||||
b: parseInt(result[3], 16)
|
||||
} : null;
|
||||
}
|
||||
|
||||
function trueColor (colorString) {
|
||||
if (/rgb|rgba/.test(colorString)) {
|
||||
var vrgb = colorString.replace(/\s|\)/,'').split('(')[1].split(',');
|
||||
var colorAlpha = vrgb[3] ? vrgb[3] : null;
|
||||
if (!colorAlpha) {
|
||||
return { r: parseInt(vrgb[0]), g: parseInt(vrgb[1]), b: parseInt(vrgb[2]) };
|
||||
} else {
|
||||
return { r: parseInt(vrgb[0]), g: parseInt(vrgb[1]), b: parseInt(vrgb[2]), a: parseFloat(colorAlpha) };
|
||||
}
|
||||
} else if (/^#/.test(colorString)) {
|
||||
var fromHex = hexToRGB(colorString); return { r: fromHex.r, g: fromHex.g, b: fromHex.b };
|
||||
} else if (/transparent|none|initial|inherit/.test(colorString)) {
|
||||
return { r: 0, g: 0, b: 0, a: 0 };
|
||||
} else if (!/^#|^rgb/.test(colorString) ) {
|
||||
var siteHead = document.getElementsByTagName('head')[0]; siteHead.style.color = colorString;
|
||||
var webColor = getComputedStyle(siteHead,null).color; webColor = /rgb/.test(webColor) ? webColor.replace(/[^\d,]/g, '').split(',') : [0,0,0];
|
||||
siteHead.style.color = ''; return { r: parseInt(webColor[0]), g: parseInt(webColor[1]), b: parseInt(webColor[2]) };
|
||||
}
|
||||
}
|
||||
|
||||
function colors(a, b, v) {
|
||||
var _c = {},
|
||||
|
|
@ -1168,6 +1190,7 @@
|
|||
functions: colorsFunctions,
|
||||
Util: {trueColor: trueColor}
|
||||
};
|
||||
Components.ColorProperties = colorsOps;
|
||||
|
||||
var ComponentName = 'htmlAttributes';
|
||||
var svgColors = ['fill','stroke','stop-color'];
|
||||
|
|
@ -1254,6 +1277,7 @@
|
|||
functions: attrFunctions,
|
||||
Util: { replaceUppercase: replaceUppercase, trueColor: trueColor, trueDimension: trueDimension }
|
||||
};
|
||||
Components.HTMLAttributes = attrOps;
|
||||
|
||||
function dropShadow(a,b,v){
|
||||
var params = [], unit = 'px';
|
||||
|
|
@ -1377,6 +1401,7 @@
|
|||
functions: filterFunctions,
|
||||
Util: {parseDropShadow: parseDropShadow,parseFilterString: parseFilterString,replaceDashNamespace: replaceDashNamespace,trueColor: trueColor}
|
||||
};
|
||||
Components.FilterEffects = filterOps;
|
||||
|
||||
function getOpacity(tweenProp){
|
||||
return getStyleForProperty(this.element,tweenProp)
|
||||
|
|
@ -1403,6 +1428,7 @@
|
|||
Interpolate: {numbers: numbers},
|
||||
functions: opacityFunctions
|
||||
};
|
||||
Components.OpacityProperty = opacityOps;
|
||||
|
||||
var percent = function (v, l) { return parseFloat(v) / 100 * l; };
|
||||
var getRectLength = function (el) {
|
||||
|
|
@ -1522,6 +1548,7 @@
|
|||
percent: percent
|
||||
}
|
||||
};
|
||||
Components.SVGDraw = svgDrawOps;
|
||||
|
||||
var INVALID_INPUT = 'Invalid path value';
|
||||
function catmullRom2bezier(crp, z) {
|
||||
|
|
@ -2113,6 +2140,7 @@
|
|||
getRotationSegments: getRotationSegments, reverseCurve: reverseCurve, getSegments: getSegments, createPath: createPath
|
||||
}
|
||||
};
|
||||
Components.SVGCubicMorph = svgCubicMorphOps;
|
||||
|
||||
function parseStringOrigin (origin, ref) {
|
||||
var x = ref.x;
|
||||
|
|
@ -2237,6 +2265,7 @@
|
|||
functions: svgTransformFunctions,
|
||||
Util: { parseStringOrigin: parseStringOrigin, parseTransformString: parseTransformString, parseTransformSVG: parseTransformSVG }
|
||||
};
|
||||
Components.SVGTransformProperty = svgTransformOps;
|
||||
|
||||
function on (element, event, handler, options) {
|
||||
options = options || false;
|
||||
|
|
@ -2272,9 +2301,10 @@
|
|||
|
||||
var mouseHoverEvents = ('onmouseleave' in document) ? [ 'mouseenter', 'mouseleave'] : [ 'mouseover', 'mouseout' ];
|
||||
|
||||
var canTouch = ('ontouchstart' in window || navigator && navigator.msMaxTouchPoints) || false;
|
||||
var touchOrWheel = canTouch ? 'touchstart' : 'mousewheel';
|
||||
var scrollContainer = navigator && /(EDGE|Mac)/i.test(navigator.userAgent) ? document.body : document.getElementsByTagName('HTML')[0];
|
||||
var supportTouch = ('ontouchstart' in window || navigator.msMaxTouchPoints)||false;
|
||||
|
||||
var touchOrWheel = supportTouch ? 'touchstart' : 'mousewheel';
|
||||
var scrollContainer = navigator && /(EDGE|Mac)/i.test(navigator.userAgent) ? document.body : document.documentElement;
|
||||
var passiveHandler = supportPassive ? { passive: false } : false;
|
||||
function preventScroll(e) {
|
||||
this.scrolling && e.preventDefault();
|
||||
|
|
@ -2333,6 +2363,7 @@
|
|||
functions: scrollFunctions,
|
||||
Util: { preventScroll: preventScroll, scrollIn: scrollIn, scrollOut: scrollOut, scrollContainer: scrollContainer, passiveHandler: passiveHandler, getScrollTargets: getScrollTargets }
|
||||
};
|
||||
Components.ScrollProperty = scrollOps;
|
||||
|
||||
var shadowProps = ['boxShadow','textShadow'];
|
||||
function processShadowArray (shadow,tweenProp){
|
||||
|
|
@ -2400,6 +2431,7 @@
|
|||
functions: shadowFunctions,
|
||||
Util: { processShadowArray: processShadowArray, trueColor: trueColor }
|
||||
};
|
||||
Components.ShadowProperties = shadowOps;
|
||||
|
||||
var textProperties = ['fontSize','lineHeight','letterSpacing','wordSpacing'];
|
||||
var textOnStart = {};
|
||||
|
|
@ -2433,6 +2465,7 @@
|
|||
functions: textPropFunctions,
|
||||
Util: {trueDimension: trueDimension}
|
||||
};
|
||||
Components.TextProperties = textOps;
|
||||
|
||||
function wrapContentsSpan(el,classNAME){
|
||||
var textWriteWrapper;
|
||||
|
|
@ -2600,6 +2633,7 @@
|
|||
functions: textWriteFunctions,
|
||||
Util: { charSet: charSet, createTextTweens: createTextTweens }
|
||||
};
|
||||
Components.TextWriteProperties = textWriteOps;
|
||||
|
||||
var componentName = 'transformMatrix';
|
||||
var CSS3Matrix = typeof(DOMMatrix) !== 'undefined' ? DOMMatrix
|
||||
|
|
@ -2724,43 +2758,15 @@
|
|||
scale3d: arrays
|
||||
}
|
||||
};
|
||||
Components.TransformMatrix = matrixTransformOps;
|
||||
|
||||
var BackgroundPosition = new AnimationDevelopment(bgPosOps);
|
||||
var BorderRadius = new AnimationDevelopment(radiusOps);
|
||||
var BoxModel = new AnimationDevelopment(boxModelOps);
|
||||
var ColorProperties = new AnimationDevelopment(colorsOps);
|
||||
var ClipProperty = new AnimationDevelopment(clipOps);
|
||||
var FilterEffects = new AnimationDevelopment(filterOps);
|
||||
var HTMLAttributes = new AnimationDevelopment(attrOps);
|
||||
var OpacityProperty = new AnimationDevelopment(opacityOps);
|
||||
var TextProperties = new AnimationDevelopment(textOps);
|
||||
var TextWrite = new AnimationDevelopment(textWriteOps);
|
||||
var TransformMatrix = new AnimationDevelopment(matrixTransformOps);
|
||||
var ScrollProperty = new AnimationDevelopment(scrollOps);
|
||||
var ShadowProperties = new AnimationDevelopment(shadowOps);
|
||||
var SVGCubicMorph = new AnimationDevelopment(svgCubicMorphOps);
|
||||
var SVGDraw = new AnimationDevelopment(svgDrawOps);
|
||||
var SVGTransform = new AnimationDevelopment(svgTransformOps);
|
||||
for (var component in Components) {
|
||||
var compOps = Components[component];
|
||||
Components[component] = new AnimationDevelopment(compOps);
|
||||
}
|
||||
var indexExtra = {
|
||||
Animation: AnimationDevelopment,
|
||||
Components: {
|
||||
BackgroundPosition: BackgroundPosition,
|
||||
BorderRadius: BorderRadius,
|
||||
BoxModel: BoxModel,
|
||||
ColorProperties: ColorProperties,
|
||||
ClipProperty: ClipProperty,
|
||||
FilterEffects: FilterEffects,
|
||||
HTMLAttributes: HTMLAttributes,
|
||||
OpacityProperty: OpacityProperty,
|
||||
TextProperties: TextProperties,
|
||||
TextWrite: TextWrite,
|
||||
TransformMatrix: TransformMatrix,
|
||||
ScrollProperty: ScrollProperty,
|
||||
ShadowProperties: ShadowProperties,
|
||||
SVGCubicMorph: SVGCubicMorph,
|
||||
SVGDraw: SVGDraw,
|
||||
SVGTransform: SVGTransform
|
||||
},
|
||||
Components: Components,
|
||||
TweenExtra: TweenExtra,
|
||||
fromTo: fromTo,
|
||||
to: to,
|
||||
|
|
|
|||
4
demo/src/kute-extra.min.js
vendored
4
demo/src/kute-extra.min.js
vendored
File diff suppressed because one or more lines are too long
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
2
demo/src/polyfill.min.js
vendored
2
demo/src/polyfill.min.js
vendored
|
|
@ -1,2 +1,2 @@
|
|||
"use strict";
|
||||
if(window.addEventListener&&Window.prototype.addEventListener||(window.addEventListener=Window.prototype.addEventListener=Document.prototype.addEventListener=Element.prototype.addEventListener=function(){var e=this,t=arguments[0],n=arguments[1];e._events||(e._events={}),e._events[t]||(e._events[t]=function(t){var n,o=e._events[t.type].list,i=o.slice(),r=-1,a=i.length;for(t.preventDefault=function(){!1!==t.cancelable&&(t.returnValue=!1)},t.stopPropagation=function(){t.cancelBubble=!0},t.stopImmediatePropagation=function(){t.cancelBubble=!0,t.cancelImmediate=!0},t.currentTarget=e,t.relatedTarget=t.fromElement||null,t.target=t.target||t.srcElement||e,t.timeStamp=(new Date).getTime(),t.clientX&&(t.pageX=t.clientX+document.documentElement.scrollLeft,t.pageY=t.clientY+document.documentElement.scrollTop);++r<a&&!t.cancelImmediate;)r in i&&(n=i[r],-1!==o.indexOf(n)&&"function"==typeof n&&n.call(e,t))},e._events[t].list=[],e.attachEvent&&e.attachEvent("on"+t,e._events[t])),e._events[t].list.push(n)},window.removeEventListener=Window.prototype.removeEventListener=Document.prototype.removeEventListener=Element.prototype.removeEventListener=function(){var e,t=this,n=arguments[0],o=arguments[1];t._events&&t._events[n]&&t._events[n].list&&-1!==(e=t._events[n].list.indexOf(o))&&(t._events[n].list.splice(e,1),t._events[n].list.length||(t.detachEvent&&t.detachEvent("on"+n,t._events[n]),delete t._events[n]))}),Date.now||(Date.now=function(){return(new Date).getTime()}),window.performance||(window.performance={}),!window.performance.now){var e=Date.now();window.performance.now=function(){return Date.now()-e}}if(!window.requestAnimationFrame){var t=Date.now();window.requestAnimationFrame=function(e){if("function"!=typeof e)throw new TypeError(e+"is not a function");var n=Date.now(),o=16+t-n;return o<0&&(o=0),t=n,setTimeout((function(){t=Date.now(),e(performance.now())}),o)},window.cancelAnimationFrame=function(e){clearTimeout(e)}}
|
||||
var r,t,n,e;Array.from||(Array.from=(r=Object.prototype.toString,t=function(t){return"function"==typeof t||"[object Function]"===r.call(t)},n=Math.pow(2,53)-1,e=function(r){var t=function(r){var t=Number(r);return isNaN(t)?0:0!==t&&isFinite(t)?(t>0?1:-1)*Math.floor(Math.abs(t)):t}(r);return Math.min(Math.max(t,0),n)},function(r){var n=this,o=Object(r);if(null==r)throw new TypeError("Array.from requires an array-like object - not null or undefined");var i,a=arguments.length>1?arguments[1]:void 0;if(void 0!==a){if(!t(a))throw new TypeError("Array.from: when provided, the second argument must be a function");arguments.length>2&&(i=arguments[2])}for(var u,f=e(o.length),c=t(n)?Object(new n(f)):new Array(f),p=0;p<f;)u=o[p],c[p]=a?void 0===i?a(u,p):a.call(i,u,p):u,p+=1;return c.length=f,c})),Array.prototype.includes||(Array.prototype.includes=function(r){var t=Object(this),n=parseInt(t.length)||0;if(0===n)return!1;var e,o,i=parseInt(arguments[1])||0;for(i>=0?e=i:(e=n+i)<0&&(e=0);e<n;){if(r===(o=t[e])||r!=r&&o!=o)return!0;e++}return!1}),String.prototype.includes||(String.prototype.includes=function(r,t){if(r instanceof RegExp)throw TypeError("first argument must not be a RegExp");return void 0===t&&(t=0),-1!==this.indexOf(r,t)});
|
||||
|
|
|
|||
|
|
@ -380,7 +380,7 @@ KUTE.fromTo(element,
|
|||
<!-- Placed at the end of the document so the pages load faster -->
|
||||
|
||||
<script src="./src/polyfill.min.js"></script>
|
||||
<script src="./src/kute-extra.min.js"></script>
|
||||
<script src="./src/kute-extra.js"></script>
|
||||
<script src="./assets/js/prism.js"></script>
|
||||
<script src="./assets/js/scripts.js"></script>
|
||||
<script src="./assets/js/svgTransform.js"></script>
|
||||
|
|
|
|||
|
|
@ -233,18 +233,6 @@ tweenObjects.start();
|
|||
<li>For a full code review, check out the <a href="./assets/js/textWrite.js">./assets/js/textWrite.js</a> example source code.</li>
|
||||
</ul>
|
||||
|
||||
<ul id="share">
|
||||
<li>
|
||||
<a class="facebook-link" target="_blank" href="https://www.facebook.com/sharer/sharer.php?u=http://thednp.github.io/kute.js/index.html" title="Share KUTE.js on Facebook">
|
||||
<svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024"><path class="icon-demo" d="M1008 511.996c0 247.56-181.381 452.76-418.5 490v-346.62h115.561l22-143.381h-137.561v-93.1c0-39.221 19.221-77.461 80.82-77.461h62.561v-122s-56.762-9.68-111.041-9.68c-113.34 0-187.34 68.66-187.34 192.961v109.279h-126v143.381h126v346.62c-237.12-37.24-418.5-242.44-418.5-490 0-274 222-496 496-496s496 222 496 496z" fill="currentColor"></path></svg>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="twitter-link" target="_blank" href="https://twitter.com/intent/tweet?text=Spread the word about %23KUTEJS animation engine by @dnp_theme and download here http://thednp.github.io/kute.js/index.html" title="Share KUTE.js on Twitter">
|
||||
<svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024"><path class="icon-demo" d="M886.579 306.995c0.41 8.294 0.563 16.691 0.563 24.986 0 255.488-194.406 549.99-549.888 549.99-109.21 0-210.739-32-296.294-86.886 15.155 1.792 30.515 2.714 46.08 2.714 90.624 0 173.926-30.925 240.026-82.688-84.531-1.587-155.955-57.395-180.531-134.195 11.776 2.202 23.91 3.379 36.352 3.379 17.664 0 34.765-2.304 50.944-6.707-88.422-17.818-155.034-95.898-155.034-189.594 0-0.819 0-1.587 0-2.406 26.061 14.49 55.91 23.194 87.552 24.218-51.866-34.714-86.016-93.798-86.016-160.922 0-35.379 9.523-68.608 26.214-97.178 95.283 116.992 237.773 193.894 398.387 201.984-3.277-14.182-4.966-28.877-4.966-44.083 0-106.701 86.477-193.178 193.229-193.178 55.603 0 105.83 23.398 141.107 60.979 43.981-8.704 85.35-24.781 122.726-46.899-14.438 45.107-45.107 82.995-84.992 106.906 39.117-4.71 76.288-15.002 111.002-30.413-25.907 38.81-58.675 72.806-96.461 99.994z" fill="currentColor"></path></svg>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- FOOTER -->
|
||||
|
|
|
|||
296
dist/kute.esm.js
vendored
296
dist/kute.esm.js
vendored
|
|
@ -1,30 +1,40 @@
|
|||
/*!
|
||||
* KUTE.js Standard v2.0.0 (http://thednp.github.io/kute.js)
|
||||
* KUTE.js Standard v2.0.1 (http://thednp.github.io/kute.js)
|
||||
* Copyright 2015-2020 © thednp
|
||||
* Licensed under MIT (https://github.com/thednp/kute.js/blob/master/LICENSE)
|
||||
*/
|
||||
var version = "2.0.0";
|
||||
var version = "2.0.1";
|
||||
|
||||
var Util = {};
|
||||
|
||||
var Tweens = [];
|
||||
var Components = {};
|
||||
|
||||
var supportedProperties = {};
|
||||
|
||||
var defaultValues = {};
|
||||
|
||||
var defaultOptions = {
|
||||
duration: 700,
|
||||
delay: 0,
|
||||
easing: 'linear'
|
||||
};
|
||||
var prepareStart = {};
|
||||
|
||||
var prepareProperty = {};
|
||||
|
||||
var prepareStart = {};
|
||||
|
||||
var crossCheck = {};
|
||||
var onComplete = {};
|
||||
|
||||
var onStart = {};
|
||||
|
||||
var onComplete = {};
|
||||
|
||||
var linkProperty = {};
|
||||
var Util = {};
|
||||
|
||||
var Objects = {
|
||||
supportedProperties: supportedProperties,
|
||||
defaultOptions: defaultOptions,
|
||||
defaultValues: defaultValues,
|
||||
defaultOptions: defaultOptions,
|
||||
prepareProperty: prepareProperty,
|
||||
prepareStart: prepareStart,
|
||||
crossCheck: crossCheck,
|
||||
|
|
@ -33,92 +43,59 @@ var Objects = {
|
|||
linkProperty: linkProperty
|
||||
};
|
||||
|
||||
function getPrefix() {
|
||||
var prefixes = ['Moz', 'moz', 'Webkit', 'webkit', 'O', 'o', 'Ms', 'ms'];
|
||||
var thePrefix;
|
||||
for (var i = 0, pfl = prefixes.length; i < pfl; i++) {
|
||||
if (((prefixes[i]) + "Transform") in document.body.style) { thePrefix = prefixes[i]; break; }
|
||||
}
|
||||
return thePrefix;
|
||||
}
|
||||
function trueProperty(property) {
|
||||
var prefixRequired = (!(property in document.body.style)) ? true : false;
|
||||
var prefix = getPrefix();
|
||||
return prefixRequired ? prefix + (property.charAt(0).toUpperCase() + property.slice(1)) : property;
|
||||
}
|
||||
function trueDimension(dimValue, isAngle) {
|
||||
var intValue = parseInt(dimValue) || 0;
|
||||
var mUnits = ['px','%','deg','rad','em','rem','vh','vw'];
|
||||
var theUnit;
|
||||
for (var mIndex=0; mIndex<mUnits.length; mIndex++) {
|
||||
if ( typeof dimValue === 'string' && dimValue.includes(mUnits[mIndex]) ) {
|
||||
theUnit = mUnits[mIndex]; break;
|
||||
}
|
||||
}
|
||||
theUnit = theUnit !== undefined ? theUnit : (isAngle ? 'deg' : 'px');
|
||||
return { v: intValue, u: theUnit };
|
||||
}
|
||||
function trueColor(colorString) {
|
||||
if (/rgb|rgba/.test(colorString)) {
|
||||
var vrgb = colorString.replace(/\s|\)/,'').split('(')[1].split(',');
|
||||
var colorAlpha = vrgb[3] ? vrgb[3] : null;
|
||||
if (!colorAlpha) {
|
||||
return { r: parseInt(vrgb[0]), g: parseInt(vrgb[1]), b: parseInt(vrgb[2]) };
|
||||
} else {
|
||||
return { r: parseInt(vrgb[0]), g: parseInt(vrgb[1]), b: parseInt(vrgb[2]), a: parseFloat(colorAlpha) };
|
||||
}
|
||||
} else if (/^#/.test(colorString)) {
|
||||
var fromHex = hexToRGB(colorString); return { r: fromHex.r, g: fromHex.g, b: fromHex.b };
|
||||
} else if (/transparent|none|initial|inherit/.test(colorString)) {
|
||||
return { r: 0, g: 0, b: 0, a: 0 };
|
||||
} else if (!/^#|^rgb/.test(colorString) ) {
|
||||
var siteHead = document.getElementsByTagName('head')[0]; siteHead.style.color = colorString;
|
||||
var webColor = getComputedStyle(siteHead,null).color; webColor = /rgb/.test(webColor) ? webColor.replace(/[^\d,]/g, '').split(',') : [0,0,0];
|
||||
siteHead.style.color = ''; return { r: parseInt(webColor[0]), g: parseInt(webColor[1]), b: parseInt(webColor[2]) };
|
||||
}
|
||||
}
|
||||
function hexToRGB(hex) {
|
||||
var hexShorthand = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
|
||||
hex = hex.replace(hexShorthand, function (m, r, g, b) { return r + r + g + g + b + b; });
|
||||
var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
|
||||
return result ? {
|
||||
r: parseInt(result[1], 16),
|
||||
g: parseInt(result[2], 16),
|
||||
b: parseInt(result[3], 16)
|
||||
} : null;
|
||||
}
|
||||
|
||||
function getInlineStyle(el) {
|
||||
if ( !el.style ) { return; }
|
||||
var css = el.style.cssText.replace(/\s/g,'').split(';');
|
||||
var transformObject = {};
|
||||
var arrayFn = ['translate3d','translate','scale3d','skew'];
|
||||
for ( var i=0, csl = css.length; i<csl; i++ ){
|
||||
if ( /transform/i.test(css[i])) {
|
||||
var tps = css[i].split(':')[1].split(')');
|
||||
for ( var k=0, tpl = tps.length-1; k< tpl; k++){
|
||||
var tpv = tps[k].split('(');
|
||||
var tp = tpv[0];
|
||||
var tv = tpv[1];
|
||||
var css = el.style.cssText.replace(/\s/g,'').split(';'),
|
||||
transformObject = {},
|
||||
arrayFn = ['translate3d','translate','scale3d','skew'];
|
||||
css.map(function (cs) {
|
||||
if ( /transform/i.test(cs)) {
|
||||
var tps = cs.split(':')[1].split(')');
|
||||
tps.map(function (tpi) {
|
||||
var tpv = tpi.split('('), tp = tpv[0], tv = tpv[1];
|
||||
if ( !/matrix/.test(tp) ){
|
||||
transformObject[tp] = arrayFn.includes(tp) ? tv.split(',') : tv;
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
return transformObject;
|
||||
}
|
||||
|
||||
function getStyleForProperty(elem, propertyName) {
|
||||
var styleAttribute = elem.style;
|
||||
var computedStyle = getComputedStyle(elem) || elem.currentStyle;
|
||||
var prefixedProp = trueProperty(propertyName);
|
||||
var styleValue = styleAttribute[propertyName] && !/auto|initial|none|unset/.test(styleAttribute[propertyName])
|
||||
? styleAttribute[propertyName]
|
||||
: computedStyle[prefixedProp];
|
||||
if ( propertyName !== 'transform' && (prefixedProp in computedStyle || prefixedProp in styleAttribute) ) {
|
||||
var styleAttribute = elem.style,
|
||||
computedStyle = getComputedStyle(elem) || elem.currentStyle,
|
||||
styleValue = styleAttribute[propertyName] && !/auto|initial|none|unset/.test(styleAttribute[propertyName])
|
||||
? styleAttribute[propertyName]
|
||||
: computedStyle[propertyName];
|
||||
if ( propertyName !== 'transform' && (propertyName in computedStyle || propertyName in styleAttribute) ) {
|
||||
return styleValue ? styleValue : defaultValues[propertyName];
|
||||
}
|
||||
}
|
||||
|
||||
function prepareObject (obj, fn) {
|
||||
var propertiesObject = fn === 'start' ? this.valuesStart : this.valuesEnd;
|
||||
for ( var component in prepareProperty ) {
|
||||
var prepareComponent = prepareProperty[component],
|
||||
supportComponent = supportedProperties[component];
|
||||
for ( var tweenCategory in prepareComponent ) {
|
||||
var transformObject = {};
|
||||
for (var tweenProp in obj) {
|
||||
if ( defaultValues[tweenProp] && prepareComponent[tweenProp] ) {
|
||||
propertiesObject[tweenProp] = prepareComponent[tweenProp].call(this,tweenProp,obj[tweenProp]);
|
||||
} else if ( !defaultValues[tweenCategory] && tweenCategory === 'transform' && supportComponent.includes(tweenProp) ) {
|
||||
transformObject[tweenProp] = obj[tweenProp];
|
||||
} else if ( !defaultValues[tweenCategory] && supportComponent && supportComponent.includes(tweenProp) ) {
|
||||
propertiesObject[tweenProp] = prepareComponent[tweenCategory].call(this,tweenProp,obj[tweenProp]);
|
||||
}
|
||||
}
|
||||
if (Object.keys && Object.keys(transformObject).length){
|
||||
propertiesObject[tweenCategory] = prepareComponent[tweenCategory].call(this,tweenCategory,transformObject);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function getStartValues () {
|
||||
var startValues = {},
|
||||
currentStyle = getInlineStyle(this.element);
|
||||
|
|
@ -128,7 +105,7 @@ function getStartValues () {
|
|||
for ( var tweenCategory in componentStart) {
|
||||
if ( tweenCategory === tweenProp && componentStart[tweenProp] ) {
|
||||
startValues[tweenProp] = componentStart[tweenCategory].call(this,tweenProp,this.valuesStart[tweenProp]);
|
||||
} else if ( supportedProperties[component].includes(tweenProp) ) {
|
||||
} else if ( supportedProperties[component] && supportedProperties[component].includes(tweenProp) ) {
|
||||
startValues[tweenProp] = componentStart[tweenCategory].call(this,tweenProp,this.valuesStart[tweenProp]);
|
||||
}
|
||||
}
|
||||
|
|
@ -142,28 +119,7 @@ function getStartValues () {
|
|||
this.valuesStart = {};
|
||||
prepareObject.call(this,startValues,'start');
|
||||
}
|
||||
function prepareObject (obj, fn) {
|
||||
var propertiesObject = fn === 'start' ? this.valuesStart : this.valuesEnd;
|
||||
for ( var component in prepareProperty ) {
|
||||
var prepareComponent = prepareProperty[component];
|
||||
var supportComponent = supportedProperties[component];
|
||||
for ( var tweenCategory in prepareComponent ) {
|
||||
var transformObject = {};
|
||||
for (var tweenProp in obj) {
|
||||
if ( defaultValues[tweenProp] && prepareComponent[tweenProp] ) {
|
||||
propertiesObject[tweenProp] = prepareComponent[tweenProp].call(this,tweenProp,obj[tweenProp]);
|
||||
} else if ( !defaultValues[tweenCategory] && tweenCategory === 'transform' && supportComponent.includes(tweenProp) ) {
|
||||
transformObject[tweenProp] = obj[tweenProp];
|
||||
} else if ( !defaultValues[tweenCategory] && supportComponent.includes(tweenProp) ) {
|
||||
propertiesObject[tweenProp] = prepareComponent[tweenCategory].call(this,tweenProp,obj[tweenProp]);
|
||||
}
|
||||
}
|
||||
if (Object.keys && Object.keys(transformObject).length){
|
||||
propertiesObject[tweenCategory] = prepareComponent[tweenCategory].call(this,tweenCategory,transformObject);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
var Process = {
|
||||
getInlineStyle: getInlineStyle,
|
||||
getStyleForProperty: getStyleForProperty,
|
||||
|
|
@ -171,12 +127,25 @@ var Process = {
|
|||
prepareObject: prepareObject
|
||||
};
|
||||
|
||||
var globalObject = typeof (global) !== 'undefined' ? global
|
||||
: typeof(self) !== 'undefined' ? self
|
||||
: typeof(window) !== 'undefined' ? window : {};
|
||||
var TweenConstructor = {};
|
||||
var Tweens = [];
|
||||
|
||||
function add (tw) { return Tweens.push(tw); }
|
||||
|
||||
function remove (tw) {
|
||||
var i = Tweens.indexOf(tw);
|
||||
i !== -1 && Tweens.splice(i, 1);
|
||||
}
|
||||
|
||||
function getAll () { return Tweens; }
|
||||
|
||||
function removeAll () { Tweens.length = 0; }
|
||||
|
||||
var KUTE = {};
|
||||
|
||||
var globalObject = typeof (global) !== 'undefined' ? global
|
||||
: typeof(self) !== 'undefined' ? self
|
||||
: typeof(window) !== 'undefined' ? window : {};
|
||||
|
||||
function numbers(a, b, v) {
|
||||
a = +a; b -= a; return a + b * v;
|
||||
}
|
||||
|
|
@ -196,22 +165,6 @@ var Interpolate = {
|
|||
arrays: arrays
|
||||
};
|
||||
|
||||
var add = function(tw) { Tweens.push(tw); };
|
||||
var remove = function(tw) { var i = Tweens.indexOf(tw); if (i !== -1) { Tweens.splice(i, 1); }};
|
||||
var getAll = function() { return Tweens };
|
||||
var removeAll = function() { Tweens.length = 0; };
|
||||
var Tick = 0;
|
||||
function Ticker(time) {
|
||||
var i = 0;
|
||||
while ( i < Tweens.length ) {
|
||||
if ( Tweens[i].update(time) ) {
|
||||
i++;
|
||||
} else {
|
||||
Tweens.splice(i, 1);
|
||||
}
|
||||
}
|
||||
Tick = requestAnimationFrame(Ticker);
|
||||
}
|
||||
var Time = {};
|
||||
if (typeof (self) === 'undefined' && typeof (process) !== 'undefined' && process.hrtime) {
|
||||
Time.now = function () {
|
||||
|
|
@ -223,7 +176,19 @@ if (typeof (self) === 'undefined' && typeof (process) !== 'undefined' && process
|
|||
self.performance.now !== undefined) {
|
||||
Time.now = self.performance.now.bind(self.performance);
|
||||
}
|
||||
function stop () {
|
||||
var Tick = 0;
|
||||
var Ticker = function (time) {
|
||||
var i = 0;
|
||||
while ( i < Tweens.length ) {
|
||||
if ( Tweens[i].update(time) ) {
|
||||
i++;
|
||||
} else {
|
||||
Tweens.splice(i, 1);
|
||||
}
|
||||
}
|
||||
Tick = requestAnimationFrame(Ticker);
|
||||
};
|
||||
function stop() {
|
||||
setTimeout(function () {
|
||||
if (!Tweens.length && Tick) {
|
||||
cancelAnimationFrame(Tick);
|
||||
|
|
@ -243,15 +208,23 @@ function stop () {
|
|||
}
|
||||
},64);
|
||||
}
|
||||
function linkInterpolation(){
|
||||
var Render = {Tick: Tick,Ticker: Ticker,Tweens: Tweens,Time: Time};
|
||||
for ( var blob in Render ) {
|
||||
if (!KUTE[blob]) {
|
||||
KUTE[blob] = blob === 'Time' ? Time.now : Render[blob];
|
||||
}
|
||||
}
|
||||
globalObject["_KUTE"] = KUTE;
|
||||
|
||||
function linkInterpolation() {
|
||||
var this$1 = this;
|
||||
var loop = function ( component ) {
|
||||
var componentLink = linkProperty[component];
|
||||
var componentProps = supportedProperties[component];
|
||||
for ( var fnObj in componentLink ) {
|
||||
if ( typeof(componentLink[fnObj]) === 'function'
|
||||
&& Object.keys(this$1.valuesEnd).some(function (i) { return componentProps.includes(i)
|
||||
|| i=== 'attr' && Object.keys(this$1.valuesEnd[i]).some(function (j) { return componentProps.includes(j); }); } ) )
|
||||
&& Object.keys(this$1.valuesEnd).some(function (i) { return componentProps && componentProps.includes(i)
|
||||
|| i=== 'attr' && Object.keys(this$1.valuesEnd[i]).some(function (j) { return componentProps && componentProps.includes(j); }); } ) )
|
||||
{
|
||||
!KUTE[fnObj] && (KUTE[fnObj] = componentLink[fnObj]);
|
||||
} else {
|
||||
|
|
@ -273,13 +246,7 @@ function linkInterpolation(){
|
|||
};
|
||||
for (var component in linkProperty)loop( component );
|
||||
}
|
||||
var Render = {Tick: Tick,Ticker: Ticker,Tweens: Tweens,Time: Time};
|
||||
for (var blob in Render ) {
|
||||
if (!KUTE[blob]) {
|
||||
KUTE[blob] = blob === 'Time' ? Time.now : Render[blob];
|
||||
}
|
||||
}
|
||||
globalObject["_KUTE"] = KUTE;
|
||||
|
||||
var Internals = {
|
||||
add: add,
|
||||
remove: remove,
|
||||
|
|
@ -401,6 +368,8 @@ function selector(el, multi) {
|
|||
}
|
||||
}
|
||||
|
||||
var TweenConstructor = {};
|
||||
|
||||
var TweenBase = function TweenBase(targetElement, startObject, endObject, options){
|
||||
this.element = targetElement;
|
||||
this.playing = false;
|
||||
|
|
@ -719,15 +688,19 @@ function to(element, endObject, optionsObj) {
|
|||
optionsObj.resetStart = endObject;
|
||||
return new TC(selector(element), endObject, endObject, optionsObj)
|
||||
}
|
||||
|
||||
var TC$1 = TweenConstructor.Tween;
|
||||
function fromTo(element, startObject, endObject, optionsObj) {
|
||||
optionsObj = optionsObj || {};
|
||||
return new TC(selector(element), startObject, endObject, optionsObj)
|
||||
return new TC$1(selector(element), startObject, endObject, optionsObj)
|
||||
}
|
||||
|
||||
function allTo(elements, endObject, optionsObj) {
|
||||
optionsObj = optionsObj || {};
|
||||
optionsObj.resetStart = endObject;
|
||||
return new TweenCollection(selector(elements,true), endObject, endObject, optionsObj)
|
||||
}
|
||||
|
||||
function allFromTo(elements, startObject, endObject, optionsObj) {
|
||||
optionsObj = optionsObj || {};
|
||||
return new TweenCollection(selector(elements,true), startObject, endObject, optionsObj)
|
||||
|
|
@ -806,6 +779,19 @@ Animation.prototype.setComponent = function setComponent (Component){
|
|||
return propertyInfo
|
||||
};
|
||||
|
||||
function trueDimension (dimValue, isAngle) {
|
||||
var intValue = parseInt(dimValue) || 0;
|
||||
var mUnits = ['px','%','deg','rad','em','rem','vh','vw'];
|
||||
var theUnit;
|
||||
for (var mIndex=0; mIndex<mUnits.length; mIndex++) {
|
||||
if ( typeof dimValue === 'string' && dimValue.includes(mUnits[mIndex]) ) {
|
||||
theUnit = mUnits[mIndex]; break;
|
||||
}
|
||||
}
|
||||
theUnit = theUnit !== undefined ? theUnit : (isAngle ? 'deg' : 'px');
|
||||
return { v: intValue, u: theUnit };
|
||||
}
|
||||
|
||||
var boxModelProperties = ['top', 'left', 'width', 'height', 'right', 'bottom', 'minWidth', 'minHeight', 'maxWidth', 'maxHeight',
|
||||
'padding', 'paddingTop','paddingBottom', 'paddingLeft', 'paddingRight',
|
||||
'margin', 'marginTop','marginBottom', 'marginLeft', 'marginRight',
|
||||
|
|
@ -843,6 +829,37 @@ var boxModelOps = {
|
|||
};
|
||||
Components.BoxModelProperties = boxModelOps;
|
||||
|
||||
function hexToRGB (hex) {
|
||||
var hexShorthand = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
|
||||
hex = hex.replace(hexShorthand, function (m, r, g, b) { return r + r + g + g + b + b; });
|
||||
var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
|
||||
return result ? {
|
||||
r: parseInt(result[1], 16),
|
||||
g: parseInt(result[2], 16),
|
||||
b: parseInt(result[3], 16)
|
||||
} : null;
|
||||
}
|
||||
|
||||
function trueColor (colorString) {
|
||||
if (/rgb|rgba/.test(colorString)) {
|
||||
var vrgb = colorString.replace(/\s|\)/,'').split('(')[1].split(',');
|
||||
var colorAlpha = vrgb[3] ? vrgb[3] : null;
|
||||
if (!colorAlpha) {
|
||||
return { r: parseInt(vrgb[0]), g: parseInt(vrgb[1]), b: parseInt(vrgb[2]) };
|
||||
} else {
|
||||
return { r: parseInt(vrgb[0]), g: parseInt(vrgb[1]), b: parseInt(vrgb[2]), a: parseFloat(colorAlpha) };
|
||||
}
|
||||
} else if (/^#/.test(colorString)) {
|
||||
var fromHex = hexToRGB(colorString); return { r: fromHex.r, g: fromHex.g, b: fromHex.b };
|
||||
} else if (/transparent|none|initial|inherit/.test(colorString)) {
|
||||
return { r: 0, g: 0, b: 0, a: 0 };
|
||||
} else if (!/^#|^rgb/.test(colorString) ) {
|
||||
var siteHead = document.getElementsByTagName('head')[0]; siteHead.style.color = colorString;
|
||||
var webColor = getComputedStyle(siteHead,null).color; webColor = /rgb/.test(webColor) ? webColor.replace(/[^\d,]/g, '').split(',') : [0,0,0];
|
||||
siteHead.style.color = ''; return { r: parseInt(webColor[0]), g: parseInt(webColor[1]), b: parseInt(webColor[2]) };
|
||||
}
|
||||
}
|
||||
|
||||
function colors(a, b, v) {
|
||||
var _c = {},
|
||||
c,
|
||||
|
|
@ -1329,9 +1346,10 @@ var supportPassive = (function () {
|
|||
|
||||
var mouseHoverEvents = ('onmouseleave' in document) ? [ 'mouseenter', 'mouseleave'] : [ 'mouseover', 'mouseout' ];
|
||||
|
||||
var canTouch = ('ontouchstart' in window || navigator && navigator.msMaxTouchPoints) || false;
|
||||
var touchOrWheel = canTouch ? 'touchstart' : 'mousewheel';
|
||||
var scrollContainer = navigator && /(EDGE|Mac)/i.test(navigator.userAgent) ? document.body : document.getElementsByTagName('HTML')[0];
|
||||
var supportTouch = ('ontouchstart' in window || navigator.msMaxTouchPoints)||false;
|
||||
|
||||
var touchOrWheel = supportTouch ? 'touchstart' : 'mousewheel';
|
||||
var scrollContainer = navigator && /(EDGE|Mac)/i.test(navigator.userAgent) ? document.body : document.documentElement;
|
||||
var passiveHandler = supportPassive ? { passive: false } : false;
|
||||
function preventScroll(e) {
|
||||
this.scrolling && e.preventDefault();
|
||||
|
|
|
|||
4
dist/kute.esm.min.js
vendored
4
dist/kute.esm.min.js
vendored
File diff suppressed because one or more lines are too long
296
dist/kute.js
vendored
296
dist/kute.js
vendored
|
|
@ -1,5 +1,5 @@
|
|||
/*!
|
||||
* KUTE.js Standard v2.0.0 (http://thednp.github.io/kute.js)
|
||||
* KUTE.js Standard v2.0.1 (http://thednp.github.io/kute.js)
|
||||
* Copyright 2015-2020 © thednp
|
||||
* Licensed under MIT (https://github.com/thednp/kute.js/blob/master/LICENSE)
|
||||
*/
|
||||
|
|
@ -9,28 +9,38 @@
|
|||
(global = global || self, global.KUTE = factory());
|
||||
}(this, (function () { 'use strict';
|
||||
|
||||
var version = "2.0.0";
|
||||
var version = "2.0.1";
|
||||
|
||||
var Util = {};
|
||||
|
||||
var Tweens = [];
|
||||
var Components = {};
|
||||
|
||||
var supportedProperties = {};
|
||||
|
||||
var defaultValues = {};
|
||||
|
||||
var defaultOptions = {
|
||||
duration: 700,
|
||||
delay: 0,
|
||||
easing: 'linear'
|
||||
};
|
||||
var prepareStart = {};
|
||||
|
||||
var prepareProperty = {};
|
||||
|
||||
var prepareStart = {};
|
||||
|
||||
var crossCheck = {};
|
||||
var onComplete = {};
|
||||
|
||||
var onStart = {};
|
||||
|
||||
var onComplete = {};
|
||||
|
||||
var linkProperty = {};
|
||||
var Util = {};
|
||||
|
||||
var Objects = {
|
||||
supportedProperties: supportedProperties,
|
||||
defaultOptions: defaultOptions,
|
||||
defaultValues: defaultValues,
|
||||
defaultOptions: defaultOptions,
|
||||
prepareProperty: prepareProperty,
|
||||
prepareStart: prepareStart,
|
||||
crossCheck: crossCheck,
|
||||
|
|
@ -39,92 +49,59 @@
|
|||
linkProperty: linkProperty
|
||||
};
|
||||
|
||||
function getPrefix() {
|
||||
var prefixes = ['Moz', 'moz', 'Webkit', 'webkit', 'O', 'o', 'Ms', 'ms'];
|
||||
var thePrefix;
|
||||
for (var i = 0, pfl = prefixes.length; i < pfl; i++) {
|
||||
if (((prefixes[i]) + "Transform") in document.body.style) { thePrefix = prefixes[i]; break; }
|
||||
}
|
||||
return thePrefix;
|
||||
}
|
||||
function trueProperty(property) {
|
||||
var prefixRequired = (!(property in document.body.style)) ? true : false;
|
||||
var prefix = getPrefix();
|
||||
return prefixRequired ? prefix + (property.charAt(0).toUpperCase() + property.slice(1)) : property;
|
||||
}
|
||||
function trueDimension(dimValue, isAngle) {
|
||||
var intValue = parseInt(dimValue) || 0;
|
||||
var mUnits = ['px','%','deg','rad','em','rem','vh','vw'];
|
||||
var theUnit;
|
||||
for (var mIndex=0; mIndex<mUnits.length; mIndex++) {
|
||||
if ( typeof dimValue === 'string' && dimValue.includes(mUnits[mIndex]) ) {
|
||||
theUnit = mUnits[mIndex]; break;
|
||||
}
|
||||
}
|
||||
theUnit = theUnit !== undefined ? theUnit : (isAngle ? 'deg' : 'px');
|
||||
return { v: intValue, u: theUnit };
|
||||
}
|
||||
function trueColor(colorString) {
|
||||
if (/rgb|rgba/.test(colorString)) {
|
||||
var vrgb = colorString.replace(/\s|\)/,'').split('(')[1].split(',');
|
||||
var colorAlpha = vrgb[3] ? vrgb[3] : null;
|
||||
if (!colorAlpha) {
|
||||
return { r: parseInt(vrgb[0]), g: parseInt(vrgb[1]), b: parseInt(vrgb[2]) };
|
||||
} else {
|
||||
return { r: parseInt(vrgb[0]), g: parseInt(vrgb[1]), b: parseInt(vrgb[2]), a: parseFloat(colorAlpha) };
|
||||
}
|
||||
} else if (/^#/.test(colorString)) {
|
||||
var fromHex = hexToRGB(colorString); return { r: fromHex.r, g: fromHex.g, b: fromHex.b };
|
||||
} else if (/transparent|none|initial|inherit/.test(colorString)) {
|
||||
return { r: 0, g: 0, b: 0, a: 0 };
|
||||
} else if (!/^#|^rgb/.test(colorString) ) {
|
||||
var siteHead = document.getElementsByTagName('head')[0]; siteHead.style.color = colorString;
|
||||
var webColor = getComputedStyle(siteHead,null).color; webColor = /rgb/.test(webColor) ? webColor.replace(/[^\d,]/g, '').split(',') : [0,0,0];
|
||||
siteHead.style.color = ''; return { r: parseInt(webColor[0]), g: parseInt(webColor[1]), b: parseInt(webColor[2]) };
|
||||
}
|
||||
}
|
||||
function hexToRGB(hex) {
|
||||
var hexShorthand = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
|
||||
hex = hex.replace(hexShorthand, function (m, r, g, b) { return r + r + g + g + b + b; });
|
||||
var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
|
||||
return result ? {
|
||||
r: parseInt(result[1], 16),
|
||||
g: parseInt(result[2], 16),
|
||||
b: parseInt(result[3], 16)
|
||||
} : null;
|
||||
}
|
||||
|
||||
function getInlineStyle(el) {
|
||||
if ( !el.style ) { return; }
|
||||
var css = el.style.cssText.replace(/\s/g,'').split(';');
|
||||
var transformObject = {};
|
||||
var arrayFn = ['translate3d','translate','scale3d','skew'];
|
||||
for ( var i=0, csl = css.length; i<csl; i++ ){
|
||||
if ( /transform/i.test(css[i])) {
|
||||
var tps = css[i].split(':')[1].split(')');
|
||||
for ( var k=0, tpl = tps.length-1; k< tpl; k++){
|
||||
var tpv = tps[k].split('(');
|
||||
var tp = tpv[0];
|
||||
var tv = tpv[1];
|
||||
var css = el.style.cssText.replace(/\s/g,'').split(';'),
|
||||
transformObject = {},
|
||||
arrayFn = ['translate3d','translate','scale3d','skew'];
|
||||
css.map(function (cs) {
|
||||
if ( /transform/i.test(cs)) {
|
||||
var tps = cs.split(':')[1].split(')');
|
||||
tps.map(function (tpi) {
|
||||
var tpv = tpi.split('('), tp = tpv[0], tv = tpv[1];
|
||||
if ( !/matrix/.test(tp) ){
|
||||
transformObject[tp] = arrayFn.includes(tp) ? tv.split(',') : tv;
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
return transformObject;
|
||||
}
|
||||
|
||||
function getStyleForProperty(elem, propertyName) {
|
||||
var styleAttribute = elem.style;
|
||||
var computedStyle = getComputedStyle(elem) || elem.currentStyle;
|
||||
var prefixedProp = trueProperty(propertyName);
|
||||
var styleValue = styleAttribute[propertyName] && !/auto|initial|none|unset/.test(styleAttribute[propertyName])
|
||||
? styleAttribute[propertyName]
|
||||
: computedStyle[prefixedProp];
|
||||
if ( propertyName !== 'transform' && (prefixedProp in computedStyle || prefixedProp in styleAttribute) ) {
|
||||
var styleAttribute = elem.style,
|
||||
computedStyle = getComputedStyle(elem) || elem.currentStyle,
|
||||
styleValue = styleAttribute[propertyName] && !/auto|initial|none|unset/.test(styleAttribute[propertyName])
|
||||
? styleAttribute[propertyName]
|
||||
: computedStyle[propertyName];
|
||||
if ( propertyName !== 'transform' && (propertyName in computedStyle || propertyName in styleAttribute) ) {
|
||||
return styleValue ? styleValue : defaultValues[propertyName];
|
||||
}
|
||||
}
|
||||
|
||||
function prepareObject (obj, fn) {
|
||||
var propertiesObject = fn === 'start' ? this.valuesStart : this.valuesEnd;
|
||||
for ( var component in prepareProperty ) {
|
||||
var prepareComponent = prepareProperty[component],
|
||||
supportComponent = supportedProperties[component];
|
||||
for ( var tweenCategory in prepareComponent ) {
|
||||
var transformObject = {};
|
||||
for (var tweenProp in obj) {
|
||||
if ( defaultValues[tweenProp] && prepareComponent[tweenProp] ) {
|
||||
propertiesObject[tweenProp] = prepareComponent[tweenProp].call(this,tweenProp,obj[tweenProp]);
|
||||
} else if ( !defaultValues[tweenCategory] && tweenCategory === 'transform' && supportComponent.includes(tweenProp) ) {
|
||||
transformObject[tweenProp] = obj[tweenProp];
|
||||
} else if ( !defaultValues[tweenCategory] && supportComponent && supportComponent.includes(tweenProp) ) {
|
||||
propertiesObject[tweenProp] = prepareComponent[tweenCategory].call(this,tweenProp,obj[tweenProp]);
|
||||
}
|
||||
}
|
||||
if (Object.keys && Object.keys(transformObject).length){
|
||||
propertiesObject[tweenCategory] = prepareComponent[tweenCategory].call(this,tweenCategory,transformObject);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function getStartValues () {
|
||||
var startValues = {},
|
||||
currentStyle = getInlineStyle(this.element);
|
||||
|
|
@ -134,7 +111,7 @@
|
|||
for ( var tweenCategory in componentStart) {
|
||||
if ( tweenCategory === tweenProp && componentStart[tweenProp] ) {
|
||||
startValues[tweenProp] = componentStart[tweenCategory].call(this,tweenProp,this.valuesStart[tweenProp]);
|
||||
} else if ( supportedProperties[component].includes(tweenProp) ) {
|
||||
} else if ( supportedProperties[component] && supportedProperties[component].includes(tweenProp) ) {
|
||||
startValues[tweenProp] = componentStart[tweenCategory].call(this,tweenProp,this.valuesStart[tweenProp]);
|
||||
}
|
||||
}
|
||||
|
|
@ -148,28 +125,7 @@
|
|||
this.valuesStart = {};
|
||||
prepareObject.call(this,startValues,'start');
|
||||
}
|
||||
function prepareObject (obj, fn) {
|
||||
var propertiesObject = fn === 'start' ? this.valuesStart : this.valuesEnd;
|
||||
for ( var component in prepareProperty ) {
|
||||
var prepareComponent = prepareProperty[component];
|
||||
var supportComponent = supportedProperties[component];
|
||||
for ( var tweenCategory in prepareComponent ) {
|
||||
var transformObject = {};
|
||||
for (var tweenProp in obj) {
|
||||
if ( defaultValues[tweenProp] && prepareComponent[tweenProp] ) {
|
||||
propertiesObject[tweenProp] = prepareComponent[tweenProp].call(this,tweenProp,obj[tweenProp]);
|
||||
} else if ( !defaultValues[tweenCategory] && tweenCategory === 'transform' && supportComponent.includes(tweenProp) ) {
|
||||
transformObject[tweenProp] = obj[tweenProp];
|
||||
} else if ( !defaultValues[tweenCategory] && supportComponent.includes(tweenProp) ) {
|
||||
propertiesObject[tweenProp] = prepareComponent[tweenCategory].call(this,tweenProp,obj[tweenProp]);
|
||||
}
|
||||
}
|
||||
if (Object.keys && Object.keys(transformObject).length){
|
||||
propertiesObject[tweenCategory] = prepareComponent[tweenCategory].call(this,tweenCategory,transformObject);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
var Process = {
|
||||
getInlineStyle: getInlineStyle,
|
||||
getStyleForProperty: getStyleForProperty,
|
||||
|
|
@ -177,12 +133,25 @@
|
|||
prepareObject: prepareObject
|
||||
};
|
||||
|
||||
var globalObject = typeof (global) !== 'undefined' ? global
|
||||
: typeof(self) !== 'undefined' ? self
|
||||
: typeof(window) !== 'undefined' ? window : {};
|
||||
var TweenConstructor = {};
|
||||
var Tweens = [];
|
||||
|
||||
function add (tw) { return Tweens.push(tw); }
|
||||
|
||||
function remove (tw) {
|
||||
var i = Tweens.indexOf(tw);
|
||||
i !== -1 && Tweens.splice(i, 1);
|
||||
}
|
||||
|
||||
function getAll () { return Tweens; }
|
||||
|
||||
function removeAll () { Tweens.length = 0; }
|
||||
|
||||
var KUTE = {};
|
||||
|
||||
var globalObject = typeof (global) !== 'undefined' ? global
|
||||
: typeof(self) !== 'undefined' ? self
|
||||
: typeof(window) !== 'undefined' ? window : {};
|
||||
|
||||
function numbers(a, b, v) {
|
||||
a = +a; b -= a; return a + b * v;
|
||||
}
|
||||
|
|
@ -202,22 +171,6 @@
|
|||
arrays: arrays
|
||||
};
|
||||
|
||||
var add = function(tw) { Tweens.push(tw); };
|
||||
var remove = function(tw) { var i = Tweens.indexOf(tw); if (i !== -1) { Tweens.splice(i, 1); }};
|
||||
var getAll = function() { return Tweens };
|
||||
var removeAll = function() { Tweens.length = 0; };
|
||||
var Tick = 0;
|
||||
function Ticker(time) {
|
||||
var i = 0;
|
||||
while ( i < Tweens.length ) {
|
||||
if ( Tweens[i].update(time) ) {
|
||||
i++;
|
||||
} else {
|
||||
Tweens.splice(i, 1);
|
||||
}
|
||||
}
|
||||
Tick = requestAnimationFrame(Ticker);
|
||||
}
|
||||
var Time = {};
|
||||
if (typeof (self) === 'undefined' && typeof (process) !== 'undefined' && process.hrtime) {
|
||||
Time.now = function () {
|
||||
|
|
@ -229,7 +182,19 @@
|
|||
self.performance.now !== undefined) {
|
||||
Time.now = self.performance.now.bind(self.performance);
|
||||
}
|
||||
function stop () {
|
||||
var Tick = 0;
|
||||
var Ticker = function (time) {
|
||||
var i = 0;
|
||||
while ( i < Tweens.length ) {
|
||||
if ( Tweens[i].update(time) ) {
|
||||
i++;
|
||||
} else {
|
||||
Tweens.splice(i, 1);
|
||||
}
|
||||
}
|
||||
Tick = requestAnimationFrame(Ticker);
|
||||
};
|
||||
function stop() {
|
||||
setTimeout(function () {
|
||||
if (!Tweens.length && Tick) {
|
||||
cancelAnimationFrame(Tick);
|
||||
|
|
@ -249,15 +214,23 @@
|
|||
}
|
||||
},64);
|
||||
}
|
||||
function linkInterpolation(){
|
||||
var Render = {Tick: Tick,Ticker: Ticker,Tweens: Tweens,Time: Time};
|
||||
for ( var blob in Render ) {
|
||||
if (!KUTE[blob]) {
|
||||
KUTE[blob] = blob === 'Time' ? Time.now : Render[blob];
|
||||
}
|
||||
}
|
||||
globalObject["_KUTE"] = KUTE;
|
||||
|
||||
function linkInterpolation() {
|
||||
var this$1 = this;
|
||||
var loop = function ( component ) {
|
||||
var componentLink = linkProperty[component];
|
||||
var componentProps = supportedProperties[component];
|
||||
for ( var fnObj in componentLink ) {
|
||||
if ( typeof(componentLink[fnObj]) === 'function'
|
||||
&& Object.keys(this$1.valuesEnd).some(function (i) { return componentProps.includes(i)
|
||||
|| i=== 'attr' && Object.keys(this$1.valuesEnd[i]).some(function (j) { return componentProps.includes(j); }); } ) )
|
||||
&& Object.keys(this$1.valuesEnd).some(function (i) { return componentProps && componentProps.includes(i)
|
||||
|| i=== 'attr' && Object.keys(this$1.valuesEnd[i]).some(function (j) { return componentProps && componentProps.includes(j); }); } ) )
|
||||
{
|
||||
!KUTE[fnObj] && (KUTE[fnObj] = componentLink[fnObj]);
|
||||
} else {
|
||||
|
|
@ -279,13 +252,7 @@
|
|||
};
|
||||
for (var component in linkProperty)loop( component );
|
||||
}
|
||||
var Render = {Tick: Tick,Ticker: Ticker,Tweens: Tweens,Time: Time};
|
||||
for (var blob in Render ) {
|
||||
if (!KUTE[blob]) {
|
||||
KUTE[blob] = blob === 'Time' ? Time.now : Render[blob];
|
||||
}
|
||||
}
|
||||
globalObject["_KUTE"] = KUTE;
|
||||
|
||||
var Internals = {
|
||||
add: add,
|
||||
remove: remove,
|
||||
|
|
@ -407,6 +374,8 @@
|
|||
}
|
||||
}
|
||||
|
||||
var TweenConstructor = {};
|
||||
|
||||
var TweenBase = function TweenBase(targetElement, startObject, endObject, options){
|
||||
this.element = targetElement;
|
||||
this.playing = false;
|
||||
|
|
@ -725,15 +694,19 @@
|
|||
optionsObj.resetStart = endObject;
|
||||
return new TC(selector(element), endObject, endObject, optionsObj)
|
||||
}
|
||||
|
||||
var TC$1 = TweenConstructor.Tween;
|
||||
function fromTo(element, startObject, endObject, optionsObj) {
|
||||
optionsObj = optionsObj || {};
|
||||
return new TC(selector(element), startObject, endObject, optionsObj)
|
||||
return new TC$1(selector(element), startObject, endObject, optionsObj)
|
||||
}
|
||||
|
||||
function allTo(elements, endObject, optionsObj) {
|
||||
optionsObj = optionsObj || {};
|
||||
optionsObj.resetStart = endObject;
|
||||
return new TweenCollection(selector(elements,true), endObject, endObject, optionsObj)
|
||||
}
|
||||
|
||||
function allFromTo(elements, startObject, endObject, optionsObj) {
|
||||
optionsObj = optionsObj || {};
|
||||
return new TweenCollection(selector(elements,true), startObject, endObject, optionsObj)
|
||||
|
|
@ -812,6 +785,19 @@
|
|||
return propertyInfo
|
||||
};
|
||||
|
||||
function trueDimension (dimValue, isAngle) {
|
||||
var intValue = parseInt(dimValue) || 0;
|
||||
var mUnits = ['px','%','deg','rad','em','rem','vh','vw'];
|
||||
var theUnit;
|
||||
for (var mIndex=0; mIndex<mUnits.length; mIndex++) {
|
||||
if ( typeof dimValue === 'string' && dimValue.includes(mUnits[mIndex]) ) {
|
||||
theUnit = mUnits[mIndex]; break;
|
||||
}
|
||||
}
|
||||
theUnit = theUnit !== undefined ? theUnit : (isAngle ? 'deg' : 'px');
|
||||
return { v: intValue, u: theUnit };
|
||||
}
|
||||
|
||||
var boxModelProperties = ['top', 'left', 'width', 'height', 'right', 'bottom', 'minWidth', 'minHeight', 'maxWidth', 'maxHeight',
|
||||
'padding', 'paddingTop','paddingBottom', 'paddingLeft', 'paddingRight',
|
||||
'margin', 'marginTop','marginBottom', 'marginLeft', 'marginRight',
|
||||
|
|
@ -849,6 +835,37 @@
|
|||
};
|
||||
Components.BoxModelProperties = boxModelOps;
|
||||
|
||||
function hexToRGB (hex) {
|
||||
var hexShorthand = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
|
||||
hex = hex.replace(hexShorthand, function (m, r, g, b) { return r + r + g + g + b + b; });
|
||||
var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
|
||||
return result ? {
|
||||
r: parseInt(result[1], 16),
|
||||
g: parseInt(result[2], 16),
|
||||
b: parseInt(result[3], 16)
|
||||
} : null;
|
||||
}
|
||||
|
||||
function trueColor (colorString) {
|
||||
if (/rgb|rgba/.test(colorString)) {
|
||||
var vrgb = colorString.replace(/\s|\)/,'').split('(')[1].split(',');
|
||||
var colorAlpha = vrgb[3] ? vrgb[3] : null;
|
||||
if (!colorAlpha) {
|
||||
return { r: parseInt(vrgb[0]), g: parseInt(vrgb[1]), b: parseInt(vrgb[2]) };
|
||||
} else {
|
||||
return { r: parseInt(vrgb[0]), g: parseInt(vrgb[1]), b: parseInt(vrgb[2]), a: parseFloat(colorAlpha) };
|
||||
}
|
||||
} else if (/^#/.test(colorString)) {
|
||||
var fromHex = hexToRGB(colorString); return { r: fromHex.r, g: fromHex.g, b: fromHex.b };
|
||||
} else if (/transparent|none|initial|inherit/.test(colorString)) {
|
||||
return { r: 0, g: 0, b: 0, a: 0 };
|
||||
} else if (!/^#|^rgb/.test(colorString) ) {
|
||||
var siteHead = document.getElementsByTagName('head')[0]; siteHead.style.color = colorString;
|
||||
var webColor = getComputedStyle(siteHead,null).color; webColor = /rgb/.test(webColor) ? webColor.replace(/[^\d,]/g, '').split(',') : [0,0,0];
|
||||
siteHead.style.color = ''; return { r: parseInt(webColor[0]), g: parseInt(webColor[1]), b: parseInt(webColor[2]) };
|
||||
}
|
||||
}
|
||||
|
||||
function colors(a, b, v) {
|
||||
var _c = {},
|
||||
c,
|
||||
|
|
@ -1335,9 +1352,10 @@
|
|||
|
||||
var mouseHoverEvents = ('onmouseleave' in document) ? [ 'mouseenter', 'mouseleave'] : [ 'mouseover', 'mouseout' ];
|
||||
|
||||
var canTouch = ('ontouchstart' in window || navigator && navigator.msMaxTouchPoints) || false;
|
||||
var touchOrWheel = canTouch ? 'touchstart' : 'mousewheel';
|
||||
var scrollContainer = navigator && /(EDGE|Mac)/i.test(navigator.userAgent) ? document.body : document.getElementsByTagName('HTML')[0];
|
||||
var supportTouch = ('ontouchstart' in window || navigator.msMaxTouchPoints)||false;
|
||||
|
||||
var touchOrWheel = supportTouch ? 'touchstart' : 'mousewheel';
|
||||
var scrollContainer = navigator && /(EDGE|Mac)/i.test(navigator.userAgent) ? document.body : document.documentElement;
|
||||
var passiveHandler = supportPassive ? { passive: false } : false;
|
||||
function preventScroll(e) {
|
||||
this.scrolling && e.preventDefault();
|
||||
|
|
|
|||
4
dist/kute.min.js
vendored
4
dist/kute.min.js
vendored
File diff suppressed because one or more lines are too long
173
dist/polyfill.js
vendored
173
dist/polyfill.js
vendored
|
|
@ -1,105 +1,88 @@
|
|||
"use strict";
|
||||
if (!window.addEventListener||!Window.prototype.addEventListener) {
|
||||
window.addEventListener = Window.prototype.addEventListener = Document.prototype.addEventListener = Element.prototype.addEventListener = function addEventListener() {
|
||||
var element = this,
|
||||
type = arguments[0],
|
||||
listener = arguments[1];
|
||||
if (!element._events) { element._events = {}; }
|
||||
if (!element._events[type]) {
|
||||
element._events[type] = function (event) {
|
||||
var list = element._events[event.type].list,
|
||||
events = list.slice(),
|
||||
index = -1,
|
||||
length = events.length,
|
||||
eventElement;
|
||||
event.preventDefault = function preventDefault() {
|
||||
if (event.cancelable !== false) {
|
||||
event.returnValue = false;
|
||||
}
|
||||
};
|
||||
event.stopPropagation = function stopPropagation() {
|
||||
event.cancelBubble = true;
|
||||
};
|
||||
event.stopImmediatePropagation = function stopImmediatePropagation() {
|
||||
event.cancelBubble = true;
|
||||
event.cancelImmediate = true;
|
||||
};
|
||||
event.currentTarget = element;
|
||||
event.relatedTarget = event.fromElement || null;
|
||||
event.target = event.target || event.srcElement || element;
|
||||
event.timeStamp = new Date().getTime();
|
||||
if (event.clientX) {
|
||||
event.pageX = event.clientX + document.documentElement.scrollLeft;
|
||||
event.pageY = event.clientY + document.documentElement.scrollTop;
|
||||
}
|
||||
while (++index < length && !event.cancelImmediate) {
|
||||
if (index in events) {
|
||||
eventElement = events[index];
|
||||
if (list.indexOf(eventElement) !== -1 && typeof eventElement === 'function') {
|
||||
eventElement.call(element, event);
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
element._events[type].list = [];
|
||||
if (element.attachEvent) {
|
||||
element.attachEvent('on' + type, element._events[type]);
|
||||
if (!Array.from) {
|
||||
Array.from = (function () {
|
||||
var toStr = Object.prototype.toString;
|
||||
var isCallable = function (fn) {
|
||||
return typeof fn === 'function' || toStr.call(fn) === '[object Function]';
|
||||
};
|
||||
var toInteger = function (value) {
|
||||
var number = Number(value);
|
||||
if (isNaN(number)) { return 0; }
|
||||
if (number === 0 || !isFinite(number)) { return number; }
|
||||
return (number > 0 ? 1 : -1) * Math.floor(Math.abs(number));
|
||||
};
|
||||
var maxSafeInteger = Math.pow(2, 53) - 1;
|
||||
var toLength = function (value) {
|
||||
var len = toInteger(value);
|
||||
return Math.min(Math.max(len, 0), maxSafeInteger);
|
||||
};
|
||||
return function from(arrayLike) {
|
||||
var C = this, items = Object(arrayLike);
|
||||
if (arrayLike == null) {
|
||||
throw new TypeError('Array.from requires an array-like object - not null or undefined');
|
||||
}
|
||||
}
|
||||
element._events[type].list.push(listener);
|
||||
};
|
||||
window.removeEventListener = Window.prototype.removeEventListener = Document.prototype.removeEventListener = Element.prototype.removeEventListener = function removeEventListener() {
|
||||
var element = this,
|
||||
type = arguments[0],
|
||||
listener = arguments[1],
|
||||
index;
|
||||
if (element._events && element._events[type] && element._events[type].list) {
|
||||
index = element._events[type].list.indexOf(listener);
|
||||
if (index !== -1) {
|
||||
element._events[type].list.splice(index, 1);
|
||||
if (!element._events[type].list.length) {
|
||||
if (element.detachEvent) {
|
||||
element.detachEvent('on' + type, element._events[type]);
|
||||
}
|
||||
delete element._events[type];
|
||||
var mapFn = arguments.length > 1 ? arguments[1] : void undefined, T;
|
||||
if (typeof mapFn !== 'undefined') {
|
||||
if (!isCallable(mapFn)) {
|
||||
throw new TypeError('Array.from: when provided, the second argument must be a function');
|
||||
}
|
||||
if (arguments.length > 2) {
|
||||
T = arguments[2];
|
||||
}
|
||||
}
|
||||
var len = toLength(items.length);
|
||||
var A = isCallable(C) ? Object(new C(len)) : new Array(len);
|
||||
var k = 0;
|
||||
var kValue;
|
||||
while (k < len) {
|
||||
kValue = items[k];
|
||||
if (mapFn) {
|
||||
A[k] = typeof T === 'undefined' ? mapFn(kValue, k) : mapFn.call(T, kValue, k);
|
||||
} else {
|
||||
A[k] = kValue;
|
||||
}
|
||||
k += 1;
|
||||
}
|
||||
A.length = len;
|
||||
return A;
|
||||
}
|
||||
}());
|
||||
}
|
||||
|
||||
if (!Array.prototype.includes) {
|
||||
Array.prototype.includes = function(searchElement ) {
|
||||
var O = Object(this);
|
||||
var len = parseInt(O.length) || 0;
|
||||
if (len === 0) {
|
||||
return false;
|
||||
}
|
||||
var n = parseInt(arguments[1]) || 0;
|
||||
var k;
|
||||
if (n >= 0) {
|
||||
k = n;
|
||||
} else {
|
||||
k = len + n;
|
||||
if (k < 0) {k = 0;}
|
||||
}
|
||||
var currentElement;
|
||||
while (k < len) {
|
||||
currentElement = O[k];
|
||||
if (searchElement === currentElement ||
|
||||
(searchElement !== searchElement && currentElement !== currentElement)) {
|
||||
return true;
|
||||
}
|
||||
k++;
|
||||
}
|
||||
return false;
|
||||
};
|
||||
}
|
||||
|
||||
if(!Date.now){
|
||||
Date.now = function now() {
|
||||
return new Date().getTime();
|
||||
if (!String.prototype.includes) {
|
||||
String.prototype.includes = function(search, start) {
|
||||
if (search instanceof RegExp) {
|
||||
throw TypeError('first argument must not be a RegExp');
|
||||
}
|
||||
if (start === undefined) { start = 0; }
|
||||
return this.indexOf(search, start) !== -1;
|
||||
};
|
||||
}
|
||||
|
||||
if ( !window.performance ) {
|
||||
window.performance = {};
|
||||
}
|
||||
if ( !window.performance.now ){
|
||||
var nowOffset = Date.now();
|
||||
window.performance.now = function now(){
|
||||
return Date.now() - nowOffset;
|
||||
};
|
||||
}
|
||||
|
||||
if (!window.requestAnimationFrame) {
|
||||
var lastTime = Date.now();
|
||||
window.requestAnimationFrame = function (callback) {
|
||||
if (typeof callback !== 'function') {
|
||||
throw new TypeError(callback + 'is not a function');
|
||||
}
|
||||
var currentTime = Date.now(),
|
||||
delay = 16 + lastTime - currentTime;
|
||||
if (delay < 0) { delay = 0; }
|
||||
lastTime = currentTime;
|
||||
return setTimeout(function () {
|
||||
lastTime = Date.now();
|
||||
callback(performance.now());
|
||||
}, delay);
|
||||
};
|
||||
window.cancelAnimationFrame = function (id) {
|
||||
clearTimeout(id);
|
||||
};
|
||||
}
|
||||
|
|
|
|||
2
dist/polyfill.min.js
vendored
2
dist/polyfill.min.js
vendored
|
|
@ -1,2 +1,2 @@
|
|||
"use strict";
|
||||
if(window.addEventListener&&Window.prototype.addEventListener||(window.addEventListener=Window.prototype.addEventListener=Document.prototype.addEventListener=Element.prototype.addEventListener=function(){var e=this,t=arguments[0],n=arguments[1];e._events||(e._events={}),e._events[t]||(e._events[t]=function(t){var n,o=e._events[t.type].list,i=o.slice(),r=-1,a=i.length;for(t.preventDefault=function(){!1!==t.cancelable&&(t.returnValue=!1)},t.stopPropagation=function(){t.cancelBubble=!0},t.stopImmediatePropagation=function(){t.cancelBubble=!0,t.cancelImmediate=!0},t.currentTarget=e,t.relatedTarget=t.fromElement||null,t.target=t.target||t.srcElement||e,t.timeStamp=(new Date).getTime(),t.clientX&&(t.pageX=t.clientX+document.documentElement.scrollLeft,t.pageY=t.clientY+document.documentElement.scrollTop);++r<a&&!t.cancelImmediate;)r in i&&(n=i[r],-1!==o.indexOf(n)&&"function"==typeof n&&n.call(e,t))},e._events[t].list=[],e.attachEvent&&e.attachEvent("on"+t,e._events[t])),e._events[t].list.push(n)},window.removeEventListener=Window.prototype.removeEventListener=Document.prototype.removeEventListener=Element.prototype.removeEventListener=function(){var e,t=this,n=arguments[0],o=arguments[1];t._events&&t._events[n]&&t._events[n].list&&-1!==(e=t._events[n].list.indexOf(o))&&(t._events[n].list.splice(e,1),t._events[n].list.length||(t.detachEvent&&t.detachEvent("on"+n,t._events[n]),delete t._events[n]))}),Date.now||(Date.now=function(){return(new Date).getTime()}),window.performance||(window.performance={}),!window.performance.now){var e=Date.now();window.performance.now=function(){return Date.now()-e}}if(!window.requestAnimationFrame){var t=Date.now();window.requestAnimationFrame=function(e){if("function"!=typeof e)throw new TypeError(e+"is not a function");var n=Date.now(),o=16+t-n;return o<0&&(o=0),t=n,setTimeout((function(){t=Date.now(),e(performance.now())}),o)},window.cancelAnimationFrame=function(e){clearTimeout(e)}}
|
||||
var r,t,n,e;Array.from||(Array.from=(r=Object.prototype.toString,t=function(t){return"function"==typeof t||"[object Function]"===r.call(t)},n=Math.pow(2,53)-1,e=function(r){var t=function(r){var t=Number(r);return isNaN(t)?0:0!==t&&isFinite(t)?(t>0?1:-1)*Math.floor(Math.abs(t)):t}(r);return Math.min(Math.max(t,0),n)},function(r){var n=this,o=Object(r);if(null==r)throw new TypeError("Array.from requires an array-like object - not null or undefined");var i,a=arguments.length>1?arguments[1]:void 0;if(void 0!==a){if(!t(a))throw new TypeError("Array.from: when provided, the second argument must be a function");arguments.length>2&&(i=arguments[2])}for(var u,f=e(o.length),c=t(n)?Object(new n(f)):new Array(f),p=0;p<f;)u=o[p],c[p]=a?void 0===i?a(u,p):a.call(i,u,p):u,p+=1;return c.length=f,c})),Array.prototype.includes||(Array.prototype.includes=function(r){var t=Object(this),n=parseInt(t.length)||0;if(0===n)return!1;var e,o,i=parseInt(arguments[1])||0;for(i>=0?e=i:(e=n+i)<0&&(e=0);e<n;){if(r===(o=t[e])||r!=r&&o!=o)return!0;e++}return!1}),String.prototype.includes||(String.prototype.includes=function(r,t){if(r instanceof RegExp)throw TypeError("first argument must not be a RegExp");return void 0===t&&(t=0),-1!==this.indexOf(r,t)});
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "kute.js",
|
||||
"version": "2.0.0",
|
||||
"version": "2.0.1",
|
||||
"description": "JavaScript animation engine of the future is called KUTE.js.",
|
||||
"main": "dist/kute.min.js",
|
||||
"module": "dist/kute.esm.js",
|
||||
|
|
@ -54,8 +54,8 @@
|
|||
"homepage": "http://thednp.github.io/kute.js",
|
||||
"dependencies": {
|
||||
"cubic-bezier-easing": "^1.0.2",
|
||||
"minifill": "^0.0.7",
|
||||
"shorter-js": "^0.0.4"
|
||||
"minifill": "^0.0.8",
|
||||
"shorter-js": "^0.0.7"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@rollup/plugin-buble": "^0.21.3",
|
||||
|
|
|
|||
|
|
@ -1,16 +1,14 @@
|
|||
import {
|
||||
supportedProperties,
|
||||
defaultValues,
|
||||
defaultOptions,
|
||||
prepareProperty,
|
||||
prepareStart,
|
||||
onStart,
|
||||
onComplete,
|
||||
crossCheck,
|
||||
linkProperty,
|
||||
Util
|
||||
} from '../core/objects.js'
|
||||
import Interpolate from '../core/interpolate.js'
|
||||
import supportedProperties from '../objects/supportedProperties.js'
|
||||
import defaultValues from '../objects/defaultValues.js'
|
||||
import defaultOptions from '../objects/defaultOptions.js'
|
||||
import prepareProperty from '../objects/prepareProperty.js'
|
||||
import prepareStart from '../objects/prepareStart.js'
|
||||
import onStart from '../objects/onStart.js'
|
||||
import onComplete from '../objects/onComplete.js'
|
||||
import crossCheck from '../objects/crossCheck.js'
|
||||
import linkProperty from '../objects/linkProperty.js'
|
||||
import Util from '../objects/Util.js'
|
||||
import Interpolate from '../objects/Interpolate.js'
|
||||
|
||||
// Animation class
|
||||
// * builds KUTE components
|
||||
|
|
|
|||
|
|
@ -1,5 +1,11 @@
|
|||
import {supportedProperties,defaultOptions,onStart,onComplete,crossCheck,linkProperty,Util} from '../core/objects.js'
|
||||
import Interpolate from '../core/interpolate.js'
|
||||
import supportedProperties from '../objects/supportedProperties.js'
|
||||
import defaultOptions from '../objects/defaultOptions.js'
|
||||
import onStart from '../objects/onStart.js'
|
||||
import onComplete from '../objects/onComplete.js'
|
||||
import crossCheck from '../objects/crossCheck.js'
|
||||
import linkProperty from '../objects/linkProperty.js'
|
||||
import Util from '../objects/Util.js'
|
||||
import Interpolate from '../objects/Interpolate.js'
|
||||
|
||||
// Animation class
|
||||
export default class AnimationBase {
|
||||
|
|
|
|||
|
|
@ -1,5 +1,10 @@
|
|||
import {prepareProperty,prepareStart,onStart,onComplete,crossCheck} from '../core/objects.js'
|
||||
import Interpolate from '../core/interpolate.js'
|
||||
import prepareProperty from '../objects/prepareProperty.js'
|
||||
import prepareStart from '../objects/prepareStart.js'
|
||||
import onStart from '../objects/onStart.js'
|
||||
import onComplete from '../objects/onComplete.js'
|
||||
import crossCheck from '../objects/crossCheck.js'
|
||||
import Interpolate from '../objects/Interpolate.js'
|
||||
|
||||
import Animation from './animation.js'
|
||||
|
||||
// AnimationDevelopment class
|
||||
|
|
|
|||
|
|
@ -1,8 +1,9 @@
|
|||
import KUTE from '../core/globals.js'
|
||||
import {defaultValues,Components} from '../core/objects.js'
|
||||
import {getStyleForProperty} from '../core/process.js'
|
||||
import {numbers} from '../core/interpolate.js'
|
||||
import {trueDimension} from '../util/util.js'
|
||||
import KUTE from '../objects/KUTE.js'
|
||||
import defaultValues from '../objects/defaultValues.js'
|
||||
import Components from '../objects/Components.js'
|
||||
import getStyleForProperty from '../process/getStyleForProperty.js'
|
||||
import {numbers} from '../objects/Interpolate.js'
|
||||
import trueDimension from '../util/trueDimension.js'
|
||||
|
||||
// const bgPosProp = { property : 'backgroundPosition', defaultValue: [0,0], interpolators: {numbers} }, functions = { prepareStart, prepareProperty, onStart }
|
||||
|
||||
|
|
@ -41,7 +42,6 @@ export const bgPositionFunctions = {
|
|||
export const baseBgPosOps = {
|
||||
component: 'BgPositionProp',
|
||||
property: 'backgroundPosition',
|
||||
// defaultValue: [50,50],
|
||||
Interpolate: {numbers},
|
||||
functions: {onStart: onStartBgPos}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,8 +1,9 @@
|
|||
import KUTE from '../core/globals.js'
|
||||
import {defaultValues,Components} from '../core/objects.js'
|
||||
import {trueDimension} from '../util/util.js'
|
||||
import {getStyleForProperty} from '../core/process.js'
|
||||
import {units} from '../core/interpolate.js'
|
||||
import KUTE from '../objects/KUTE.js'
|
||||
import defaultValues from '../objects/defaultValues.js'
|
||||
import Components from '../objects/Components.js'
|
||||
import getStyleForProperty from '../process/getStyleForProperty.js'
|
||||
import trueDimension from '../util/trueDimension.js'
|
||||
import {units} from '../objects/Interpolate.js'
|
||||
|
||||
// const borderRadius = { category : 'borderRadius', properties : [..], defaultValues: {..}, interpolation: {units} }
|
||||
|
||||
|
|
@ -43,7 +44,6 @@ export const baseRadiusOps = {
|
|||
component: 'borderRadiusProps',
|
||||
category: 'borderRadius',
|
||||
properties: radiusProps,
|
||||
// defaultValues: radiusValues,
|
||||
Interpolate: {units},
|
||||
functions: {onStart: radiusOnStart}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,8 +1,9 @@
|
|||
import KUTE from '../core/globals.js'
|
||||
import {defaultValues,Components} from '../core/objects.js'
|
||||
import {trueDimension} from '../util/util.js'
|
||||
import {getStyleForProperty} from '../core/process.js'
|
||||
import {numbers} from '../core/interpolate.js'
|
||||
import KUTE from '../objects/KUTE.js'
|
||||
import defaultValues from '../objects/defaultValues.js'
|
||||
import Components from '../objects/Components.js'
|
||||
import getStyleForProperty from '../process/getStyleForProperty.js'
|
||||
import trueDimension from '../util/trueDimension.js'
|
||||
import {numbers} from '../objects/Interpolate.js'
|
||||
|
||||
// Component Properties
|
||||
const boxModelProperties = ['top', 'left', 'width', 'height', 'right', 'bottom', 'minWidth', 'minHeight', 'maxWidth', 'maxHeight',
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
import KUTE from '../core/globals.js'
|
||||
import {Components} from '../core/objects.js'
|
||||
import {trueDimension} from '../util/util.js'
|
||||
import {getStyleForProperty} from '../core/process.js'
|
||||
import {numbers} from '../core/interpolate.js'
|
||||
import KUTE from '../objects/KUTE.js'
|
||||
import Components from '../objects/Components.js'
|
||||
import getStyleForProperty from '../process/getStyleForProperty.js'
|
||||
import trueDimension from '../util/trueDimension.js'
|
||||
import {numbers} from '../objects/Interpolate.js'
|
||||
|
||||
// Component Functions
|
||||
export function getClip(tweenProp,v){
|
||||
|
|
|
|||
|
|
@ -1,8 +1,9 @@
|
|||
import KUTE from '../core/globals.js'
|
||||
import {defaultValues,Components} from '../core/objects.js'
|
||||
import {getStyleForProperty} from '../core/process.js'
|
||||
import {numbers} from '../core/interpolate.js'
|
||||
import {trueColor} from '../util/util.js'
|
||||
import KUTE from '../objects/KUTE.js'
|
||||
import defaultValues from '../objects/defaultValues.js'
|
||||
import Components from '../objects/Components.js'
|
||||
import getStyleForProperty from '../process/getStyleForProperty.js'
|
||||
import trueColor from '../util/trueColor.js'
|
||||
import {numbers} from '../objects/Interpolate.js'
|
||||
|
||||
// Component Interpolation
|
||||
// rgba1, rgba2, progress
|
||||
|
|
|
|||
|
|
@ -1,8 +1,9 @@
|
|||
import KUTE from '../core/globals.js'
|
||||
import {trueProperty} from '../util/util.js'
|
||||
import {getInlineStyle} from '../core/process.js'
|
||||
import {defaultValues,Components} from '../core/objects.js'
|
||||
import {numbers} from '../core/interpolate.js'
|
||||
import KUTE from '../objects/KUTE.js'
|
||||
import getInlineStyle from '../process/getInlineStyle.js'
|
||||
import defaultValues from '../objects/defaultValues.js'
|
||||
import Components from '../objects/Components.js'
|
||||
import trueProperty from '../util/trueProperty.js'
|
||||
import {numbers} from '../objects/Interpolate.js'
|
||||
|
||||
// Component Const
|
||||
const transformProperty = trueProperty('transform');
|
||||
|
|
|
|||
|
|
@ -1,8 +1,9 @@
|
|||
import KUTE from '../core/globals.js'
|
||||
import {getStyleForProperty} from '../core/process.js'
|
||||
import {defaultValues,Components} from '../core/objects.js'
|
||||
import {numbers} from '../core/interpolate.js'
|
||||
import {trueColor} from '../util/util.js'
|
||||
import KUTE from '../objects/KUTE.js'
|
||||
import getStyleForProperty from '../process/getStyleForProperty.js'
|
||||
import defaultValues from '../objects/defaultValues.js'
|
||||
import Components from '../objects/Components.js'
|
||||
import trueColor from '../util/trueColor.js'
|
||||
import {numbers} from '../objects/Interpolate.js'
|
||||
import {colors} from './colorProperties.js'
|
||||
|
||||
// const filterEffects = { property : 'filter', subProperties: {}, defaultValue: {}, interpolators: {} }, functions = { prepareStart, prepareProperty, onStart, crossCheck }
|
||||
|
|
|
|||
|
|
@ -1,8 +1,11 @@
|
|||
import KUTE from '../core/globals.js'
|
||||
import {defaultValues, onStart, Components} from '../core/objects.js'
|
||||
import {numbers} from '../core/interpolate.js'
|
||||
import {trueColor,trueDimension} from '../util/util.js'
|
||||
import {colors} from './colorProperties.js/'
|
||||
import KUTE from '../objects/KUTE.js'
|
||||
import defaultValues from '../objects/defaultValues.js'
|
||||
import onStart from '../objects/onStart.js'
|
||||
import Components from '../objects/Components.js'
|
||||
import {numbers} from '../objects/Interpolate.js'
|
||||
import trueColor from '../util/trueColor.js'
|
||||
import trueDimension from '../util/trueDimension.js'
|
||||
import {colors} from './colorProperties.js'
|
||||
|
||||
// Component Name
|
||||
let ComponentName = 'htmlAttributes'
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
import KUTE from '../core/globals.js'
|
||||
import {getStyleForProperty} from '../core/process.js'
|
||||
import {Components} from '../core/objects.js'
|
||||
import {numbers} from '../core/interpolate.js'
|
||||
import KUTE from '../objects/KUTE.js'
|
||||
import getStyleForProperty from '../process/getStyleForProperty.js'
|
||||
import Components from '../objects/Components.js'
|
||||
import {numbers} from '../objects/Interpolate.js'
|
||||
|
||||
// const opacityProperty = { property : 'opacity', defaultValue: 1, interpolators: {numbers} }, functions = { prepareStart, prepareProperty, onStart }
|
||||
|
||||
|
|
|
|||
|
|
@ -1,20 +1,20 @@
|
|||
import KUTE from '../core/globals.js'
|
||||
import {numbers} from '../core/interpolate.js'
|
||||
import {Components} from '../core/objects.js'
|
||||
import KUTE from '../objects/KUTE.js'
|
||||
import {numbers} from '../objects/Interpolate.js'
|
||||
import Components from '../objects/Components.js'
|
||||
|
||||
import {on} from 'shorter-js/src/event/on.js'
|
||||
import {off} from 'shorter-js/src/event/off.js'
|
||||
import {supportPassive} from 'shorter-js/src/boolean/supportPassive.js'
|
||||
import {mouseHoverEvents} from 'shorter-js/src/strings/mouseHoverEvents.js'
|
||||
import {supportTouch} from 'shorter-js/src/boolean/supportTouch.js'
|
||||
|
||||
// Component Util
|
||||
// events preventing scroll
|
||||
const canTouch = ('ontouchstart' in window || navigator && navigator.msMaxTouchPoints) || false // support Touch?
|
||||
const touchOrWheel = canTouch ? 'touchstart' : 'mousewheel'
|
||||
const touchOrWheel = supportTouch ? 'touchstart' : 'mousewheel'
|
||||
|
||||
// true scroll container
|
||||
// very important and specific to the component
|
||||
const scrollContainer = navigator && /(EDGE|Mac)/i.test(navigator.userAgent) ? document.body : document.getElementsByTagName('HTML')[0]
|
||||
const scrollContainer = navigator && /(EDGE|Mac)/i.test(navigator.userAgent) ? document.body : document.documentElement
|
||||
|
||||
// scroll event options
|
||||
// it's important to stop propagating when animating scroll
|
||||
|
|
@ -104,4 +104,4 @@ export const scrollOps = {
|
|||
|
||||
}
|
||||
|
||||
Components.ScrollProperty = scrollOps
|
||||
Components.ScrollProperty = scrollOps
|
||||
|
|
@ -1,9 +1,10 @@
|
|||
import KUTE from '../core/globals.js'
|
||||
import {defaultValues,Components} from '../core/objects.js'
|
||||
import {getStyleForProperty} from '../core/process.js'
|
||||
import {numbers} from '../core/interpolate.js'
|
||||
import KUTE from '../objects/KUTE.js'
|
||||
import defaultValues from '../objects/defaultValues.js'
|
||||
import Components from '../objects/Components.js'
|
||||
import getStyleForProperty from '../process/getStyleForProperty.js'
|
||||
import trueColor from '../util/trueColor.js'
|
||||
import {numbers} from '../objects/Interpolate.js'
|
||||
import {colors} from './colorProperties.js'
|
||||
import {trueColor} from '../util/util.js'
|
||||
|
||||
// Component Properties
|
||||
const shadowProps = ['boxShadow','textShadow']
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
import KUTE from '../core/globals.js'
|
||||
import {numbers} from '../core/interpolate.js'
|
||||
import {Components} from '../core/objects.js'
|
||||
import KUTE from '../objects/KUTE.js'
|
||||
import Components from '../objects/Components.js'
|
||||
import selector from '../util/selector.js'
|
||||
import {numbers} from '../objects/Interpolate.js'
|
||||
|
||||
// const SVGMorph = { property : 'path', defaultValue: [], interpolators: {numbers,coords} }, functions = { prepareStart, prepareProperty, onStart, crossCheck }
|
||||
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
import KUTE from '../core/globals.js'
|
||||
import {numbers} from '../core/interpolate.js'
|
||||
import {Components} from '../core/objects.js'
|
||||
import {getStyleForProperty} from '../core/process.js'
|
||||
import KUTE from '../objects/KUTE.js'
|
||||
import {numbers} from '../objects/Interpolate.js'
|
||||
import Components from '../objects/Components.js'
|
||||
import getStyleForProperty from '../process/getStyleForProperty.js'
|
||||
|
||||
// const svgDraw = { property : 'draw', defaultValue, Interpolate: {numbers} }, functions = { prepareStart, prepareProperty, onStart }
|
||||
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
import KUTE from '../core/globals.js'
|
||||
import KUTE from '../objects/KUTE.js'
|
||||
import selector from '../util/selector.js'
|
||||
import {defaultOptions,Components} from '../core/objects.js'
|
||||
import defaultOptions from '../objects/defaultOptions.js'
|
||||
import Components from '../objects/Components.js'
|
||||
|
||||
// const SVGMorph = { property : 'path', defaultValue: [], interpolators: {numbers,coords} }, functions = { prepareStart, prepareProperty, onStart, crossCheck }
|
||||
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
import KUTE from '../core/globals.js'
|
||||
import {numbers} from '../core/interpolate.js'
|
||||
import {Components} from '../core/objects.js'
|
||||
import KUTE from '../objects/KUTE.js'
|
||||
import {numbers} from '../objects/Interpolate.js'
|
||||
import Components from '../objects/Components.js'
|
||||
|
||||
// const svgTransform = { property : 'svgTransform', subProperties, defaultValue, Interpolate: {numbers}, functions }
|
||||
|
||||
|
|
|
|||
|
|
@ -1,8 +1,9 @@
|
|||
import KUTE from '../core/globals.js'
|
||||
import {defaultValues,Components} from '../core/objects.js'
|
||||
import {getStyleForProperty} from '../core/process.js'
|
||||
import {units} from '../core/interpolate.js'
|
||||
import {trueDimension} from '../util/util.js'
|
||||
import KUTE from '../objects/KUTE.js'
|
||||
import defaultValues from '../objects/defaultValues.js'
|
||||
import Components from '../objects/Components.js'
|
||||
import getStyleForProperty from '../process/getStyleForProperty.js'
|
||||
import trueDimension from '../util/trueDimension.js'
|
||||
import {units} from '../objects/Interpolate.js'
|
||||
|
||||
// const opacity = { category : 'textProperties', defaultValues: [0,0,0,0], interpolators: {numbers} }, functions = { prepareStart, prepareProperty, onStart:{} }
|
||||
|
||||
|
|
|
|||
|
|
@ -1,6 +1,8 @@
|
|||
import KUTE,{TweenConstructor} from '../core/globals.js'
|
||||
import {numbers} from '../core/interpolate.js'
|
||||
import {defaultOptions,Components} from '../core/objects.js';
|
||||
import KUTE from '../objects/KUTE.js'
|
||||
import TweenConstructor from '../objects/TweenConstructor.js'
|
||||
import {numbers} from '../objects/Interpolate.js'
|
||||
import defaultOptions from '../objects/defaultOptions.js'
|
||||
import Components from '../objects/Components.js'
|
||||
|
||||
// Component Util
|
||||
// utility for multi-child targets
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
import KUTE from '../core/globals.js'
|
||||
import {defaultValues,Components} from '../core/objects.js'
|
||||
import {getInlineStyle} from '../core/process.js'
|
||||
import KUTE from '../objects/KUTE.js'
|
||||
import defaultValues from '../objects/defaultValues.js'
|
||||
import Components from '../objects/Components.js'
|
||||
import getInlineStyle from '../process/getInlineStyle.js'
|
||||
|
||||
// const transformFunctions = { property : 'transform', subProperties, defaultValues, Interpolate: {translate,rotate,skew,scale}, functions } // same to svg transform, attr
|
||||
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
import KUTE from '../core/globals.js'
|
||||
import {defaultValues,Components} from '../core/objects.js'
|
||||
import {numbers,arrays} from '../core/interpolate.js'
|
||||
import KUTE from '../objects/KUTE.js'
|
||||
import defaultValues from '../objects/defaultValues.js'
|
||||
import Components from '../objects/Components.js'
|
||||
import {numbers,arrays} from '../objects/Interpolate.js'
|
||||
|
||||
// const transformMatrix = { property : 'transform', defaultValue: {}, interpolators: {} }, functions = { prepareStart, prepareProperty, onStart, crossCheck }
|
||||
|
||||
|
|
|
|||
73
src/core/Render.js
Normal file
73
src/core/Render.js
Normal file
|
|
@ -0,0 +1,73 @@
|
|||
import KUTE from '../objects/KUTE.js'
|
||||
import Tweens from '../objects/Tweens.js'
|
||||
import globalObject from '../objects/globalObject.js'
|
||||
|
||||
import Interpolate from '../objects/Interpolate.js'
|
||||
import onStart from '../objects/onStart.js'
|
||||
|
||||
const Time = {}
|
||||
|
||||
// In node.js, use process.hrtime.
|
||||
if (typeof (self) === 'undefined' && typeof (process) !== 'undefined' && process.hrtime) {
|
||||
Time.now = function () {
|
||||
var time = process.hrtime();
|
||||
return time[0] * 1000 + time[1] / 1000000;
|
||||
};
|
||||
// In a browser, use self.performance.now if it is available.
|
||||
} else if (typeof (self) !== 'undefined' &&
|
||||
self.performance !== undefined &&
|
||||
self.performance.now !== undefined) {
|
||||
Time.now = self.performance.now.bind(self.performance);
|
||||
}
|
||||
|
||||
// export {Time}
|
||||
|
||||
let Tick = 0
|
||||
export {Tick}
|
||||
|
||||
let Ticker = (time) => {
|
||||
let i = 0;
|
||||
while ( i < Tweens.length ) {
|
||||
if ( Tweens[i].update(time) ) {
|
||||
i++;
|
||||
} else {
|
||||
Tweens.splice(i, 1);
|
||||
}
|
||||
}
|
||||
Tick = requestAnimationFrame(Ticker);
|
||||
}
|
||||
export {Ticker}
|
||||
|
||||
|
||||
// stop requesting animation frame
|
||||
export function stop() {
|
||||
setTimeout(() => { // re-added for #81
|
||||
if (!Tweens.length && Tick) {
|
||||
cancelAnimationFrame(Tick);
|
||||
Tick = null;
|
||||
for (let obj in onStart) {
|
||||
if (typeof (onStart[obj]) === 'function') {
|
||||
KUTE[obj] && (delete KUTE[obj])
|
||||
} else {
|
||||
for (let prop in onStart[obj]) {
|
||||
KUTE[prop] && (delete KUTE[prop])
|
||||
}
|
||||
}
|
||||
}
|
||||
for (let i in Interpolate) {
|
||||
KUTE[i] && (delete KUTE[i])
|
||||
}
|
||||
}
|
||||
},64)
|
||||
}
|
||||
|
||||
// KUTE.js render update functions
|
||||
// ===============================
|
||||
const Render = {Tick,Ticker,Tweens,Time}
|
||||
for ( const blob in Render ) {
|
||||
if (!KUTE[blob]) {
|
||||
KUTE[blob] = blob === 'Time' ? Time.now : Render[blob];
|
||||
}
|
||||
}
|
||||
export default Render
|
||||
globalObject[`_KUTE`] = KUTE
|
||||
2
src/core/add.js
Normal file
2
src/core/add.js
Normal file
|
|
@ -0,0 +1,2 @@
|
|||
import Tweens from '../objects/Tweens.js'
|
||||
export default (tw) => Tweens.push(tw)
|
||||
2
src/core/getAll.js
Normal file
2
src/core/getAll.js
Normal file
|
|
@ -0,0 +1,2 @@
|
|||
import Tweens from '../objects/Tweens.js'
|
||||
export default () => Tweens
|
||||
|
|
@ -1,5 +0,0 @@
|
|||
export const globalObject = typeof (global) !== 'undefined' ? global
|
||||
: typeof(self) !== 'undefined' ? self
|
||||
: typeof(window) !== 'undefined' ? window : {}
|
||||
export let TweenConstructor = {}
|
||||
export default {}
|
||||
|
|
@ -1,28 +0,0 @@
|
|||
|
||||
import selector from '../util/selector.js'
|
||||
import {TweenConstructor} from './globals.js'
|
||||
import TweenCollection from '../tween/tweenCollection.js'
|
||||
|
||||
const TC = TweenConstructor.Tween
|
||||
|
||||
// main methods
|
||||
export function to(element, endObject, optionsObj) {
|
||||
optionsObj = optionsObj || {}
|
||||
optionsObj.resetStart = endObject
|
||||
return new TC(selector(element), endObject, endObject, optionsObj)
|
||||
}
|
||||
export function fromTo(element, startObject, endObject, optionsObj) {
|
||||
optionsObj = optionsObj || {}
|
||||
return new TC(selector(element), startObject, endObject, optionsObj)
|
||||
}
|
||||
|
||||
// multiple elements tween objects
|
||||
export function allTo(elements, endObject, optionsObj) {
|
||||
optionsObj = optionsObj || {}
|
||||
optionsObj.resetStart = endObject
|
||||
return new TweenCollection(selector(elements,true), endObject, endObject, optionsObj)
|
||||
}
|
||||
export function allFromTo(elements, startObject, endObject, optionsObj) {
|
||||
optionsObj = optionsObj || {}
|
||||
return new TweenCollection(selector(elements,true), startObject, endObject, optionsObj)
|
||||
}
|
||||
|
|
@ -1,110 +1,9 @@
|
|||
// imports
|
||||
import {Tweens,onStart,linkProperty,supportedProperties} from './objects.js'
|
||||
import KUTE,{globalObject} from './globals.js'
|
||||
import Interpolate from './interpolate.js'
|
||||
|
||||
|
||||
// KUTE.js INTERNALS
|
||||
// =================
|
||||
|
||||
export const add = function(tw) { Tweens.push(tw); }
|
||||
export const remove = function(tw) { const i = Tweens.indexOf(tw); if (i !== -1) { Tweens.splice(i, 1); }}
|
||||
export const getAll = function() { return Tweens }
|
||||
export const removeAll = function() { Tweens.length = 0 }
|
||||
|
||||
// KUTE.js render update functions
|
||||
// ===============================
|
||||
|
||||
export let Tick = 0
|
||||
export function Ticker(time) {
|
||||
let i = 0;
|
||||
while ( i < Tweens.length ) {
|
||||
if ( Tweens[i].update(time) ) {
|
||||
i++;
|
||||
} else {
|
||||
Tweens.splice(i, 1);
|
||||
}
|
||||
}
|
||||
Tick = requestAnimationFrame(Ticker);
|
||||
}
|
||||
|
||||
const Time = {}
|
||||
|
||||
// In node.js, use process.hrtime.
|
||||
if (typeof (self) === 'undefined' && typeof (process) !== 'undefined' && process.hrtime) {
|
||||
Time.now = function () {
|
||||
var time = process.hrtime();
|
||||
return time[0] * 1000 + time[1] / 1000000;
|
||||
};
|
||||
// In a browser, use self.performance.now if it is available.
|
||||
} else if (typeof (self) !== 'undefined' &&
|
||||
self.performance !== undefined &&
|
||||
self.performance.now !== undefined) {
|
||||
Time.now = self.performance.now.bind(self.performance);
|
||||
}
|
||||
|
||||
export {Time}
|
||||
|
||||
// stop requesting animation frame
|
||||
export function stop () {
|
||||
setTimeout(() => { // re-added for #81
|
||||
if (!Tweens.length && Tick) {
|
||||
cancelAnimationFrame(Tick);
|
||||
Tick = null;
|
||||
for (const obj in onStart) {
|
||||
if (typeof (onStart[obj]) === 'function') {
|
||||
KUTE[obj] && (delete KUTE[obj])
|
||||
} else {
|
||||
for (const prop in onStart[obj]) {
|
||||
KUTE[prop] && (delete KUTE[prop])
|
||||
}
|
||||
}
|
||||
}
|
||||
for (const i in Interpolate) {
|
||||
KUTE[i] && (delete KUTE[i])
|
||||
}
|
||||
}
|
||||
},64)
|
||||
}
|
||||
|
||||
export function linkInterpolation(){
|
||||
for (const component in linkProperty){
|
||||
const componentLink = linkProperty[component]
|
||||
const componentProps = supportedProperties[component]
|
||||
|
||||
for ( const fnObj in componentLink ) {
|
||||
if ( typeof(componentLink[fnObj]) === 'function'
|
||||
&& Object.keys(this.valuesEnd).some(i => componentProps.includes(i)
|
||||
|| i=== 'attr' && Object.keys(this.valuesEnd[i]).some(j => componentProps.includes(j)) ) )
|
||||
{ // ATTR, colors, scroll, boxModel, borderRadius
|
||||
!KUTE[fnObj] && (KUTE[fnObj] = componentLink[fnObj])
|
||||
} else {
|
||||
|
||||
for ( const prop in this.valuesEnd ) {
|
||||
for ( const i in this.valuesEnd[prop] ) {
|
||||
if ( typeof(componentLink[i]) === 'function' ) { // transformCSS3
|
||||
!KUTE[i] && (KUTE[i] = componentLink[i])
|
||||
} else {
|
||||
for (const j in componentLink[fnObj]){
|
||||
if (componentLink[i] && typeof(componentLink[i][j]) === 'function' ) { // transformMatrix
|
||||
!KUTE[j] && (KUTE[j] = componentLink[i][j])
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export const Render = {Tick,Ticker,Tweens,Time}
|
||||
for (const blob in Render ) {
|
||||
if (!KUTE[blob]) {
|
||||
KUTE[blob] = blob === 'Time' ? Time.now : Render[blob];
|
||||
}
|
||||
}
|
||||
globalObject[`_KUTE`] = KUTE
|
||||
import add from './add.js'
|
||||
import remove from './remove.js'
|
||||
import getAll from './getAll.js'
|
||||
import removeAll from './removeAll.js'
|
||||
import {stop} from './Render.js'
|
||||
import linkInterpolation from './linkInterpolation.js'
|
||||
|
||||
export default {
|
||||
add,
|
||||
|
|
|
|||
34
src/core/linkInterpolation.js
Normal file
34
src/core/linkInterpolation.js
Normal file
|
|
@ -0,0 +1,34 @@
|
|||
import KUTE from '../objects/KUTE.js'
|
||||
import linkProperty from '../objects/linkProperty.js'
|
||||
import supportedProperties from '../objects/supportedProperties.js'
|
||||
|
||||
export default function() { // DON'T change
|
||||
for (const component in linkProperty){
|
||||
const componentLink = linkProperty[component]
|
||||
const componentProps = supportedProperties[component]
|
||||
|
||||
for ( const fnObj in componentLink ) {
|
||||
if ( typeof(componentLink[fnObj]) === 'function'
|
||||
&& Object.keys(this.valuesEnd).some(i => componentProps && componentProps.includes(i)
|
||||
|| i=== 'attr' && Object.keys(this.valuesEnd[i]).some(j => componentProps && componentProps.includes(j)) ) )
|
||||
{ // ATTR, colors, scroll, boxModel, borderRadius
|
||||
!KUTE[fnObj] && (KUTE[fnObj] = componentLink[fnObj])
|
||||
} else {
|
||||
|
||||
for ( const prop in this.valuesEnd ) {
|
||||
for ( const i in this.valuesEnd[prop] ) {
|
||||
if ( typeof(componentLink[i]) === 'function' ) { // transformCSS3
|
||||
!KUTE[i] && (KUTE[i] = componentLink[i])
|
||||
} else {
|
||||
for (const j in componentLink[fnObj]){
|
||||
if (componentLink[i] && typeof(componentLink[i][j]) === 'function' ) { // transformMatrix
|
||||
!KUTE[j] && (KUTE[j] = componentLink[i][j])
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,58 +0,0 @@
|
|||
export const Tweens = []
|
||||
|
||||
export const Components = {}
|
||||
|
||||
export const supportedProperties = {}
|
||||
|
||||
export const defaultValues = {};
|
||||
|
||||
export const defaultOptions = {
|
||||
duration: 700,
|
||||
delay: 0,
|
||||
easing: 'linear'
|
||||
}
|
||||
|
||||
// check current property value when .to() method is used
|
||||
export const prepareStart = {}
|
||||
|
||||
// used in preparePropertiesObject
|
||||
export const prepareProperty = {}
|
||||
|
||||
// checks for differences between the processed start and end values,
|
||||
// can be set to make sure start unit and end unit are same,
|
||||
// stack transforms, process SVG paths,
|
||||
// any type of post processing the component needs
|
||||
export const crossCheck = {}
|
||||
|
||||
// schedule property specific function on animation complete
|
||||
export const onComplete = {}
|
||||
|
||||
// schedule property specific function on animation start
|
||||
// link property update function to KUTE.js execution context
|
||||
export const onStart = {}
|
||||
|
||||
// link properties to interpolate functions
|
||||
export const linkProperty = {}
|
||||
|
||||
// util - a general object for utils like rgbToHex, processEasing
|
||||
export const Util = {}
|
||||
|
||||
export const BaseObjects = {
|
||||
defaultOptions,
|
||||
linkProperty,
|
||||
onComplete,
|
||||
onStart,
|
||||
supportedProperties
|
||||
}
|
||||
|
||||
export default {
|
||||
supportedProperties,
|
||||
defaultOptions,
|
||||
defaultValues,
|
||||
prepareProperty,
|
||||
prepareStart,
|
||||
crossCheck,
|
||||
onStart,
|
||||
onComplete,
|
||||
linkProperty
|
||||
}
|
||||
|
|
@ -1,115 +0,0 @@
|
|||
import {trueProperty} from '../util/util.js'
|
||||
import {defaultValues,supportedProperties,prepareStart,prepareProperty} from './objects.js'
|
||||
|
||||
// get transform style for element from cssText for .to() method
|
||||
export function getInlineStyle(el) {
|
||||
if ( !el.style ) return; // if the scroll applies to `window` it returns as it has no styling
|
||||
const css = el.style.cssText.replace(/\s/g,'').split(';'); // the cssText | the resulting transform object
|
||||
const transformObject = {};
|
||||
const arrayFn = ['translate3d','translate','scale3d','skew']
|
||||
|
||||
// if we have any inline style in the cssText attribute, usually it has higher priority
|
||||
for ( let i=0, csl = css.length; i<csl; i++ ){
|
||||
if ( /transform/i.test(css[i])) {
|
||||
const tps = css[i].split(':')[1].split(')'); //all transform properties
|
||||
for ( let k=0, tpl = tps.length-1; k< tpl; k++){
|
||||
const tpv = tps[k].split('('); // each transform property, the sp is for transform property
|
||||
const tp = tpv[0];
|
||||
const tv = tpv[1];
|
||||
if ( !/matrix/.test(tp) ){
|
||||
transformObject[tp] = arrayFn.includes(tp) ? tv.split(',') : tv;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
return transformObject;
|
||||
}
|
||||
|
||||
// get computed style property for element for .to() method
|
||||
export function getStyleForProperty(elem, propertyName) {
|
||||
const styleAttribute = elem.style;
|
||||
|
||||
const computedStyle = getComputedStyle(elem) || elem.currentStyle;
|
||||
|
||||
// the computed style | prefixed property
|
||||
const prefixedProp = trueProperty(propertyName);
|
||||
|
||||
const styleValue = styleAttribute[propertyName] && !/auto|initial|none|unset/.test(styleAttribute[propertyName])
|
||||
? styleAttribute[propertyName]
|
||||
: computedStyle[prefixedProp];
|
||||
if ( propertyName !== 'transform' && (prefixedProp in computedStyle || prefixedProp in styleAttribute) ) {
|
||||
return styleValue ? styleValue : defaultValues[propertyName];
|
||||
}
|
||||
}
|
||||
|
||||
export function getStartValues () { // to REWORK with COMPONENT
|
||||
const startValues = {},
|
||||
currentStyle = getInlineStyle(this.element);
|
||||
|
||||
for (const tweenProp in this.valuesStart) {
|
||||
for ( const component in prepareStart) {
|
||||
let componentStart = prepareStart[component]
|
||||
for ( const tweenCategory in componentStart) {
|
||||
if ( tweenCategory === tweenProp && componentStart[tweenProp] ) { // clip, opacity, scroll
|
||||
startValues[tweenProp] = componentStart[tweenCategory].call(this,tweenProp,this.valuesStart[tweenProp])
|
||||
} else if ( supportedProperties[component].includes(tweenProp) ) { // find in an array of properties
|
||||
startValues[tweenProp] = componentStart[tweenCategory].call(this,tweenProp,this.valuesStart[tweenProp])
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// stack transformCSS props for .to() chains
|
||||
for ( const current in currentStyle ){ // also add to startValues values from previous tweens
|
||||
if ( !( current in this.valuesStart ) ) {
|
||||
startValues[current] = currentStyle[current] || defaultValues[current];
|
||||
}
|
||||
}
|
||||
this.valuesStart = {}
|
||||
prepareObject.call(this,startValues,'start');
|
||||
}
|
||||
|
||||
// process properties for endValues or startValues
|
||||
// NEVER CHANGE THIS
|
||||
export function prepareObject (obj, fn) { // this, props object, type: start/end
|
||||
const propertiesObject = fn === 'start' ? this.valuesStart : this.valuesEnd
|
||||
|
||||
for ( const component in prepareProperty ) {
|
||||
let prepareComponent = prepareProperty[component]
|
||||
let supportComponent = supportedProperties[component]
|
||||
|
||||
// don't feed old browsers with SVG components
|
||||
// if (typeof(SVGElement) === undefined && /svg/i.test(component)){
|
||||
// continue
|
||||
// }
|
||||
|
||||
for ( const tweenCategory in prepareComponent ) {
|
||||
// don't feed old browsers with unsupported props
|
||||
// if (!(tweenCategory in document.body.style)) continue;
|
||||
let transformObject = {}
|
||||
for (const tweenProp in obj) {
|
||||
// don't feed old browsers with unsupported props
|
||||
// if (!(tweenProp in document.body.style)) continue;
|
||||
|
||||
if ( defaultValues[tweenProp] && prepareComponent[tweenProp] /*&& tweenProp === tweenCategory*/ ) { // scroll, opacity, other components
|
||||
propertiesObject[tweenProp] = prepareComponent[tweenProp].call(this,tweenProp,obj[tweenProp]);
|
||||
} else if ( !defaultValues[tweenCategory] && tweenCategory === 'transform' && supportComponent.includes(tweenProp) ) { // transform
|
||||
transformObject[tweenProp] = obj[tweenProp]
|
||||
} else if ( !defaultValues[tweenCategory] && supportComponent.includes(tweenProp) ) { // colors, boxModel, category
|
||||
propertiesObject[tweenProp] = prepareComponent[tweenCategory].call(this,tweenProp,obj[tweenProp]);
|
||||
}
|
||||
}
|
||||
// we filter out older browsers by checking Object.keys
|
||||
if (Object.keys && Object.keys(transformObject).length){
|
||||
propertiesObject[tweenCategory] = prepareComponent[tweenCategory].call(this,tweenCategory,transformObject);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export default {
|
||||
getInlineStyle,
|
||||
getStyleForProperty,
|
||||
getStartValues,
|
||||
prepareObject
|
||||
}
|
||||
5
src/core/remove.js
Normal file
5
src/core/remove.js
Normal file
|
|
@ -0,0 +1,5 @@
|
|||
import Tweens from '../objects/Tweens.js'
|
||||
export default (tw) => {
|
||||
let i = Tweens.indexOf(tw)
|
||||
i !== -1 && Tweens.splice(i, 1)
|
||||
}
|
||||
2
src/core/removeAll.js
Normal file
2
src/core/removeAll.js
Normal file
|
|
@ -0,0 +1,2 @@
|
|||
import Tweens from '../objects/Tweens.js'
|
||||
export default () => { Tweens.length = 0 }
|
||||
|
|
@ -1,4 +1,4 @@
|
|||
import {Util} from '../core/objects.js'
|
||||
import Util from '../objects/Util.js'
|
||||
|
||||
// Robert Penner's Easing Functions
|
||||
export function linear (t) { return t; }
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import {Util} from '../core/objects.js'
|
||||
import Util from '../objects/Util.js'
|
||||
import CubicBezier from 'cubic-bezier-easing'
|
||||
|
||||
const Easing = {
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import {Util} from '../core/objects.js'
|
||||
import Util from '../objects/Util.js'
|
||||
|
||||
// Robert Penner's Easing Functions
|
||||
export function linear (t) { return t; }
|
||||
|
|
|
|||
|
|
@ -1,22 +1,24 @@
|
|||
import {version as Version} from './../package.json'
|
||||
import {Util, BaseObjects as Objects} from './core/objects.js'
|
||||
import Objects from './objects/ObjectsBase.js'
|
||||
import Util from './objects/Util.js'
|
||||
import Easing from './easing/easing-base.js'
|
||||
import Internals,{Render} from './core/internals.js'
|
||||
import Internals from './core/Internals.js'
|
||||
import Render from './core/Render.js'
|
||||
import Selector from './util/selector.js'
|
||||
import Interpolate from './core/interpolate.js'
|
||||
import Interpolate from './objects/Interpolate.js'
|
||||
|
||||
import {default as Animation} from './animation/animationBase.js'
|
||||
import Animation from './animation/animationBase.js'
|
||||
|
||||
// TweenConstructor
|
||||
import TweenBase from './tween/tweenBase.js'
|
||||
// Interface only fromTo
|
||||
import {fromTo} from './core/interface.js'
|
||||
import fromTo from './interface/fromTo.js'
|
||||
|
||||
import {baseTransformOps} from './components/transformFunctions.js'
|
||||
import {baseBoxModelOps} from './components/boxModel.js'
|
||||
import {baseOpacityOps} from './components/opacityProperty.js'
|
||||
import {baseScrollOps} from './components/scrollProperty.js'
|
||||
// import {baseCrossBrowserMoveOps} from './components/crossBrowserMove.js'
|
||||
import {baseCrossBrowserMoveOps} from './components/crossBrowserMove.js'
|
||||
|
||||
const BaseTransform = new Animation(baseTransformOps)
|
||||
const BaseBoxModel = new Animation(baseBoxModelOps)
|
||||
|
|
|
|||
|
|
@ -1,8 +1,11 @@
|
|||
import {version as Version} from './../package.json'
|
||||
import Objects,{Util,Components} from './core/objects.js'
|
||||
import Interpolate from './core/interpolate.js'
|
||||
import Process from './core/process.js'
|
||||
import Internals,{Render} from './core/internals.js'
|
||||
import Objects from './objects/Objects.js'
|
||||
import Util from './objects/Util.js'
|
||||
import Components from './objects/Components.js'
|
||||
import Interpolate from './objects/Interpolate.js'
|
||||
import Process from './process/Process.js'
|
||||
import Internals from './core/Internals.js'
|
||||
import Render from './core/Render.js'
|
||||
import CubicBezier from 'cubic-bezier-easing'
|
||||
import Easing from './easing/easing-bezier.js'
|
||||
import Selector from './util/selector.js'
|
||||
|
|
@ -10,10 +13,14 @@ import Selector from './util/selector.js'
|
|||
// TweenConstructor
|
||||
import TweenExtra from './tween/tweenExtra.js'
|
||||
import TweenCollection from './tween/tweenCollection.js'
|
||||
import ProgressBar from './util/progress.js'
|
||||
import {to,fromTo,allTo,allFromTo} from './core/interface.js'
|
||||
import ProgressBar from './util/progressBar.js'
|
||||
// interface
|
||||
import to from './interface/to.js'
|
||||
import fromTo from './interface/fromTo.js'
|
||||
import allTo from './interface/allTo.js'
|
||||
import allFromTo from './interface/allFromTo.js'
|
||||
|
||||
import {default as Animation} from './animation/animationDevelopment.js'
|
||||
import Animation from './animation/animationDevelopment.js'
|
||||
|
||||
// components
|
||||
import {bgPosOps} from './components/backgroundPosition.js'
|
||||
|
|
@ -33,49 +40,49 @@ import {textOps} from './components/textProperties.js'
|
|||
import {textWriteOps} from './components/textWrite.js'
|
||||
import {matrixTransformOps} from './components/transformMatrix.js'
|
||||
|
||||
const BackgroundPosition = new Animation(bgPosOps)
|
||||
const BorderRadius = new Animation(radiusOps)
|
||||
const BoxModel = new Animation(boxModelOps)
|
||||
const ColorProperties = new Animation(colorsOps)
|
||||
const ClipProperty = new Animation(clipOps)
|
||||
const FilterEffects = new Animation(filterOps)
|
||||
const HTMLAttributes = new Animation(attrOps)
|
||||
const OpacityProperty = new Animation(opacityOps)
|
||||
const TextProperties = new Animation(textOps)
|
||||
const TextWrite = new Animation(textWriteOps)
|
||||
const TransformMatrix = new Animation(matrixTransformOps)
|
||||
const ScrollProperty = new Animation(scrollOps)
|
||||
const ShadowProperties = new Animation(shadowOps)
|
||||
const SVGCubicMorph = new Animation(svgCubicMorphOps)
|
||||
const SVGDraw = new Animation(svgDrawOps)
|
||||
const SVGTransform = new Animation(svgTransformOps)
|
||||
// const BackgroundPosition = new Animation(bgPosOps)
|
||||
// const BorderRadius = new Animation(radiusOps)
|
||||
// const BoxModel = new Animation(boxModelOps)
|
||||
// const ColorProperties = new Animation(colorsOps)
|
||||
// const ClipProperty = new Animation(clipOps)
|
||||
// const FilterEffects = new Animation(filterOps)
|
||||
// const HTMLAttributes = new Animation(attrOps)
|
||||
// const OpacityProperty = new Animation(opacityOps)
|
||||
// const TextProperties = new Animation(textOps)
|
||||
// const TextWrite = new Animation(textWriteOps)
|
||||
// const TransformMatrix = new Animation(matrixTransformOps)
|
||||
// const ScrollProperty = new Animation(scrollOps)
|
||||
// const ShadowProperties = new Animation(shadowOps)
|
||||
// const SVGCubicMorph = new Animation(svgCubicMorphOps)
|
||||
// const SVGDraw = new Animation(svgDrawOps)
|
||||
// const SVGTransform = new Animation(svgTransformOps)
|
||||
|
||||
// for (let component in Components) {
|
||||
// let compOps = Components[component]
|
||||
// Components[component] = new Animation(compOps)
|
||||
// }
|
||||
for (let component in Components) {
|
||||
let compOps = Components[component]
|
||||
Components[component] = new Animation(compOps)
|
||||
}
|
||||
|
||||
export default {
|
||||
Animation,
|
||||
// Components,
|
||||
Components: {
|
||||
BackgroundPosition,
|
||||
BorderRadius,
|
||||
BoxModel,
|
||||
ColorProperties,
|
||||
ClipProperty,
|
||||
FilterEffects,
|
||||
HTMLAttributes,
|
||||
OpacityProperty,
|
||||
TextProperties,
|
||||
TextWrite,
|
||||
TransformMatrix,
|
||||
ScrollProperty,
|
||||
ShadowProperties,
|
||||
SVGCubicMorph,
|
||||
SVGDraw,
|
||||
SVGTransform
|
||||
},
|
||||
Components,
|
||||
// Components: {
|
||||
// BackgroundPosition,
|
||||
// BorderRadius,
|
||||
// BoxModel,
|
||||
// ColorProperties,
|
||||
// ClipProperty,
|
||||
// FilterEffects,
|
||||
// HTMLAttributes,
|
||||
// OpacityProperty,
|
||||
// TextProperties,
|
||||
// TextWrite,
|
||||
// TransformMatrix,
|
||||
// ScrollProperty,
|
||||
// ShadowProperties,
|
||||
// SVGCubicMorph,
|
||||
// SVGDraw,
|
||||
// SVGTransform
|
||||
// },
|
||||
|
||||
// Tween Interface
|
||||
TweenExtra,
|
||||
|
|
|
|||
17
src/index.js
17
src/index.js
|
|
@ -1,8 +1,11 @@
|
|||
import {version as Version} from './../package.json'
|
||||
import Objects, {Util,Components} from './core/objects.js'
|
||||
import Process from './core/process.js'
|
||||
import Internals,{Render} from './core/internals.js'
|
||||
import Interpolate from './core/interpolate.js'
|
||||
import Util from './objects/Util.js'
|
||||
import Components from './objects/Components.js'
|
||||
import Objects from './objects/Objects.js'
|
||||
import Process from './process/Process.js'
|
||||
import Internals from './core/Internals.js'
|
||||
import Render from './core/Render.js'
|
||||
import Interpolate from './objects/Interpolate.js'
|
||||
import CubicBezier from 'cubic-bezier-easing'
|
||||
import Easing from './easing/easing-bezier.js' // and CubicBezier easing functions
|
||||
import Selector from './util/selector.js'
|
||||
|
|
@ -10,7 +13,11 @@ import Selector from './util/selector.js'
|
|||
// TweenConstructor
|
||||
import Tween from './tween/tween.js'
|
||||
import TweenCollection from './tween/tweenCollection.js'
|
||||
import {to,fromTo,allTo,allFromTo} from './core/interface.js'
|
||||
// interface
|
||||
import to from './interface/to.js'
|
||||
import fromTo from './interface/fromTo.js'
|
||||
import allTo from './interface/allTo.js'
|
||||
import allFromTo from './interface/allFromTo.js'
|
||||
|
||||
// import {default as Animation} from './animation/animationDevelopment.js'
|
||||
import Animation from './animation/animation.js'
|
||||
|
|
|
|||
7
src/interface/allFromTo.js
Normal file
7
src/interface/allFromTo.js
Normal file
|
|
@ -0,0 +1,7 @@
|
|||
import selector from '../util/selector.js'
|
||||
import TweenCollection from '../tween/tweenCollection.js'
|
||||
|
||||
export default function allFromTo(elements, startObject, endObject, optionsObj) {
|
||||
optionsObj = optionsObj || {}
|
||||
return new TweenCollection(selector(elements,true), startObject, endObject, optionsObj)
|
||||
}
|
||||
9
src/interface/allTo.js
Normal file
9
src/interface/allTo.js
Normal file
|
|
@ -0,0 +1,9 @@
|
|||
import selector from '../util/selector.js'
|
||||
import TweenCollection from '../tween/tweenCollection.js'
|
||||
|
||||
// multiple elements tween objects
|
||||
export default function allTo(elements, endObject, optionsObj) {
|
||||
optionsObj = optionsObj || {}
|
||||
optionsObj.resetStart = endObject
|
||||
return new TweenCollection(selector(elements,true), endObject, endObject, optionsObj)
|
||||
}
|
||||
9
src/interface/fromTo.js
Normal file
9
src/interface/fromTo.js
Normal file
|
|
@ -0,0 +1,9 @@
|
|||
import selector from '../util/selector.js'
|
||||
import TweenConstructor from '../objects/TweenConstructor.js'
|
||||
|
||||
const TC = TweenConstructor.Tween
|
||||
|
||||
export default function fromTo(element, startObject, endObject, optionsObj) {
|
||||
optionsObj = optionsObj || {}
|
||||
return new TC(selector(element), startObject, endObject, optionsObj)
|
||||
}
|
||||
10
src/interface/to.js
Normal file
10
src/interface/to.js
Normal file
|
|
@ -0,0 +1,10 @@
|
|||
import selector from '../util/selector.js'
|
||||
import TweenConstructor from '../objects/TweenConstructor.js'
|
||||
|
||||
const TC = TweenConstructor.Tween
|
||||
|
||||
export default function to(element, endObject, optionsObj) {
|
||||
optionsObj = optionsObj || {}
|
||||
optionsObj.resetStart = endObject
|
||||
return new TC(selector(element), endObject, endObject, optionsObj)
|
||||
}
|
||||
1
src/objects/Components.js
Normal file
1
src/objects/Components.js
Normal file
|
|
@ -0,0 +1 @@
|
|||
export default {}
|
||||
1
src/objects/KUTE.js
Normal file
1
src/objects/KUTE.js
Normal file
|
|
@ -0,0 +1 @@
|
|||
export default {}
|
||||
21
src/objects/Objects.js
Normal file
21
src/objects/Objects.js
Normal file
|
|
@ -0,0 +1,21 @@
|
|||
import supportedProperties from './supportedProperties.js'
|
||||
import defaultValues from './defaultValues.js'
|
||||
import defaultOptions from './defaultOptions.js'
|
||||
import prepareProperty from './prepareProperty.js'
|
||||
import prepareStart from './prepareStart.js'
|
||||
import crossCheck from './crossCheck.js'
|
||||
import onStart from './onStart.js'
|
||||
import onComplete from './onComplete.js'
|
||||
import linkProperty from './linkProperty.js'
|
||||
|
||||
export default {
|
||||
supportedProperties,
|
||||
defaultValues,
|
||||
defaultOptions,
|
||||
prepareProperty,
|
||||
prepareStart,
|
||||
crossCheck,
|
||||
onStart,
|
||||
onComplete,
|
||||
linkProperty
|
||||
}
|
||||
13
src/objects/ObjectsBase.js
Normal file
13
src/objects/ObjectsBase.js
Normal file
|
|
@ -0,0 +1,13 @@
|
|||
import defaultOptions from './defaultOptions.js'
|
||||
import linkProperty from './linkProperty.js'
|
||||
import onStart from './onStart.js'
|
||||
import onComplete from './onComplete.js'
|
||||
import supportedProperties from './supportedProperties.js'
|
||||
|
||||
export default {
|
||||
defaultOptions,
|
||||
linkProperty,
|
||||
onStart,
|
||||
onComplete,
|
||||
supportedProperties
|
||||
}
|
||||
1
src/objects/TweenConstructor.js
Normal file
1
src/objects/TweenConstructor.js
Normal file
|
|
@ -0,0 +1 @@
|
|||
export default {}
|
||||
1
src/objects/Tweens.js
Normal file
1
src/objects/Tweens.js
Normal file
|
|
@ -0,0 +1 @@
|
|||
export default []
|
||||
2
src/objects/Util.js
Normal file
2
src/objects/Util.js
Normal file
|
|
@ -0,0 +1,2 @@
|
|||
// util - a general object for utils like rgbToHex, processEasing
|
||||
export default {}
|
||||
5
src/objects/crossCheck.js
Normal file
5
src/objects/crossCheck.js
Normal file
|
|
@ -0,0 +1,5 @@
|
|||
// checks for differences between the processed start and end values,
|
||||
// can be set to make sure start unit and end unit are same,
|
||||
// stack transforms, process SVG paths,
|
||||
// any type of post processing the component needs
|
||||
export default {}
|
||||
6
src/objects/defaultOptions.js
Normal file
6
src/objects/defaultOptions.js
Normal file
|
|
@ -0,0 +1,6 @@
|
|||
let defaultOptions = {
|
||||
duration: 700,
|
||||
delay: 0,
|
||||
easing: 'linear'
|
||||
}
|
||||
export default defaultOptions
|
||||
1
src/objects/defaultValues.js
Normal file
1
src/objects/defaultValues.js
Normal file
|
|
@ -0,0 +1 @@
|
|||
export default {}
|
||||
5
src/objects/globalObject.js
Normal file
5
src/objects/globalObject.js
Normal file
|
|
@ -0,0 +1,5 @@
|
|||
const globalObject = typeof (global) !== 'undefined' ? global
|
||||
: typeof(self) !== 'undefined' ? self
|
||||
: typeof(window) !== 'undefined' ? window : {}
|
||||
|
||||
export default globalObject
|
||||
2
src/objects/linkProperty.js
Normal file
2
src/objects/linkProperty.js
Normal file
|
|
@ -0,0 +1,2 @@
|
|||
// link properties to interpolate functions
|
||||
export default {}
|
||||
2
src/objects/onComplete.js
Normal file
2
src/objects/onComplete.js
Normal file
|
|
@ -0,0 +1,2 @@
|
|||
// schedule property specific function on animation complete
|
||||
export default {}
|
||||
3
src/objects/onStart.js
Normal file
3
src/objects/onStart.js
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
// schedule property specific function on animation start
|
||||
// link property update function to KUTE.js execution context
|
||||
export default {}
|
||||
2
src/objects/prepareProperty.js
Normal file
2
src/objects/prepareProperty.js
Normal file
|
|
@ -0,0 +1,2 @@
|
|||
// used in preparePropertiesObject
|
||||
export default {}
|
||||
2
src/objects/prepareStart.js
Normal file
2
src/objects/prepareStart.js
Normal file
|
|
@ -0,0 +1,2 @@
|
|||
// check current property value when .to() method is used
|
||||
export default {}
|
||||
1
src/objects/supportedProperties.js
Normal file
1
src/objects/supportedProperties.js
Normal file
|
|
@ -0,0 +1 @@
|
|||
export default {}
|
||||
11
src/process/Process.js
Normal file
11
src/process/Process.js
Normal file
|
|
@ -0,0 +1,11 @@
|
|||
import getInlineStyle from './getInlineStyle.js'
|
||||
import getStyleForProperty from './getStyleForProperty.js'
|
||||
import getStartValues from './getStartValues.js'
|
||||
import prepareObject from './prepareObject.js'
|
||||
|
||||
export default {
|
||||
getInlineStyle,
|
||||
getStyleForProperty,
|
||||
getStartValues,
|
||||
prepareObject
|
||||
}
|
||||
34
src/process/getInlineStyle.js
Normal file
34
src/process/getInlineStyle.js
Normal file
|
|
@ -0,0 +1,34 @@
|
|||
// getInlineStyle - get transform style for element from cssText for .to() method
|
||||
export default function(el) {
|
||||
if ( !el.style ) return; // if the scroll applies to `window` it returns as it has no styling
|
||||
let css = el.style.cssText.replace(/\s/g,'').split(';'), // the cssText | the resulting transform object
|
||||
transformObject = {},
|
||||
arrayFn = ['translate3d','translate','scale3d','skew'];
|
||||
|
||||
// if we have any inline style in the cssText attribute, usually it has higher priority
|
||||
// for ( let i=0, csl = css.length; i<csl; i++ ){
|
||||
// if ( /transform/i.test(css[i])) {
|
||||
// const tps = css[i].split(':')[1].split(')'); //all transform properties
|
||||
// for ( let k=0, tpl = tps.length-1; k< tpl; k++){
|
||||
// const tpv = tps[k].split('('); // each transform property, the sp is for transform property
|
||||
// const tp = tpv[0];
|
||||
// const tv = tpv[1];
|
||||
// if ( !/matrix/.test(tp) ){
|
||||
// transformObject[tp] = arrayFn.includes(tp) ? tv.split(',') : tv;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
css.map(cs => {
|
||||
if ( /transform/i.test(cs)) {
|
||||
let tps = cs.split(':')[1].split(')'); //all transform properties
|
||||
tps.map(tpi => {
|
||||
let tpv = tpi.split('('), tp = tpv[0], tv = tpv[1]; // each transform property
|
||||
if ( !/matrix/.test(tp) ){
|
||||
transformObject[tp] = arrayFn.includes(tp) ? tv.split(',') : tv;
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
return transformObject;
|
||||
}
|
||||
33
src/process/getStartValues.js
Normal file
33
src/process/getStartValues.js
Normal file
|
|
@ -0,0 +1,33 @@
|
|||
import getInlineStyle from './getInlineStyle.js'
|
||||
import prepareObject from './prepareObject.js'
|
||||
import defaultValues from '../objects/defaultValues.js'
|
||||
import prepareStart from '../objects/prepareStart.js'
|
||||
import supportedProperties from '../objects/supportedProperties.js'
|
||||
|
||||
// getStartValues - returns the startValue for to() method
|
||||
export default function () {
|
||||
const startValues = {},
|
||||
currentStyle = getInlineStyle(this.element);
|
||||
|
||||
for (const tweenProp in this.valuesStart) {
|
||||
for ( const component in prepareStart) {
|
||||
let componentStart = prepareStart[component]
|
||||
for ( const tweenCategory in componentStart) {
|
||||
if ( tweenCategory === tweenProp && componentStart[tweenProp] ) { // clip, opacity, scroll
|
||||
startValues[tweenProp] = componentStart[tweenCategory].call(this,tweenProp,this.valuesStart[tweenProp])
|
||||
} else if ( supportedProperties[component] && supportedProperties[component].includes(tweenProp) ) { // find in an array of properties
|
||||
startValues[tweenProp] = componentStart[tweenCategory].call(this,tweenProp,this.valuesStart[tweenProp])
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// stack transformCSS props for .to() chains
|
||||
for ( const current in currentStyle ){ // also add to startValues values from previous tweens
|
||||
if ( !( current in this.valuesStart ) ) {
|
||||
startValues[current] = currentStyle[current] || defaultValues[current];
|
||||
}
|
||||
}
|
||||
this.valuesStart = {}
|
||||
prepareObject.call(this,startValues,'start');
|
||||
}
|
||||
13
src/process/getStyleForProperty.js
Normal file
13
src/process/getStyleForProperty.js
Normal file
|
|
@ -0,0 +1,13 @@
|
|||
import defaultValues from '../objects/defaultValues.js'
|
||||
|
||||
// getStyleForProperty - get computed style property for element for .to() method
|
||||
export default function(elem, propertyName) {
|
||||
let styleAttribute = elem.style,
|
||||
computedStyle = getComputedStyle(elem) || elem.currentStyle,
|
||||
styleValue = styleAttribute[propertyName] && !/auto|initial|none|unset/.test(styleAttribute[propertyName])
|
||||
? styleAttribute[propertyName]
|
||||
: computedStyle[propertyName];
|
||||
if ( propertyName !== 'transform' && (propertyName in computedStyle || propertyName in styleAttribute) ) {
|
||||
return styleValue ? styleValue : defaultValues[propertyName];
|
||||
}
|
||||
}
|
||||
31
src/process/prepareObject.js
Normal file
31
src/process/prepareObject.js
Normal file
|
|
@ -0,0 +1,31 @@
|
|||
import prepareProperty from '../objects/prepareProperty.js'
|
||||
import supportedProperties from '../objects/supportedProperties.js'
|
||||
import defaultValues from '../objects/defaultValues.js'
|
||||
|
||||
// prepareObject - returns all processed valuesStart / valuesEnd
|
||||
export default function (obj, fn) { // this, props object, type: start/end
|
||||
const propertiesObject = fn === 'start' ? this.valuesStart : this.valuesEnd
|
||||
|
||||
for ( const component in prepareProperty ) {
|
||||
let prepareComponent = prepareProperty[component],
|
||||
supportComponent = supportedProperties[component]
|
||||
|
||||
for ( const tweenCategory in prepareComponent ) {
|
||||
let transformObject = {}
|
||||
for (const tweenProp in obj) {
|
||||
|
||||
if ( defaultValues[tweenProp] && prepareComponent[tweenProp] ) { // scroll, opacity, other components
|
||||
propertiesObject[tweenProp] = prepareComponent[tweenProp].call(this,tweenProp,obj[tweenProp]);
|
||||
} else if ( !defaultValues[tweenCategory] && tweenCategory === 'transform' && supportComponent.includes(tweenProp) ) { // transform
|
||||
transformObject[tweenProp] = obj[tweenProp]
|
||||
} else if ( !defaultValues[tweenCategory] && supportComponent && supportComponent.includes(tweenProp) ) { // colors, boxModel, category
|
||||
propertiesObject[tweenProp] = prepareComponent[tweenCategory].call(this,tweenProp,obj[tweenProp]);
|
||||
}
|
||||
}
|
||||
// we filter out older browsers by checking Object.keys
|
||||
if (Object.keys && Object.keys(transformObject).length){
|
||||
propertiesObject[tweenCategory] = prepareComponent[tweenCategory].call(this,tweenCategory,transformObject);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,10 +1,15 @@
|
|||
|
||||
import KUTE, {TweenConstructor} from '../core/globals.js'
|
||||
// import {TweenConstructor} from '../core/globals.js'
|
||||
import KUTE from '../objects/KUTE.js'
|
||||
import TweenConstructor from '../objects/TweenConstructor.js'
|
||||
|
||||
import TweenBase from './tweenBase.js'
|
||||
import {add,remove,Tick,Ticker} from '../core/internals.js'
|
||||
import {crossCheck,defaultOptions} from '../core/objects.js'
|
||||
import {prepareObject,getStartValues} from '../core/process.js'
|
||||
import add from '../core/add.js'
|
||||
import remove from '../core/remove.js'
|
||||
import defaultOptions from '../objects/defaultOptions.js'
|
||||
import crossCheck from '../objects/crossCheck.js'
|
||||
import prepareObject from '../process/prepareObject.js'
|
||||
import getStartValues from '../process/getStartValues.js'
|
||||
import {Tick,Ticker} from '../core/Render.js'
|
||||
|
||||
defaultOptions.repeat = 0
|
||||
defaultOptions.repeatDelay = 0
|
||||
|
|
|
|||
|
|
@ -1,7 +1,15 @@
|
|||
import KUTE, {TweenConstructor} from '../core/globals.js'
|
||||
import {onStart,onComplete,defaultOptions,Util} from '../core/objects.js'
|
||||
// import {Util} from '../core/objects.js'
|
||||
import {Tick,Ticker,linkInterpolation,add,stop,remove} from '../core/internals.js'
|
||||
import KUTE from '../objects/KUTE.js'
|
||||
import TweenConstructor from '../objects/TweenConstructor.js'
|
||||
import onStart from '../objects/onStart.js'
|
||||
import onComplete from '../objects/onComplete.js'
|
||||
import defaultOptions from '../objects/defaultOptions.js'
|
||||
import Util from '../objects/Util.js'
|
||||
|
||||
import {Tick,Ticker,stop} from '../core/Render.js'
|
||||
|
||||
import add from '../core/add.js'
|
||||
import remove from '../core/remove.js'
|
||||
import linkInterpolation from '../core/linkInterpolation.js'
|
||||
|
||||
// single Tween object construct
|
||||
// TweenBase is meant to be use for pre-processed values
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
import KUTE, {TweenConstructor} from '../core/globals.js'
|
||||
import {defaultOptions} from '../core/objects.js'
|
||||
import KUTE from '../objects/KUTE.js'
|
||||
import TweenConstructor from '../objects/TweenConstructor.js'
|
||||
import defaultOptions from '../objects/defaultOptions.js'
|
||||
|
||||
// KUTE.js Tween Collection
|
||||
// ========================
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import {TweenConstructor} from '../core/globals.js'
|
||||
import TweenConstructor from '../objects/TweenConstructor.js'
|
||||
import Tween from './tween.js'
|
||||
|
||||
// to do
|
||||
|
|
|
|||
1
src/util/degToRad.js
Normal file
1
src/util/degToRad.js
Normal file
|
|
@ -0,0 +1 @@
|
|||
export default (a) => { a*Math.PI/180 }
|
||||
8
src/util/fromJSON.js
Normal file
8
src/util/fromJSON.js
Normal file
|
|
@ -0,0 +1,8 @@
|
|||
// toJSON - returns {valuesStart,valuesEnd} object from JSON STRING
|
||||
export default (str) => {
|
||||
let obj = JSON.parse(str)
|
||||
return {
|
||||
valuesStart: obj.valuesStart,
|
||||
valuesEnd: obj.valuesEnd
|
||||
}
|
||||
}
|
||||
10
src/util/getPrefix.js
Normal file
10
src/util/getPrefix.js
Normal file
|
|
@ -0,0 +1,10 @@
|
|||
// getPrefix - returns browser prefix
|
||||
export default function() {
|
||||
let thePrefix, prefixes = ['Moz', 'moz', 'Webkit', 'webkit', 'O', 'o', 'Ms', 'ms'];
|
||||
for (let i = 0, pfl = prefixes.length; i < pfl; i++) {
|
||||
if (`${prefixes[i]}Transform` in document.body.style) {
|
||||
thePrefix = prefixes[i]; break; // !! BREAK
|
||||
}
|
||||
}
|
||||
return thePrefix;
|
||||
}
|
||||
11
src/util/hexToRGB.js
Normal file
11
src/util/hexToRGB.js
Normal file
|
|
@ -0,0 +1,11 @@
|
|||
// hexToRGB - returns RGB color object {r,g,b}
|
||||
export default (hex) => {
|
||||
const hexShorthand = /^#?([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(hexShorthand, (m, r, g, b) => r + r + g + g + b + b);
|
||||
const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
|
||||
return result ? {
|
||||
r: parseInt(result[1], 16),
|
||||
g: parseInt(result[2], 16),
|
||||
b: parseInt(result[3], 16)
|
||||
} : null;
|
||||
}
|
||||
|
|
@ -1,4 +1,3 @@
|
|||
import 'minifill/src/Multi.addEventListener.js'
|
||||
import 'minifill/src/Date.now.js'
|
||||
import 'minifill/src/window.performance.now.js'
|
||||
import 'minifill/src/window.requestAnimationFrame.js'
|
||||
import 'minifill/src/Array.from.js'
|
||||
import 'minifill/src/Array.prototype.includes.js'
|
||||
import 'minifill/src/String.prototype.includes.js'
|
||||
Some files were not shown because too many files have changed in this diff Show more
Loading…
Reference in a new issue