deblan/kute.js
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

Changes:

Browse source 
* Removed `scrollProperty` from official build , thanks to `scroll-behavior: smooth`
* Code Cleanup
This commit is contained in:
thednp 2020-06-11 15:32:05 +00:00
parent 95947f5af8
commit e6a776770d
16 changed files with 41 additions and 353 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
demo/assets/css/kute.css
View file

@ -17,6 +17,11 @@ body {
.condensed { font-family: "Roboto Condensed", "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: normal !important;}
/* smooth scroll */
html {
scroll-behavior: smooth;
}
/* WRAPPER STYLES
-------------------------------------------------- */
.content-wrap { max-width: 80%; position: relative; margin: 0 auto; clear: both; }

11
demo/assets/js/scripts.js
View file

@ -3,17 +3,6 @@ function getRandomInt(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}
// scroll top?
var toTop = document.getElementById('toTop'),
toTopTween = KUTE.to( window, { scroll: 0 }, {easing: 'easingQuarticOut', duration : 1500 } );
function topHandler(e){
e.preventDefault();
toTopTween.start();
}
toTop.addEventListener('click',topHandler,false);
// toggles utility
var toggles = document.querySelectorAll('[data-function="toggle"]');

10
demo/assets/js/scrollProperty.js
View file

@ -11,3 +11,13 @@ button.addEventListener('click', function(e){
!scrollTween.playing && scrollTween.start()
},false);
/* SCROLL EXAMPLE */
// scroll top?
var toTop = document.getElementById('toTop'),
toTopTween = KUTE.to( window, { scroll: 0 }, {easing: 'easingQuarticOut', duration : 1500 } );
function topHandler(e){
e.preventDefault();
toTopTween.start();
}
toTop.addEventListener('click',topHandler,false);

9
demo/scrollProperty.html
View file

@ -22,6 +22,10 @@
<!-- Synthax highlighter -->
<link href="./assets/css/prism.css" rel="stylesheet">
<style>
html {scroll-behavior: auto;}
</style>
</head>
<body>
@ -149,7 +153,8 @@ KUTE.to('#myElement',{scroll: 0 }).start()
<li>The scroll animation is not as smooth as with transform animations, it has no access at sub-pixel level, but you can play around
with various easing functions and durations to find the best possible outcome.</li>
<li>All pages in this documentation have a <code>&lt;a&gt;Back to top&lt;/a&gt;</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>
<li>The component is only bundled with the <code>demo/src/kute-extra.js</code> file. That is thanks to <code>scroll-behavior</code>, but you can
use this component to enable scrolling for legacy browsers.</li>
</ul>
</div>
@ -170,7 +175,7 @@ KUTE.to('#myElement',{scroll: 0 }).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-extra.min.js"></script>
<script src="./assets/js/prism.js"></script>
<script src="./assets/js/scrollProperty.js"></script>

109
demo/src/kute-base.js
View file

@ -1,5 +1,5 @@
/*!
* KUTE.js Base v2.0.2 (http://thednp.github.io/kute.js)
* KUTE.js Base v2.0.3 (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.2";
var version = "2.0.3";
var defaultOptions = {
duration: 700,
@ -474,114 +474,9 @@
functions: {onStart: onStartOpacity}
};
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 {
var opts = Object.defineProperty({}, 'passive', {
get: function() {
result = true;
}
});
one(document, 'DOMContentLoaded', function (){}, opts);
} catch (e) {}
return result;
})();
var mouseHoverEvents = ('onmouseleave' in document) ? [ 'mouseenter', 'mouseleave'] : [ 'mouseover', 'mouseout' ];
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();
}
function getScrollTargets(){
var el = this.element;
return el === scrollContainer ? { el: document, st: document.body } : { el: el, st: el}
}
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);
targets.st.style.pointerEvents = 'none';
}
}
function scrollOut(){
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);
targets.st.style.pointerEvents = '';
}
}
function onStartScroll(tweenProp){
if ( tweenProp in this.valuesEnd && !KUTE[tweenProp]) {
KUTE[tweenProp] = function (elem, a, b, v) {
elem.scrollTop = (numbers(a,b,v))>>0;
};
}
}
function onCompleteScroll(tweenProp){
scrollOut.call(this);
}
var baseScrollOps = {
component: 'scrollProperty',
property: 'scroll',
Interpolate: {numbers: numbers},
functions: {
onStart: onStartScroll,
onComplete: onCompleteScroll
},
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);
var BaseScroll = new AnimationBase(baseScrollOps);
var indexBase = {
Animation: AnimationBase,
Components: {

4
demo/src/kute-base.min.js vendored
View file

File diff suppressed because one or more lines are too long

4
demo/src/kute-extra.js
View file

@ -1,5 +1,5 @@
/*!
* KUTE.js Extra v2.0.2 (http://thednp.github.io/kute.js)
* KUTE.js Extra v2.0.3 (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.2";
var version = "2.0.3";
var supportedProperties = {};

4
demo/src/kute-extra.min.js vendored
View file

File diff suppressed because one or more lines are too long

4
demo/src/kute.min.js vendored
View file

File diff suppressed because one or more lines are too long

102
dist/kute.esm.js vendored
View file

@ -1,9 +1,9 @@
/*!
* KUTE.js Standard v2.0.2 (http://thednp.github.io/kute.js)
* KUTE.js Standard v2.0.3 (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.2";
var version = "2.0.3";
var Util = {};
@ -1310,104 +1310,6 @@ var transformOps = {
};
Components.TransformFunctions = transformOps;
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 {
var opts = Object.defineProperty({}, 'passive', {
get: function() {
result = true;
}
});
one(document, 'DOMContentLoaded', function (){}, opts);
} catch (e) {}
return result;
})();
var mouseHoverEvents = ('onmouseleave' in document) ? [ 'mouseenter', 'mouseleave'] : [ 'mouseover', 'mouseout' ];
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();
}
function getScrollTargets(){
var el = this.element;
return el === scrollContainer ? { el: document, st: document.body } : { el: el, st: el}
}
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);
targets.st.style.pointerEvents = 'none';
}
}
function scrollOut(){
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);
targets.st.style.pointerEvents = '';
}
}
function getScroll(){
this.element = ('scroll' in this.valuesEnd) && (!this.element || this.element === window) ? scrollContainer : this.element;
scrollIn.call(this);
return this.element === scrollContainer ? (window.pageYOffset || scrollContainer.scrollTop) : this.element.scrollTop;
}
function prepareScroll(prop,value){
return parseInt(value);
}
function onStartScroll(tweenProp){
if ( tweenProp in this.valuesEnd && !KUTE[tweenProp]) {
KUTE[tweenProp] = function (elem, a, b, v) {
elem.scrollTop = (numbers(a,b,v))>>0;
};
}
}
function onCompleteScroll(tweenProp){
scrollOut.call(this);
}
var scrollFunctions = {
prepareStart: getScroll,
prepareProperty: prepareScroll,
onStart: onStartScroll,
onComplete: onCompleteScroll
};
var scrollOps = {
component: 'scrollProperty',
property: 'scroll',
defaultValue: 0,
Interpolate: {numbers: numbers},
functions: scrollFunctions,
Util: { preventScroll: preventScroll, scrollIn: scrollIn, scrollOut: scrollOut, scrollContainer: scrollContainer, passiveHandler: passiveHandler, getScrollTargets: getScrollTargets }
};
Components.ScrollProperty = scrollOps;
var percent = function (v, l) { return parseFloat(v) / 100 * l; };
var getRectLength = function (el) {
var w = el.getAttribute('width'),

4
dist/kute.esm.min.js vendored
View file

File diff suppressed because one or more lines are too long

102
dist/kute.js vendored
View file

@ -1,5 +1,5 @@
/*!
* KUTE.js Standard v2.0.2 (http://thednp.github.io/kute.js)
* KUTE.js Standard v2.0.3 (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.2";
var version = "2.0.3";
var Util = {};
@ -1316,104 +1316,6 @@
};
Components.TransformFunctions = transformOps;
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 {
var opts = Object.defineProperty({}, 'passive', {
get: function() {
result = true;
}
});
one(document, 'DOMContentLoaded', function (){}, opts);
} catch (e) {}
return result;
})();
var mouseHoverEvents = ('onmouseleave' in document) ? [ 'mouseenter', 'mouseleave'] : [ 'mouseover', 'mouseout' ];
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();
}
function getScrollTargets(){
var el = this.element;
return el === scrollContainer ? { el: document, st: document.body } : { el: el, st: el}
}
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);
targets.st.style.pointerEvents = 'none';
}
}
function scrollOut(){
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);
targets.st.style.pointerEvents = '';
}
}
function getScroll(){
this.element = ('scroll' in this.valuesEnd) && (!this.element || this.element === window) ? scrollContainer : this.element;
scrollIn.call(this);
return this.element === scrollContainer ? (window.pageYOffset || scrollContainer.scrollTop) : this.element.scrollTop;
}
function prepareScroll(prop,value){
return parseInt(value);
}
function onStartScroll(tweenProp){
if ( tweenProp in this.valuesEnd && !KUTE[tweenProp]) {
KUTE[tweenProp] = function (elem, a, b, v) {
elem.scrollTop = (numbers(a,b,v))>>0;
};
}
}
function onCompleteScroll(tweenProp){
scrollOut.call(this);
}
var scrollFunctions = {
prepareStart: getScroll,
prepareProperty: prepareScroll,
onStart: onStartScroll,
onComplete: onCompleteScroll
};
var scrollOps = {
component: 'scrollProperty',
property: 'scroll',
defaultValue: 0,
Interpolate: {numbers: numbers},
functions: scrollFunctions,
Util: { preventScroll: preventScroll, scrollIn: scrollIn, scrollOut: scrollOut, scrollContainer: scrollContainer, passiveHandler: passiveHandler, getScrollTargets: getScrollTargets }
};
Components.ScrollProperty = scrollOps;
var percent = function (v, l) { return parseFloat(v) / 100 * l; };
var getRectLength = function (el) {
var w = el.getAttribute('width'),

4
dist/kute.min.js vendored
View file

File diff suppressed because one or more lines are too long

4
src/index-base.js
View file

@ -17,13 +17,11 @@ import fromTo from './interface/fromTo.js'
import {baseTransformOps} from './components/transformFunctions.js'
import {baseBoxModelOps} from './components/boxModel.js'
import {baseOpacityOps} from './components/opacityProperty.js'
import {baseScrollOps} from './components/scrollProperty.js'
import {baseCrossBrowserMoveOps} from './components/crossBrowserMove.js'
// import {baseCrossBrowserMoveOps} from './components/crossBrowserMove.js'
const BaseTransform = new Animation(baseTransformOps)
const BaseBoxModel = new Animation(baseBoxModelOps)
const BaseOpacity = new Animation(baseOpacityOps)
const BaseScroll = new Animation(baseScrollOps)
// const BaseCrossBrowserMove = new Animation(baseCrossBrowserMoveOps)
// support for kute-base.js ends here

17
src/index-extra.js
View file

@ -40,23 +40,6 @@ import {textOps} from './components/textProperties.js'
import {textWriteOps} from './components/textWrite.js'
import {matrixTransformOps} from './components/transformMatrix.js'
// const BackgroundPosition = new Animation(bgPosOps)
// const BorderRadius = new Animation(radiusOps)
// const BoxModel = new Animation(boxModelOps)
// const ColorProperties = new Animation(colorsOps)
// const ClipProperty = new Animation(clipOps)
// const FilterEffects = new Animation(filterOps)
// const HTMLAttributes = new Animation(attrOps)
// const OpacityProperty = new Animation(opacityOps)
// const TextProperties = new Animation(textOps)
// const TextWrite = new Animation(textWriteOps)
// const TransformMatrix = new Animation(matrixTransformOps)
// const ScrollProperty = new Animation(scrollOps)
// const ShadowProperties = new Animation(shadowOps)
// const SVGCubicMorph = new Animation(svgCubicMorphOps)
// const SVGDraw = new Animation(svgDrawOps)
// const SVGTransform = new Animation(svgTransformOps)
for (let component in Components) {
let compOps = Components[component]
Components[component] = new Animation(compOps)

1
src/index.js
View file

@ -29,7 +29,6 @@ import {attrOps} from './components/htmlAttributes.js'
import {opacityOps} from './components/opacityProperty.js'
import {textWriteOps} from './components/textWrite.js'
import {transformOps} from './components/transformFunctions.js'
import {scrollOps} from './components/scrollProperty.js'
import {svgDrawOps} from './components/svgDraw.js'
import {svgMorphOps} from './components/svgMorph.js'
import {svgTransformOps} from './components/svgTransform.js'