This commit is contained in:
thednp
parent
2c756c90b7
commit
96f7709012
|
|
@ -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 -->
|
||||
|
|
|
|||
129
src/kute-base.js
129
src/kute-base.js
|
|
@ -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
src/kute-base.min.js
vendored
4
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
src/kute-extra.min.js
vendored
4
src/kute-extra.min.js
vendored
File diff suppressed because one or more lines are too long
4
src/kute.min.js
vendored
4
src/kute.min.js
vendored
File diff suppressed because one or more lines are too long
2
src/polyfill.min.js
vendored
2
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 -->
|
||||
|
|
|
|||
Loading…
Reference in a new issue