src/kute-base.js

@@ -1,5 +1,5 @@
 /*!
-* KUTE.js Base v2.0.3 (http://thednp.github.io/kute.js)
+* KUTE.js Base v2.0.6 (http://thednp.github.io/kute.js)
 * Copyright 2015-2020 © thednp
 * Licensed under MIT (https://github.com/thednp/kute.js/blob/master/LICENSE)
 */
@@ -9,7 +9,7 @@
   (global = global || self, global.KUTE = factory());
 }(this, (function () { 'use strict';
 
-  var version = "2.0.3";
+  var version = "2.0.6";
 
   var KUTE = {};
 
@@ -19,24 +19,7 @@
                     : typeof(self) !== 'undefined' ? self
                     : typeof(window) !== 'undefined' ? window : {};
 
-  function numbers(a, b, v) {
-    a = +a; b -= a; return a + b * v;
-  }
-  function units(a, b, u, v) {
-    a = +a; b -= a; return ( a + b * v ) + u;
-  }
-  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;
-    }
-    return result
-  }
-  var Interpolate = {
-    numbers: numbers,
-    units: units,
-    arrays: arrays
-  };
+  var Interpolate = {};
 
   var onStart = {};
 
@@ -105,49 +88,42 @@
     defaultOptions: defaultOptions,
     linkProperty: linkProperty,
     onStart: onStart,
-    onComplete: onComplete,
+    onComplete: onComplete
   };
 
   var Util = {};
 
-  function linear (t) { return t; }
-  function easingQuadraticIn (t) { return t*t; }
-  function easingQuadraticOut (t) { return t*(2-t); }
-  function easingQuadraticInOut (t) { return t<.5 ? 2*t*t : -1+(4-2*t)*t; }
-  function easingCubicIn (t) { return t*t*t; }
-  function easingCubicOut (t) { return (--t)*t*t+1; }
-  function easingCubicInOut (t) { return t<.5 ? 4*t*t*t : (t-1)*(2*t-2)*(2*t-2)+1; }
-  function easingCircularIn (t) { return -(Math.sqrt(1 - (t * t)) - 1); }
-  function easingCircularOut (t) { return Math.sqrt(1 - (t = t - 1) * t); }
-  function easingCircularInOut (t) {  return ((t*=2) < 1) ? -0.5 * (Math.sqrt(1 - t * t) - 1) : 0.5 * (Math.sqrt(1 - (t -= 2) * t) + 1); }
-  function easingBackIn (t) { var s = 1.70158; return t * t * ((s + 1) * t - s); }
-  function easingBackOut (t) { var s = 1.70158; return --t * t * ((s + 1) * t + s) + 1; }
-  function easingBackInOut (t) { 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 connect = {};
+
   var Easing = {
-    linear : linear,
-    easingQuadraticIn : easingQuadraticIn,
-    easingQuadraticOut : easingQuadraticOut,
-    easingQuadraticInOut : easingQuadraticInOut,
-    easingCubicIn : easingCubicIn,
-    easingCubicOut : easingCubicOut,
-    easingCubicInOut : easingCubicInOut,
-    easingCircularIn : easingCircularIn,
-    easingCircularOut : easingCircularOut,
-    easingCircularInOut : easingCircularInOut,
-    easingBackIn : easingBackIn,
-    easingBackOut : easingBackOut,
-    easingBackInOut : easingBackInOut
+    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) {
+      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)
+    }
   };
   function processEasing(fn) {
     if ( typeof fn === 'function') {
       return fn;
-    } else if ( typeof fn === 'string' ) {
+    } else if ( typeof Easing[fn] === 'function' ) {
       return Easing[fn];
     } else {
       return Easing.linear
     }
   }
-  Util.processEasing = processEasing;
+  connect.processEasing = processEasing;
 
   function add (tw) { return Tweens.push(tw); }
 
@@ -273,8 +249,6 @@
     return {name:ComponentName}
   };
 
-  var TweenConstructor = {};
-
   var TweenBase = function TweenBase(targetElement, startObject, endObject, options){
     this.element = targetElement;
     this.playing = false;
@@ -284,7 +258,7 @@
     this.valuesStart = startObject;
     options = options || {};
     this._resetStart = options.resetStart || 0;
-    this._easing = typeof (options.easing) === 'function' ? options.easing : Util.processEasing(options.easing);
+    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) {
@@ -377,13 +351,23 @@
     }
     return true;
   };
