Changes:
* updated `shorter-js` * improved scrollProperty for lighter size
This commit is contained in:
parent
5603a3bc8e
commit
be367debe0
|
@ -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}
|
||||
};
|
||||
|
|
4
demo/src/kute-base.min.js
vendored
4
demo/src/kute-base.min.js
vendored
File diff suppressed because one or more lines are too long
|
@ -1,5 +1,5 @@
|
|||
/*!
|
||||
* KUTE.js Extra v2.0.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;
|
||||
|
||||
|
|
4
demo/src/kute-extra.min.js
vendored
4
demo/src/kute-extra.min.js
vendored
File diff suppressed because one or more lines are too long
4
demo/src/kute.min.js
vendored
4
demo/src/kute.min.js
vendored
File diff suppressed because one or more lines are too long
16
dist/kute.esm.js
vendored
16
dist/kute.esm.js
vendored
|
@ -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,
|
||||
|
|
4
dist/kute.esm.min.js
vendored
4
dist/kute.esm.min.js
vendored
File diff suppressed because one or more lines are too long
16
dist/kute.js
vendored
16
dist/kute.js
vendored
|
@ -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,
|
||||
|
|
4
dist/kute.min.js
vendored
4
dist/kute.min.js
vendored
File diff suppressed because one or more lines are too long
|
@ -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",
|
||||
|
|
|
@ -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
|
|
@ -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,
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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
|
|
@ -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'
|
||||
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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 || {}
|
||||
|
|
|
@ -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 || {}
|
||||
|
|
|
@ -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
|
||||
// ========================
|
||||
|
|
Loading…
Reference in a new issue