* added ESLint and updated all code base 
* updated SVGPathCommander, CubicBezier, shorter-js, minifill
* updated polyfills
* minor CSS fixes
This commit is contained in:
thednp 2021-03-30 09:23:30 +00:00
parent df3505b3c3
commit 72b1847a0a
11 changed files with 3426 additions and 1758 deletions

View file

@ -440,7 +440,7 @@ pre.language-markup:after {
font-size: 12px; color: #999;
}
pre.language-javascript:after {content: 'Javascript';}
pre.language-javascript:after {content: 'JavaScript';}
pre.language-clike:after {content: 'node';}
pre.language-markup:after {content: 'HTML';}
pre code {background: none;padding: 0; font-weight: normal; font-size: 100%;}

View file

@ -6,10 +6,11 @@ var translateExamples = document.getElementById('translate-examples'),
trx = translateExamples.getElementsByTagName('div')[1],
trry = translateExamples.getElementsByTagName('div')[2],
trz = translateExamples.getElementsByTagName('div')[3],
tr2dTween = KUTE.to(tr2d, {translate:[170,0]}, {easing:'easingCubicOut', yoyo:true, repeat: 1, duration:1500}),
trxTween = KUTE.to(trx, {translateX:-170}, {easing:'easingCubicOut', yoyo:true, repeat: 1, duration:1500})
tr2dTween = KUTE.to(tr2d, {translate:[170,170]}, {easing:'easingCubicOut', yoyo:true, repeat: 1, duration:1500}),
trxTween = KUTE.to(trx, {translateX:-170}, {easing:'easingCubicOut', yoyo:true, repeat: 1, duration:1500}),
trryTween = KUTE.to(trry, {translate3d:[0,170,0]}, {easing:'easingCubicOut', yoyo:true, repeat: 1, duration:1500}),
trzTween = KUTE.to(trz, {perspective:200, translate3d:[0,0,-100]}, {easing:'easingCubicOut', yoyo:true, repeat: 1, duration:1500});
translateBtn.addEventListener('click', function(){
!tr2dTween.playing && tr2dTween.start();
!trxTween.playing && trxTween.start();
@ -27,6 +28,7 @@ var rotExamples = document.getElementById('rotExamples'),
rxTween = KUTE.to(rx, {rotateX:180}, {easing:'linear', yoyo:true, repeat: 1, duration:1500}),
ryTween = KUTE.to(ry, {perspective:200, rotate3d:[0,-180,0],scale:1.2}, {easing:'easingCubicInOut', yoyo:true, repeat: 1, duration:1500}),
rzTween = KUTE.to(rz, {rotateZ:360}, {easing:'easingBackOut', yoyo:true, repeat: 1, duration:1500});
rotBtn.addEventListener('click', function(){
!r2dTween.playing && r2dTween.start();
!rxTween.playing && rxTween.start();

View file

@ -145,7 +145,7 @@ let fe4 = KUTE.to('selector4', {filter :{ url: '#mySVGFilter', opacity: 40, drop
<div class="example-item example-box" style="background: url('https://picsum.photos/400/300') center center no-repeat; filter: url(#mySVGFilter)">FE1</div>
<div class="example-item example-box" style="background: url('https://picsum.photos/400/300') center center no-repeat; filter: url(#mySVGFilter)">FE2</div>
<div class="example-item example-box" style="background: url('https://picsum.photos/400/300') center center no-repeat; filter: url(#mySVGFilter)">FE3</div>
<div class="example-item example-box" style="background: url('https://picsum.photos/400/300') center center no-repeat; filter: url(#mySVGFilter)">FE4</div>
<div class="example-item example-box" style="background: url('https://picsum.photos/400/300') center center no-repeat">FE4</div>
<div class="example-buttons">
<a class="btn btn-blue" href="javascript:void(0)">Start</a>

View file

@ -1,5 +1,5 @@
/*!
* KUTE.js Base v2.1.0 (http://thednp.github.io/kute.js)
* KUTE.js Base v2.1.1-alpha1 (http://thednp.github.io/kute.js)
* Copyright 2015-2021 © thednp
* Licensed under MIT (https://github.com/thednp/kute.js/blob/master/LICENSE)
*/
@ -9,118 +9,153 @@
(global = typeof globalThis !== 'undefined' ? globalThis : global || self, global.KUTE = factory());
}(this, (function () { 'use strict';
var version = "2.1.0";
var version = "2.1.1-alpha1";
var KUTE = {};
var Tweens = [];
var globalObject = typeof (global) !== 'undefined' ? global
: typeof(self) !== 'undefined' ? self
: typeof(window) !== 'undefined' ? window : {};
var globalObject;
if (typeof (global) !== 'undefined') { globalObject = global; }
else if (typeof (window.self) !== 'undefined') { globalObject = window.self; }
else if (typeof (window) !== 'undefined') { globalObject = window; }
else { globalObject = {}; }
var globalObject$1 = globalObject;
// KUTE.js INTERPOLATE FUNCTIONS
// =============================
var Interpolate = {};
// schedule property specific function on animation start
// link property update function to KUTE.js execution context
var onStart = {};
var Time = {};
Time.now = self.performance.now.bind(self.performance);
var that = window.self || window || {};
Time.now = that.performance.now.bind(that.performance);
var Tick = 0;
var Ticker = function (time) {
var i = 0;
while ( i < Tweens.length ) {
if ( Tweens[i].update(time) ) {
i++;
while (i < Tweens.length) {
if (Tweens[i].update(time)) {
i += 1;
} else {
Tweens.splice(i, 1);
}
}
Tick = requestAnimationFrame(Ticker);
};
// stop requesting animation frame
function stop() {
setTimeout(function () {
setTimeout(function () { // re-added for #81
if (!Tweens.length && Tick) {
cancelAnimationFrame(Tick);
Tick = null;
for (var obj in onStart) {
Object.keys(onStart).forEach(function (obj) {
if (typeof (onStart[obj]) === 'function') {
KUTE[obj] && (delete KUTE[obj]);
if (KUTE[obj]) { delete KUTE[obj]; }
} else {
for (var prop in onStart[obj]) {
KUTE[prop] && (delete KUTE[prop]);
}
Object.keys(onStart[obj]).forEach(function (prop) {
if (KUTE[prop]) { delete KUTE[prop]; }
});
}
}
for (var i in Interpolate) {
KUTE[i] && (delete KUTE[i]);
}
});
Object.keys(Interpolate).forEach(function (i) {
if (KUTE[i]) { delete KUTE[i]; }
});
}
},64);
}, 64);
}
var Render = {Tick: Tick,Ticker: Ticker,Tweens: Tweens,Time: Time};
for ( var blob in Render ) {
// KUTE.js render update functions
// ===============================
var Render = {
Tick: Tick, Ticker: Ticker, Tweens: Tweens, Time: Time,
};
Object.keys(Render).forEach(function (blob) {
if (!KUTE[blob]) {
KUTE[blob] = blob === 'Time' ? Time.now : Render[blob];
}
}
globalObject["_KUTE"] = KUTE;
});
globalObject$1._KUTE = KUTE;
var defaultOptions = {
duration: 700,
delay: 0,
easing: 'linear'
easing: 'linear',
};
// link properties to interpolate functions
var linkProperty = {};
// schedule property specific function on animation complete
var onComplete = {};
var Objects = {
defaultOptions: defaultOptions,
linkProperty: linkProperty,
onStart: onStart,
onComplete: onComplete
onComplete: onComplete,
};
// util - a general object for utils like rgbToHex, processEasing
var Util = {};
var connect = {};
// Select Robert Penner's Easing Functions
// updated for ESLint
var Easing = {
linear : function (t) { return t; },
easingQuadraticIn : function (t) { return t*t; },
easingQuadraticOut : function (t) { return t*(2-t); },
easingQuadraticInOut : function (t) { return t<.5 ? 2*t*t : -1+(4-2*t)*t; },
easingCubicIn : function (t) { return t*t*t; },
easingCubicOut : function (t) { return (--t)*t*t+1; },
easingCubicInOut : function (t) { return t<.5 ? 4*t*t*t : (t-1)*(2*t-2)*(2*t-2)+1; },
easingCircularIn : function (t) { return -(Math.sqrt(1 - (t * t)) - 1); },
easingCircularOut : function (t) { return Math.sqrt(1 - (t = t - 1) * t); },
easingCircularInOut : function (t) { return ((t*=2) < 1) ? -0.5 * (Math.sqrt(1 - t * t) - 1) : 0.5 * (Math.sqrt(1 - (t -= 2) * t) + 1); },
easingBackIn : function (t) { var s = 1.70158; return t * t * ((s + 1) * t - s) },
easingBackOut : function (t) { var s = 1.70158; return --t * t * ((s + 1) * t + s) + 1 },
easingBackInOut : function (t) {
linear: function (t) { return t; },
easingQuadraticIn: function (t) { return t * t; },
easingQuadraticOut: function (t) { return t * (2 - t); },
easingQuadraticInOut: function (t) { return (t < 0.5 ? 2 * t * t : -1 + (4 - 2 * t) * t); },
easingCubicIn: function (t) { return t * t * t; },
easingCubicOut: function (t0) { var t = t0 - 1; return t * t * t + 1; },
easingCubicInOut: function (t) { return (t < 0.5 ? 4 * t * t * t : (t - 1) * (2 * t - 2) * (2 * t - 2) + 1); },
easingCircularIn: function (t) { return -(Math.sqrt(1 - (t * t)) - 1); },
easingCircularOut: function (t0) { },
easingCircularInOut: function (t0) {
var t = t0 * 2;
if (t < 1) { return -0.5 * (Math.sqrt(1 - t * t) - 1); }
t -= 2; return 0.5 * (Math.sqrt(1 - t * t) + 1);
},
easingBackIn: function (t) { var s = 1.70158; return t * t * ((s + 1) * t - s); },
easingBackOut: function (t0) {
var s = 1.70158;
var t = t0 - 1;
return t * t * ((s + 1) * t + s) + 1;
},
easingBackInOut: function (t0) {
var s = 1.70158 * 1.525;
if ((t *= 2) < 1) { return 0.5 * (t * t * ((s + 1) * t - s)) }
return 0.5 * ((t -= 2) * t * ((s + 1) * t + s) + 2)
}
var t = t0 * 2;
if (t < 1) { return 0.5 * (t * t * ((s + 1) * t - s)); }
t -= 2; return 0.5 * (t * t * ((s + 1) * t + s) + 2);
},
};
function processEasing(fn) {
if ( typeof fn === 'function') {
if (typeof fn === 'function') {
return fn;
} else if ( typeof Easing[fn] === 'function' ) {
return Easing[fn];
} else {
return Easing.linear
} if (typeof Easing[fn] === 'function') {
return Easing[fn]; // regular Robert Penner Easing Functions
}
return Easing.linear;
}
connect.processEasing = processEasing;
function add (tw) { return Tweens.push(tw); }
function remove (tw) {
var i = Tweens.indexOf(tw);
i !== -1 && Tweens.splice(i, 1);
if (i !== -1) { Tweens.splice(i, 1); }
}
function getAll () { return Tweens; }
@ -131,33 +166,33 @@
function linkInterpolation() {
var this$1 = this;
var loop = function ( component ) {
// DON'T change
Object.keys(linkProperty).forEach(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 && 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]);
Object.keys(componentLink).forEach(function (fnObj) {
if (typeof (componentLink[fnObj]) === 'function' // ATTR, colors, scroll, boxModel, borderRadius
&& 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); })); })) {
if (!KUTE[fnObj]) { KUTE[fnObj] = componentLink[fnObj]; }
} else {
for ( var prop in this$1.valuesEnd ) {
for ( var i in this$1.valuesEnd[prop] ) {
if ( typeof(componentLink[i]) === 'function' ) {
!KUTE[i] && (KUTE[i] = componentLink[i]);
Object.keys(this$1.valuesEnd).forEach(function (prop) {
Object.keys(this$1.valuesEnd[prop]).forEach(function (i) {
if (typeof (componentLink[i]) === 'function') { // transformCSS3
if (!KUTE[i]) { KUTE[i] = componentLink[i]; }
} else {
for (var j in componentLink[fnObj]){
if (componentLink[i] && typeof(componentLink[i][j]) === 'function' ) {
!KUTE[j] && (KUTE[j] = componentLink[i][j]);
Object.keys(componentLink[fnObj]).forEach(function (j) {
if (componentLink[i] && typeof (componentLink[i][j]) === 'function') { // transformMatrix
if (!KUTE[j]) { KUTE[j] = componentLink[i][j]; }
}
}
});
}
}
}
});
});
}
}
};
for (var component in linkProperty)loop( component );
});
});
}
var Internals = {
@ -166,136 +201,203 @@
getAll: getAll,
removeAll: removeAll,
stop: stop,
linkInterpolation: linkInterpolation
linkInterpolation: linkInterpolation,
};
// a public selector utility
function selector(el, multi) {
try{
try {
var requestedElem;
if (multi){
requestedElem = el instanceof HTMLCollection
|| el instanceof NodeList
|| el instanceof Array && el.every(function (x) { return x instanceof Element; })
? el : document.querySelectorAll(el);
var itemsArray;
if (multi) {
itemsArray = el instanceof Array && el.every(function (x) { return x instanceof Element; });
requestedElem = el instanceof HTMLCollection || el instanceof NodeList || itemsArray
? el : document.querySelectorAll(el);
} else {
requestedElem = el instanceof Element
|| el === window
? el : document.querySelector(el);
requestedElem = el instanceof Element || el === window // scroll
? el : document.querySelector(el);
}
return requestedElem;
} catch(e){
console.error(("KUTE.js - Element(s) not found: " + el + "."));
} catch (e) {
throw TypeError(("KUTE.js - Element(s) not found: " + el + "."));
}
}
var AnimationBase = function AnimationBase(Component){
return this.setComponent(Component)
// Animation class
var AnimationBase = function AnimationBase(Component) {
return this.setComponent(Component);
};
AnimationBase.prototype.setComponent = function setComponent (Component){
AnimationBase.prototype.setComponent = function setComponent (Component) {
var ComponentName = Component.component;
// const Objects = { defaultValues, defaultOptions, Interpolate, linkProperty }
var Functions = { onStart: onStart, onComplete: onComplete };
var Category = Component.category;
var Property = Component.property;
supportedProperties[ComponentName] = Component.properties || Component.subProperties || Component.property;
// ESLint
this._ = 0;
// set supported category/property
supportedProperties[ComponentName] = Component.properties
|| Component.subProperties || Component.property;
// set additional options
if (Component.defaultOptions) {
for (var op in Component.defaultOptions) {
Object.keys(Component.defaultOptions).forEach(function (op) {
defaultOptions[op] = Component.defaultOptions[op];
}
});
}
// set functions
if (Component.functions) {
for (var fn in Functions) {
Object.keys(Functions).forEach(function (fn) {
if (fn in Component.functions) {
if ( typeof (Component.functions[fn]) === 'function') {
!Functions[fn][ComponentName] && (Functions[fn][ComponentName] = {});
!Functions[fn][ComponentName][ Category||Property ] && (Functions[fn][ComponentName][ Category||Property ] = Component.functions[fn]);
} else {
for ( var ofn in Component.functions[fn] ){
!Functions[fn][ComponentName] && (Functions[fn][ComponentName] = {});
!Functions[fn][ComponentName][ofn] && (Functions[fn][ComponentName][ofn] = Component.functions[fn][ofn]);
if (typeof (Component.functions[fn]) === 'function') {
// if (!Functions[fn][ Category||Property ]) {
// Functions[fn][ Category||Property ] = Component.functions[fn];
// }
if (!Functions[fn][ComponentName]) { Functions[fn][ComponentName] = {}; }
if (!Functions[fn][ComponentName][Category || Property]) {
Functions[fn][ComponentName][Category || Property] = Component.functions[fn];
}
} else {
Object.keys(Component.functions[fn]).forEach(function (ofn) {
// if (!Functions[fn][ofn]) Functions[fn][ofn] = Component.functions[fn][ofn];
if (!Functions[fn][ComponentName]) { Functions[fn][ComponentName] = {}; }
if (!Functions[fn][ComponentName][ofn]) {
Functions[fn][ComponentName][ofn] = Component.functions[fn][ofn];
}
});
}
}
}
});
}
// set interpolate
if (Component.Interpolate) {
for (var fni in Component.Interpolate) {
Object.keys(Component.Interpolate).forEach(function (fni) {
var compIntObj = Component.Interpolate[fni];
if ( typeof(compIntObj) === 'function' && !Interpolate[fni] ) {
if (typeof (compIntObj) === 'function' && !Interpolate[fni]) {
Interpolate[fni] = compIntObj;
} else {
for ( var sfn in compIntObj ) {
if ( typeof(compIntObj[sfn]) === 'function' && !Interpolate[fni] ) {
Object.keys(compIntObj).forEach(function (sfn) {
if (typeof (compIntObj[sfn]) === 'function' && !Interpolate[fni]) {
Interpolate[fni] = compIntObj[sfn];
}
}
});
}
}
});
linkProperty[ComponentName] = Component.Interpolate;
}
// set component util
if (Component.Util) {
for (var fnu in Component.Util){
!Util[fnu] && (Util[fnu] = Component.Util[fnu]);
}
Object.keys(Component.Util).forEach(function (fnu) {
if (!Util[fnu]) { Util[fnu] = Component.Util[fnu]; }
});
}
return {name:ComponentName}
return { name: ComponentName };
};
function queueStart(){
for (var obj in onStart) {
function queueStart() {
var this$1 = this;
// fire onStart actions
Object.keys(onStart).forEach(function (obj) {
if (typeof (onStart[obj]) === 'function') {
onStart[obj].call(this,obj);
onStart[obj].call(this$1, obj); // easing functions
} else {
for (var prop in onStart[obj]) {
onStart[obj][prop].call(this,prop);
}
Object.keys(onStart[obj]).forEach(function (prop) {
onStart[obj][prop].call(this$1, prop);
});
}
}
});
// add interpolations
linkInterpolation.call(this);
}
var TweenBase = function TweenBase(targetElement, startObject, endObject, options){
// single Tween object construct
// TweenBase is meant to be use for pre-processed values
var TweenBase = function TweenBase(targetElement, startObject, endObject, opsObject) {
var this$1 = this;
// element animation is applied to
this.element = targetElement;
this.playing = false;
this._startTime = null;
this._startFired = false;
this.valuesEnd = endObject;
this.valuesStart = startObject;
options = options || {};
this.valuesEnd = endObject; // valuesEnd
this.valuesStart = startObject; // valuesStart
// OPTIONS
var options = opsObject || {};
// internal option to process inline/computed style at start instead of init
// used by to() method and expects object : {} / false
this._resetStart = options.resetStart || 0;
// you can only set a core easing function as default
this._easing = typeof (options.easing) === 'function' ? options.easing : connect.processEasing(options.easing);
this._duration = options.duration || defaultOptions.duration;
this._delay = options.delay || defaultOptions.delay;
for (var op in options) {
this._duration = options.duration || defaultOptions.duration; // duration option | default
this._delay = options.delay || defaultOptions.delay; // delay option | default
// set other options
Object.keys(options).forEach(function (op) {
var internalOption = "_" + op;
if( !(internalOption in this ) ) { this[internalOption] = options[op]; }
}
if (!(internalOption in this$1)) { this$1[internalOption] = options[op]; }
});
// callbacks should not be set as undefined
// this._onStart = options.onStart
// this._onUpdate = options.onUpdate
// this._onStop = options.onStop
// this._onComplete = options.onComplete
// queue the easing
var easingFnName = this._easing.name;
if (!onStart[easingFnName]) {
onStart[easingFnName] = function(prop){
!KUTE[prop] && prop === this._easing.name && (KUTE[prop] = this._easing);
onStart[easingFnName] = function easingFn(prop) {
if (!KUTE[prop] && prop === this._easing.name) { KUTE[prop] = this._easing; }
};
}
return this;
};
// tween prototype
// queue tween object to main frame update
// move functions that use the ticker outside the prototype to be in the same scope with it
TweenBase.prototype.start = function start (time) {
// now it's a good time to start
add(this);
this.playing = true;
this._startTime = typeof time !== 'undefined' ? time : KUTE.Time();
this._startTime += this._delay;
if (!this._startFired) {
if (this._onStart) {
this._onStart.call(this);
}
queueStart.call(this);
this._startFired = true;
}
!Tick && Ticker();
if (!Tick) { Ticker(); }
return this;
};
TweenBase.prototype.stop = function stop () {
if (this.playing) {
remove(this);
this.playing = false;
if (this._onStop) {
this._onStop.call(this);
}
@ -303,157 +405,254 @@
}
return this;
};
TweenBase.prototype.close = function close () {
for (var component in onComplete){
for (var toClose in onComplete[component]){
onComplete[component][toClose].call(this,toClose);
}
}
var this$1 = this;
// scroll|transformMatrix need this
Object.keys(onComplete).forEach(function (component) {
Object.keys(onComplete[component]).forEach(function (toClose) {
onComplete[component][toClose].call(this$1, toClose);
});
});
// when all animations are finished, stop ticking after ~3 frames
this._startFired = false;
stop.call(this);
};
TweenBase.prototype.chain = function chain (args) {
this._chain = [];
this._chain = args.length ? args : this._chain.concat(args);
return this;
};
TweenBase.prototype.stopChainedTweens = function stopChainedTweens () {
this._chain && this._chain.length && this._chain.map(function (tw){ return tw.stop(); });
if (this._chain && this._chain.length) { this._chain.forEach(function (tw) { return tw.stop(); }); }
};
TweenBase.prototype.update = function update (time) {
time = time !== undefined ? time : KUTE.Time();
var elapsed, progress;
if ( time < this._startTime && this.playing ) { return true; }
elapsed = (time - this._startTime) / this._duration;
var this$1 = this;
var T = time !== undefined ? time : KUTE.Time();
var elapsed;
if (T < this._startTime && this.playing) { return true; }
elapsed = (T - this._startTime) / this._duration;
elapsed = (this._duration === 0 || elapsed > 1) ? 1 : elapsed;
progress = this._easing(elapsed);
for (var tweenProp in this.valuesEnd){
KUTE[tweenProp](this.element,this.valuesStart[tweenProp],this.valuesEnd[tweenProp],progress);
}
// calculate progress
var progress = this._easing(elapsed);
// render the update
Object.keys(this.valuesEnd).forEach(function (tweenProp) {
KUTE[tweenProp](this$1.element,
this$1.valuesStart[tweenProp],
this$1.valuesEnd[tweenProp],
progress);
});
// fire the updateCallback
if (this._onUpdate) {
this._onUpdate.call(this);
}
if (elapsed === 1) {
// fire the complete callback
if (this._onComplete) {
this._onComplete.call(this);
}
// now we're sure no animation is running
this.playing = false;
// stop ticking when finished
this.close();
if (this._chain !== undefined && this._chain.length){
this._chain.map(function (tw){ return tw.start(); });
// start animating chained tweens
if (this._chain !== undefined && this._chain.length) {
this._chain.map(function (tw) { return tw.start(); });
}
return false;
}
return true;
};
// Update Tween Interface
connect.tween = TweenBase;
function fromTo(element, startObject, endObject, optionsObj) {
optionsObj = optionsObj || {};
return new connect.tween(selector(element), startObject, endObject, optionsObj)
var options = optionsObj || {};
var TweenConstructor = connect.tween;
return new TweenConstructor(selector(element), startObject, endObject, options);
}
function numbers(a, b, v) {
a = +a; b -= a; return a + b * v;
function numbers(a, b, v) { // number1, number2, progress
var A = +a;
var B = b - a;
// a = +a; b -= a;
return A + B * v;
}
function arrays(a,b,v){
function arrays(a, b, v) {
var result = [];
for ( var i=0, l=b.length; i<l; i++ ) {
result[i] = ((a[i] + (b[i] - a[i]) * v) * 1000 >> 0 ) / 1000;
for (var i = 0, l = b.length; i < l; i += 1) {
result[i] = ((a[i] + (b[i] - a[i]) * v) * 1000 >> 0) / 1000;
}
return result
return result;
}
/* transformMatrix = {
property : 'transform',
defaultValue: {},
interpolators: {},
functions = { prepareStart, prepareProperty, onStart, crossCheck }
} */
// Component name
var matrixComponent = 'transformMatrixBase';
var CSS3Matrix = typeof(DOMMatrix) !== 'undefined' ? DOMMatrix
: typeof(WebKitCSSMatrix) !== 'undefined' ? WebKitCSSMatrix
: typeof(CSSMatrix) !== 'undefined' ? CSSMatrix
: typeof(MSCSSMatrix) !== 'undefined' ? MSCSSMatrix
: null;
// Component special
// this component is restricted to modern browsers only
var CSS3Matrix = typeof (DOMMatrix) !== 'undefined' ? DOMMatrix : null;
// Component Functions
var onStartTransform = {
transform : function(tweenProp) {
if (this.valuesEnd[tweenProp] && !KUTE[tweenProp]) {
transform: function transform(tweenProp) {
if (CSS3Matrix && this.valuesEnd[tweenProp] && !KUTE[tweenProp]) {
KUTE[tweenProp] = function (elem, a, b, v) {
var matrix = new CSS3Matrix(), transformObject = {};
for ( var p in b ) {
transformObject[p] = p === 'perspective' ? numbers(a[p],b[p],v) : arrays(a[p],b[p],v);
var matrix = new CSS3Matrix();
var tObject = {};
Object.keys(b).forEach(function (p) {
tObject[p] = p === 'perspective' ? numbers(a[p], b[p], v) : arrays(a[p], b[p], v);
});
// set perspective
if (tObject.perspective) { matrix.m34 = -1 / tObject.perspective; }
// set translate
matrix = tObject.translate3d
? matrix.translate(tObject.translate3d[0], tObject.translate3d[1], tObject.translate3d[2])
: matrix;
// set rotation
matrix = tObject.rotate3d
? matrix.rotate(tObject.rotate3d[0], tObject.rotate3d[1], tObject.rotate3d[2])
: matrix;
// set skew
if (tObject.skew) {
matrix = tObject.skew[0] ? matrix.skewX(tObject.skew[0]) : matrix;
matrix = tObject.skew[1] ? matrix.skewY(tObject.skew[1]) : matrix;
}
transformObject.perspective && (matrix.m34 = -1/transformObject.perspective);
matrix = transformObject.translate3d ? (matrix.translate(transformObject.translate3d[0],transformObject.translate3d[1],transformObject.translate3d[2])) : matrix;
matrix = transformObject.rotate3d ? (matrix.rotate(transformObject.rotate3d[0],transformObject.rotate3d[1],transformObject.rotate3d[2])) : matrix;
if (transformObject.skew) {
matrix = transformObject.skew[0] ? matrix.skewX(transformObject.skew[0]) : matrix;
matrix = transformObject.skew[1] ? matrix.skewY(transformObject.skew[1]) : matrix;
}
matrix = transformObject.scale3d ? (matrix.scale(transformObject.scale3d[0],transformObject.scale3d[1],transformObject.scale3d[2])): matrix;
// set scale
matrix = tObject.scale3d
? matrix.scale(tObject.scale3d[0], tObject.scale3d[1], tObject.scale3d[2])
: matrix;
// set element style
elem.style[tweenProp] = matrix.toString();
};
}
},
CSS3Matrix: function(prop) {
if (this.valuesEnd.transform){
!KUTE[prop] && (KUTE[prop] = CSS3Matrix);
CSS3Matrix: function CSS3Matrix$1(prop) {
if (CSS3Matrix && this.valuesEnd.transform) {
if (!KUTE[prop]) { KUTE[prop] = CSS3Matrix; }
}
},
};
// Component Base Object
var baseMatrixTransform = {
component: matrixComponent,
property: 'transform',
functions: {onStart: onStartTransform},
functions: { onStart: onStartTransform },
Interpolate: {
perspective: numbers,
translate3d: arrays,
rotate3d: arrays,
skew: arrays,
scale3d: arrays
}
scale3d: arrays,
},
};
function boxModelOnStart(tweenProp){
// Component Functions
function boxModelOnStart(tweenProp) {
if (tweenProp in this.valuesEnd && !KUTE[tweenProp]) {
KUTE[tweenProp] = function (elem, a, b, v) {
elem.style[tweenProp] = (v > 0.99 || v < 0.01 ? ((numbers(a,b,v)*10)>>0)/10 : (numbers(a,b,v) ) >> 0) + "px";
elem.style[tweenProp] = (v > 0.99 || v < 0.01
? ((numbers(a, b, v) * 10) >> 0) / 10
: (numbers(a, b, v)) >> 0) + "px";
};
}
}
var baseBoxProps = ['top','left','width','height'];
// Component Base Props
var baseBoxProps = ['top', 'left', 'width', 'height'];
var baseBoxOnStart = {};
baseBoxProps.map(function (x){ return baseBoxOnStart[x] = boxModelOnStart; });
baseBoxProps.forEach(function (x) { baseBoxOnStart[x] = boxModelOnStart; });
// Component Base
var baseBoxModel = {
component: 'baseBoxModel',
category: 'boxModel',
properties: baseBoxProps,
Interpolate: {numbers: numbers},
functions: {onStart: baseBoxOnStart}
Interpolate: { numbers: numbers },
functions: { onStart: baseBoxOnStart },
};
function onStartOpacity(tweenProp){
if ( tweenProp in this.valuesEnd && !KUTE[tweenProp]) {
/* opacityProperty = {
property: 'opacity',
defaultValue: 1,
interpolators: {numbers},
functions = { prepareStart, prepareProperty, onStart }
} */
// Component Functions
function onStartOpacity(tweenProp/* , value */) {
// opacity could be 0 sometimes, we need to check regardless
if (tweenProp in this.valuesEnd && !KUTE[tweenProp]) {
KUTE[tweenProp] = function (elem, a, b, v) {
elem.style[tweenProp] = ((numbers(a,b,v) * 1000)>>0)/1000;
elem.style[tweenProp] = ((numbers(a, b, v) * 1000) >> 0) / 1000;
};
}
}
// Base Component
var baseOpacity = {
component: 'baseOpacity',
property: 'opacity',
Interpolate: {numbers: numbers},
functions: {onStart: onStartOpacity}
// defaultValue: 1,
Interpolate: { numbers: numbers },
functions: { onStart: onStartOpacity },
};
// import {baseCrossBrowserMove} from './components/crossBrowserMove.js'
// const Transform = new Animation(baseTransform)
var Transform = new AnimationBase(baseMatrixTransform);
var BoxModel = new AnimationBase(baseBoxModel);
var Opacity = new AnimationBase(baseOpacity);
// const Move = new Animation(baseCrossBrowserMove)
// support for kute-base.js ends here
var indexBase = {
Animation: AnimationBase,
Components: {
Transform: Transform,
BoxModel: BoxModel,
Opacity: Opacity,
// Move
},
Tween: TweenBase,
fromTo: fromTo,
Objects: Objects,
Easing: Easing,
Util: Util,
@ -461,7 +660,7 @@
Interpolate: Interpolate,
Internals: Internals,
Selector: selector,
Version: version
Version: version,
};
return indexBase;

File diff suppressed because one or more lines are too long

File diff suppressed because it is too large Load diff

File diff suppressed because one or more lines are too long

4
src/kute.min.js vendored

File diff suppressed because one or more lines are too long

View file

@ -1,3 +1,3 @@
// KUTE.js Polyfill v2.0.14 | 2020 © thednp | MIT-License
// KUTE.js Polyfill v2.1.1-alpha1 | 2021 © thednp | MIT-License
"use strict";
var r,t,n,e;if(Function.prototype.bind||(Function.prototype.bind=function(){var r=Array.prototype.slice,t=this,n=arguments[0],e=r.call(arguments,1);if("function"!=typeof t)throw new TypeError("Function.prototype.bind - what is trying to be bound is not callable");return function(){var o=e.concat(r.call(arguments));return t.apply(n,o)}}),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),p=t(n)?Object(new n(f)):new Array(f),c=0;c<f;)u=o[c],p[c]=a?void 0===i?a(u,c):a.call(i,u,c):u,c+=1;return p.length=f,p})),Array.prototype.map||(Array.prototype.map=function(r){var t,n,e;if(null==this)throw new TypeError("this is null or not defined");var o=Object(this),i=o.length>>>0;if("function"!=typeof r)throw new TypeError(r+" is not a function");for(arguments.length>1&&(t=arguments[1]),n=new Array(i),e=0;e<i;){var a,u;e in o&&(a=o[e],u=r.call(t,a,e,o),n[e]=u),e++}return n}),Array.prototype.some||(Array.prototype.some=function(r,t){if(null==this)throw new TypeError("Array.prototype.some called on null or undefined");if("function"!=typeof r)throw new TypeError;for(var n=Object(this),e=n.length>>>0,o=0;o<e;o++)if(o in n&&r.call(t,n[o],o,n))return!0;return!1}),Array.prototype.every||(Array.prototype.every=function(r,t){var n,e;if(null==this)throw new TypeError("this is null or not defined");var o=Object(this),i=o.length>>>0;if("function"!=typeof r&&"[object Function]"!==Object.prototype.toString.call(r))throw new TypeError;for(arguments.length>1&&(n=t),e=0;e<i;){var a;if(e in o)if(a=o[e],!(n?r.call(n,a,e,o):r(a,e,o)))return!1;e++}return!0}),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}),Array.prototype.flat||Object.defineProperty(Array.prototype,"flat",{configurable:!0,value:function r(){var t=isNaN(arguments[0])?1:Number(arguments[0]);return t?Array.prototype.reduce.call(this,(function(n,e){return Array.isArray(e)?n.push.apply(n,r.call(e,t-1)):n.push(e),n}),[]):Array.prototype.slice.call(this)},writable:!0}),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)}),Date.now||(Date.now=function(){return(new Date).getTime()}),self.performance||(self.performance={}),!self.performance.now){var o=Date.now();self.performance.now=function(){return Date.now()-o}}if(!window.requestAnimationFrame){var i=Date.now();window.requestAnimationFrame=function(r){if("function"!=typeof r)throw new TypeError(r+"is not a function");var t=Date.now(),n=16+i-t;return n<0&&(n=0),i=t,setTimeout((function(){i=Date.now(),r(performance.now())}),n)},window.cancelAnimationFrame=function(r){clearTimeout(r)}}

4
src/polyfill.min.js vendored
View file

@ -1,3 +1,3 @@
// KUTE.js Polyfill v2.0.14 | 2020 © thednp | MIT-License
// KUTE.js Polyfill v2.1.1-alpha1 | 2021 © thednp | MIT-License
"use strict";
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)});
var r,t,e,n;Array.from||(Array.from=(r=Object.prototype.toString,t=function(t){return"function"==typeof t||"[object Function]"===r.call(t)},e=Math.pow(2,53)-1,n=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),e)},function(r){var e=this,i=Object(r);if(null==r)throw new TypeError("Array.from requires an array-like object - not null or undefined");var o,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&&(o=arguments[2])}for(var u,f=n(i.length),p=t(e)?Object(new e(f)):new Array(f),c=0;c<f;)u=i[c],p[c]=a?void 0===o?a(u,c):a.call(o,u,c):u,c+=1;return p.length=f,p})),Array.prototype.flat||Object.defineProperty(Array.prototype,"flat",{configurable:!0,value:function r(){var t=isNaN(arguments[0])?1:Number(arguments[0]);return t?Array.prototype.reduce.call(this,(function(e,n){return Array.isArray(n)?e.push.apply(e,r.call(n,t-1)):e.push(n),e}),[]):Array.prototype.slice.call(this)},writable:!0}),Array.prototype.includes||(Array.prototype.includes=function(r){var t=Object(this),e=parseInt(t.length)||0;if(0===e)return!1;var n,i,o=parseInt(arguments[1])||0;for(o>=0?n=o:(n=e+o)<0&&(n=0);n<e;){if(r===(i=t[n])||r!=r&&i!=i)return!0;n++}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)}),Number.isFinite||(Number.isFinite=function(r){return"number"==typeof r&&isFinite(r)}),Number.isInteger||(Number.isInteger=function(r){return"number"==typeof r&&isFinite(r)&&Math.floor(r)===r}),Number.isNaN||(Number.isNaN=function(r){return"number"==typeof r&&r!=r});

View file

@ -419,7 +419,8 @@ var tween2 = KUTE.to('#triangle', { path: '#square' }).start();
<!-- Placed at the end of the document so the pages load faster -->
<script src="./src/polyfill.min.js"></script>
<script src="./src/kute.min.js"></script>
<!-- <script src="./src/kute.min.js"></script> -->
<script src="../dist/kute.js"></script>
<script src="./assets/js/prism.js"></script>
<script src="./assets/js/scripts.js"></script>
<script src="./assets/js/svgMorph.js"></script>