-  TweenConstructor.Tween = TweenBase;
-
-  var TC = TweenConstructor.Tween;
+  connect.tween = TweenBase;
 
   function fromTo(element, startObject, endObject, optionsObj) {
     optionsObj = optionsObj || {};
-    return new TC(selector(element), startObject, endObject, optionsObj)
+    return new connect.tween(selector(element), startObject, endObject, optionsObj)
+  }
+
+  function numbers(a, b, v) {
+    a = +a; b -= a; return 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;
+    }
+    return result
   }
 
   var matrixComponent = 'transformMatrix';
@@ -444,6 +428,7 @@
   var baseBoxModel = {
     component: 'baseBoxModel',
     category: 'boxModel',
+    properties: baseBoxProps,
     Interpolate: {numbers: numbers},
     functions: {onStart: baseBoxOnStart}
   };

src/kute-extra.js

@@ -1,5 +1,5 @@
 /*!
-* KUTE.js Extra v2.0.3 (http://thednp.github.io/kute.js)
+* KUTE.js Extra v2.0.6 (http://thednp.github.io/kute.js)
 * Copyright 2015-2020 © thednp
 * Licensed under MIT (https://github.com/thednp/kute.js/blob/master/LICENSE)
 */
@@ -9,7 +9,7 @@
   (global = global || self, global.KUTE = factory());
 }(this, (function () { 'use strict';
 
-  var version = "2.0.3";
+  var version = "2.0.6";
 
   var KUTE = {};
 
@@ -19,24 +19,7 @@
                     : typeof(self) !== 'undefined' ? self
                     : typeof(window) !== 'undefined' ? window : {};
 
-  function numbers(a, b, v) {
-    a = +a; b -= a; return a + b * v;
-  }
-  function units(a, b, u, v) {
-    a = +a; b -= a; return ( a + b * v ) + u;
-  }
-  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;
-    }
-    return result
-  }
-  var Interpolate = {
-    numbers: numbers,
-    units: units,
-    arrays: arrays
-  };
+  var Interpolate = {};
 
   var onStart = {};
 
@@ -311,6 +294,8 @@
     return t2;
   };
 
+  var connect = {};
+
   var Easing = {
     linear :  new CubicBezier(0, 0, 1, 1,'linear'),
     easingSinusoidalIn : new CubicBezier(0.47, 0, 0.745, 0.715,'easingSinusoidalIn'),
@@ -353,7 +338,7 @@
       return Easing.linear
     }
   }
-  Util.processEasing = processBezierEasing;
+  connect.processEasing = processBezierEasing;
 
   function selector(el, multi) {
     try{
@@ -374,8 +359,6 @@
     }
   }
 
-  var TweenConstructor = {};
-
   var TweenBase = function TweenBase(targetElement, startObject, endObject, options){
     this.element = targetElement;
     this.playing = false;
@@ -385,7 +368,7 @@
     this.valuesStart = startObject;
     options = options || {};
     this._resetStart = options.resetStart || 0;
-    this._easing = typeof (options.easing) === 'function' ? options.easing : Util.processEasing(options.easing);
+    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) {
@@ -478,7 +461,7 @@
     }
     return true;
   };
-  TweenConstructor.Tween = TweenBase;
+  connect.tween = TweenBase;
 
   defaultOptions.repeat = 0;
   defaultOptions.repeatDelay = 0;
@@ -627,7 +610,7 @@
     };
     return Tween;
   }(TweenBase));
-  TweenConstructor.Tween = Tween;
+  connect.tween = Tween;
 
   var TweenExtra = (function (Tween) {
     function TweenExtra() {
@@ -655,9 +638,7 @@
     };
     return TweenExtra;
   }(Tween));
