Changes:

* updated `shorter-js`
* improved scrollProperty for lighter size

demo/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.51 (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.51";
 
   var KUTE = {};
 
@@ -141,7 +141,7 @@
   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
@@ -444,6 +444,7 @@
   var baseBoxModel = {
     component: 'baseBoxModel',
     category: 'boxModel',
+    properties: baseBoxProps,
     Interpolate: {numbers: numbers},
     functions: {onStart: baseBoxOnStart}
   };

demo/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.51 (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.51";
 
   var KUTE = {};
 
@@ -1047,16 +1047,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',
@@ -2296,25 +2286,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 +2294,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 +2315,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 +2331,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 +2367,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;
 

dist/kute.esm.js

@@ -1,9 +1,9 @@
 /*!
-* KUTE.js Standard v2.0.3 (http://thednp.github.io/kute.js)
+* KUTE.js Standard v2.0.51 (http://thednp.github.io/kute.js)
 * Copyright 2015-2020 © thednp
 * Licensed under MIT (https://github.com/thednp/kute.js/blob/master/LICENSE)
 */
-var version = "2.0.3";
+var version = "2.0.51";
 
 var KUTE = {};
 
@@ -801,16 +801,6 @@ function boxModelOnStart(tweenProp){
     };
   }
 }
-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;
 
 function getBoxModel(tweenProp){
   return getStyleForProperty(this.element,tweenProp) || defaultValues[tweenProp];
@@ -831,7 +821,7 @@ var essentialBoxModelFunctions = {
 var essentialBoxModel = {
   component: 'essentialBoxModel',
   category: 'boxModel',
-  properties: ['top','left','width','height'],
+  properties: essentialBoxProps,
   defaultValues: essentialBoxPropsValues,
   Interpolate: {numbers: numbers},
   functions: essentialBoxModelFunctions,

dist/kute.js

@@ -1,5 +1,5 @@
 /*!
-* KUTE.js Standard v2.0.3 (http://thednp.github.io/kute.js)
+* KUTE.js Standard v2.0.51 (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.51";
 
   var KUTE = {};
 
@@ -807,16 +807,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;
 
   function getBoxModel(tweenProp){
     return getStyleForProperty(this.element,tweenProp) || defaultValues[tweenProp];
@@ -837,7 +827,7 @@
   var essentialBoxModel = {
     component: 'essentialBoxModel',
     category: 'boxModel',
-    properties: ['top','left','width','height'],
+    properties: essentialBoxProps,
     defaultValues: essentialBoxPropsValues,
     Interpolate: {numbers: numbers},
     functions: essentialBoxModelFunctions,

package.json

@@ -1,6 +1,6 @@
 {
   "name": "kute.js",
-  "version": "2.0.3",
+  "version": "2.0.51",
   "description": "JavaScript animation engine of the future is called KUTE.js.",
   "main": "dist/kute.min.js",
   "module": "dist/kute.esm.js",
@@ -55,7 +55,7 @@
   "dependencies": {
     "cubic-bezier-easing": "^1.0.2",
     "minifill": "^0.0.8",
-    "shorter-js": "^0.0.7"
+    "shorter-js": "^0.0.8"
   },
   "devDependencies": {
     "@rollup/plugin-buble": "^0.21.3",

src/components/boxModelBase.js

@@ -1,5 +1,4 @@
 import KUTE from '../objects/kute.js'
-import Components from '../objects/components.js'
 import {numbers} from '../objects/interpolate.js' 
 
 // Component Functions
@@ -21,12 +20,9 @@ baseBoxProps.map(x=>baseBoxOnStart[x] = boxModelOnStart)
 const baseBoxModel = {
   component: 'baseBoxModel',
   category: 'boxModel',
-  // properties: baseBoxProps,
-  // defaultValues: baseBoxPropsValues,
+  properties: baseBoxProps,
   Interpolate: {numbers},
   functions: {onStart: baseBoxOnStart}
 }
 
-export default baseBoxModel
-
-Components.BoxModelProperties = baseBoxModel
+export default baseBoxModel

src/components/boxModelEssential.js

@@ -32,7 +32,7 @@ const essentialBoxModelFunctions = {
 const essentialBoxModel = {
   component: 'essentialBoxModel',
   category: 'boxModel',
-  properties: ['top','left','width','height'],
+  properties: essentialBoxProps,
   defaultValues: essentialBoxPropsValues,
   Interpolate: {numbers},
   functions: essentialBoxModelFunctions,

src/components/scrollProperty.js

@@ -1,7 +1,9 @@
 import {numbers} from '../objects/interpolate.js'
 import Components from '../objects/components.js'
+import {supportPassive} from 'shorter-js/src/boolean/supportPassive.js'
 
-import {scrollContainer,onStartScroll,onCompleteScroll,scrollIn,scrollOut,getScrollTargets,preventScroll} from './scrollPropertyBase.js'
+
+import {scrollContainer,onStartScroll,onCompleteScroll,scrollIn,scrollOut,getScrollTargets,preventScroll,toggleScrollEvents} from './scrollPropertyBase.js'
 
 // Component Functions
 function getScroll(){
@@ -28,7 +30,7 @@ const scrollProperty = {
   Interpolate: {numbers},
   functions: scrollFunctions,
   // export stuff to global
-  Util: { preventScroll, scrollIn, scrollOut, getScrollTargets }
+  Util: { preventScroll, scrollIn, scrollOut, getScrollTargets, toggleScrollEvents, supportPassive }
 }
 
 export default scrollProperty

src/components/scrollPropertyBase.js

@@ -1,9 +1,6 @@
 import KUTE from '../objects/kute.js'
 import {numbers} from '../objects/interpolate.js'
-import Components from '../objects/components.js'
 
-import {on} from 'shorter-js/src/event/on.js'
-import {off} from 'shorter-js/src/event/off.js'
 import {supportPassive} from 'shorter-js/src/boolean/supportPassive.js'
 import {mouseHoverEvents} from 'shorter-js/src/strings/mouseHoverEvents.js'
 import {supportTouch} from 'shorter-js/src/boolean/supportTouch.js'
@@ -28,13 +25,18 @@ export function getScrollTargets(){
   let el = this.element
   return el === scrollContainer ? { el: document, st: document.body } : { el: el, st: el}
 }
+export function toggleScrollEvents(action,element){
+  element[action](  mouseHoverEvents[0], preventScroll, passiveHandler);
+  element[action](  touchOrWheel, preventScroll, passiveHandler);
+}
 export function scrollIn(){
   let 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);
+    // on( targets.el, mouseHoverEvents[0], preventScroll, passiveHandler);
+    // on( targets.el, touchOrWheel, preventScroll, passiveHandler);
+    toggleScrollEvents('addEventListener',targets.el)
     targets.st.style.pointerEvents = 'none'
   }
 }
@@ -43,8 +45,10 @@ export function scrollOut(){ //prevent scroll when tweening scroll
 
   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);
+    // off( targets.el, mouseHoverEvents[0], preventScroll, passiveHandler);
+    // off( targets.el, touchOrWheel, preventScroll, passiveHandler);
+    toggleScrollEvents('removeEventListener',targets.el)
+
     targets.st.style.pointerEvents = ''
   }
 }
@@ -74,7 +78,7 @@ const baseScroll = {
     onComplete: onCompleteScroll
   },
   // unfortunatelly scroll needs all them no matter the packaging
-  Util: { preventScroll, scrollIn, scrollOut, getScrollTargets }
+  Util: { preventScroll, scrollIn, scrollOut, getScrollTargets, supportPassive }
 }
 
 export default baseScroll

src/components/textWrite.js

@@ -1,4 +1,4 @@
-import TC from '../interface/tc.js'
+import TC from '../interface/tcLink.js'
 import {numbers} from '../objects/interpolate.js' 
 import Components from '../objects/components.js'
 

src/easing/easing-base.js

@@ -34,7 +34,7 @@ const Easing = {
 export function processEasing(fn) {
   if ( typeof fn === 'function') {
     return fn;
-  } else if ( typeof fn === 'string' ) {
+  } else if ( typeof Easing[fn] === 'function' ) {
     return Easing[fn]; // regular Robert Penner Easing Functions
   } else {
     return Easing.linear

src/easing/easing.js

@@ -1,4 +1,4 @@
-import Util from '../objects/Util.js'
+import Util from '../objects/util.js'
 
 // Robert Penner's Easing Functions
 export function linear (t) { return t; }
@@ -98,7 +98,7 @@ const Easing = {
 export function processEasing(fn) {
   if ( typeof fn === 'function') {
     return fn;
-  } else if ( typeof fn === 'string' ) {
+  } else if ( typeof Easing[fn] === 'function' ) {
     return Easing[fn]; // regular Robert Penner Easing Functions
   } else {
     return Easing.linear

src/interface/fromTo.js

@@ -1,5 +1,5 @@
 import selector from '../util/selector.js'
-import TC from './tc.js'
+import TC from './tcLink.js'
 
 export default function fromTo(element, startObject, endObject, optionsObj) {
   optionsObj = optionsObj || {}

src/interface/to.js

@@ -1,5 +1,5 @@
 import selector from '../util/selector.js'
-import TC from './tc.js'
+import TC from './tcLink.js'
 
 export default function to(element, endObject, optionsObj) {
   optionsObj = optionsObj || {}

src/tween/tweenCollection.js

@@ -1,6 +1,6 @@
 import KUTE from '../objects/kute.js'
 import defaultOptions from '../objects/defaultOptions.js'
-import TC from '../interface/tc.js'
+import TC from '../interface/tcLink.js'
 
 // KUTE.js Tween Collection
 // ========================