-  TweenConstructor.Tween = TweenExtra;
-
-  var TC = TweenConstructor.Tween;
+  connect.tween = TweenExtra;
 
   var TweenCollection = function TweenCollection(els,vS,vE,Ops){
     var this$1 = this;
@@ -670,7 +651,7 @@
       options[i] = Ops || {};
       options[i].delay = i > 0 ? Ops.delay + (Ops.offset||defaultOptions.offset) : Ops.delay;
       if (el instanceof Element) {
-        this$1.tweens.push( new TC(el, vS, vE, options[i]) );
+        this$1.tweens.push( new connect.tween(el, vS, vE, options[i]) );
       } else {
         console.error(("KUTE.js - " + el + " not instanceof [Element]"));
       }
@@ -699,7 +680,7 @@
     var lastTween = this.tweens[this.length-1];
     if (args instanceof TweenCollection){
       lastTween.chain(args.tweens);
-    } else if (args instanceof TC){
+    } else if (args instanceof connect.tween){
       lastTween.chain(args);
     } else {
       throw new TypeError('KUTE.js - invalid chain value')
@@ -728,7 +709,7 @@
     this.element.output = this.element.parentNode.getElementsByTagName('OUTPUT')[0];
     if (!(this.element instanceof HTMLInputElement)) { throw TypeError("Target element is not [HTMLInputElement]") }
     if (this.element.type !=='range') { throw TypeError("Target element is not a range input") }
-    if (!(tween instanceof TweenConstructor.Tween)) { throw TypeError(("tween parameter is not [" + TweenConstructor + "]")) }
+    if (!(tween instanceof connect.tween)) { throw TypeError(("tween parameter is not [" + (connect.tween) + "]")) }
     this.element.setAttribute('value',0);
     this.element.setAttribute('min',0);
     this.element.setAttribute('max',1);
@@ -780,12 +761,12 @@
   function to(element, endObject, optionsObj) {
     optionsObj = optionsObj || {};
     optionsObj.resetStart = endObject;
-    return new TC(selector(element), endObject, endObject, optionsObj)
+    return new connect.tween(selector(element), endObject, endObject, optionsObj)
   }
 
   function fromTo(element, startObject, endObject, optionsObj) {
     optionsObj = optionsObj || {};
-    return new TC(selector(element), startObject, endObject, optionsObj)
+    return new connect.tween(selector(element), startObject, endObject, optionsObj)
   }
 
   function allTo(elements, endObject, optionsObj) {
@@ -952,6 +933,10 @@
     return AnimationDevelopment;
   }(Animation));
 
+  function numbers(a, b, v) {
+    a = +a; b -= a; return a + b * v;
+  }
+
   function trueDimension (dimValue, isAngle) {
     var intValue = parseInt(dimValue) || 0;
     var mUnits = ['px','%','deg','rad','em','rem','vh','vw'];
@@ -1003,6 +988,10 @@
   };
   Components.BackgroundPosition = BackgroundPosition;
 
+  function units(a, b, u, v) {
+    a = +a; b -= a; return ( a + b * v ) + u;
+  }
+
   function radiusOnStartFn(tweenProp){
     if (tweenProp in this.valuesEnd && !KUTE[tweenProp]) {
       KUTE[tweenProp] = function (elem, a, b, v) {
@@ -1047,16 +1036,6 @@
       };
     }
   }
-  var baseBoxProps = ['top','left','width','height'];
-  var baseBoxOnStart = {};
-  baseBoxProps.map(function (x){ return baseBoxOnStart[x] = boxModelOnStart; });
-  var baseBoxModel = {
-    component: 'baseBoxModel',
-    category: 'boxModel',
-    Interpolate: {numbers: numbers},
-    functions: {onStart: baseBoxOnStart}
-  };
-  Components.BoxModelProperties = baseBoxModel;
 
   var boxModelProperties = ['top', 'left', 'width', 'height', 'right', 'bottom', 'minWidth', 'minHeight', 'maxWidth', 'maxHeight',
                             'padding', 'paddingTop','paddingBottom', 'paddingLeft', 'paddingRight',
@@ -1172,6 +1151,7 @@
     for (c in b) { _c[c] = c !== 'a' ? (numbers(a[c],b[c],v)>>0 || 0) : (a[c] && b[c]) ? (numbers(a[c],b[c],v) * 100 >> 0 )/100 : null; }
     return !_c.a ? rgb + _c.r + cm + _c.g + cm + _c.b + ep : rgba + _c.r + cm + _c.g + cm + _c.b + cm + _c.a + ep;
   }
+
   function onStartColors(tweenProp){
     if (this.valuesEnd[tweenProp] && !KUTE[tweenProp]) {
       KUTE[tweenProp] = function (elem, a, b, v) {
@@ -2296,25 +2276,6 @@
   };
   Components.SVGTransformProperty = svgTransform;
 
-  function on (element, event, handler, options) {
-    options = options || false;
-    element.addEventListener(event, handler, options);
-  }
-
-  function off (element, event, handler, options) {
-    options = options || false;
-    element.removeEventListener(event, handler, options);
-  }
-
-  function one (element, event, handler, options) {
-    on(element, event, function handlerWrapper(e){
-      if (e.target === element) {
-        handler(e);
-        off(element, event, handlerWrapper, options);
-      }
-    }, options);
-  }
-
   var supportPassive = (function () {
     var result = false;
     try {
@@ -2323,14 +2284,16 @@
           result = true;
         }
       });
-      one(document, 'DOMContentLoaded', function (){}, opts);
+      document.addEventListener('DOMContentLoaded', function wrap(){
+        document.removeEventListener('DOMContentLoaded', wrap, opts);
+      }, opts);
     } catch (e) {}
     return result;
   })();
 
   var mouseHoverEvents = ('onmouseleave' in document) ? [ 'mouseenter', 'mouseleave'] : [ 'mouseover', 'mouseout' ];
 
-  var supportTouch = ('ontouchstart' in window || navigator.msMaxTouchPoints)||false;
+  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;
@@ -2342,12 +2305,15 @@
     var el = this.element;
     return el === scrollContainer ? { el: document, st: document.body } : { el: el, st: el}
   }
+  function toggleScrollEvents(action,element){
+    element[action](  mouseHoverEvents[0], preventScroll, passiveHandler);
+    element[action](  touchOrWheel, preventScroll, passiveHandler);
+  }
   function scrollIn(){
     var targets = getScrollTargets.call(this);
     if ( 'scroll' in this.valuesEnd && !targets.el.scrolling) {
       targets.el.scrolling = 1;
-      on( targets.el, mouseHoverEvents[0], preventScroll, passiveHandler);
-      on( targets.el, touchOrWheel, preventScroll, passiveHandler);
+      toggleScrollEvents('addEventListener',targets.el);
       targets.st.style.pointerEvents = 'none';
     }
   }
@@ -2355,8 +2321,7 @@
     var targets = getScrollTargets.call(this);
     if ( 'scroll' in this.valuesEnd && targets.el.scrolling) {
       targets.el.scrolling = 0;
-      off( targets.el, mouseHoverEvents[0], preventScroll, passiveHandler);
-      off( targets.el, touchOrWheel, preventScroll, passiveHandler);
+      toggleScrollEvents('removeEventListener',targets.el);
       targets.st.style.pointerEvents = '';
     }
   }
@@ -2392,7 +2357,7 @@
     defaultValue: 0,
     Interpolate: {numbers: numbers},
     functions: scrollFunctions,
-    Util: { preventScroll: preventScroll, scrollIn: scrollIn, scrollOut: scrollOut, getScrollTargets: getScrollTargets }
+    Util: { preventScroll: preventScroll, scrollIn: scrollIn, scrollOut: scrollOut, getScrollTargets: getScrollTargets, toggleScrollEvents: toggleScrollEvents, supportPassive: supportPassive }
   };
   Components.ScrollProperty = scrollProperty;
 
@@ -2626,7 +2591,7 @@
       options.delay = totalDelay;
       options.onComplete = null;
       totalDelay += options.duration;
-      return new TC(el, {text:el.innerHTML}, {text:''}, options );
+      return new connect.tween(el, {text:el.innerHTML}, {text:''}, options );
     }));
     textTween = textTween.concat(newTargets.map(function (el,i){
       var onComplete = function () {target.innerHTML = newText, target.playing = false;};
@@ -2634,7 +2599,7 @@
       options.delay = totalDelay;
       options.onComplete = i === newTargetSegs.length-1 ? onComplete : null;
       totalDelay += options.duration;
-      return new TC(el, {text:''}, {text:newTargetSegs[i].innerHTML}, options );
+      return new connect.tween(el, {text:''}, {text:newTargetSegs[i].innerHTML}, options );
     }));
     textTween.start = function(){
       !target.playing && textTween.map(function (tw){ return tw.start(); }) && (target.playing = true);
@@ -2668,6 +2633,14 @@
   };
   Components.TextWriteProperties = textWrite;
 
+  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;
+    }
+    return result
+  }
+
   var CSS3Matrix = typeof(DOMMatrix) !== 'undefined' ? DOMMatrix
                    : typeof(WebKitCSSMatrix) !== 'undefined' ? WebKitCSSMatrix
                    : typeof(CSSMatrix) !== 'undefined' ? CSSMatrix

src/polyfill.min.js

@@ -1,2 +1,3 @@
+// KUTE.js Polyfill v2.0.6 | 2020 © 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)});