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

Changes:

Browse source 
* added a proper BASE version for all components
* replaced transformFunctions with transformMatrix in index-base.js
* fixed crossBrowserMove.js sample component
* demo fixes
This commit is contained in:
thednp 2020-06-16 14:40:58 +00:00
parent fed9662776
commit 0e7e4ce817
80 changed files with 1904 additions and 1668 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
demo/backgroundPosition.html
View file

@ -145,8 +145,7 @@ let bgPosTween = KUTE.to('selector1',{backgroundPosition:"left center"}).start()
<!-- JavaScript
================================================== -->
<!-- JavaScript =============================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="./src/polyfill.min.js"></script>
<script src="./src/kute-extra.min.js"></script>

3
demo/borderRadius.html
View file

@ -157,8 +157,7 @@ KUTE.to('selector5',{borderBottomRightRadius:'20px'}).start();
<!-- JavaScript
================================================== -->
<!-- JavaScript =============================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="./src/polyfill.min.js"></script>

3
demo/boxModel.html
View file

@ -165,8 +165,7 @@ let tween8 = KUTE.to('selector1',{margin:'5px'})
<!-- JavaScript
================================================== -->
<!-- JavaScript =============================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="./src/polyfill.min.js"></script>

4
demo/clipProperty.html
View file

@ -140,10 +140,8 @@
</div>
<!-- /.site-wrapper -->
<!-- JavaScript
================================================== -->
<!-- JavaScript =============================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="./src/polyfill.min.js"></script>
<script src="./src/kute-extra.min.js"></script>
<script src="./assets/js/prism.js"></script>

3
demo/colorProperties.html
View file

@ -156,8 +156,7 @@ KUTE.to('selector1',{borderColor:'turquoise'}).start(); // IE9+
<!-- JavaScript
================================================== -->
<!-- JavaScript =============================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="./src/polyfill.min.js"></script>

3
demo/filterEffects.html
View file

@ -177,8 +177,7 @@ let fe4 = KUTE.to('selector4', {filter :{ url: '#mySVGFilter', opacity: 40, drop
<!-- /.site-wrapper -->
<!-- JavaScript
================================================== -->
<!-- JavaScript =============================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="./src/polyfill.min.js"></script>

3
demo/htmlAttributes.html
View file

@ -220,8 +220,7 @@ var rotatingGradient = KUTE.to('#gradient', {attr: {x1:'49%', x2:'51%', y1:'51%'
</footer>
</div><!-- /.site-wrapper -->
<!-- JavaScript
================================================== -->
<!-- JavaScript =============================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="./src/polyfill.min.js"></script>
<script src="./src/kute-extra.min.js"></script>

3
demo/index.html
View file

@ -219,8 +219,7 @@
<!-- JavaScript
================================================== -->
<!-- JavaScript =============================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="./src/polyfill.min.js"></script>

3
demo/opacityProperty.html
View file

@ -138,8 +138,7 @@ let fadeInTween = KUTE.to('selector1',{opacity:1}).start()
</div>
<!-- /.site-wrapper -->
<!-- JavaScript
================================================== -->
<!-- JavaScript =============================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="./src/polyfill.min.js"></script>
<script src="./src/kute-extra.min.js"></script>

4
demo/performance-matrix.html
View file

@ -199,10 +199,8 @@
<div id="container"></div>
<!-- JavaScript
================================================== -->
<!-- JavaScript =============================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<!--<script src="http://cdn.jsdelivr.net/kute.js/1.6.0/kute.min.js"></script> KUTE CDN -->
<script type="text/javascript" src="https://cdn.jsdelivr.net/bootstrap.native/1.0.1/bootstrap-native.min.js"></script>
<script id="kute" src="./src/kute-extra.min.js"></script>

7
demo/performance-transform.html
View file

@ -202,13 +202,8 @@
<div id="container"></div>
<!-- JavaScript
================================================== -->
<!-- JavaScript =============================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<!--<script src="http://cdn.jsdelivr.net/kute.js/1.6.0/kute.min.js"></script> KUTE CDN -->
<script type="text/javascript" src="https://cdn.jsdelivr.net/bootstrap.native/1.0.1/bootstrap-native.min.js"></script>
<script id="kute" src="./src/kute.min.js"></script>

8
demo/performance.html
View file

@ -228,15 +228,11 @@
<!-- JavaScript
================================================== -->
<!-- JavaScript =============================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<!--<script src="http://cdn.jsdelivr.net/kute.js/1.6.0/kute.min.js"></script> KUTE CDN -->
<!--[if !IE ]><!-->
<script type="text/javascript" src="https://cdn.jsdelivr.net/bootstrap.native/1.0.1/bootstrap-native.min.js"></script>
<!-- <script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.2/TweenMax.min.js"></script> -->
<script src="https://cdn.jsdelivr.net/bootstrap.native/1.0.1/bootstrap-native.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.0.5/gsap.min.js"></script>
<script src="./assets/js/tween.min.js"></script>
<script src="./src/kute-extra.min.js"></script>

5
demo/progress.html
View file

@ -206,10 +206,7 @@ document.getElementById('rectangle').addEventListener('click',function(){
</div>
<!-- /.site-wrapper -->
<!-- JavaScript
================================================== -->
<!-- JavaScript =============================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="./src/polyfill.min.js"></script>
<script src="./src/kute-extra.min.js"></script>

3
demo/scrollProperty.html
View file

@ -205,8 +205,7 @@ KUTE.to('#myElement',{scroll: 0 }).start()
</div>
<!-- /.site-wrapper -->
<!-- JavaScript
================================================== -->
<!-- JavaScript =============================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="./src/polyfill.min.js"></script>

5
demo/shadowProperties.html
View file

@ -179,9 +179,8 @@ var myTSTween2 = KUTE.fromTo(
<!-- /.site-wrapper -->
<!-- JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<!-- JavaScript =============================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="./src/polyfill.min.js"></script>
<script src="./src/kute-extra.min.js"></script>

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

@ -101,14 +101,11 @@
var onComplete = {};
var supportedProperties = {};
var Objects = {
defaultOptions: defaultOptions,
linkProperty: linkProperty,
onStart: onStart,
onComplete: onComplete,
supportedProperties: supportedProperties
};
var Util = {};
@ -163,6 +160,8 @@
function removeAll () { Tweens.length = 0; }
var supportedProperties = {};
function linkInterpolation() {
var this$1 = this;
var loop = function ( component ) {
@ -209,7 +208,7 @@
if (multi){
requestedElem = el instanceof HTMLCollection
|| el instanceof NodeList
|| el instanceof Array && el[0] instanceof Element
|| el instanceof Array && el.every(function (x) { return x instanceof Element; })
? el : document.querySelectorAll(el);
} else {
requestedElem = el instanceof Element
@ -222,16 +221,12 @@
}
}
var crossCheck = {};
var AnimationBase = function AnimationBase(Component){
this.Component = Component;
return this.setComponent()
return this.setComponent(Component)
};
AnimationBase.prototype.setComponent = function setComponent (){
var Component = this.Component;
AnimationBase.prototype.setComponent = function setComponent (Component){
var ComponentName = Component.component;
var Functions = { onStart: onStart, onComplete: onComplete, crossCheck: crossCheck };
var Functions = { onStart: onStart, onComplete: onComplete };
var Category = Component.category;
var Property = Component.property;
supportedProperties[ComponentName] = Component.properties || Component.subProperties || Component.property;
@ -242,8 +237,8 @@
}
if (Component.functions) {
for (var fn in Functions) {
if (fn in Component.functions && ['onStart','onComplete'].includes(fn)) {
if (typeof (Component.functions[fn]) === 'function' ) {
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 {
@ -257,8 +252,15 @@
}
if (Component.Interpolate) {
for (var fn$1 in Component.Interpolate) {
if (!Interpolate[fn$1]) {
Interpolate[fn$1] = Component.Interpolate[fn$1];
var compIntObj = Component.Interpolate[fn$1];
if ( typeof(compIntObj) === 'function' && !Interpolate[fn$1] ) {
Interpolate[fn$1] = compIntObj;
} else {
for ( var sfn in compIntObj ) {
if ( typeof(compIntObj[sfn]) === 'function' && !Interpolate[fn$1] ) {
Interpolate[fn$1] = compIntObj[sfn];
}
}
}
}
linkProperty[ComponentName] = Component.Interpolate;
@ -341,6 +343,14 @@
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(); });
};
TweenBase.prototype.update = function update (time) {
time = time !== undefined ? time : KUTE.Time();
var elapsed, progress;
@ -360,6 +370,9 @@
}
this.playing = false;
this.close();
if (this._chain !== undefined && this._chain.length){
this._chain.map(function (tw){ return tw.start(); });
}
return false;
}
return true;
@ -373,73 +386,49 @@
return new TC(selector(element), startObject, endObject, optionsObj)
}
function perspective(a, b, u, v) {
return ("perspective(" + (((a + (b - a) * v) * 1000 >> 0 ) / 1000) + u + ")")
}
function translate3d(a, b, u, v) {
var translateArray = [];
for (var ax=0; ax<3; ax++){
translateArray[ax] = ( a[ax]||b[ax] ? ( (a[ax] + ( b[ax] - a[ax] ) * v ) * 1000 >> 0 ) / 1000 : 0 ) + u;
}
return ("translate3d(" + (translateArray.join(',')) + ")");
}
function rotate3d(a, b, u, v) {
var rotateStr = '';
rotateStr += a[0]||b[0] ? ("rotateX(" + (((a[0] + (b[0] - a[0]) * v) * 1000 >> 0 ) / 1000) + u + ")") : '';
rotateStr += a[1]||b[1] ? ("rotateY(" + (((a[1] + (b[1] - a[1]) * v) * 1000 >> 0 ) / 1000) + u + ")") : '';
rotateStr += a[2]||b[2] ? ("rotateZ(" + (((a[2] + (b[2] - a[2]) * v) * 1000 >> 0 ) / 1000) + u + ")") : '';
return rotateStr
}
function translate(a, b, u, v) {
var translateArray = [];
translateArray[0] = ( a[0]===b[0] ? b[0] : ( (a[0] + ( b[0] - a[0] ) * v ) * 1000 >> 0 ) / 1000 ) + u;
translateArray[1] = a[1]||b[1] ? (( a[1]===b[1] ? b[1] : ( (a[1] + ( b[1] - a[1] ) * v ) * 1000 >> 0 ) / 1000 ) + u) : '0';
return ("translate(" + (translateArray.join(',')) + ")");
}
function rotate(a, b, u, v) {
return ("rotate(" + (((a + (b - a) * v) * 1000 >> 0 ) / 1000) + u + ")")
}
function skew(a, b, u, v) {
var skewArray = [];
skewArray[0] = ( a[0]===b[0] ? b[0] : ( (a[0] + ( b[0] - a[0] ) * v ) * 1000 >> 0 ) / 1000 ) + u;
skewArray[1] = a[1]||b[1] ? (( a[1]===b[1] ? b[1] : ( (a[1] + ( b[1] - a[1] ) * v ) * 1000 >> 0 ) / 1000 ) + u) : '0';
return ("skew(" + (skewArray.join(',')) + ")");
}
function scale (a, b, v) {
return ("scale(" + (((a + (b - a) * v) * 1000 >> 0 ) / 1000) + ")");
}
function onStartTransform(tweenProp){
if (!KUTE[tweenProp] && this.valuesEnd[tweenProp]) {
KUTE[tweenProp] = function (elem, a, b, v) {
elem.style[tweenProp] =
(a.perspective||b.perspective ? perspective(a.perspective,b.perspective,'px',v) : '')
+ (a.translate3d ? translate3d(a.translate3d,b.translate3d,'px',v):'')
+ (a.translate ? translate(a.translate,b.translate,'px',v):'')
+ (a.rotate3d ? rotate3d(a.rotate3d,b.rotate3d,'deg',v):'')
+ (a.rotate||b.rotate ? rotate(a.rotate,b.rotate,'deg',v):'')
+ (a.skew ? skew(a.skew,b.skew,'deg',v):'')
+ (a.scale||b.scale ? scale(a.scale,b.scale,v):'');
};
}
}
var supportedTransformProperties = [
'perspective',
'translate3d', 'translateX', 'translateY', 'translateZ', 'translate',
'rotate3d', 'rotateX', 'rotateY', 'rotateZ', 'rotate',
'skewX', 'skewY', 'skew',
'scale'
];
var baseTransformOps = {
component: 'transformFunctions',
var matrixComponent = 'transformMatrix';
var CSS3Matrix = typeof(DOMMatrix) !== 'undefined' ? DOMMatrix
: typeof(WebKitCSSMatrix) !== 'undefined' ? WebKitCSSMatrix
: typeof(CSSMatrix) !== 'undefined' ? CSSMatrix
: typeof(MSCSSMatrix) !== 'undefined' ? MSCSSMatrix
: null;
var onStartTransform = {
transform : function(tweenProp) {
if (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);
}
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;
elem.style[tweenProp] = matrix.toString();
};
}
},
CSS3Matrix: function(prop) {
if (this.valuesEnd.transform){
!KUTE[prop] && (KUTE[prop] = CSS3Matrix);
}
},
};
var baseMatrixTransform = {
component: matrixComponent,
property: 'transform',
subProperties: supportedTransformProperties,
functions: {onStart: onStartTransform},
Interpolate: {
perspective: perspective,
translate3d: translate3d,
rotate3d: rotate3d,
translate: translate, rotate: rotate, scale: scale, skew: skew
},
perspective: numbers,
translate3d: arrays,
rotate3d: arrays,
skew: arrays,
scale3d: arrays
}
};
function boxModelOnStart(tweenProp){
@ -452,10 +441,9 @@
var baseBoxProps = ['top','left','width','height'];
var baseBoxOnStart = {};
baseBoxProps.map(function (x){ return baseBoxOnStart[x] = boxModelOnStart; });
var baseBoxModelOps = {
component: 'boxModelProps',
var baseBoxModel = {
component: 'baseBoxModel',
category: 'boxModel',
properties: baseBoxProps,
Interpolate: {numbers: numbers},
functions: {onStart: baseBoxOnStart}
};
@ -467,23 +455,22 @@
};
}
}
var baseOpacityOps = {
component: 'opacityProperty',
var baseOpacity = {
component: 'baseOpacity',
property: 'opacity',
Interpolate: {numbers: numbers},
functions: {onStart: onStartOpacity}
};
var BaseTransform = new AnimationBase(baseTransformOps);
var BaseBoxModel = new AnimationBase(baseBoxModelOps);
var BaseOpacity = new AnimationBase(baseOpacityOps);
var Transform = new AnimationBase(baseMatrixTransform);
var BoxModel = new AnimationBase(baseBoxModel);
var Opacity = new AnimationBase(baseOpacity);
var indexBase = {
Animation: AnimationBase,
Components: {
BaseTransform: BaseTransform,
BaseBoxModel: BaseBoxModel,
BaseScroll: BaseScroll,
BaseOpacity: BaseOpacity,
Transform: Transform,
BoxModel: BoxModel,
Opacity: Opacity,
},
TweenBase: TweenBase,
fromTo: fromTo,

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

File diff suppressed because one or more lines are too long

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

File diff suppressed because it is too large Load diff

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

File diff suppressed because one or more lines are too long

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

File diff suppressed because one or more lines are too long

4
demo/svgCubicMorph.html
View file

@ -22,6 +22,7 @@
<!-- Synthax highlighter -->
<link href="./assets/css/prism.css" rel="stylesheet">
</head>
<body>
@ -342,8 +343,7 @@ var tween = KUTE.to('#rectangle', { path: 'M301.113,12.011l99.25,179.996l201.864
<!-- JavaScript
================================================== -->
<!-- JavaScript =============================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="./src/polyfill.min.js"></script>
<script src="./src/kute-extra.min.js"></script>

3
demo/svgDraw.html
View file

@ -151,8 +151,7 @@ var tween3 = KUTE.fromTo('selector1',{draw:'0% 100%'}, {draw:'50% 50%'});
<!-- /.site-wrapper -->
<!-- JavaScript
================================================== -->
<!-- JavaScript =============================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="./src/polyfill.min.js"></script>

6
demo/svgMorph.html
View file

@ -345,7 +345,8 @@ var tween2 = KUTE.to('#triangle', { path: '#square' }).start();
<li>In some cases your start and end shapes don't have a very close size, you can use your vector graphics editor of choice or something like <a href="https://github.com/fontello/svgpath">SVGPath</a> tools to
apply a scale transformation to your shapes' path commands.</li>
<li>The morphing animation is expensive so try to optimize the number of morph animations that run at the same time. When morphing sub-paths/multi-paths instead of cloning shapes to have same number
of shapes in both starting and ending shapes, you should also consider a fade and/or scale animation to improve the overal animation performance, mobile devices still don.</li>
of shapes in both starting and ending shapes, you should also consider a fade and/or scale animation to improve the overal animation performance, mobile devices still don't do very much, regardless
of the advertising.</li>
<li>Large displays would need best resolution possible so a small <code>morphPrecision</code> value (1-10) would be required, assuming performant hardware are powering the displays. For small displays
you can get quite comfortable with almost any value, including the default value.</li>
<li>Because you have the tools at hand, you can also try to use a <code>morphPrecision</code> value for every resolution. Take some time to experiement, you might find a better <code>morphPrecision</code>
@ -373,8 +374,7 @@ var tween2 = KUTE.to('#triangle', { path: '#square' }).start();
<!-- JavaScript
================================================== -->
<!-- JavaScript =============================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="./src/polyfill.min.js"></script>

3
demo/svgTransform.html
View file

@ -375,8 +375,7 @@ KUTE.fromTo(element,
<!-- JavaScript
================================================== -->
<!-- JavaScript =============================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="./src/polyfill.min.js"></script>

3
demo/textProperties.html
View file

@ -144,8 +144,7 @@ let tween3 = KUTE.to('selector1',{wordSpacing:50})
</div>
<!-- /.site-wrapper -->
<!-- JavaScript
================================================== -->
<!-- JavaScript =============================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="./src/polyfill.min.js"></script>

5
demo/textWrite.html
View file

@ -247,10 +247,7 @@ tweenObjects.start();
</div>
<!-- /.site-wrapper -->
<!-- JavaScript
================================================== -->
<!-- JavaScript =============================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="./src/polyfill.min.js"></script>

5
demo/transformFunctions.html
View file

@ -280,10 +280,7 @@ var tween2 = KUTE.fromTo(
</div>
<!-- /.site-wrapper -->
<!-- JavaScript
================================================== -->
<!-- JavaScript =============================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="./src/polyfill.min.js"></script>

5
demo/transformMatrix.html
View file

@ -199,10 +199,7 @@ let mx4 = KUTE.to('el4', { transform: { translate3d:[-50,-50,-50], rotate3d:[0,-
</div>
<!-- /.site-wrapper -->
<!-- JavaScript
================================================== -->
<!-- JavaScript =============================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="./src/polyfill.min.js"></script>

347
dist/kute.esm.js vendored
View file

@ -355,7 +355,7 @@ function selector(el, multi) {
if (multi){
requestedElem = el instanceof HTMLCollection
|| el instanceof NodeList
|| el instanceof Array && el[0] instanceof Element
|| el instanceof Array && el.every(function (x) { return x instanceof Element; })
? el : document.querySelectorAll(el);
} else {
requestedElem = el instanceof Element
@ -438,6 +438,14 @@ TweenBase.prototype.close = function close () {
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(); });
};
TweenBase.prototype.update = function update (time) {
time = time !== undefined ? time : KUTE.Time();
var elapsed, progress;
@ -457,6 +465,9 @@ TweenBase.prototype.update = function update (time) {
}
this.playing = false;
this.close();
if (this._chain !== undefined && this._chain.length){
this._chain.map(function (tw){ return tw.start(); });
}
return false;
}
return true;
@ -572,14 +583,6 @@ var Tween = (function (TweenBase) {
this.valuesStart[reverseProp] = this.valuesRepeat[reverseProp];
}
};
Tween.prototype.chain = function chain (args) {
this._chain = [];
this._chain = args.length ? args : this._chain.concat(args);
return this;
};
Tween.prototype.stopChainedTweens = function stopChainedTweens () {
this._chain && this._chain.length && this._chain.map(function (tw){ return tw.stop(); });
};
Tween.prototype.update = function update (time) {
time = time !== undefined ? time : KUTE.Time();
var elapsed, progress;
@ -798,6 +801,17 @@ 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];
}
@ -814,8 +828,8 @@ var essentialBoxModelFunctions = {
prepareProperty: prepareBoxModel,
onStart: essentialBoxOnStart
};
var essentialBoxModelOps = {
component: 'boxModelProps',
var essentialBoxModel = {
component: 'essentialBoxModel',
category: 'boxModel',
properties: ['top','left','width','height'],
defaultValues: essentialBoxPropsValues,
@ -823,7 +837,7 @@ var essentialBoxModelOps = {
functions: essentialBoxModelFunctions,
Util:{trueDimension: trueDimension}
};
Components.BoxModelEssentialProperties = essentialBoxModelOps;
Components.BoxModelEssential = essentialBoxModel;
function hexToRGB (hex) {
var hexShorthand = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
@ -866,11 +880,6 @@ function colors(a, b, v) {
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;
}
var supportedColors = ['color', 'backgroundColor','borderColor', 'borderTopColor', 'borderRightColor', 'borderBottomColor', 'borderLeftColor', 'outlineColor'];
var defaultColors = {};
supportedColors.forEach(function (tweenProp) {
defaultColors[tweenProp] = '#000';
});
function onStartColors(tweenProp){
if (this.valuesEnd[tweenProp] && !KUTE[tweenProp]) {
KUTE[tweenProp] = function (elem, a, b, v) {
@ -878,6 +887,12 @@ function onStartColors(tweenProp){
};
}
}
var supportedColors = ['color', 'backgroundColor','borderColor', 'borderTopColor', 'borderRightColor', 'borderBottomColor', 'borderLeftColor', 'outlineColor'];
var defaultColors = {};
supportedColors.forEach(function (tweenProp) {
defaultColors[tweenProp] = '#000';
});
var colorsOnStart = {};
supportedColors.map(function (x) { return colorsOnStart[x] = onStartColors; });
function getColor(prop,value) {
@ -886,25 +901,42 @@ function getColor(prop,value) {
function prepareColor(prop,value) {
return trueColor(value);
}
var colorsFunctions = {
var colorFunctions = {
prepareStart: getColor,
prepareProperty: prepareColor,
onStart: colorsOnStart
};
var colorsOps = {
component: 'colorProps',
var colorProperties = {
component: 'colorProperties',
category: 'colors',
properties: supportedColors,
defaultValues: defaultColors,
Interpolate: {numbers: numbers,colors: colors},
functions: colorsFunctions,
functions: colorFunctions,
Util: {trueColor: trueColor}
};
Components.ColorProperties = colorsOps;
Components.ColorProperties = colorProperties;
var attributes = {};
var onStartAttr = {
attr : function(tweenProp){
if (!KUTE[tweenProp] && this.valuesEnd[tweenProp]) {
KUTE[tweenProp] = function (elem, vS, vE, v) {
for ( var oneAttr in vE ){
KUTE.attributes[oneAttr](elem,oneAttr,vS[oneAttr],vE[oneAttr],v);
}
};
}
},
attributes : function(tweenProp){
if (!KUTE[tweenProp] && this.valuesEnd.attr) {
KUTE[tweenProp] = attributes;
}
}
};
var ComponentName = 'htmlAttributes';
var svgColors = ['fill','stroke','stop-color'];
var attributes = {};
function replaceUppercase (a) { return a.replace(/[A-Z]/g, "-$&").toLowerCase(); }
function getAttr(tweenProp,value){
var attrStartValues = {};
@ -957,28 +989,12 @@ function prepareAttr(tweenProp,attrObj){
}
return attributesObject;
}
var onStartAttr = {
attr : function(tweenProp){
if (!KUTE[tweenProp] && this.valuesEnd[tweenProp]) {
KUTE[tweenProp] = function (elem, vS, vE, v) {
for ( var oneAttr in vE ){
KUTE.attributes[oneAttr](elem,oneAttr,vS[oneAttr],vE[oneAttr],v);
}
};
}
},
attributes : function(tweenProp){
if (!KUTE[tweenProp] && this.valuesEnd.attr) {
KUTE[tweenProp] = attributes;
}
}
};
var attrFunctions = {
prepareStart: getAttr,
prepareProperty: prepareAttr,
onStart: onStartAttr
};
var attrOps = {
var htmlAttributes = {
component: ComponentName,
property: 'attr',
subProperties: ['fill','stroke','stop-color','fill-opacity','stroke-opacity'],
@ -987,14 +1003,8 @@ var attrOps = {
functions: attrFunctions,
Util: { replaceUppercase: replaceUppercase, trueColor: trueColor, trueDimension: trueDimension }
};
Components.HTMLAttributes = attrOps;
Components.HTMLAttributes = htmlAttributes;
function getOpacity(tweenProp){
return getStyleForProperty(this.element,tweenProp)
}
function prepareOpacity(tweenProp,value){
return parseFloat(value);
}
function onStartOpacity(tweenProp){
if ( tweenProp in this.valuesEnd && !KUTE[tweenProp]) {
KUTE[tweenProp] = function (elem, a, b, v) {
@ -1002,19 +1012,76 @@ function onStartOpacity(tweenProp){
};
}
}
function getOpacity(tweenProp){
return getStyleForProperty(this.element,tweenProp)
}
function prepareOpacity(tweenProp,value){
return parseFloat(value);
}
var opacityFunctions = {
prepareStart: getOpacity,
prepareProperty: prepareOpacity,
onStart: onStartOpacity
};
var opacityOps = {
var opacityProperty = {
component: 'opacityProperty',
property: 'opacity',
defaultValue: 1,
Interpolate: {numbers: numbers},
functions: opacityFunctions
};
Components.OpacityProperty = opacityOps;
Components.OpacityProperty = opacityProperty;
var lowerCaseAlpha = String("abcdefghijklmnopqrstuvwxyz").split(""),
upperCaseAlpha = String("abcdefghijklmnopqrstuvwxyz").toUpperCase().split(""),
nonAlpha = String("~!@#$%^&*()_+{}[];'<>,./?\=-").split(""),
numeric = String("0123456789").split(""),
alphaNumeric = lowerCaseAlpha.concat(upperCaseAlpha,numeric),
allTypes = alphaNumeric.concat(nonAlpha);
var charSet = {
alpha: lowerCaseAlpha,
upper: upperCaseAlpha,
symbols: nonAlpha,
numeric: numeric,
alphanumeric: alphaNumeric,
all: allTypes,
};
var onStartWrite = {
text: function(tweenProp){
if ( !KUTE[tweenProp] && this.valuesEnd[tweenProp] ) {
var chars = this._textChars,
charsets = chars in charSet ? charSet[chars]
: chars && chars.length ? chars
: charSet[defaultOptions.textChars];
KUTE[tweenProp] = function(elem,a,b,v) {
var initialText = '',
endText = '',
firstLetterA = a.substring(0),
firstLetterB = b.substring(0),
pointer = charsets[(Math.random() * charsets.length)>>0];
if (a === ' ') {
endText = firstLetterB.substring(Math.min(v * firstLetterB.length, firstLetterB.length)>>0, 0 );
elem.innerHTML = v < 1 ? ( ( endText + pointer ) ) : (b === '' ? ' ' : b);
} else if (b === ' ') {
initialText = firstLetterA.substring(0, Math.min((1-v) * firstLetterA.length, firstLetterA.length)>>0 );
elem.innerHTML = v < 1 ? ( ( initialText + pointer ) ) : (b === '' ? ' ' : b);
} else {
initialText = firstLetterA.substring(firstLetterA.length, Math.min(v * firstLetterA.length, firstLetterA.length)>>0 );
endText = firstLetterB.substring(0, Math.min(v * firstLetterB.length, firstLetterB.length)>>0 );
elem.innerHTML = v < 1 ? ( (endText + pointer + initialText) ) : (b === '' ? ' ' : b);
}
};
}
},
number: function(tweenProp) {
if ( tweenProp in this.valuesEnd && !KUTE[tweenProp]) {
KUTE[tweenProp] = function (elem, a, b, v) {
elem.innerHTML = numbers(a, b, v)>>0;
};
}
}
};
function wrapContentsSpan(el,classNAME){
var textWriteWrapper;
@ -1107,20 +1174,6 @@ function createTextTweens(target,newText,options){
};
return textTween
}
var lowerCaseAlpha = String("abcdefghijklmnopqrstuvwxyz").split(""),
upperCaseAlpha = String("abcdefghijklmnopqrstuvwxyz").toUpperCase().split(""),
nonAlpha = String("~!@#$%^&*()_+{}[];'<>,./?\=-").split(""),
numeric = String("0123456789").split(""),
alphaNumeric = lowerCaseAlpha.concat(upperCaseAlpha,numeric),
allTypes = alphaNumeric.concat(nonAlpha);
var charSet = {
alpha: lowerCaseAlpha,
upper: upperCaseAlpha,
symbols: nonAlpha,
numeric: numeric,
alphanumeric: alphaNumeric,
all: allTypes,
};
function getWrite(tweenProp,value){
return this.element.innerHTML;
}
@ -1131,47 +1184,12 @@ function prepareText(tweenProp,value) {
return value === '' ? ' ' : value
}
}
var onStartWrite = {
text: function(tweenProp){
if ( !KUTE[tweenProp] && this.valuesEnd[tweenProp] ) {
var chars = this._textChars,
charsets = chars in charSet ? charSet[chars]
: chars && chars.length ? chars
: charSet[defaultOptions.textChars];
KUTE[tweenProp] = function(elem,a,b,v) {
var initialText = '',
endText = '',
firstLetterA = a.substring(0),
firstLetterB = b.substring(0),
pointer = charsets[(Math.random() * charsets.length)>>0];
if (a === ' ') {
endText = firstLetterB.substring(Math.min(v * firstLetterB.length, firstLetterB.length)>>0, 0 );
elem.innerHTML = v < 1 ? ( ( endText + pointer ) ) : (b === '' ? ' ' : b);
} else if (b === ' ') {
initialText = firstLetterA.substring(0, Math.min((1-v) * firstLetterA.length, firstLetterA.length)>>0 );
elem.innerHTML = v < 1 ? ( ( initialText + pointer ) ) : (b === '' ? ' ' : b);
} else {
initialText = firstLetterA.substring(firstLetterA.length, Math.min(v * firstLetterA.length, firstLetterA.length)>>0 );
endText = firstLetterB.substring(0, Math.min(v * firstLetterB.length, firstLetterB.length)>>0 );
elem.innerHTML = v < 1 ? ( (endText + pointer + initialText) ) : (b === '' ? ' ' : b);
}
};
}
},
number: function(tweenProp) {
if ( tweenProp in this.valuesEnd && !KUTE[tweenProp]) {
KUTE[tweenProp] = function (elem, a, b, v) {
elem.innerHTML = numbers(a, b, v)>>0;
};
}
}
};
var textWriteFunctions = {
prepareStart: getWrite,
prepareProperty: prepareText,
onStart: onStartWrite
};
var textWriteOps = {
var textWrite = {
component: 'textWriteProperties',
category: 'textWrite',
properties: ['text','number'],
@ -1181,7 +1199,7 @@ var textWriteOps = {
functions: textWriteFunctions,
Util: { charSet: charSet, createTextTweens: createTextTweens }
};
Components.TextWriteProperties = textWriteOps;
Components.TextWriteProperties = textWrite;
function perspective(a, b, u, v) {
return ("perspective(" + (((a + (b - a) * v) * 1000 >> 0 ) / 1000) + u + ")")
@ -1218,6 +1236,21 @@ function skew(a, b, u, v) {
function scale (a, b, v) {
return ("scale(" + (((a + (b - a) * v) * 1000 >> 0 ) / 1000) + ")");
}
function onStartTransform(tweenProp){
if (!KUTE[tweenProp] && this.valuesEnd[tweenProp]) {
KUTE[tweenProp] = function (elem, a, b, v) {
elem.style[tweenProp] =
(a.perspective||b.perspective ? perspective(a.perspective,b.perspective,'px',v) : '')
+ (a.translate3d ? translate3d(a.translate3d,b.translate3d,'px',v):'')
+ (a.translate ? translate(a.translate,b.translate,'px',v):'')
+ (a.rotate3d ? rotate3d(a.rotate3d,b.rotate3d,'deg',v):'')
+ (a.rotate||b.rotate ? rotate(a.rotate,b.rotate,'deg',v):'')
+ (a.skew ? skew(a.skew,b.skew,'deg',v):'')
+ (a.scale||b.scale ? scale(a.scale,b.scale,v):'');
};
}
}
function getTransform(tweenProperty,value){
var currentStyle = getInlineStyle(this.element);
return currentStyle[tweenProperty] ? currentStyle[tweenProperty] : defaultValues[tweenProperty];
@ -1249,20 +1282,6 @@ function prepareTransform(prop,obj){
}
return transformObject;
}
function onStartTransform(tweenProp){
if (!KUTE[tweenProp] && this.valuesEnd[tweenProp]) {
KUTE[tweenProp] = function (elem, a, b, v) {
elem.style[tweenProp] =
(a.perspective||b.perspective ? perspective(a.perspective,b.perspective,'px',v) : '')
+ (a.translate3d ? translate3d(a.translate3d,b.translate3d,'px',v):'')
+ (a.translate ? translate(a.translate,b.translate,'px',v):'')
+ (a.rotate3d ? rotate3d(a.rotate3d,b.rotate3d,'deg',v):'')
+ (a.rotate||b.rotate ? rotate(a.rotate,b.rotate,'deg',v):'')
+ (a.skew ? skew(a.skew,b.skew,'deg',v):'')
+ (a.scale||b.scale ? scale(a.scale,b.scale,v):'');
};
}
}
function crossCheckTransform(tweenProp){
if (this.valuesEnd[tweenProp]) {
if ( this.valuesEnd[tweenProp] ) {
@ -1292,7 +1311,7 @@ var defaultTransformValues = {
skewX : 0, skewY : 0, skew: [0,0],
scale : 1
};
var transformOps = {
var transformFunctionsComponent = {
component: 'transformFunctions',
property: 'transform',
subProperties: supportedTransformProperties,
@ -1303,17 +1322,33 @@ var transformOps = {
translate3d: translate3d,
rotate3d: rotate3d,
translate: translate, rotate: rotate, scale: scale, skew: skew
},
}
};
Components.TransformFunctions = transformOps;
Components.TransformFunctions = transformFunctionsComponent;
var percent = function (v, l) { return parseFloat(v) / 100 * l; };
var getRectLength = function (el) {
function onStartDraw(tweenProp){
if ( tweenProp in this.valuesEnd && !KUTE[tweenProp]) {
KUTE[tweenProp] = function (elem,a,b,v) {
var pathLength = (a.l*100>>0)/100,
start = (numbers(a.s,b.s,v)*100>>0)/100,
end = (numbers(a.e,b.e,v)*100>>0)/100,
offset = 0 - start,
dashOne = end+offset;
elem.style.strokeDashoffset = offset + "px";
elem.style.strokeDasharray = (((dashOne <1 ? 0 : dashOne)*100>>0)/100) + "px, " + pathLength + "px";
};
}
}
function percent (v,l) {
return parseFloat(v) / 100 * l
}
function getRectLength(el) {
var w = el.getAttribute('width'),
h = el.getAttribute('height');
return (w*2)+(h*2);
};
var getPolyLength = function (el) {
}
function getPolyLength(el) {
var points = el.getAttribute('points').split(' ');
var len = 0;
if (points.length > 1) {
@ -1337,23 +1372,23 @@ var getPolyLength = function (el) {
len += el.tagName === 'polygon' ? dist(coord(points[0]), coord(points[points.length - 1])) : 0;
}
return len;
};
var getLineLength = function (el) {
}
function getLineLength(el) {
var x1 = el.getAttribute('x1');
var x2 = el.getAttribute('x2');
var y1 = el.getAttribute('y1');
var y2 = el.getAttribute('y2');
return Math.sqrt(Math.pow( (x2 - x1), 2 )+Math.pow( (y2 - y1), 2 ));
};
var getCircleLength = function (el) {
}
function getCircleLength(el) {
var r = el.getAttribute('r');
return 2 * Math.PI * r;
};
var getEllipseLength = function (el) {
}
function getEllipseLength(el) {
var rx = el.getAttribute('rx'), ry = el.getAttribute('ry'), len = 2*rx, wid = 2*ry;
return ((Math.sqrt(.5 * ((len * len) + (wid * wid)))) * (Math.PI * 2)) / 2;
};
var getTotalLength = function (el) {
}
function getTotalLength(el) {
if (/rect/.test(el.tagName)) {
return getRectLength(el);
} else if (/circle/.test(el.tagName)) {
@ -1365,8 +1400,8 @@ var getTotalLength = function (el) {
} else if (/line/.test(el.tagName)) {
return getLineLength(el);
}
};
var getDraw = function (e, v) {
}
function getDraw(e,v) {
var length = /path|glyph/.test(e.tagName) ? e.getTotalLength() : getTotalLength(e),
start, end, d, o;
if ( v instanceof Object ) {
@ -1382,32 +1417,23 @@ var getDraw = function (e, v) {
end = parseFloat(d[0]) + start || length;
}
return { s: start, e: end, l: length };
};
}
function resetDraw(elem) {
elem.style.strokeDashoffset = "";
elem.style.strokeDasharray = "";
}
function getDrawValue(){
return getDraw(this.element);
}
function prepareDraw(a,o){
return getDraw(this.element,o);
}
function onStartDraw(tweenProp){
if ( tweenProp in this.valuesEnd && !KUTE[tweenProp]) {
KUTE[tweenProp] = function (elem,a,b,v) {
var pathLength = (a.l*100>>0)/100,
start = (numbers(a.s,b.s,v)*100>>0)/100,
end = (numbers(a.e,b.e,v)*100>>0)/100,
offset = 0 - start,
dashOne = end+offset;
elem.style.strokeDashoffset = offset + "px";
elem.style.strokeDasharray = (((dashOne <1 ? 0 : dashOne)*100>>0)/100) + "px, " + pathLength + "px";
};
}
}
var svgDrawFunctions = {
prepareStart: getDrawValue,
prepareProperty: prepareDraw,
onStart: onStartDraw
};
var svgDrawOps = {
var svgDraw = {
component: 'svgDraw',
property: 'draw',
defaultValue: '0% 0%',
@ -1420,11 +1446,12 @@ var svgDrawOps = {
getCircleLength: getCircleLength,
getEllipseLength: getEllipseLength,
getTotalLength: getTotalLength,
resetDraw: resetDraw,
getDraw: getDraw,
percent: percent
}
};
Components.SVGDraw = svgDrawOps;
Components.SVGDraw = svgDraw;
function coords (a, b, l, v) {
var points = [];
@ -1436,6 +1463,16 @@ function coords (a, b, l, v) {
}
return points;
}
function onStartSVGMorph(tweenProp){
if (!KUTE[tweenProp] && this.valuesEnd[tweenProp]) {
KUTE[tweenProp] = function (elem, a, b, v) {
var path1 = a.pathArray, path2 = b.pathArray, len = path2.length, pathString;
pathString = v === 1 ? b.original : ("M" + (coords( path1, path2, len, v ).join('L')) + "Z");
elem.setAttribute("d", pathString );
};
}
}
var INVALID_INPUT = 'Invalid path value';
function isFiniteNumber(number) {
return typeof number === "number" && isFinite(number);
@ -1676,7 +1713,8 @@ function pathParse(svgPath) {
err: state.err,
segments: state.result
};
}var SvgPath = function SvgPath(path){
}
var SvgPath = function SvgPath(path){
if (!(this instanceof SvgPath)) { return new SvgPath(path); }
var pstate = pathParse(path);
this.segments = pstate.segments;
@ -1977,15 +2015,6 @@ function prepareSVGMorph(tweenProp,value){
}
return pathObject;
}
function onStartSVGMorph(tweenProp){
if (!KUTE[tweenProp] && this.valuesEnd[tweenProp]) {
KUTE[tweenProp] = function (elem, a, b, v) {
var path1 = a.pathArray, path2 = b.pathArray, len = path2.length, pathString;
pathString = v === 1 ? b.original : ("M" + (coords( path1, path2, len, v ).join('L')) + "Z");
elem.setAttribute("d", pathString );
};
}
}
function crossCheckSVGMorph(prop){
if ( this.valuesEnd[prop]){
var pathArray1 = this.valuesStart[prop].pathArray,
@ -2006,7 +2035,7 @@ var svgMorphFunctions = {
onStart: onStartSVGMorph,
crossCheck: crossCheckSVGMorph
};
var svgMorphOps = {
var svgMorph = {
component: 'svgMorph',
property: 'path',
defaultValue: [],
@ -2018,7 +2047,7 @@ var svgMorphOps = {
isDigitStart: isDigitStart,State: State,skipSpaces: skipSpaces,scanFlag: scanFlag,scanParam: scanParam,finalizeSegment: finalizeSegment,scanSegment: scanSegment,pathParse: pathParse,SvgPath: SvgPath,split: split,pathStringToRing: pathStringToRing,
exactRing: exactRing,approximateRing: approximateRing,measure: measure,rotateRing: rotateRing,polygonLength: polygonLength,polygonArea: polygonArea,addPoints: addPoints,bisect: bisect,normalizeRing: normalizeRing,validRing: validRing,getInterpolationPoints: getInterpolationPoints}
};
Components.SVGMorph = svgMorphOps;
Components.SVGMorph = svgMorph;
for (var component in Components) {
var compOps = Components[component];

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

File diff suppressed because one or more lines are too long

347
dist/kute.js vendored
View file

@ -361,7 +361,7 @@
if (multi){
requestedElem = el instanceof HTMLCollection
|| el instanceof NodeList
|| el instanceof Array && el[0] instanceof Element
|| el instanceof Array && el.every(function (x) { return x instanceof Element; })
? el : document.querySelectorAll(el);
} else {
requestedElem = el instanceof Element
@ -444,6 +444,14 @@
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(); });
};
TweenBase.prototype.update = function update (time) {
time = time !== undefined ? time : KUTE.Time();
var elapsed, progress;
@ -463,6 +471,9 @@
}
this.playing = false;
this.close();
if (this._chain !== undefined && this._chain.length){
this._chain.map(function (tw){ return tw.start(); });
}
return false;
}
return true;
@ -578,14 +589,6 @@
this.valuesStart[reverseProp] = this.valuesRepeat[reverseProp];
}
};
Tween.prototype.chain = function chain (args) {
this._chain = [];
this._chain = args.length ? args : this._chain.concat(args);
return this;
};
Tween.prototype.stopChainedTweens = function stopChainedTweens () {
this._chain && this._chain.length && this._chain.map(function (tw){ return tw.stop(); });
};
Tween.prototype.update = function update (time) {
time = time !== undefined ? time : KUTE.Time();
var elapsed, progress;
@ -804,6 +807,17 @@
};
}
}
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];
}
@ -820,8 +834,8 @@
prepareProperty: prepareBoxModel,
onStart: essentialBoxOnStart
};
var essentialBoxModelOps = {
component: 'boxModelProps',
var essentialBoxModel = {
component: 'essentialBoxModel',
category: 'boxModel',
properties: ['top','left','width','height'],
defaultValues: essentialBoxPropsValues,
@ -829,7 +843,7 @@
functions: essentialBoxModelFunctions,
Util:{trueDimension: trueDimension}
};
Components.BoxModelEssentialProperties = essentialBoxModelOps;
Components.BoxModelEssential = essentialBoxModel;
function hexToRGB (hex) {
var hexShorthand = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
@ -872,11 +886,6 @@
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;
}
var supportedColors = ['color', 'backgroundColor','borderColor', 'borderTopColor', 'borderRightColor', 'borderBottomColor', 'borderLeftColor', 'outlineColor'];
var defaultColors = {};
supportedColors.forEach(function (tweenProp) {
defaultColors[tweenProp] = '#000';
});
function onStartColors(tweenProp){
if (this.valuesEnd[tweenProp] && !KUTE[tweenProp]) {
KUTE[tweenProp] = function (elem, a, b, v) {
@ -884,6 +893,12 @@
};
}
}
var supportedColors = ['color', 'backgroundColor','borderColor', 'borderTopColor', 'borderRightColor', 'borderBottomColor', 'borderLeftColor', 'outlineColor'];
var defaultColors = {};
supportedColors.forEach(function (tweenProp) {
defaultColors[tweenProp] = '#000';
});
var colorsOnStart = {};
supportedColors.map(function (x) { return colorsOnStart[x] = onStartColors; });
function getColor(prop,value) {
@ -892,25 +907,42 @@
function prepareColor(prop,value) {
return trueColor(value);
}
var colorsFunctions = {
var colorFunctions = {
prepareStart: getColor,
prepareProperty: prepareColor,
onStart: colorsOnStart
};
var colorsOps = {
component: 'colorProps',
var colorProperties = {
component: 'colorProperties',
category: 'colors',
properties: supportedColors,
defaultValues: defaultColors,
Interpolate: {numbers: numbers,colors: colors},
functions: colorsFunctions,
functions: colorFunctions,
Util: {trueColor: trueColor}
};
Components.ColorProperties = colorsOps;
Components.ColorProperties = colorProperties;
var attributes = {};
var onStartAttr = {
attr : function(tweenProp){
if (!KUTE[tweenProp] && this.valuesEnd[tweenProp]) {
KUTE[tweenProp] = function (elem, vS, vE, v) {
for ( var oneAttr in vE ){
KUTE.attributes[oneAttr](elem,oneAttr,vS[oneAttr],vE[oneAttr],v);
}
};
}
},
attributes : function(tweenProp){
if (!KUTE[tweenProp] && this.valuesEnd.attr) {
KUTE[tweenProp] = attributes;
}
}
};
var ComponentName = 'htmlAttributes';
var svgColors = ['fill','stroke','stop-color'];
var attributes = {};
function replaceUppercase (a) { return a.replace(/[A-Z]/g, "-$&").toLowerCase(); }
function getAttr(tweenProp,value){
var attrStartValues = {};
@ -963,28 +995,12 @@
}
return attributesObject;
}
var onStartAttr = {
attr : function(tweenProp){
if (!KUTE[tweenProp] && this.valuesEnd[tweenProp]) {
KUTE[tweenProp] = function (elem, vS, vE, v) {
for ( var oneAttr in vE ){
KUTE.attributes[oneAttr](elem,oneAttr,vS[oneAttr],vE[oneAttr],v);
}
};
}
},
attributes : function(tweenProp){
if (!KUTE[tweenProp] && this.valuesEnd.attr) {
KUTE[tweenProp] = attributes;
}
}
};
var attrFunctions = {
prepareStart: getAttr,
prepareProperty: prepareAttr,
onStart: onStartAttr
};
var attrOps = {
var htmlAttributes = {
component: ComponentName,
property: 'attr',
subProperties: ['fill','stroke','stop-color','fill-opacity','stroke-opacity'],
@ -993,14 +1009,8 @@
functions: attrFunctions,
Util: { replaceUppercase: replaceUppercase, trueColor: trueColor, trueDimension: trueDimension }
};
Components.HTMLAttributes = attrOps;
Components.HTMLAttributes = htmlAttributes;
function getOpacity(tweenProp){
return getStyleForProperty(this.element,tweenProp)
}
function prepareOpacity(tweenProp,value){
return parseFloat(value);
}
function onStartOpacity(tweenProp){
if ( tweenProp in this.valuesEnd && !KUTE[tweenProp]) {
KUTE[tweenProp] = function (elem, a, b, v) {
@ -1008,19 +1018,76 @@
};
}
}
function getOpacity(tweenProp){
return getStyleForProperty(this.element,tweenProp)
}
function prepareOpacity(tweenProp,value){
return parseFloat(value);
}
var opacityFunctions = {
prepareStart: getOpacity,
prepareProperty: prepareOpacity,
onStart: onStartOpacity
};
var opacityOps = {
var opacityProperty = {
component: 'opacityProperty',
property: 'opacity',
defaultValue: 1,
Interpolate: {numbers: numbers},
functions: opacityFunctions
};
Components.OpacityProperty = opacityOps;
Components.OpacityProperty = opacityProperty;
var lowerCaseAlpha = String("abcdefghijklmnopqrstuvwxyz").split(""),
upperCaseAlpha = String("abcdefghijklmnopqrstuvwxyz").toUpperCase().split(""),
nonAlpha = String("~!@#$%^&*()_+{}[];'<>,./?\=-").split(""),
numeric = String("0123456789").split(""),
alphaNumeric = lowerCaseAlpha.concat(upperCaseAlpha,numeric),
allTypes = alphaNumeric.concat(nonAlpha);
var charSet = {
alpha: lowerCaseAlpha,
upper: upperCaseAlpha,
symbols: nonAlpha,
numeric: numeric,
alphanumeric: alphaNumeric,
all: allTypes,
};
var onStartWrite = {
text: function(tweenProp){
if ( !KUTE[tweenProp] && this.valuesEnd[tweenProp] ) {
var chars = this._textChars,
charsets = chars in charSet ? charSet[chars]
: chars && chars.length ? chars
: charSet[defaultOptions.textChars];
KUTE[tweenProp] = function(elem,a,b,v) {
var initialText = '',
endText = '',
firstLetterA = a.substring(0),
firstLetterB = b.substring(0),
pointer = charsets[(Math.random() * charsets.length)>>0];
if (a === ' ') {
endText = firstLetterB.substring(Math.min(v * firstLetterB.length, firstLetterB.length)>>0, 0 );
elem.innerHTML = v < 1 ? ( ( endText + pointer ) ) : (b === '' ? ' ' : b);
} else if (b === ' ') {
initialText = firstLetterA.substring(0, Math.min((1-v) * firstLetterA.length, firstLetterA.length)>>0 );
elem.innerHTML = v < 1 ? ( ( initialText + pointer ) ) : (b === '' ? ' ' : b);
} else {
initialText = firstLetterA.substring(firstLetterA.length, Math.min(v * firstLetterA.length, firstLetterA.length)>>0 );
endText = firstLetterB.substring(0, Math.min(v * firstLetterB.length, firstLetterB.length)>>0 );
elem.innerHTML = v < 1 ? ( (endText + pointer + initialText) ) : (b === '' ? ' ' : b);
}
};
}
},
number: function(tweenProp) {
if ( tweenProp in this.valuesEnd && !KUTE[tweenProp]) {
KUTE[tweenProp] = function (elem, a, b, v) {
elem.innerHTML = numbers(a, b, v)>>0;
};
}
}
};
function wrapContentsSpan(el,classNAME){
var textWriteWrapper;
@ -1113,20 +1180,6 @@
};
return textTween
}
var lowerCaseAlpha = String("abcdefghijklmnopqrstuvwxyz").split(""),
upperCaseAlpha = String("abcdefghijklmnopqrstuvwxyz").toUpperCase().split(""),
nonAlpha = String("~!@#$%^&*()_+{}[];'<>,./?\=-").split(""),
numeric = String("0123456789").split(""),
alphaNumeric = lowerCaseAlpha.concat(upperCaseAlpha,numeric),
allTypes = alphaNumeric.concat(nonAlpha);
var charSet = {
alpha: lowerCaseAlpha,
upper: upperCaseAlpha,
symbols: nonAlpha,
numeric: numeric,
alphanumeric: alphaNumeric,
all: allTypes,
};
function getWrite(tweenProp,value){
return this.element.innerHTML;
}
@ -1137,47 +1190,12 @@
return value === '' ? ' ' : value
}
}
var onStartWrite = {
text: function(tweenProp){
if ( !KUTE[tweenProp] && this.valuesEnd[tweenProp] ) {
var chars = this._textChars,
charsets = chars in charSet ? charSet[chars]
: chars && chars.length ? chars
: charSet[defaultOptions.textChars];
KUTE[tweenProp] = function(elem,a,b,v) {
var initialText = '',
endText = '',
firstLetterA = a.substring(0),
firstLetterB = b.substring(0),
pointer = charsets[(Math.random() * charsets.length)>>0];
if (a === ' ') {
endText = firstLetterB.substring(Math.min(v * firstLetterB.length, firstLetterB.length)>>0, 0 );
elem.innerHTML = v < 1 ? ( ( endText + pointer ) ) : (b === '' ? ' ' : b);
} else if (b === ' ') {
initialText = firstLetterA.substring(0, Math.min((1-v) * firstLetterA.length, firstLetterA.length)>>0 );
elem.innerHTML = v < 1 ? ( ( initialText + pointer ) ) : (b === '' ? ' ' : b);
} else {
initialText = firstLetterA.substring(firstLetterA.length, Math.min(v * firstLetterA.length, firstLetterA.length)>>0 );
endText = firstLetterB.substring(0, Math.min(v * firstLetterB.length, firstLetterB.length)>>0 );
elem.innerHTML = v < 1 ? ( (endText + pointer + initialText) ) : (b === '' ? ' ' : b);
}
};
}
},
number: function(tweenProp) {
if ( tweenProp in this.valuesEnd && !KUTE[tweenProp]) {
KUTE[tweenProp] = function (elem, a, b, v) {
elem.innerHTML = numbers(a, b, v)>>0;
};
}
}
};
var textWriteFunctions = {
prepareStart: getWrite,
prepareProperty: prepareText,
onStart: onStartWrite
};
var textWriteOps = {
var textWrite = {
component: 'textWriteProperties',
category: 'textWrite',
properties: ['text','number'],
@ -1187,7 +1205,7 @@
functions: textWriteFunctions,
Util: { charSet: charSet, createTextTweens: createTextTweens }
};
Components.TextWriteProperties = textWriteOps;
Components.TextWriteProperties = textWrite;
function perspective(a, b, u, v) {
return ("perspective(" + (((a + (b - a) * v) * 1000 >> 0 ) / 1000) + u + ")")
@ -1224,6 +1242,21 @@
function scale (a, b, v) {
return ("scale(" + (((a + (b - a) * v) * 1000 >> 0 ) / 1000) + ")");
}
function onStartTransform(tweenProp){
if (!KUTE[tweenProp] && this.valuesEnd[tweenProp]) {
KUTE[tweenProp] = function (elem, a, b, v) {
elem.style[tweenProp] =
(a.perspective||b.perspective ? perspective(a.perspective,b.perspective,'px',v) : '')
+ (a.translate3d ? translate3d(a.translate3d,b.translate3d,'px',v):'')
+ (a.translate ? translate(a.translate,b.translate,'px',v):'')
+ (a.rotate3d ? rotate3d(a.rotate3d,b.rotate3d,'deg',v):'')
+ (a.rotate||b.rotate ? rotate(a.rotate,b.rotate,'deg',v):'')
+ (a.skew ? skew(a.skew,b.skew,'deg',v):'')
+ (a.scale||b.scale ? scale(a.scale,b.scale,v):'');
};
}
}
function getTransform(tweenProperty,value){
var currentStyle = getInlineStyle(this.element);
return currentStyle[tweenProperty] ? currentStyle[tweenProperty] : defaultValues[tweenProperty];
@ -1255,20 +1288,6 @@
}
return transformObject;
}
function onStartTransform(tweenProp){
if (!KUTE[tweenProp] && this.valuesEnd[tweenProp]) {
KUTE[tweenProp] = function (elem, a, b, v) {
elem.style[tweenProp] =
(a.perspective||b.perspective ? perspective(a.perspective,b.perspective,'px',v) : '')
+ (a.translate3d ? translate3d(a.translate3d,b.translate3d,'px',v):'')
+ (a.translate ? translate(a.translate,b.translate,'px',v):'')
+ (a.rotate3d ? rotate3d(a.rotate3d,b.rotate3d,'deg',v):'')
+ (a.rotate||b.rotate ? rotate(a.rotate,b.rotate,'deg',v):'')
+ (a.skew ? skew(a.skew,b.skew,'deg',v):'')
+ (a.scale||b.scale ? scale(a.scale,b.scale,v):'');
};
}
}
function crossCheckTransform(tweenProp){
if (this.valuesEnd[tweenProp]) {
if ( this.valuesEnd[tweenProp] ) {
@ -1298,7 +1317,7 @@
skewX : 0, skewY : 0, skew: [0,0],
scale : 1
};
var transformOps = {
var transformFunctionsComponent = {
component: 'transformFunctions',
property: 'transform',
subProperties: supportedTransformProperties,
@ -1309,17 +1328,33 @@
translate3d: translate3d,
rotate3d: rotate3d,
translate: translate, rotate: rotate, scale: scale, skew: skew
},
}
};
Components.TransformFunctions = transformOps;
Components.TransformFunctions = transformFunctionsComponent;
var percent = function (v, l) { return parseFloat(v) / 100 * l; };
var getRectLength = function (el) {
function onStartDraw(tweenProp){
if ( tweenProp in this.valuesEnd && !KUTE[tweenProp]) {
KUTE[tweenProp] = function (elem,a,b,v) {
var pathLength = (a.l*100>>0)/100,
start = (numbers(a.s,b.s,v)*100>>0)/100,
end = (numbers(a.e,b.e,v)*100>>0)/100,
offset = 0 - start,
dashOne = end+offset;
elem.style.strokeDashoffset = offset + "px";
elem.style.strokeDasharray = (((dashOne <1 ? 0 : dashOne)*100>>0)/100) + "px, " + pathLength + "px";
};
}
}
function percent (v,l) {
return parseFloat(v) / 100 * l
}
function getRectLength(el) {
var w = el.getAttribute('width'),
h = el.getAttribute('height');
return (w*2)+(h*2);
};
var getPolyLength = function (el) {
}
function getPolyLength(el) {
var points = el.getAttribute('points').split(' ');
var len = 0;
if (points.length > 1) {
@ -1343,23 +1378,23 @@
len += el.tagName === 'polygon' ? dist(coord(points[0]), coord(points[points.length - 1])) : 0;
}
return len;
};
var getLineLength = function (el) {
}
function getLineLength(el) {
var x1 = el.getAttribute('x1');
var x2 = el.getAttribute('x2');
var y1 = el.getAttribute('y1');
var y2 = el.getAttribute('y2');
return Math.sqrt(Math.pow( (x2 - x1), 2 )+Math.pow( (y2 - y1), 2 ));
};
var getCircleLength = function (el) {
}
function getCircleLength(el) {
var r = el.getAttribute('r');
return 2 * Math.PI * r;
};
var getEllipseLength = function (el) {
}
function getEllipseLength(el) {
var rx = el.getAttribute('rx'), ry = el.getAttribute('ry'), len = 2*rx, wid = 2*ry;
return ((Math.sqrt(.5 * ((len * len) + (wid * wid)))) * (Math.PI * 2)) / 2;
};
var getTotalLength = function (el) {
}
function getTotalLength(el) {
if (/rect/.test(el.tagName)) {
return getRectLength(el);
} else if (/circle/.test(el.tagName)) {
@ -1371,8 +1406,8 @@
} else if (/line/.test(el.tagName)) {
return getLineLength(el);
}
};
var getDraw = function (e, v) {
}
function getDraw(e,v) {
var length = /path|glyph/.test(e.tagName) ? e.getTotalLength() : getTotalLength(e),
start, end, d, o;
if ( v instanceof Object ) {
@ -1388,32 +1423,23 @@
end = parseFloat(d[0]) + start || length;
}
return { s: start, e: end, l: length };
};
}
function resetDraw(elem) {
elem.style.strokeDashoffset = "";
elem.style.strokeDasharray = "";
}
function getDrawValue(){
return getDraw(this.element);
}
function prepareDraw(a,o){
return getDraw(this.element,o);
}
function onStartDraw(tweenProp){
if ( tweenProp in this.valuesEnd && !KUTE[tweenProp]) {
KUTE[tweenProp] = function (elem,a,b,v) {
var pathLength = (a.l*100>>0)/100,
start = (numbers(a.s,b.s,v)*100>>0)/100,
end = (numbers(a.e,b.e,v)*100>>0)/100,
offset = 0 - start,
dashOne = end+offset;
elem.style.strokeDashoffset = offset + "px";
elem.style.strokeDasharray = (((dashOne <1 ? 0 : dashOne)*100>>0)/100) + "px, " + pathLength + "px";
};
}
}
var svgDrawFunctions = {
prepareStart: getDrawValue,
prepareProperty: prepareDraw,
onStart: onStartDraw
};
var svgDrawOps = {
var svgDraw = {
component: 'svgDraw',
property: 'draw',
defaultValue: '0% 0%',
@ -1426,11 +1452,12 @@
getCircleLength: getCircleLength,
getEllipseLength: getEllipseLength,
getTotalLength: getTotalLength,
resetDraw: resetDraw,
getDraw: getDraw,
percent: percent
}
};
Components.SVGDraw = svgDrawOps;
Components.SVGDraw = svgDraw;
function coords (a, b, l, v) {
var points = [];
@ -1442,6 +1469,16 @@
}
return points;
}
function onStartSVGMorph(tweenProp){
if (!KUTE[tweenProp] && this.valuesEnd[tweenProp]) {
KUTE[tweenProp] = function (elem, a, b, v) {
var path1 = a.pathArray, path2 = b.pathArray, len = path2.length, pathString;
pathString = v === 1 ? b.original : ("M" + (coords( path1, path2, len, v ).join('L')) + "Z");
elem.setAttribute("d", pathString );
};
}
}
var INVALID_INPUT = 'Invalid path value';
function isFiniteNumber(number) {
return typeof number === "number" && isFinite(number);
@ -1682,7 +1719,8 @@
err: state.err,
segments: state.result
};
}var SvgPath = function SvgPath(path){
}
var SvgPath = function SvgPath(path){
if (!(this instanceof SvgPath)) { return new SvgPath(path); }
var pstate = pathParse(path);
this.segments = pstate.segments;
@ -1983,15 +2021,6 @@
}
return pathObject;
}
function onStartSVGMorph(tweenProp){
if (!KUTE[tweenProp] && this.valuesEnd[tweenProp]) {
KUTE[tweenProp] = function (elem, a, b, v) {
var path1 = a.pathArray, path2 = b.pathArray, len = path2.length, pathString;
pathString = v === 1 ? b.original : ("M" + (coords( path1, path2, len, v ).join('L')) + "Z");
elem.setAttribute("d", pathString );
};
}
}
function crossCheckSVGMorph(prop){
if ( this.valuesEnd[prop]){
var pathArray1 = this.valuesStart[prop].pathArray,
@ -2012,7 +2041,7 @@
onStart: onStartSVGMorph,
crossCheck: crossCheckSVGMorph
};
var svgMorphOps = {
var svgMorph = {
component: 'svgMorph',
property: 'path',
defaultValue: [],
@ -2024,7 +2053,7 @@
isDigitStart: isDigitStart,State: State,skipSpaces: skipSpaces,scanFlag: scanFlag,scanParam: scanParam,finalizeSegment: finalizeSegment,scanSegment: scanSegment,pathParse: pathParse,SvgPath: SvgPath,split: split,pathStringToRing: pathStringToRing,
exactRing: exactRing,approximateRing: approximateRing,measure: measure,rotateRing: rotateRing,polygonLength: polygonLength,polygonArea: polygonArea,addPoints: addPoints,bisect: bisect,normalizeRing: normalizeRing,validRing: validRing,getInterpolationPoints: getInterpolationPoints}
};
Components.SVGMorph = svgMorphOps;
Components.SVGMorph = svgMorph;
for (var component in Components) {
var compOps = Components[component];

2
dist/kute.min.js vendored
View file

File diff suppressed because one or more lines are too long

25
src/animation/animationBase.js
View file

@ -2,7 +2,6 @@ import supportedProperties from '../objects/supportedProperties.js'
import defaultOptions from '../objects/defaultOptions.js'
import onStart from '../objects/onStart.js'
import onComplete from '../objects/onComplete.js'
import crossCheck from '../objects/crossCheck.js'
import linkProperty from '../objects/linkProperty.js'
import Util from '../objects/util.js'
import Interpolate from '../objects/interpolate.js'
@ -10,14 +9,12 @@ import Interpolate from '../objects/interpolate.js'
// Animation class
export default class AnimationBase {
constructor(Component){
this.Component = Component
return this.setComponent()
return this.setComponent(Component)
}
setComponent(){
const Component = this.Component
setComponent(Component){
const ComponentName = Component.component
// const Objects = { defaultValues, defaultOptions, Interpolate, linkProperty }
const Functions = { onStart, onComplete, crossCheck }
const Functions = { onStart, onComplete }
const Category = Component.category
const Property = Component.property
@ -34,8 +31,8 @@ export default class AnimationBase {
// set functions
if (Component.functions) {
for (const fn in Functions) {
if (fn in Component.functions && ['onStart','onComplete'].includes(fn)) {
if (typeof (Component.functions[fn]) === 'function' ) {
if (fn in Component.functions) {
if ( typeof (Component.functions[fn]) === 'function' ) {
// !Functions[fn][ Category||Property ] && (Functions[fn][ Category||Property ] = Component.functions[fn])
!Functions[fn][ComponentName] && (Functions[fn][ComponentName] = {})
!Functions[fn][ComponentName][ Category||Property ] && (Functions[fn][ComponentName][ Category||Property ] = Component.functions[fn])
@ -53,9 +50,15 @@ export default class AnimationBase {
// set interpolate
if (Component.Interpolate) {
for (const fn in Component.Interpolate) {
// register new Interpolation functions
if (!Interpolate[fn]) {
Interpolate[fn] = Component.Interpolate[fn];
const compIntObj = Component.Interpolate[fn]
if ( typeof(compIntObj) === 'function' && !Interpolate[fn] ) {
Interpolate[fn] = compIntObj;
} else {
for ( const sfn in compIntObj ) {
if ( typeof(compIntObj[sfn]) === 'function' && !Interpolate[fn] ) {
Interpolate[fn] = compIntObj[sfn];
}
}
}
}
linkProperty[ComponentName] = Component.Interpolate

31
src/components/backgroundPosition.js
View file

@ -1,17 +1,17 @@
import KUTE from '../objects/kute.js'
import defaultValues from '../objects/defaultValues.js'
import Components from '../objects/components.js'
import getStyleForProperty from '../process/getStyleForProperty.js'
import {numbers} from '../objects/interpolate.js'
import trueDimension from '../util/trueDimension.js'
import {onStartBgPos} from './backgroundPositionBase.js'
// const bgPosProp = { property : 'backgroundPosition', defaultValue: [0,0], interpolators: {numbers} }, functions = { prepareStart, prepareProperty, onStart }
// Component Functions
export function getBgPos(prop){
function getBgPos(prop){
return getStyleForProperty(this.element,prop) || defaultValues[prop];
}
export function prepareBgPos(prop,value){
function prepareBgPos(prop,value){
if ( value instanceof Array ){
const x = trueDimension(value[0]).v,
y = trueDimension(value[1]).v;
@ -23,32 +23,17 @@ export function prepareBgPos(prop,value){
return [ trueDimension(posxy[0]).v, trueDimension(posxy[1]).v ];
}
}
export function onStartBgPos(prop){
if ( this.valuesEnd[prop] && !KUTE[prop]) { // opacity could be 0
KUTE[prop] = (elem, a, b, v) => {
elem.style[prop] = `${(numbers(a[0],b[0],v)*100>>0)/100}% ${((numbers(a[1],b[1],v)*100>>0)/100)}%`;
}
}
}
// All Component Functions
export const bgPositionFunctions = {
const bgPositionFunctions = {
prepareStart: getBgPos,
prepareProperty: prepareBgPos,
onStart: onStartBgPos
}
// Component Base Object
export const baseBgPosOps = {
component: 'BgPositionProp',
property: 'backgroundPosition',
Interpolate: {numbers},
functions: {onStart: onStartBgPos}
}
// Component Full Object
export const bgPosOps = {
component: 'BgPositionProp',
const BackgroundPosition = {
component: 'backgroundPositionProp',
property: 'backgroundPosition',
defaultValue: [50,50],
Interpolate: {numbers},
@ -56,4 +41,6 @@ export const bgPosOps = {
Util: {trueDimension}
}
Components.BackgroundPositionProperty = bgPosOps
export default BackgroundPosition
Components.BackgroundPosition = BackgroundPosition

22
src/components/backgroundPositionBase.js Normal file
View file

@ -0,0 +1,22 @@
import KUTE from '../objects/kute.js'
import {numbers} from '../objects/interpolate.js'
// const bgPosProp = { property : 'backgroundPosition', defaultValue: [0,0], interpolators: {numbers} }, functions = { prepareStart, prepareProperty, onStart }
// Component Functions
export function onStartBgPos(prop){
if ( this.valuesEnd[prop] && !KUTE[prop]) { // opacity could be 0
KUTE[prop] = (elem, a, b, v) => {
elem.style[prop] = `${(numbers(a[0],b[0],v)*100>>0)/100}% ${((numbers(a[1],b[1],v)*100>>0)/100)}%`;
}
}
}
// Component Base Object
const baseBgPosOps = {
component: 'baseBackgroundPosition',
property: 'backgroundPosition',
Interpolate: {numbers},
functions: {onStart: onStartBgPos}
}
export default baseBgPosOps

28
src/components/borderRadius.js
View file

@ -1,9 +1,9 @@
import KUTE from '../objects/kute.js'
import defaultValues from '../objects/defaultValues.js'
import Components from '../objects/components.js'
import getStyleForProperty from '../process/getStyleForProperty.js'
import trueDimension from '../util/trueDimension.js'
import {units} from '../objects/interpolate.js'
import {units} from '../objects/interpolate.js'
import {radiusOnStartFn} from './borderRadiusBase.js'
// const borderRadius = { category : 'borderRadius', properties : [..], defaultValues: {..}, interpolation: {units} }
@ -14,13 +14,6 @@ const radiusValues = {}
radiusProps.map(x => radiusValues[x] = 0);
// Component Functions
export function radiusOnStartFn(tweenProp){
if (tweenProp in this.valuesEnd && !KUTE[tweenProp]) {
KUTE[tweenProp] = (elem, a, b, v) => {
elem.style[tweenProp] = units(a.v,b.v,b.u,v);
}
}
}
const radiusOnStart = {}
radiusProps.forEach(tweenProp => {
radiusOnStart[tweenProp] = radiusOnStartFn
@ -39,18 +32,9 @@ export const radiusFunctions = {
onStart: radiusOnStart
}
// Base Component
export const baseRadiusOps = {
component: 'borderRadiusProps',
category: 'borderRadius',
properties: radiusProps,
Interpolate: {units},
functions: {onStart: radiusOnStart}
}
// Full Component
export const radiusOps = {
component: 'borderRadiusProps',
const BorderRadius = {
component: 'borderRadiusProperties',
category: 'borderRadius',
properties: radiusProps,
defaultValues: radiusValues,
@ -59,4 +43,6 @@ export const radiusOps = {
Util: {trueDimension}
}
Components.BorderRadiusProperties = radiusOps
export default BorderRadius
Components.BorderRadiusProperties = BorderRadius

29
src/components/borderRadiusBase.js Normal file
View file

@ -0,0 +1,29 @@
import KUTE from '../objects/kute.js'
import {units} from '../objects/interpolate.js'
// const borderRadius = { category : 'borderRadius', properties : [..], defaultValues: {..}, interpolation: {units} }
// Component Properties
const radiusProps = ['borderRadius', 'borderTopLeftRadius', 'borderTopRightRadius', 'borderBottomLeftRadius', 'borderBottomRightRadius']
// Component Functions
export function radiusOnStartFn(tweenProp){
if (tweenProp in this.valuesEnd && !KUTE[tweenProp]) {
KUTE[tweenProp] = (elem, a, b, v) => {
elem.style[tweenProp] = units(a.v,b.v,b.u,v);
}
}
}
const radiusOnStart = {}
radiusProps.forEach(tweenProp => {
radiusOnStart[tweenProp] = radiusOnStartFn
});
// Base Component
const baseBorderRadius = {
component: 'baseBorderRadius',
category: 'borderRadius',
Interpolate: {units},
functions: {onStart: radiusOnStart}
}
export default baseBorderRadius

22
src/components/boxModel.js
View file

@ -1,9 +1,9 @@
import KUTE from '../objects/kute.js'
import defaultValues from '../objects/defaultValues.js'
import Components from '../objects/components.js'
import getStyleForProperty from '../process/getStyleForProperty.js'
import trueDimension from '../util/trueDimension.js'
import {numbers} from '../objects/interpolate.js'
import {boxModelOnStart} from './boxModelBase.js'
// Component Properties
const boxModelProperties = ['top', 'left', 'width', 'height', 'right', 'bottom', 'minWidth', 'minHeight', 'maxWidth', 'maxHeight',
@ -14,18 +14,10 @@ const boxModelValues = {}
boxModelProperties.map(x => boxModelValues[x] = 0);
// Component Functions
export function boxModelOnStart(tweenProp){
if (tweenProp in this.valuesEnd && !KUTE[tweenProp]) {
KUTE[tweenProp] = (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] = `${(numbers(a,b,v) ) >> 0}px`;
}
}
}
export function getBoxModel(tweenProp){
function getBoxModel(tweenProp){
return getStyleForProperty(this.element,tweenProp) || defaultValues[tweenProp];
}
export function prepareBoxModel(tweenProp,value){
function prepareBoxModel(tweenProp,value){
const boxValue = trueDimension(value), offsetProp = tweenProp === 'height' ? 'offsetHeight' : 'offsetWidth';
return boxValue.u === '%' ? boxValue.v * this.element[offsetProp] / 100 : boxValue.v;
}
@ -40,8 +32,8 @@ const boxModelFunctions = {
}
// Component Full Component
export const boxModelOps = {
component: 'boxModelProps',
const boxModel = {
component: 'boxModelProperties',
category: 'boxModel',
properties: boxModelProperties,
defaultValues: boxModelValues,
@ -49,4 +41,6 @@ export const boxModelOps = {
functions: boxModelFunctions
}
Components.BoxModelProperties = boxModelOps
export default boxModel
Components.BoxModelProperties = boxModel

10
src/components/boxModelBase.js
View file

@ -18,13 +18,15 @@ const baseBoxOnStart = {}
baseBoxProps.map(x=>baseBoxOnStart[x] = boxModelOnStart)
// Component Base
export const baseBoxModelOps = {
component: 'boxModelProps',
const baseBoxModel = {
component: 'baseBoxModel',
category: 'boxModel',
properties: baseBoxProps,
// properties: baseBoxProps,
// defaultValues: baseBoxPropsValues,
Interpolate: {numbers},
functions: {onStart: baseBoxOnStart}
}
Components.BoxModelProperties = baseBoxModelOps
export default baseBoxModel
Components.BoxModelProperties = baseBoxModel

24
src/components/boxModelEssential.js
View file

@ -1,23 +1,16 @@
import KUTE from '../objects/kute.js'
import defaultValues from '../objects/defaultValues.js'
import Components from '../objects/components.js'
import getStyleForProperty from '../process/getStyleForProperty.js'
import trueDimension from '../util/trueDimension.js'
import {numbers} from '../objects/interpolate.js'
import {boxModelOnStart} from './boxModelBase.js'
// Component Functions
export function boxModelOnStart(tweenProp){
if (tweenProp in this.valuesEnd && !KUTE[tweenProp]) {
KUTE[tweenProp] = (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] = `${(numbers(a,b,v) ) >> 0}px`;
}
}
}
export function getBoxModel(tweenProp){
function getBoxModel(tweenProp){
return getStyleForProperty(this.element,tweenProp) || defaultValues[tweenProp];
}
export function prepareBoxModel(tweenProp,value){
function prepareBoxModel(tweenProp,value){
const boxValue = trueDimension(value), offsetProp = tweenProp === 'height' ? 'offsetHeight' : 'offsetWidth';
return boxValue.u === '%' ? boxValue.v * this.element[offsetProp] / 100 : boxValue.v;
}
@ -35,10 +28,9 @@ const essentialBoxModelFunctions = {
onStart: essentialBoxOnStart
}
// Component Essential
export const essentialBoxModelOps = {
component: 'boxModelProps',
const essentialBoxModel = {
component: 'essentialBoxModel',
category: 'boxModel',
properties: ['top','left','width','height'],
defaultValues: essentialBoxPropsValues,
@ -47,4 +39,6 @@ export const essentialBoxModelOps = {
Util:{trueDimension}
}
Components.BoxModelEssentialProperties = essentialBoxModelOps
export default essentialBoxModel
Components.BoxModelEssential = essentialBoxModel

35
src/components/clipProperty.js
View file

@ -1,17 +1,17 @@
import KUTE from '../objects/kute.js'
import Components from '../objects/components.js'
import getStyleForProperty from '../process/getStyleForProperty.js'
import trueDimension from '../util/trueDimension.js'
import {numbers} from '../objects/interpolate.js'
import {onStartClip} from './clipPropertyBase.js'
// Component Functions
export function getClip(tweenProp,v){
function getClip(tweenProp,v){
const currentClip = getStyleForProperty(this.element,tweenProp),
width = getStyleForProperty(this.element,'width'),
height = getStyleForProperty(this.element,'height');
return !/rect/.test(currentClip) ? [0, width, height, 0] : currentClip;
}
export function prepareClip(tweenProp,value) {
function prepareClip(tweenProp,value) {
if ( value instanceof Array ){
return [ trueDimension(value[0]), trueDimension(value[1]), trueDimension(value[2]), trueDimension(value[3]) ];
} else {
@ -20,37 +20,16 @@ export function prepareClip(tweenProp,value) {
return [ trueDimension(clipValue[0]), trueDimension(clipValue[1]), trueDimension(clipValue[2]), trueDimension(clipValue[3]) ];
}
}
export function onStartClip(tweenProp) {
if ( this.valuesEnd[tweenProp] && !KUTE[tweenProp]) {
KUTE[tweenProp] = (elem, a, b, v) => {
var h = 0, cl = [];
for (h;h<4;h++){
var c1 = a[h].v, c2 = b[h].v, cu = b[h].u || 'px';
cl[h] = ((numbers(c1,c2,v)*100 >> 0)/100) + cu;
}
elem.style.clip = `rect(${cl})`;
}
}
}
// All Component Functions
export const clipFunctions = {
const clipFunctions = {
prepareStart: getClip,
prepareProperty: prepareClip,
onStart: onStartClip
}
// Component Base
export const baseClipOps = {
component: 'clipProperty',
property: 'clip',
// defaultValue: [0,0,0,0],
Interpolate: {numbers},
functions: {onStart:onStartClip}
}
// Component Full
export const clipOps = {
const clipProperty = {
component: 'clipProperty',
property: 'clip',
defaultValue: [0,0,0,0],
@ -59,4 +38,6 @@ export const clipOps = {
Util: {trueDimension}
}
Components.ClipProperty = clipOps
export default clipProperty
Components.ClipProperty = clipProperty

27
src/components/clipPropertyBase.js Normal file
View file

@ -0,0 +1,27 @@
import KUTE from '../objects/kute.js'
import {numbers} from '../objects/interpolate.js'
// Component Functions
export function onStartClip(tweenProp) {
if ( this.valuesEnd[tweenProp] && !KUTE[tweenProp]) {
KUTE[tweenProp] = (elem, a, b, v) => {
var h = 0, cl = [];
for (h;h<4;h++){
var c1 = a[h].v, c2 = b[h].v, cu = b[h].u || 'px';
cl[h] = ((numbers(c1,c2,v)*100 >> 0)/100) + cu;
}
elem.style.clip = `rect(${cl})`;
}
}
}
// Component Base
const baseClip = {
component: 'baseClip',
property: 'clip',
// defaultValue: [0,0,0,0],
Interpolate: {numbers},
functions: {onStart:onStartClip}
}
export default baseClip

48
src/components/colorProperties.js
View file

@ -1,24 +1,11 @@
import KUTE from '../objects/kute.js'
import defaultValues from '../objects/defaultValues.js'
import Components from '../objects/components.js'
import getStyleForProperty from '../process/getStyleForProperty.js'
import trueColor from '../util/trueColor.js'
import {numbers} from '../objects/interpolate.js'
import {colors,onStartColors} from './colorPropertiesBase.js'
// Component Interpolation
// rgba1, rgba2, progress
export function colors(a, b, v) {
let _c = {},
c,
ep = ')',
cm =',',
rgb = 'rgb(',
rgba = 'rgba(';
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;
}
// Component Properties
// supported formats
// 'hex', 'rgb', 'rgba' '#fff' 'rgb(0,0,0)' / 'rgba(0,0,0,0)' 'red' (IE9+)
@ -30,49 +17,34 @@ supportedColors.forEach(tweenProp => {
});
// Component Functions
export function onStartColors(tweenProp){
if (this.valuesEnd[tweenProp] && !KUTE[tweenProp]) {
KUTE[tweenProp] = (elem, a, b, v) => {
elem.style[tweenProp] = colors(a,b,v);
}
}
}
const colorsOnStart = {}
supportedColors.map(x => colorsOnStart[x] = onStartColors)
export function getColor(prop,value) {
function getColor(prop,value) {
return getStyleForProperty(this.element,prop) || defaultValues[prop];
}
export function prepareColor(prop,value) {
function prepareColor(prop,value) {
return trueColor(value);
}
// All Component Functions
export const colorsFunctions = {
const colorFunctions = {
prepareStart: getColor,
prepareProperty: prepareColor,
onStart: colorsOnStart
}
// Component Base
export const baseColorsOps = {
component: 'colorProps',
category: 'colors',
properties: supportedColors,
// defaultValues: defaultColors,
Interpolate: {numbers,colors},
functions: {onStart:onStartColors}
}
// Component Full
export const colorsOps = {
component: 'colorProps',
const colorProperties = {
component: 'colorProperties',
category: 'colors',
properties: supportedColors,
defaultValues: defaultColors,
Interpolate: {numbers,colors},
functions: colorsFunctions,
functions: colorFunctions,
Util: {trueColor}
}
Components.ColorProperties = colorsOps
export default colorProperties
Components.ColorProperties = colorProperties

44
src/components/colorPropertiesBase.js Normal file
View file

@ -0,0 +1,44 @@
import KUTE from '../objects/kute.js'
import {numbers} from '../objects/interpolate.js'
// Component Interpolation
// rgba1, rgba2, progress
export function colors(a, b, v) {
let _c = {},
c,
ep = ')',
cm =',',
rgb = 'rgb(',
rgba = 'rgba(';
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;
}
// Component Properties
// supported formats
// 'hex', 'rgb', 'rgba' '#fff' 'rgb(0,0,0)' / 'rgba(0,0,0,0)' 'red' (IE9+)
const supportedColors = ['color', 'backgroundColor','borderColor', 'borderTopColor', 'borderRightColor', 'borderBottomColor', 'borderLeftColor', 'outlineColor']
// Component Functions
export function onStartColors(tweenProp){
if (this.valuesEnd[tweenProp] && !KUTE[tweenProp]) {
KUTE[tweenProp] = (elem, a, b, v) => {
elem.style[tweenProp] = colors(a,b,v);
}
}
}
const colorsOnStart = {}
supportedColors.map(x => colorsOnStart[x] = onStartColors)
// Component Base
export const baseColors = {
component: 'baseColors',
category: 'colors',
// properties: supportedColors,
// defaultValues: defaultColors,
Interpolate: {numbers,colors},
functions: {onStart:colorsOnStart}
}
export default baseColors

29
src/components/crossBrowserMove.js
View file

@ -1,16 +1,16 @@
import KUTE from '../objects/KUTE.js'
import KUTE from '../objects/kute.js'
import getInlineStyle from '../process/getInlineStyle.js'
import defaultValues from '../objects/defaultValues.js'
import Components from '../objects/Components.js'
import Components from '../objects/components.js'
import trueProperty from '../util/trueProperty.js'
import {numbers} from '../objects/Interpolate.js'
import {numbers} from '../objects/interpolate.js'
// Component Const
const transformProperty = trueProperty('transform');
const supportTransform = transformProperty in document.body.style ? 1 : 0;
// Component Functions
export function getComponentCurrentValue(tweenProp,value){
function getComponentCurrentValue(tweenProp,value){
let currentTransform = getInlineStyle(this.element);
let left = this.element.style.left;
let top = this.element.style.top;
@ -22,12 +22,13 @@ export function getComponentCurrentValue(tweenProp,value){
: defaultValues.move[1];
return [x,y]
}
export function prepareComponentValue(tweenProp,value){
function prepareComponentValue(tweenProp,value){
let x = isFinite(value*1) ? parseInt(value) : parseInt(value[0]) || 0;
let y = parseInt(value[1]) || 0;
return [ x, y ]
}
export function onStartComponent(tweenProp,value){
if (!KUTE[tweenProp] && this.valuesEnd[tweenProp]) {
@ -38,10 +39,10 @@ export function onStartComponent(tweenProp,value){
} else {
KUTE[tweenProp] = (elem, a, b, v) => {
if (a[0]||b[0]) {
elem.style.left = numbers(a[0],b[0],v)+'px';
elem.style.left = numbers(a[0],b[0],v)+'px';
}
if (a[1]||b[1]) {
elem.style.top = numbers(a[1],b[1],v)+'px';
elem.style.top = numbers(a[1],b[1],v)+'px';
}
}
}
@ -56,21 +57,23 @@ const componentFunctions = {
}
// Base Component
export const baseCrossBrowserMoveOps = {
component: 'crossBrowserMove',
export const baseCrossBrowserMove = {
component: 'baseCrossBrowserMove',
property: 'move',
Interpolate: numbers,
Interpolate: {numbers},
functions: {onStart:onStartComponent}
}
// Full Component
export const crossBrowserMoveOps = {
const crossBrowserMove = {
component: 'crossBrowserMove',
property: 'move',
defaultValue: [0,0],
Interpolate: numbers,
Interpolate: {numbers},
functions: componentFunctions,
Util: {trueProperty}
}
Components.CrossBrowserMove = crossBrowserMoveOps
export default crossBrowserMove
Components.CrossBrowserMove = crossBrowserMove

70
src/components/filterEffects.js
View file

@ -1,23 +1,14 @@
import KUTE from '../objects/kute.js'
import getStyleForProperty from '../process/getStyleForProperty.js'
import defaultValues from '../objects/defaultValues.js'
import Components from '../objects/components.js'
import trueColor from '../util/trueColor.js'
import {numbers} from '../objects/interpolate.js'
import {colors} from './colorProperties.js'
import {colors} from './colorPropertiesBase.js'
import {dropShadow,onStartFilter} from './filterEffectsBase.js'
// const filterEffects = { property : 'filter', subProperties: {}, defaultValue: {}, interpolators: {} }, functions = { prepareStart, prepareProperty, onStart, crossCheck }
// Component Interpolation
export function dropShadow(a,b,v){
let params = [], unit = 'px'
for (let i=0; i<3; i++){
params[i] = ((numbers(a[i],b[i],v) * 100 >>0) /100) + unit
}
return `drop-shadow(${params.concat( colors(a[3],b[3],v) ).join(' ') })`
}
// Component Util
function replaceDashNamespace(str){
return str.replace('-r','R').replace('-s','S')
}
@ -40,7 +31,6 @@ function parseDropShadow (shadow){
return newShadow;
}
// Component Util
function parseFilterString(currentStyle){
let result = {}
let fnReg = /(([a-z].*?)\(.*?\))(?=\s([a-z].*?)\(.*?\)|\s*$)/g
@ -64,7 +54,7 @@ function parseFilterString(currentStyle){
}
// Component Functions
export function getFilter(tweenProp,value) {
function getFilter(tweenProp,value) {
let currentStyle = getStyleForProperty(this.element,tweenProp),
filterObject = parseFilterString(currentStyle), fnp
@ -76,7 +66,7 @@ export function getFilter(tweenProp,value) {
}
return filterObject;
}
export function prepareFilter(tweenProp,value) {
function prepareFilter(tweenProp,value) {
let filterObject = {}, fnp
// {opacity: [0-100%], blur: [0-Nem], saturate: [0-N%], invert: 0, grayscale: [0-100%], brightness: [0-N%], contrast: [0-N%], sepia: [0-N%], 'hueRotate': [0-Ndeg], 'dropShadow': [0,0,0,(r:0,g:0,b:0)], url:''},
@ -98,25 +88,8 @@ export function prepareFilter(tweenProp,value) {
return filterObject;
}
export function onStartFilter(tweenProp) {
if ( this.valuesEnd[tweenProp] && !KUTE[tweenProp]) {
KUTE[tweenProp] = (elem, a, b, v) => {
a.dropShadow||b.dropShadow && console.log(dropShadow(a.dropShadow,b.dropShadow,v))
elem.style[tweenProp] = (b.url ? `url(${b.url})` : '')
+ (a.opacity||b.opacity ? `opacity(${((numbers(a.opacity,b.opacity,v) * 100)>>0)/100}%)` : '')
+ (a.blur||b.blur ? `blur(${((numbers(a.blur,b.blur,v) * 100)>>0)/100}em)` : '')
+ (a.saturate||b.saturate ? `saturate(${((numbers(a.saturate,b.saturate,v) * 100)>>0)/100}%)` : '')
+ (a.invert||b.invert ? `invert(${((numbers(a.invert,b.invert,v) * 100)>>0)/100}%)` : '')
+ (a.grayscale||b.grayscale ? `grayscale(${((numbers(a.grayscale,b.grayscale,v) * 100)>>0)/100}%)` : '')
+ (a.hueRotate||b.hueRotate ? `hue-rotate(${((numbers(a.hueRotate,b.hueRotate,v) * 100)>>0)/100 }deg)` : '')
+ (a.sepia||b.sepia ? `sepia(${((numbers(a.sepia,b.sepia,v) * 100)>>0)/100 }%)` : '')
+ (a.brightness||b.brightness ? `brightness(${((numbers(a.brightness,b.brightness,v) * 100)>>0)/100 }%)` : '')
+ (a.contrast||b.contrast ? `contrast(${((numbers(a.contrast,b.contrast,v) * 100)>>0)/100 }%)` : '')
+ (a.dropShadow||b.dropShadow ? dropShadow(a.dropShadow,b.dropShadow,v) : '')
}
}
}
export function crossCheckFilter(tweenProp){
function crossCheckFilter(tweenProp){
if ( this.valuesEnd[tweenProp] ) {
for (const fn in this.valuesStart[tweenProp]){
if (!this.valuesEnd[tweenProp][fn]){
@ -127,36 +100,15 @@ export function crossCheckFilter(tweenProp){
}
// All Component Functions
export const filterFunctions = {
const filterFunctions = {
prepareStart: getFilter,
prepareProperty: prepareFilter,
onStart: onStartFilter,
crossCheck: crossCheckFilter
}
// Base Component
export const baseFilterOps = {
component: 'filterEffects',
property: 'filter',
// subProperties: ['blur', 'brightness','contrast','dropShadow','hueRotate','grayscale','invert','opacity','saturate','sepia','url'], // opacity function interfere with opacityProperty
// defaultValue: {opacity: 100, blur: 0, saturate: 100, grayscale: 0, brightness: 100, contrast: 100, sepia: 0, invert: 0, hueRotate:0, dropShadow: [0,0,0,{r:0,g:0,b:0}], url:''},
Interpolate: {
opacity: numbers,
blur: numbers,
saturate: numbers,
grayscale: numbers,
brightness: numbers,
contrast: numbers,
sepia: numbers,
invert: numbers,
hueRotate: numbers,
dropShadow: {numbers,colors,dropShadow}
},
functions: {onStart:onStartFilter}
}
// Full Component
export const filterOps = {
const filterEffects = {
component: 'filterEffects',
property: 'filter',
// subProperties: ['blur', 'brightness','contrast','dropShadow','hueRotate','grayscale','invert','opacity','saturate','sepia','url'], // opacity function interfere with opacityProperty
@ -177,4 +129,6 @@ export const filterOps = {
Util: {parseDropShadow,parseFilterString,replaceDashNamespace,trueColor}
}
Components.FilterEffects = filterOps
export default filterEffects
Components.FilterEffects = filterEffects

58
src/components/filterEffectsBase.js Normal file
View file

@ -0,0 +1,58 @@
import KUTE from '../objects/kute.js'
import {numbers} from '../objects/interpolate.js'
import {colors} from './colorPropertiesBase.js'
// const filterEffects = { property : 'filter', subProperties: {}, defaultValue: {}, interpolators: {} }, functions = { prepareStart, prepareProperty, onStart, crossCheck }
// Component Interpolation
export function dropShadow(a,b,v){
let params = [], unit = 'px'
for (let i=0; i<3; i++){
params[i] = ((numbers(a[i],b[i],v) * 100 >>0) /100) + unit
}
return `drop-shadow(${params.concat( colors(a[3],b[3],v) ).join(' ') })`
}
// Component Functions
export function onStartFilter(tweenProp) {
if ( this.valuesEnd[tweenProp] && !KUTE[tweenProp]) {
KUTE[tweenProp] = (elem, a, b, v) => {
a.dropShadow||b.dropShadow && console.log(dropShadow(a.dropShadow,b.dropShadow,v))
elem.style[tweenProp] = (b.url ? `url(${b.url})` : '')
+ (a.opacity||b.opacity ? `opacity(${((numbers(a.opacity,b.opacity,v) * 100)>>0)/100}%)` : '')
+ (a.blur||b.blur ? `blur(${((numbers(a.blur,b.blur,v) * 100)>>0)/100}em)` : '')
+ (a.saturate||b.saturate ? `saturate(${((numbers(a.saturate,b.saturate,v) * 100)>>0)/100}%)` : '')
+ (a.invert||b.invert ? `invert(${((numbers(a.invert,b.invert,v) * 100)>>0)/100}%)` : '')
+ (a.grayscale||b.grayscale ? `grayscale(${((numbers(a.grayscale,b.grayscale,v) * 100)>>0)/100}%)` : '')
+ (a.hueRotate||b.hueRotate ? `hue-rotate(${((numbers(a.hueRotate,b.hueRotate,v) * 100)>>0)/100 }deg)` : '')
+ (a.sepia||b.sepia ? `sepia(${((numbers(a.sepia,b.sepia,v) * 100)>>0)/100 }%)` : '')
+ (a.brightness||b.brightness ? `brightness(${((numbers(a.brightness,b.brightness,v) * 100)>>0)/100 }%)` : '')
+ (a.contrast||b.contrast ? `contrast(${((numbers(a.contrast,b.contrast,v) * 100)>>0)/100 }%)` : '')
+ (a.dropShadow||b.dropShadow ? dropShadow(a.dropShadow,b.dropShadow,v) : '')
}
}
}
// Base Component
const baseFilter = {
component: 'baseFilter',
property: 'filter',
// subProperties: ['blur', 'brightness','contrast','dropShadow','hueRotate','grayscale','invert','opacity','saturate','sepia','url'], // opacity function interfere with opacityProperty
// defaultValue: {opacity: 100, blur: 0, saturate: 100, grayscale: 0, brightness: 100, contrast: 100, sepia: 0, invert: 0, hueRotate:0, dropShadow: [0,0,0,{r:0,g:0,b:0}], url:''},
Interpolate: {
opacity: numbers,
blur: numbers,
saturate: numbers,
grayscale: numbers,
brightness: numbers,
contrast: numbers,
sepia: numbers,
invert: numbers,
hueRotate: numbers,
dropShadow: {numbers,colors,dropShadow}
},
functions: {onStart:onStartFilter}
}
export default baseFilter

41
src/components/htmlAttributes.js
View file

@ -1,11 +1,11 @@
import KUTE from '../objects/kute.js'
import defaultValues from '../objects/defaultValues.js'
import onStart from '../objects/onStart.js'
import Components from '../objects/components.js'
import {numbers} from '../objects/interpolate.js'
import trueColor from '../util/trueColor.js'
import trueDimension from '../util/trueDimension.js'
import {colors} from './colorProperties.js'
import {colors} from './colorPropertiesBase.js'
import {attributes,onStartAttr} from './htmlAttributesBase.js'
// Component Name
let ComponentName = 'htmlAttributes'
@ -13,9 +13,6 @@ let ComponentName = 'htmlAttributes'
// Component Properties
const svgColors = ['fill','stroke','stop-color'];
// Component Special
let attributes = {};
// Component Util
function replaceUppercase (a) { return a.replace(/[A-Z]/g, "-$&").toLowerCase(); }
@ -71,42 +68,16 @@ export function prepareAttr(tweenProp,attrObj){ // attr (string),attrObj (object
}
return attributesObject;
}
export const onStartAttr = {
attr : function(tweenProp){
if (!KUTE[tweenProp] && this.valuesEnd[tweenProp]) {
KUTE[tweenProp] = (elem, vS, vE, v) => {
for ( const oneAttr in vE ){
KUTE.attributes[oneAttr](elem,oneAttr,vS[oneAttr],vE[oneAttr],v);
}
}
}
},
attributes : function(tweenProp){
if (!KUTE[tweenProp] && this.valuesEnd.attr) {
KUTE[tweenProp] = attributes
}
}
}
// All Component Functions
export const attrFunctions = {
const attrFunctions = {
prepareStart: getAttr,
prepareProperty: prepareAttr,
onStart: onStartAttr
}
// Component Base
export const baseAttrOps = {
component: ComponentName,
property: 'attr',
subProperties: ['fill','stroke','stop-color','fill-opacity','stroke-opacity'], // the Animation class will need some values to validate this Object attribute
// defaultValue: {fill : 'rgb(0,0,0)', stroke: 'rgb(0,0,0)', 'stop-color': 'rgb(0,0,0)', opacity: 1, 'stroke-opacity': 1,'fill-opacity': 1}, // same here
Interpolate: { numbers,colors },
functions: {onStart:onStartAttr}
}
// Component Full
export const attrOps = {
const htmlAttributes = {
component: ComponentName,
property: 'attr',
subProperties: ['fill','stroke','stop-color','fill-opacity','stroke-opacity'], // the Animation class will need some values to validate this Object attribute
@ -117,4 +88,6 @@ export const attrOps = {
Util: { replaceUppercase, trueColor, trueDimension }
}
Components.HTMLAttributes = attrOps
export default htmlAttributes
Components.HTMLAttributes = htmlAttributes

39
src/components/htmlAttributesBase.js Normal file
View file

@ -0,0 +1,39 @@
import KUTE from '../objects/kute.js'
import {numbers} from '../objects/interpolate.js'
import {colors} from './colorPropertiesBase.js'
// Component Name
let ComponentName = 'baseHTMLAttributes'
// Component Special
let attributes = {};
export {attributes}
export const onStartAttr = {
attr : function(tweenProp){
if (!KUTE[tweenProp] && this.valuesEnd[tweenProp]) {
KUTE[tweenProp] = (elem, vS, vE, v) => {
for ( const oneAttr in vE ){
KUTE.attributes[oneAttr](elem,oneAttr,vS[oneAttr],vE[oneAttr],v);
}
}
}
},
attributes : function(tweenProp){
if (!KUTE[tweenProp] && this.valuesEnd.attr) {
KUTE[tweenProp] = attributes
}
}
}
// Component Base
const baseAttributes = {
component: ComponentName,
property: 'attr',
// subProperties: ['fill','stroke','stop-color','fill-opacity','stroke-opacity'], // the Animation class will need some values to validate this Object attribute
// defaultValue: {fill : 'rgb(0,0,0)', stroke: 'rgb(0,0,0)', 'stop-color': 'rgb(0,0,0)', opacity: 1, 'stroke-opacity': 1,'fill-opacity': 1}, // same here
Interpolate: { numbers,colors },
functions: {onStart:onStartAttr}
}
export default baseAttributes

29
src/components/opacityProperty.js
View file

@ -1,24 +1,18 @@
import KUTE from '../objects/kute.js'
import getStyleForProperty from '../process/getStyleForProperty.js'
import Components from '../objects/components.js'
import {numbers} from '../objects/interpolate.js'
import {numbers} from '../objects/interpolate.js'
import {onStartOpacity} from './opacityPropertyBase.js'
// const opacityProperty = { property : 'opacity', defaultValue: 1, interpolators: {numbers} }, functions = { prepareStart, prepareProperty, onStart }
// Component Functions
export function getOpacity(tweenProp){
function getOpacity(tweenProp){
return getStyleForProperty(this.element,tweenProp)
}
export function prepareOpacity(tweenProp,value){
function prepareOpacity(tweenProp,value){
return parseFloat(value); // opacity always FLOAT
}
export function onStartOpacity(tweenProp){
if ( tweenProp in this.valuesEnd && !KUTE[tweenProp]) { // opacity could be 0
KUTE[tweenProp] = (elem, a, b, v) => {
elem.style[tweenProp] = ((numbers(a,b,v) * 1000)>>0)/1000;
}
}
}
// All Component Functions
const opacityFunctions = {
@ -27,17 +21,8 @@ const opacityFunctions = {
onStart: onStartOpacity
}
// Base Component
export const baseOpacityOps = {
component: 'opacityProperty',
property: 'opacity',
// defaultValue: 1,
Interpolate: {numbers},
functions: {onStart: onStartOpacity}
}
// Full Component
export const opacityOps = {
const opacityProperty = {
component: 'opacityProperty',
property: 'opacity',
defaultValue: 1,
@ -45,4 +30,6 @@ export const opacityOps = {
functions: opacityFunctions
}
Components.OpacityProperty = opacityOps
export default opacityProperty
Components.OpacityProperty = opacityProperty

24
src/components/opacityPropertyBase.js Normal file
View file

@ -0,0 +1,24 @@
import KUTE from '../objects/kute.js'
import {numbers} from '../objects/interpolate.js'
// const opacityProperty = { property : 'opacity', defaultValue: 1, interpolators: {numbers} }, functions = { prepareStart, prepareProperty, onStart }
// Component Functions
export function onStartOpacity(tweenProp){
if ( tweenProp in this.valuesEnd && !KUTE[tweenProp]) { // opacity could be 0
KUTE[tweenProp] = (elem, a, b, v) => {
elem.style[tweenProp] = ((numbers(a,b,v) * 1000)>>0)/1000;
}
}
}
// Base Component
const baseOpacity = {
component: 'baseOpacity',
property: 'opacity',
// defaultValue: 1,
Interpolate: {numbers},
functions: {onStart: onStartOpacity}
}
export default baseOpacity

91
src/components/scrollProperty.js
View file

@ -1,107 +1,36 @@
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'
// Component Util
// events preventing scroll
const touchOrWheel = supportTouch ? 'touchstart' : 'mousewheel'
// true scroll container
// very important and specific to the component
const scrollContainer = navigator && /(EDGE|Mac)/i.test(navigator.userAgent) ? document.body : document.documentElement
// scroll event options
// it's important to stop propagating when animating scroll
const passiveHandler = supportPassive ? { passive: false } : false
// prevent mousewheel or touch events while tweening scroll
function preventScroll(e) {
this.scrolling && e.preventDefault()
}
function getScrollTargets(){
let el = this.element
return el === scrollContainer ? { el: document, st: document.body } : { el: el, st: el}
}
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);
targets.st.style.pointerEvents = 'none'
}
}
function scrollOut(){ //prevent scroll when tweening scroll
let 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 = ''
}
}
import {scrollContainer,onStartScroll,onCompleteScroll,scrollIn,scrollOut,getScrollTargets,preventScroll} from './scrollPropertyBase.js'
// Component Functions
export function getScroll(){
this.element = ('scroll' in this.valuesEnd) && (!this.element || this.element === window) ? scrollContainer : this.element;
scrollIn.call(this);
function getScroll(){
this.element = ('scroll' in this.valuesEnd) && (!this.element || this.element === window) ? scrollContainer : this.element;
return this.element === scrollContainer ? (window.pageYOffset || scrollContainer.scrollTop) : this.element.scrollTop;
}
export function prepareScroll(prop,value){
function prepareScroll(prop,value){
return parseInt(value);
}
export function onStartScroll(tweenProp){
if ( tweenProp in this.valuesEnd && !KUTE[tweenProp]) { // checking 0 will NOT add the render function
KUTE[tweenProp] = (elem, a, b, v) => {
elem.scrollTop = (numbers(a,b,v))>>0;
};
}
}
export function onCompleteScroll(tweenProp){
scrollOut.call(this)
}
// All Component Functions
export const scrollFunctions = {
const scrollFunctions = {
prepareStart: getScroll,
prepareProperty: prepareScroll,
onStart: onStartScroll,
onComplete: onCompleteScroll
}
// Base Component
export const baseScrollOps = {
component: 'scrollProperty',
property: 'scroll',
// defaultValue: 0,
Interpolate: {numbers},
functions: {
onStart: onStartScroll,
onComplete: onCompleteScroll
},
// unfortunatelly scroll needs all them no matter the packaging
Util: { preventScroll, scrollIn, scrollOut, scrollContainer, passiveHandler, getScrollTargets }
}
// Full Component
export const scrollOps = {
const scrollProperty = {
component: 'scrollProperty',
property: 'scroll',
defaultValue: 0,
Interpolate: {numbers},
functions: scrollFunctions,
// export stuff to global
Util: { preventScroll, scrollIn, scrollOut, scrollContainer, passiveHandler, getScrollTargets }
Util: { preventScroll, scrollIn, scrollOut, getScrollTargets }
}
Components.ScrollProperty = scrollOps
export default scrollProperty
Components.ScrollProperty = scrollProperty

80
src/components/scrollPropertyBase.js Normal file
View file

@ -0,0 +1,80 @@
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'
// Component Util
// events preventing scroll
const touchOrWheel = supportTouch ? 'touchstart' : 'mousewheel'
// true scroll container
// very important and specific to the component
export const scrollContainer = navigator && /(EDGE|Mac)/i.test(navigator.userAgent) ? document.body : document.documentElement
// scroll event options
// it's important to stop propagating when animating scroll
const passiveHandler = supportPassive ? { passive: false } : false
// prevent mousewheel or touch events while tweening scroll
export function preventScroll(e) {
this.scrolling && e.preventDefault()
}
export function getScrollTargets(){
let el = this.element
return el === scrollContainer ? { el: document, st: document.body } : { el: el, st: el}
}
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);
targets.st.style.pointerEvents = 'none'
}
}
export function scrollOut(){ //prevent scroll when tweening scroll
let 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 = ''
}
}
// Component Functions
export function onStartScroll(tweenProp){
if ( tweenProp in this.valuesEnd && !KUTE[tweenProp]) { // checking 0 will NOT add the render function
this.element = ('scroll' in this.valuesEnd) && (!this.element || this.element === window) ? scrollContainer : this.element;
scrollIn.call(this);
KUTE[tweenProp] = (elem, a, b, v) => {
elem.scrollTop = (numbers(a,b,v))>>0;
};
}
}
export function onCompleteScroll(tweenProp){
scrollOut.call(this)
}
// Base Component
const baseScroll = {
component: 'baseScroll',
property: 'scroll',
// defaultValue: 0,
Interpolate: {numbers},
functions: {
onStart: onStartScroll,
onComplete: onCompleteScroll
},
// unfortunatelly scroll needs all them no matter the packaging
Util: { preventScroll, scrollIn, scrollOut, getScrollTargets }
}
export default baseScroll

37
src/components/shadowProperties.js
View file

@ -1,10 +1,10 @@
import KUTE from '../objects/kute.js'
import defaultValues from '../objects/defaultValues.js'
import Components from '../objects/components.js'
import getStyleForProperty from '../process/getStyleForProperty.js'
import trueColor from '../util/trueColor.js'
import {numbers} from '../objects/interpolate.js'
import {colors} from './colorProperties.js'
import {colors} from './colorPropertiesBase.js'
import {onStartShadow} from './shadowPropertiesBase.js'
// Component Properties
const shadowProps = ['boxShadow','textShadow']
@ -67,44 +67,19 @@ export function prepareShadow(tweenProp,value) {
}
return value;
}
function onStartShadow(tweenProp) {
if ( this.valuesEnd[tweenProp] && !KUTE[tweenProp]) {
KUTE[tweenProp] = (elem, a, b, v) => {
// let's start with the numbers | set unit | also determine inset
let params = [], unit = 'px', sl = tweenProp === 'textShadow' ? 3 : 4,
colA = sl === 3 ? a[3] : a[4], colB = sl === 3 ? b[3] : b[4],
inset = a[5] && a[5] !== 'none' || b[5] && b[5] !== 'none' ? ' inset' : false;
for (let i=0; i<sl; i++){
params.push( ((numbers( a[i], b[i], v ) * 1000 >> 0) / 1000) + unit );
}
// the final piece of the puzzle, the DOM update
elem.style[tweenProp] = inset ? colors(colA,colB,v) + params.join(' ') + inset
: colors(colA,colB,v) + params.join(' ');
}
}
}
const shadowPropOnStart = {}
shadowProps.map(x=>shadowPropOnStart[x]=onStartShadow)
// All Component Functions
export const shadowFunctions = {
const shadowFunctions = {
prepareStart: getShadow,
prepareProperty: prepareShadow,
onStart: shadowPropOnStart
}
// Component Base
export const baseShadowOps = {
component: 'shadowProperties',
properties: shadowProps,
// defaultValues: {boxShadow :'0px 0px 0px 0px rgb(0,0,0)', textShadow: '0px 0px 0px 0px rgb(0,0,0)'},
Interpolate: {numbers,colors},
functions: {onStart: shadowPropOnStart}
}
// Component Full
export const shadowOps = {
const shadowProperties = {
component: 'shadowProperties',
properties: shadowProps,
defaultValues: {boxShadow :'0px 0px 0px 0px rgb(0,0,0)', textShadow: '0px 0px 0px rgb(0,0,0)'},
@ -113,4 +88,6 @@ export const shadowOps = {
Util: { processShadowArray, trueColor }
}
Components.ShadowProperties = shadowOps
export default shadowProperties
Components.ShadowProperties = shadowProperties

38
src/components/shadowPropertiesBase.js Normal file
View file

@ -0,0 +1,38 @@
import KUTE from '../objects/kute.js'
import {numbers} from '../objects/interpolate.js'
import {colors} from './colorPropertiesBase.js'
// Component Properties
const shadowProps = ['boxShadow','textShadow']
// Component Functions
export function onStartShadow(tweenProp) {
if ( this.valuesEnd[tweenProp] && !KUTE[tweenProp]) {
KUTE[tweenProp] = (elem, a, b, v) => {
// let's start with the numbers | set unit | also determine inset
let params = [], unit = 'px', sl = tweenProp === 'textShadow' ? 3 : 4,
colA = sl === 3 ? a[3] : a[4], colB = sl === 3 ? b[3] : b[4],
inset = a[5] && a[5] !== 'none' || b[5] && b[5] !== 'none' ? ' inset' : false;
for (let i=0; i<sl; i++){
params.push( ((numbers( a[i], b[i], v ) * 1000 >> 0) / 1000) + unit );
}
// the final piece of the puzzle, the DOM update
elem.style[tweenProp] = inset ? colors(colA,colB,v) + params.join(' ') + inset
: colors(colA,colB,v) + params.join(' ');
}
}
}
const shadowPropOnStart = {}
shadowProps.map(x=>shadowPropOnStart[x]=onStartShadow)
// Component Base
const baseShadow = {
component: 'baseShadow',
// properties: shadowProps,
// defaultValues: {boxShadow :'0px 0px 0px 0px rgb(0,0,0)', textShadow: '0px 0px 0px 0px rgb(0,0,0)'},
Interpolate: {numbers,colors},
functions: {onStart: shadowPropOnStart}
}
export default baseShadow

62
src/components/svgCubicMorph.js
View file

@ -1,9 +1,10 @@
import KUTE from '../objects/kute.js'
import Components from '../objects/components.js'
import selector from '../util/selector.js'
import {numbers} from '../objects/interpolate.js'
// const SVGMorph = { property : 'path', defaultValue: [], interpolators: {numbers,coords} }, functions = { prepareStart, prepareProperty, onStart, crossCheck }
import {toPathString,onStartCubicMorph} from './svgCubicMorphBase.js'
// const SVGMorph = { property : 'path', defaultValue: [], interpolators: {numbers} }, functions = { prepareStart, prepareProperty, onStart, crossCheck }
// Component Util
const INVALID_INPUT = 'Invalid path value'
@ -132,7 +133,7 @@ function parsePathString(pathString) {
}
}
export function pathToAbsolute(pathArray) {
function pathToAbsolute(pathArray) {
pathArray = parsePathString(pathArray);
if (!pathArray || !pathArray.length) {
@ -350,7 +351,7 @@ function a2c(x1, y1, rx, ry, angle, large_arc_flag, sweep_flag, x2, y2, recursiv
}
}
export function processPath (path, d, pcom) {
function processPath (path, d, pcom) {
let nx, ny;
if (!path) {
return ["C", d.x, d.y, d.x, d.y, d.x, d.y];
@ -419,7 +420,7 @@ function fixM (path1, path2, a1, a2, i) {
}
}
export function fixArc (p, p2, pcoms1, pcoms2, i) {
function fixArc (p, p2, pcoms1, pcoms2, i) {
if (p[i].length > 7) {
p[i].shift();
const pi = p[i];
@ -432,7 +433,7 @@ export function fixArc (p, p2, pcoms1, pcoms2, i) {
}
}
export function path2curve(path, path2) {
function path2curve(path, path2) {
const p = pathToAbsolute(path), // holder for previous path command of original path
p2 = path2 && pathToAbsolute(path2),
// p2 = path2 ? pathToAbsolute(path2) : pathToAbsolute('M0,0L0,0'),
@ -587,23 +588,11 @@ function getRotatedCurve(a,b) {
return newPath
}
export function toPathString(pathArray) {
let newPath = pathArray.map( (c) => {
if (typeof(c) === 'string') {
return c
} else {
let c0 = c.shift();
return c0 + c.join(',')
}
})
return newPath.join('');
}
// Component Functions
export function getCubicMorph(tweenProp){
function getCubicMorph(tweenProp){
return this.element.getAttribute('d');
}
export function prepareCubicMorph(tweenProp,value){
function prepareCubicMorph(tweenProp,value){
// get path d attribute or create a path from string value
let pathObject = {},
el = value instanceof SVGElement ? value : /^\.|^\#/.test(value) ? selector(value) : null,
@ -625,7 +614,7 @@ export function prepareCubicMorph(tweenProp,value){
throw TypeError(`KUTE.js - ${INVALID_INPUT} ${e}`)
}
}
export function crossCheckCubicMorph(tweenProp){
function crossCheckCubicMorph(tweenProp){
if (this.valuesEnd[tweenProp]) {
let pathCurve1 = this.valuesStart[tweenProp].curve,
pathCurve2 = this.valuesEnd[tweenProp].curve
@ -644,40 +633,17 @@ export function crossCheckCubicMorph(tweenProp){
}
}
}
export function onStartCubicMorph(tweenProp){
if (!KUTE[tweenProp] && this.valuesEnd[tweenProp]) {
KUTE[tweenProp] = function(elem,a,b,v){
let curve = [], path1 = a.curve, path2 = b.curve;
for(let i=0, l=path2.length; i<l; i++) { // each path command
curve.push([path1[i][0]]);
for(var j=1,l2=path1[i].length;j<l2;j++) { // each command coordinate
curve[i].push( (numbers(path1[i][j], path2[i][j], v) * 1000 >>0)/1000 );
}
}
elem.setAttribute("d", v === 1 ? b.original : toPathString(curve) );
}
}
}
// All Component Functions
export const svgCubicMorphFunctions = {
const svgCubicMorphFunctions = {
prepareStart: getCubicMorph,
prepareProperty: prepareCubicMorph,
onStart: onStartCubicMorph,
crossCheck: crossCheckCubicMorph
}
// Component Base
export const baseSvgCubicMorphOps = {
component: 'svgCubicMorph',
property: 'path',
// defaultValue: [],
Interpolate: {numbers,toPathString},
functions: {onStart:onStartCubicMorph}
}
// Component Full
export const svgCubicMorphOps = {
const svgCubicMorph = {
component: 'svgCubicMorph',
property: 'path',
defaultValue: [],
@ -692,4 +658,6 @@ export const svgCubicMorphOps = {
}
}
Components.SVGCubicMorph = svgCubicMorphOps
export default svgCubicMorph
Components.SVGCubicMorph = svgCubicMorph

44
src/components/svgCubicMorphBase.js Normal file
View file

@ -0,0 +1,44 @@
import KUTE from '../objects/kute.js'
import {numbers} from '../objects/interpolate.js'
// const SVGMorph = { property : 'path', defaultValue: [], interpolators: {numbers} }, functions = { prepareStart, prepareProperty, onStart, crossCheck }
// Component Interpolation
export function toPathString(pathArray) {
let newPath = pathArray.map( (c) => {
if (typeof(c) === 'string') {
return c
} else {
let c0 = c.shift();
return c0 + c.join(',')
}
})
return newPath.join('');
}
// Component Functions
export function onStartCubicMorph(tweenProp){
if (!KUTE[tweenProp] && this.valuesEnd[tweenProp]) {
KUTE[tweenProp] = function(elem,a,b,v){
let curve = [], path1 = a.curve, path2 = b.curve;
for(let i=0, l=path2.length; i<l; i++) { // each path command
curve.push([path1[i][0]]);
for(var j=1,l2=path1[i].length;j<l2;j++) { // each command coordinate
curve[i].push( (numbers(path1[i][j], path2[i][j], v) * 1000 >>0)/1000 );
}
}
elem.setAttribute("d", v === 1 ? b.original : toPathString(curve) );
}
}
}
// Component Base
const baseSvgCubicMorph = {
component: 'baseSVGCubicMorph',
property: 'path',
// defaultValue: [],
Interpolate: {numbers,toPathString},
functions: {onStart:onStartCubicMorph}
}
export default baseSvgCubicMorph

55
src/components/svgDraw.js
View file

@ -1,21 +1,23 @@
import KUTE from '../objects/kute.js'
import {numbers} from '../objects/interpolate.js'
import Components from '../objects/components.js'
import getStyleForProperty from '../process/getStyleForProperty.js'
import {onStartDraw} from './svgDrawBase.js'
// const svgDraw = { property : 'draw', defaultValue, Interpolate: {numbers} }, functions = { prepareStart, prepareProperty, onStart }
// Component Util
const percent = (v, l) => parseFloat(v) / 100 * l
function percent (v,l) {
return parseFloat(v) / 100 * l
}
// http://stackoverflow.com/a/30376660
const getRectLength = el => { // returns the length of a Rect
function getRectLength(el) { // returns the length of a Rect
let w = el.getAttribute('width'),
h = el.getAttribute('height');
return (w*2)+(h*2);
}
const getPolyLength = el => {
function getPolyLength(el) {
// getPolygonLength / getPolylineLength - return the length of the Polygon / Polyline
const points = el.getAttribute('points').split(' ');
@ -45,7 +47,7 @@ const getPolyLength = el => {
return len;
}
const getLineLength = el => { // return the length of the line
function getLineLength(el) { // return the length of the line
const x1 = el.getAttribute('x1');
const x2 = el.getAttribute('x2');
const y1 = el.getAttribute('y1');
@ -53,17 +55,17 @@ const getLineLength = el => { // return the length of the line
return Math.sqrt((x2 - x1) ** 2+(y2 - y1) ** 2);
}
const getCircleLength = el => { // return the length of the circle
function getCircleLength(el) { // return the length of the circle
const r = el.getAttribute('r');
return 2 * Math.PI * r;
}
const getEllipseLength = el => { // returns the length of an ellipse
function getEllipseLength(el) { // returns the length of an ellipse
const rx = el.getAttribute('rx'), ry = el.getAttribute('ry'), len = 2*rx, wid = 2*ry;
return ((Math.sqrt(.5 * ((len * len) + (wid * wid)))) * (Math.PI * 2)) / 2;
}
const getTotalLength = el => { // returns the result of any of the below functions
function getTotalLength(el) { // returns the result of any of the below functions
if (/rect/.test(el.tagName)) {
return getRectLength(el);
} else if (/circle/.test(el.tagName)) {
@ -77,7 +79,7 @@ const getTotalLength = el => { // returns the result of any of the below functio
}
}
export const getDraw = (e, v) => {
function getDraw(e,v) {
let length = /path|glyph/.test(e.tagName) ? e.getTotalLength() : getTotalLength(e),
start, end, d, o;
@ -97,32 +99,18 @@ export const getDraw = (e, v) => {
return { s: start, e: end, l: length };
}
export function resetDraw(elem) {
function resetDraw(elem) {
elem.style.strokeDashoffset = ``;
elem.style.strokeDasharray = ``;
}
// Component Functions
export function getDrawValue(){
function getDrawValue(){
return getDraw(this.element);
}
export function prepareDraw(a,o){
function prepareDraw(a,o){
return getDraw(this.element,o);
}
export function onStartDraw(tweenProp){
if ( tweenProp in this.valuesEnd && !KUTE[tweenProp]) {
KUTE[tweenProp] = (elem,a,b,v) => {
let pathLength = (a.l*100>>0)/100,
start = (numbers(a.s,b.s,v)*100>>0)/100,
end = (numbers(a.e,b.e,v)*100>>0)/100,
offset = 0 - start,
dashOne = end+offset;
elem.style.strokeDashoffset = `${offset}px`;
elem.style.strokeDasharray = `${((dashOne <1 ? 0 : dashOne)*100>>0)/100}px, ${pathLength}px`;
}
}
}
// All Component Functions
const svgDrawFunctions = {
@ -131,16 +119,8 @@ const svgDrawFunctions = {
onStart: onStartDraw
}
// Component Base
export const baseSVGDrawOps = {
component: 'svgDraw',
property: 'draw',
Interpolate: {numbers},
functions: {onStart:onStartDraw}
}
// Component Full
export const svgDrawOps = {
const svgDraw = {
component: 'svgDraw',
property: 'draw',
defaultValue: '0% 0%',
@ -154,9 +134,12 @@ export const svgDrawOps = {
getCircleLength,
getEllipseLength,
getTotalLength,
resetDraw,
getDraw,
percent
}
}
Components.SVGDraw = svgDrawOps
export default svgDraw
Components.SVGDraw = svgDraw

30
src/components/svgDrawBase.js Normal file
View file

@ -0,0 +1,30 @@
import KUTE from '../objects/kute.js'
import {numbers} from '../objects/interpolate.js'
// const svgDraw = { property : 'draw', defaultValue, Interpolate: {numbers} }, functions = { prepareStart, prepareProperty, onStart }
// Component Functions
export function onStartDraw(tweenProp){
if ( tweenProp in this.valuesEnd && !KUTE[tweenProp]) {
KUTE[tweenProp] = (elem,a,b,v) => {
let pathLength = (a.l*100>>0)/100,
start = (numbers(a.s,b.s,v)*100>>0)/100,
end = (numbers(a.e,b.e,v)*100>>0)/100,
offset = 0 - start,
dashOne = end+offset;
elem.style.strokeDashoffset = `${offset}px`;
elem.style.strokeDasharray = `${((dashOne <1 ? 0 : dashOne)*100>>0)/100}px, ${pathLength}px`;
}
}
}
// Component Base
const baseSVGDraw = {
component: 'baseSVGDraw',
property: 'draw',
Interpolate: {numbers},
functions: {onStart:onStartDraw}
}
export default baseSVGDraw

53
src/components/svgMorph.js
View file

@ -2,21 +2,13 @@ import KUTE from '../objects/kute.js'
import selector from '../util/selector.js'
import defaultOptions from '../objects/defaultOptions.js'
import Components from '../objects/components.js'
import {onStartSVGMorph,coords} from './svgMorphBase.js'
// const SVGMorph = { property : 'path', defaultValue: [], interpolators: {numbers,coords} }, functions = { prepareStart, prepareProperty, onStart, crossCheck }
// Component Interpolation
// function function(array1, array2, length, progress)
export function coords (a, b, l, v) {
const points = [];
for(let i=0;i<l;i++) { // for each point
points[i] = [];
for(let j=0;j<2;j++) { // each point coordinate
points[i].push( ((a[i][j]+(b[i][j]-a[i][j])*v) * 1000 >> 0)/1000 );
}
}
return points;
}
// Component Util
const INVALID_INPUT = 'Invalid path value'
@ -319,7 +311,7 @@ function scanSegment(state) {
}
// Returns array of segments
export function pathParse(svgPath) {
function pathParse(svgPath) {
let state = new State(svgPath), max = state.max;
skipSpaces(state);
@ -347,9 +339,9 @@ export function pathParse(svgPath) {
err: state.err,
segments: state.result
};
};
}
export class SvgPath {
class SvgPath {
constructor(path){
if (!(this instanceof SvgPath)) { return new SvgPath(path); }
@ -727,10 +719,10 @@ function getInterpolationPoints(fromShape, toShape, morphPrecision) {
// Component functions
export function getSVGMorph(tweenProp){
function getSVGMorph(tweenProp){
return this.element.getAttribute('d');
}
export function prepareSVGMorph(tweenProp,value){
function prepareSVGMorph(tweenProp,value){
const pathObject = {}, elem = value instanceof Element ? value : /^\.|^\#/.test(value) ? selector(value) : null,
pathReg = new RegExp('\\n','ig'); // remove newlines, they brake JSON strings sometimes
@ -744,16 +736,7 @@ export function prepareSVGMorph(tweenProp,value){
}
return pathObject;
}
export function onStartSVGMorph(tweenProp){
if (!KUTE[tweenProp] && this.valuesEnd[tweenProp]) {
KUTE[tweenProp] = (elem, a, b, v) => {
let path1 = a.pathArray, path2 = b.pathArray, len = path2.length, pathString;
pathString = v === 1 ? b.original : `M${coords( path1, path2, len, v ).join('L')}Z`;
elem.setAttribute("d", pathString );
}
}
}
export function crossCheckSVGMorph(prop){
function crossCheckSVGMorph(prop){
if ( this.valuesEnd[prop]){
let pathArray1 = this.valuesStart[prop].pathArray,
pathArray2 = this.valuesEnd[prop].pathArray
@ -773,26 +756,16 @@ export function crossCheckSVGMorph(prop){
}
// All Component Functions
export const svgMorphFunctions = {
const svgMorphFunctions = {
prepareStart: getSVGMorph,
prepareProperty: prepareSVGMorph,
onStart: onStartSVGMorph,
crossCheck: crossCheckSVGMorph
}
// Component Base
export const baseSVGMorphOps = {
component: 'svgMorph',
property: 'path',
// defaultValue: [],
Interpolate: coords,
defaultOptions: {morphPrecision : 10, reverseFirstShape: false,},
functions: {onStart:onStartSVGMorph}
}
// Component Full
export const svgMorphOps = {
const svgMorph = {
component: 'svgMorph',
property: 'path',
defaultValue: [],
@ -806,4 +779,6 @@ export const svgMorphOps = {
exactRing,approximateRing,measure,rotateRing,polygonLength,polygonArea,addPoints,bisect,normalizeRing,validRing,getInterpolationPoints}
}
Components.SVGMorph = svgMorphOps
export default svgMorph
Components.SVGMorph = svgMorph

37
src/components/svgMorphBase.js Normal file
View file

@ -0,0 +1,37 @@
import KUTE from '../objects/kute.js'
// const SVGMorph = { property : 'path', defaultValue: [], interpolators: {numbers,coords} }, functions = { prepareStart, prepareProperty, onStart, crossCheck }
// Component Interpolation
// function function(array1, array2, length, progress)
export function coords (a, b, l, v) {
const points = [];
for(let i=0;i<l;i++) { // for each point
points[i] = [];
for(let j=0;j<2;j++) { // each point coordinate
points[i].push( ((a[i][j]+(b[i][j]-a[i][j])*v) * 1000 >> 0)/1000 );
}
}
return points;
}
// Component functions
export function onStartSVGMorph(tweenProp){
if (!KUTE[tweenProp] && this.valuesEnd[tweenProp]) {
KUTE[tweenProp] = (elem, a, b, v) => {
let path1 = a.pathArray, path2 = b.pathArray, len = path2.length, pathString;
pathString = v === 1 ? b.original : `M${coords( path1, path2, len, v ).join('L')}Z`;
elem.setAttribute("d", pathString );
}
}
}
// Component Base
const baseSVGMorph = {
component: 'baseSVGMorph',
property: 'path',
Interpolate: coords,
functions: {onStart:onStartSVGMorph}
}
export default baseSVGMorph

58
src/components/svgTransform.js
View file

@ -1,6 +1,7 @@
import KUTE from '../objects/kute.js'
import {numbers} from '../objects/interpolate.js'
import Components from '../objects/components.js'
import {svgTransformOnStart} from './svgTransformBase.js'
// const svgTransform = { property : 'svgTransform', subProperties, defaultValue, Interpolate: {numbers}, functions }
@ -56,46 +57,11 @@ function parseTransformSVG (p,v){
}
// Component Functions
export function svgTransformOnStart (tweenProp){
if (!KUTE[tweenProp] && this.valuesEnd[tweenProp]) {
KUTE[tweenProp] = (l, a, b, v) => {
let x = 0;
let y = 0;
let tmp;
const deg = Math.PI/180;
const scale = 'scale' in b ? numbers(a.scale,b.scale,v) : 1;
const rotate = 'rotate' in b ? numbers(a.rotate,b.rotate,v) : 0;
const sin = Math.sin(rotate*deg);
const cos = Math.cos(rotate*deg);
const skewX = 'skewX' in b ? numbers(a.skewX,b.skewX,v) : 0;
const skewY = 'skewY' in b ? numbers(a.skewY,b.skewY,v) : 0;
const complex = rotate||skewX||skewY||scale!==1 || 0;
// start normalizing the translation, we start from last to first (from last chained translation)
// the normalized translation will handle the transformOrigin tween option and makes sure to have a consistent transformation
x -= complex ? b.origin[0] : 0;y -= complex ? b.origin[1] : 0; // we start with removing transformOrigin from translation
x *= scale;y *= scale; // we now apply the scale
y += skewY ? x*Math.tan(skewY*deg) : 0;x += skewX ? y*Math.tan(skewX*deg) : 0; // now we apply skews
tmp = cos*x - sin*y; // apply rotation as well
y = rotate ? sin*x + cos*y : y;x = rotate ? tmp : x;
x += 'translate' in b ? numbers(a.translate[0],b.translate[0],v) : 0; // now we apply the actual translation
y += 'translate' in b ? numbers(a.translate[1],b.translate[1],v) : 0;
x += complex ? b.origin[0] : 0;y += complex ? b.origin[1] : 0; // normalizing ends with the addition of the transformOrigin to the translation
// finally we apply the transform attribute value
l.setAttribute('transform', ( x||y ? (`translate(${(x*1000>>0)/1000}${y ? (`,${(y*1000>>0)/1000}`) : ''})`) : '' )
+( rotate ? `rotate(${(rotate*1000>>0)/1000})` : '' )
+( skewX ? `skewX(${(skewX*1000>>0)/1000})` : '' )
+( skewY ? `skewY(${(skewY*1000>>0)/1000})` : '' )
+( scale !== 1 ? `scale(${(scale*1000>>0)/1000})` : '' ) );
}
}
}
export function prepareSvgTransform(p,v){
function prepareSvgTransform(p,v){
return parseTransformSVG.call(this,p,v);
}
// returns an obect with current transform attribute value
export function getStartSvgTransform (tweenProp,value) {
function getStartSvgTransform (tweenProp,value) {
const transformObject = {};
const currentTransform = parseTransformString(this.element.getAttribute('transform'));
for (const i in value) {
@ -105,7 +71,7 @@ export function getStartSvgTransform (tweenProp,value) {
return transformObject;
}
export function svgTransformCrossCheck(prop) {
function svgTransformCrossCheck(prop) {
if (!this._resetStart) return; // fix since 1.6.1 for fromTo() method
if ( this.valuesEnd[prop] ) {
@ -145,19 +111,9 @@ export const svgTransformFunctions = {
crossCheck: svgTransformCrossCheck
}
// Component Base
export const baseSVGTransformOps = {
component: 'svgTransformProperty',
property: 'svgTransform',
// subProperties: ['translate','rotate','skewX','skewY','scale'],
// defaultValue: {translate:0, rotate:0, skewX:0, skewY:0, scale:1},
defaultOptions: {transformOrigin:'50% 50%'},
Interpolate: {numbers},
functions: {onStart:svgTransformOnStart}
}
// Component Full
export const svgTransformOps = {
export const svgTransform = {
component: 'svgTransformProperty',
property: 'svgTransform',
// subProperties: ['translate','rotate','skewX','skewY','scale'],
@ -170,4 +126,6 @@ export const svgTransformOps = {
Util: { parseStringOrigin, parseTransformString, parseTransformSVG }
}
Components.SVGTransformProperty = svgTransformOps
export default svgTransform
Components.SVGTransformProperty = svgTransform

54
src/components/svgTransformBase.js Normal file
View file

@ -0,0 +1,54 @@
import KUTE from '../objects/kute.js'
import {numbers} from '../objects/interpolate.js'
// const svgTransform = { property : 'svgTransform', subProperties, defaultValue, Interpolate: {numbers}, functions }
// Component Functions
export function svgTransformOnStart (tweenProp){
if (!KUTE[tweenProp] && this.valuesEnd[tweenProp]) {
KUTE[tweenProp] = (l, a, b, v) => {
let x = 0;
let y = 0;
let tmp;
const deg = Math.PI/180;
const scale = 'scale' in b ? numbers(a.scale,b.scale,v) : 1;
const rotate = 'rotate' in b ? numbers(a.rotate,b.rotate,v) : 0;
const sin = Math.sin(rotate*deg);
const cos = Math.cos(rotate*deg);
const skewX = 'skewX' in b ? numbers(a.skewX,b.skewX,v) : 0;
const skewY = 'skewY' in b ? numbers(a.skewY,b.skewY,v) : 0;
const complex = rotate||skewX||skewY||scale!==1 || 0;
// start normalizing the translation, we start from last to first (from last chained translation)
// the normalized translation will handle the transformOrigin tween option and makes sure to have a consistent transformation
x -= complex ? b.origin[0] : 0;y -= complex ? b.origin[1] : 0; // we start with removing transformOrigin from translation
x *= scale;y *= scale; // we now apply the scale
y += skewY ? x*Math.tan(skewY*deg) : 0;x += skewX ? y*Math.tan(skewX*deg) : 0; // now we apply skews
tmp = cos*x - sin*y; // apply rotation as well
y = rotate ? sin*x + cos*y : y;x = rotate ? tmp : x;
x += 'translate' in b ? numbers(a.translate[0],b.translate[0],v) : 0; // now we apply the actual translation
y += 'translate' in b ? numbers(a.translate[1],b.translate[1],v) : 0;
x += complex ? b.origin[0] : 0;y += complex ? b.origin[1] : 0; // normalizing ends with the addition of the transformOrigin to the translation
// finally we apply the transform attribute value
l.setAttribute('transform', ( x||y ? (`translate(${(x*1000>>0)/1000}${y ? (`,${(y*1000>>0)/1000}`) : ''})`) : '' )
+( rotate ? `rotate(${(rotate*1000>>0)/1000})` : '' )
+( skewX ? `skewX(${(skewX*1000>>0)/1000})` : '' )
+( skewY ? `skewY(${(skewY*1000>>0)/1000})` : '' )
+( scale !== 1 ? `scale(${(scale*1000>>0)/1000})` : '' ) );
}
}
}
// Component Base
const baseSVGTransform = {
component: 'baseSVGTransform',
property: 'svgTransform',
// subProperties: ['translate','rotate','skewX','skewY','scale'],
// defaultValue: {translate:0, rotate:0, skewX:0, skewY:0, scale:1},
defaultOptions: {transformOrigin:'50% 50%'},
Interpolate: {numbers},
functions: {onStart:svgTransformOnStart}
}
export default baseSVGTransform

36
src/components/textProperties.js
View file

@ -1,24 +1,18 @@
import KUTE from '../objects/kute.js'
import defaultValues from '../objects/defaultValues.js'
import Components from '../objects/components.js'
import getStyleForProperty from '../process/getStyleForProperty.js'
import trueDimension from '../util/trueDimension.js'
import {units} from '../objects/interpolate.js'
import {textPropOnStart} from './textPropertiesBase.js'
// const opacity = { category : 'textProperties', defaultValues: [0,0,0,0], interpolators: {numbers} }, functions = { prepareStart, prepareProperty, onStart:{} }
// const textProperties = { category : 'textProperties', defaultValues: [], interpolators: {units} }, functions = { prepareStart, prepareProperty, onStart:{} }
// Component Properties
const textProperties = ['fontSize','lineHeight','letterSpacing','wordSpacing']
const textProps = ['fontSize','lineHeight','letterSpacing','wordSpacing']
const textOnStart = {}
export function textPropOnStart(tweenProp){
if (this.valuesEnd[tweenProp] && !KUTE[tweenProp]) {
KUTE[tweenProp] = (elem, a, b, v) => {
elem.style[tweenProp] = units(a.v,b.v,b.u,v);
}
}
}
textProperties.forEach(tweenProp => {
// Component Functions
textProps.forEach(tweenProp => {
textOnStart[tweenProp] = textPropOnStart
})
export function getTextProp(prop) {
@ -35,25 +29,17 @@ const textPropFunctions = {
onStart: textOnStart
}
// Component Base
export const baseTextOps = {
component: 'textProperties',
category: 'textProps',
properties: textProperties,
// defaultValues: {fontSize:0,lineHeight:0,letterSpacing:0,wordSpacing:0},
Interpolate: {units},
functions: {onStart:textOnStart}
}
// Component Full
export const textOps = {
const textProperties = {
component: 'textProperties',
category: 'textProps',
properties: textProperties,
category: 'textProperties',
properties: textProps,
defaultValues: {fontSize:0,lineHeight:0,letterSpacing:0,wordSpacing:0},
Interpolate: {units},
functions: textPropFunctions,
Util: {trueDimension}
}
Components.TextProperties = textOps
export default textProperties
Components.TextProperties = textProperties

31
src/components/textPropertiesBase.js Normal file
View file

@ -0,0 +1,31 @@
import KUTE from '../objects/kute.js'
import {units} from '../objects/interpolate.js'
// const opacity = { category : 'textProperties', defaultValues: [], interpolators: {units} }, functions = { prepareStart, prepareProperty, onStart:{} }
// Component Properties
const textProperties = ['fontSize','lineHeight','letterSpacing','wordSpacing']
const textOnStart = {}
export function textPropOnStart(tweenProp){
if (this.valuesEnd[tweenProp] && !KUTE[tweenProp]) {
KUTE[tweenProp] = (elem,a,b,v) => {
elem.style[tweenProp] = units(a.v,b.v,b.u,v);
}
}
}
textProperties.forEach(tweenProp => {
textOnStart[tweenProp] = textPropOnStart
})
// Component Base
const baseTextProperties = {
component: 'baseTextProperties',
category: 'textProps',
// properties: textProperties,
// defaultValues: {fontSize:0,lineHeight:0,letterSpacing:0,wordSpacing:0},
Interpolate: {units},
functions: {onStart:textOnStart}
}
export default baseTextProperties

83
src/components/textWrite.js
View file

@ -1,9 +1,9 @@
import KUTE from '../objects/kute.js'
import TC from '../interface/tc.js'
import {numbers} from '../objects/interpolate.js'
import defaultOptions from '../objects/defaultOptions.js'
import Components from '../objects/components.js'
import {onStartWrite,charSet} from './textWriteBase.js'
// Component Util
// utility for multi-child targets
// wrapContentsSpan returns an [Element] with the SPAN.tagName and a desired class
@ -119,28 +119,11 @@ export function createTextTweens(target,newText,options){
return textTween
}
// Component Values
const lowerCaseAlpha = String("abcdefghijklmnopqrstuvwxyz").split(""), // lowercase
upperCaseAlpha = String("abcdefghijklmnopqrstuvwxyz").toUpperCase().split(""), // uppercase
nonAlpha = String("~!@#$%^&*()_+{}[];'<>,./?\=-").split(""), // symbols
numeric = String("0123456789").split(""), // numeric
alphaNumeric = lowerCaseAlpha.concat(upperCaseAlpha,numeric), // alpha numeric
allTypes = alphaNumeric.concat(nonAlpha); // all caracters
const charSet = {
alpha: lowerCaseAlpha, // lowercase
upper: upperCaseAlpha, // uppercase
symbols: nonAlpha, // symbols
numeric: numeric,
alphanumeric: alphaNumeric,
all: allTypes,
}
// Component Functions
export function getWrite(tweenProp,value){
function getWrite(tweenProp,value){
return this.element.innerHTML;
}
export function prepareText(tweenProp,value) {
function prepareText(tweenProp,value) {
if( tweenProp === 'number' ) {
return parseFloat(value)
} else {
@ -148,45 +131,6 @@ export function prepareText(tweenProp,value) {
return value === '' ? ' ' : value
}
}
export const onStartWrite = {
text: function(tweenProp){
if ( !KUTE[tweenProp] && this.valuesEnd[tweenProp] ) {
let chars = this._textChars,
charsets = chars in charSet ? charSet[chars]
: chars && chars.length ? chars
: charSet[defaultOptions.textChars]
KUTE[tweenProp] = function(elem,a,b,v) {
let initialText = '',
endText = '',
firstLetterA = a.substring(0),
firstLetterB = b.substring(0),
pointer = charsets[(Math.random() * charsets.length)>>0];
if (a === ' ') {
endText = firstLetterB.substring(Math.min(v * firstLetterB.length, firstLetterB.length)>>0, 0 );
elem.innerHTML = v < 1 ? ( ( endText + pointer ) ) : (b === '' ? ' ' : b);
} else if (b === ' ') {
initialText = firstLetterA.substring(0, Math.min((1-v) * firstLetterA.length, firstLetterA.length)>>0 );
elem.innerHTML = v < 1 ? ( ( initialText + pointer ) ) : (b === '' ? ' ' : b);
} else {
initialText = firstLetterA.substring(firstLetterA.length, Math.min(v * firstLetterA.length, firstLetterA.length)>>0 );
endText = firstLetterB.substring(0, Math.min(v * firstLetterB.length, firstLetterB.length)>>0 );
elem.innerHTML = v < 1 ? ( (endText + pointer + initialText) ) : (b === '' ? ' ' : b);
}
}
}
},
number: function(tweenProp) {
if ( tweenProp in this.valuesEnd && !KUTE[tweenProp]) { // numbers can be 0
KUTE[tweenProp] = (elem, a, b, v) => {
elem.innerHTML = numbers(a, b, v)>>0;
}
}
}
}
// All Component Functions
export const textWriteFunctions = {
@ -197,21 +141,8 @@ export const textWriteFunctions = {
// const textWrite = { category : 'textWrite', defaultValues: {}, interpolators: {numbers} }, functions = { prepareStart, prepareProperty, onStart }
// Base Component
export const baseTextWriteOps = {
component: 'textWriteProperties',
category: 'textWrite',
properties: ['text','number'],
// defaultValues: {text: ' ',numbers:'0'},
defaultOptions: { textChars: 'alpha' },
Interpolate: {numbers},
functions: {onStart:onStartWrite},
// export to global for faster execution
Util: { charSet }
}
// Full Component
export const textWriteOps = {
export const textWrite = {
component: 'textWriteProperties',
category: 'textWrite',
properties: ['text','number'],
@ -223,4 +154,6 @@ export const textWriteOps = {
Util: { charSet, createTextTweens }
}
Components.TextWriteProperties = textWriteOps
export default textWrite
Components.TextWriteProperties = textWrite

78
src/components/textWriteBase.js Normal file
View file

@ -0,0 +1,78 @@
import KUTE from '../objects/kute.js'
import {numbers} from '../objects/interpolate.js'
import defaultOptions from '../objects/defaultOptions.js'
// Component Values
const lowerCaseAlpha = String("abcdefghijklmnopqrstuvwxyz").split(""), // lowercase
upperCaseAlpha = String("abcdefghijklmnopqrstuvwxyz").toUpperCase().split(""), // uppercase
nonAlpha = String("~!@#$%^&*()_+{}[];'<>,./?\=-").split(""), // symbols
numeric = String("0123456789").split(""), // numeric
alphaNumeric = lowerCaseAlpha.concat(upperCaseAlpha,numeric), // alpha numeric
allTypes = alphaNumeric.concat(nonAlpha); // all caracters
const charSet = {
alpha: lowerCaseAlpha, // lowercase
upper: upperCaseAlpha, // uppercase
symbols: nonAlpha, // symbols
numeric: numeric,
alphanumeric: alphaNumeric,
all: allTypes,
}
export {charSet}
// Component Functions
export const onStartWrite = {
text: function(tweenProp){
if ( !KUTE[tweenProp] && this.valuesEnd[tweenProp] ) {
let chars = this._textChars,
charsets = chars in charSet ? charSet[chars]
: chars && chars.length ? chars
: charSet[defaultOptions.textChars]
KUTE[tweenProp] = function(elem,a,b,v) {
let initialText = '',
endText = '',
firstLetterA = a.substring(0),
firstLetterB = b.substring(0),
pointer = charsets[(Math.random() * charsets.length)>>0];
if (a === ' ') {
endText = firstLetterB.substring(Math.min(v * firstLetterB.length, firstLetterB.length)>>0, 0 );
elem.innerHTML = v < 1 ? ( ( endText + pointer ) ) : (b === '' ? ' ' : b);
} else if (b === ' ') {
initialText = firstLetterA.substring(0, Math.min((1-v) * firstLetterA.length, firstLetterA.length)>>0 );
elem.innerHTML = v < 1 ? ( ( initialText + pointer ) ) : (b === '' ? ' ' : b);
} else {
initialText = firstLetterA.substring(firstLetterA.length, Math.min(v * firstLetterA.length, firstLetterA.length)>>0 );
endText = firstLetterB.substring(0, Math.min(v * firstLetterB.length, firstLetterB.length)>>0 );
elem.innerHTML = v < 1 ? ( (endText + pointer + initialText) ) : (b === '' ? ' ' : b);
}
}
}
},
number: function(tweenProp) {
if ( tweenProp in this.valuesEnd && !KUTE[tweenProp]) { // numbers can be 0
KUTE[tweenProp] = (elem, a, b, v) => {
elem.innerHTML = numbers(a, b, v)>>0;
}
}
}
}
// Base Component
export const baseTextWrite = {
component: 'baseTextWrite',
category: 'textWrite',
// properties: ['text','number'],
// defaultValues: {text: ' ',numbers:'0'},
defaultOptions: { textChars: 'alpha' },
Interpolate: {numbers},
functions: {onStart:onStartWrite},
// export to global for faster execution
Util: { charSet }
}
export default baseTextWrite

91
src/components/transformFunctions.js
View file

@ -1,59 +1,16 @@
import KUTE from '../objects/kute.js'
import defaultValues from '../objects/defaultValues.js'
import Components from '../objects/components.js'
import getInlineStyle from '../process/getInlineStyle.js'
import {onStartTransform, perspective,translate3d, rotate3d, translate, rotate, scale, skew} from './transformFunctionsBase.js'
// const transformFunctions = { property : 'transform', subProperties, defaultValues, Interpolate: {translate,rotate,skew,scale}, functions } // same to svg transform, attr
// Component Interpolate functions
export function perspective(a, b, u, v) {
return `perspective(${((a + (b - a) * v) * 1000 >> 0 ) / 1000}${u})`
}
export function translate3d(a, b, u, v) {
let translateArray = [];
for (let ax=0; ax<3; ax++){
translateArray[ax] = ( a[ax]||b[ax] ? ( (a[ax] + ( b[ax] - a[ax] ) * v ) * 1000 >> 0 ) / 1000 : 0 ) + u;
}
return `translate3d(${translateArray.join(',')})`;
}
export function rotate3d(a, b, u, v) {
let rotateStr = ''
rotateStr += a[0]||b[0] ? `rotateX(${((a[0] + (b[0] - a[0]) * v) * 1000 >> 0 ) / 1000}${u})` : ''
rotateStr += a[1]||b[1] ? `rotateY(${((a[1] + (b[1] - a[1]) * v) * 1000 >> 0 ) / 1000}${u})` : ''
rotateStr += a[2]||b[2] ? `rotateZ(${((a[2] + (b[2] - a[2]) * v) * 1000 >> 0 ) / 1000}${u})` : ''
return rotateStr
}
export function translate(a, b, u, v) {
let translateArray = [];
translateArray[0] = ( a[0]===b[0] ? b[0] : ( (a[0] + ( b[0] - a[0] ) * v ) * 1000 >> 0 ) / 1000 ) + u
translateArray[1] = a[1]||b[1] ? (( a[1]===b[1] ? b[1] : ( (a[1] + ( b[1] - a[1] ) * v ) * 1000 >> 0 ) / 1000 ) + u) : '0'
return `translate(${translateArray.join(',')})`;
}
export function rotate(a, b, u, v) {
return `rotate(${((a + (b - a) * v) * 1000 >> 0 ) / 1000}${u})`
}
export function skew(a, b, u, v) {
let skewArray = [];
skewArray[0] = ( a[0]===b[0] ? b[0] : ( (a[0] + ( b[0] - a[0] ) * v ) * 1000 >> 0 ) / 1000 ) + u
skewArray[1] = a[1]||b[1] ? (( a[1]===b[1] ? b[1] : ( (a[1] + ( b[1] - a[1] ) * v ) * 1000 >> 0 ) / 1000 ) + u) : '0'
return `skew(${skewArray.join(',')})`;
}
export function skewX(a, b, u, v) {
return `skewX(${((a + (b - a) * v) * 1000 >> 0 ) / 1000}${u})`
}
export function skewY(a, b, u, v) {
return `skewY(${((a + (b - a) * v) * 1000 >> 0 ) / 1000}${u})`
}
export function scale (a, b, v) {
return `scale(${((a + (b - a) * v) * 1000 >> 0 ) / 1000})`;
}
// Component Functions
export function getTransform(tweenProperty,value){
function getTransform(tweenProperty,value){
const currentStyle = getInlineStyle(this.element);
return currentStyle[tweenProperty] ? currentStyle[tweenProperty] : defaultValues[tweenProperty];
}
export function prepareTransform(prop,obj){
function prepareTransform(prop,obj){
let prepAxis = ['X', 'Y', 'Z'], // coordinates
translateArray = [], rotateArray = [], skewArray = [],
transformObject = {},
@ -84,21 +41,8 @@ export function prepareTransform(prop,obj){
}
return transformObject;
}
export function onStartTransform(tweenProp){
if (!KUTE[tweenProp] && this.valuesEnd[tweenProp]) {
KUTE[tweenProp] = (elem, a, b, v) => {
elem.style[tweenProp] =
(a.perspective||b.perspective ? perspective(a.perspective,b.perspective,'px',v) : '') // one side might be 0
+ (a.translate3d ? translate3d(a.translate3d,b.translate3d,'px',v):'') // array [x,y,z]
+ (a.translate ? translate(a.translate,b.translate,'px',v):'') // array [x,y]
+ (a.rotate3d ? rotate3d(a.rotate3d,b.rotate3d,'deg',v):'') // array [x,y,z]
+ (a.rotate||b.rotate ? rotate(a.rotate,b.rotate,'deg',v):'') // one side might be 0
+ (a.skew ? skew(a.skew,b.skew,'deg',v):'') // array [x,y]
+ (a.scale||b.scale ? scale(a.scale,b.scale,v):'') // one side might be 0
}
}
}
export function crossCheckTransform(tweenProp){
function crossCheckTransform(tweenProp){
if (this.valuesEnd[tweenProp]) {
if ( this.valuesEnd[tweenProp] ) {
if (this.valuesEnd[tweenProp].perspective && !this.valuesStart[tweenProp].perspective){
@ -109,7 +53,7 @@ export function crossCheckTransform(tweenProp){
}
// All Component Functions
export const transformFunctions = {
const transformFunctions = {
prepareStart: getTransform,
prepareProperty: prepareTransform,
onStart: onStartTransform,
@ -132,23 +76,8 @@ const defaultTransformValues = {
scale : 1
}
// Base Component
export const baseTransformOps = {
component: 'transformFunctions',
property: 'transform',
subProperties: supportedTransformProperties,
// defaultValues: defaultTransformValues,
functions: {onStart: onStartTransform},
Interpolate: {
perspective: perspective,
translate3d: translate3d,
rotate3d: rotate3d,
translate: translate, rotate: rotate, scale: scale, skew: skew
},
}
// Full Component
export const transformOps = {
const transformFunctionsComponent = {
component: 'transformFunctions',
property: 'transform',
subProperties: supportedTransformProperties,
@ -159,7 +88,9 @@ export const transformOps = {
translate3d: translate3d,
rotate3d: rotate3d,
translate: translate, rotate: rotate, scale: scale, skew: skew
},
}
}
Components.TransformFunctions = transformOps
export default transformFunctionsComponent
Components.TransformFunctions = transformFunctionsComponent

77
src/components/transformFunctionsBase.js Normal file
View file

@ -0,0 +1,77 @@
import KUTE from '../objects/kute.js'
// const transformFunctions = { property : 'transform', subProperties, defaultValues, Interpolate: {translate,rotate,skew,scale}, functions } // same to svg transform, attr
// Component Interpolate functions
export function perspective(a, b, u, v) {
return `perspective(${((a + (b - a) * v) * 1000 >> 0 ) / 1000}${u})`
}
export function translate3d(a, b, u, v) {
let translateArray = [];
for (let ax=0; ax<3; ax++){
translateArray[ax] = ( a[ax]||b[ax] ? ( (a[ax] + ( b[ax] - a[ax] ) * v ) * 1000 >> 0 ) / 1000 : 0 ) + u;
}
return `translate3d(${translateArray.join(',')})`;
}
export function rotate3d(a, b, u, v) {
let rotateStr = ''
rotateStr += a[0]||b[0] ? `rotateX(${((a[0] + (b[0] - a[0]) * v) * 1000 >> 0 ) / 1000}${u})` : ''
rotateStr += a[1]||b[1] ? `rotateY(${((a[1] + (b[1] - a[1]) * v) * 1000 >> 0 ) / 1000}${u})` : ''
rotateStr += a[2]||b[2] ? `rotateZ(${((a[2] + (b[2] - a[2]) * v) * 1000 >> 0 ) / 1000}${u})` : ''
return rotateStr
}
export function translate(a, b, u, v) {
let translateArray = [];
translateArray[0] = ( a[0]===b[0] ? b[0] : ( (a[0] + ( b[0] - a[0] ) * v ) * 1000 >> 0 ) / 1000 ) + u
translateArray[1] = a[1]||b[1] ? (( a[1]===b[1] ? b[1] : ( (a[1] + ( b[1] - a[1] ) * v ) * 1000 >> 0 ) / 1000 ) + u) : '0'
return `translate(${translateArray.join(',')})`;
}
export function rotate(a, b, u, v) {
return `rotate(${((a + (b - a) * v) * 1000 >> 0 ) / 1000}${u})`
}
export function skew(a, b, u, v) {
let skewArray = [];
skewArray[0] = ( a[0]===b[0] ? b[0] : ( (a[0] + ( b[0] - a[0] ) * v ) * 1000 >> 0 ) / 1000 ) + u
skewArray[1] = a[1]||b[1] ? (( a[1]===b[1] ? b[1] : ( (a[1] + ( b[1] - a[1] ) * v ) * 1000 >> 0 ) / 1000 ) + u) : '0'
return `skew(${skewArray.join(',')})`;
}
export function skewX(a, b, u, v) {
return `skewX(${((a + (b - a) * v) * 1000 >> 0 ) / 1000}${u})`
}
export function skewY(a, b, u, v) {
return `skewY(${((a + (b - a) * v) * 1000 >> 0 ) / 1000}${u})`
}
export function scale (a, b, v) {
return `scale(${((a + (b - a) * v) * 1000 >> 0 ) / 1000})`;
}
// Component Functions
export function onStartTransform(tweenProp){
if (!KUTE[tweenProp] && this.valuesEnd[tweenProp]) {
KUTE[tweenProp] = (elem, a, b, v) => {
elem.style[tweenProp] =
(a.perspective||b.perspective ? perspective(a.perspective,b.perspective,'px',v) : '') // one side might be 0
+ (a.translate3d ? translate3d(a.translate3d,b.translate3d,'px',v):'') // array [x,y,z]
+ (a.translate ? translate(a.translate,b.translate,'px',v):'') // array [x,y]
+ (a.rotate3d ? rotate3d(a.rotate3d,b.rotate3d,'deg',v):'') // array [x,y,z]
+ (a.rotate||b.rotate ? rotate(a.rotate,b.rotate,'deg',v):'') // one side might be 0
+ (a.skew ? skew(a.skew,b.skew,'deg',v):'') // array [x,y]
+ (a.scale||b.scale ? scale(a.scale,b.scale,v):'') // one side might be 0
}
}
}
// Base Component
const BaseTransform = {
component: 'baseTransform',
property: 'transform',
functions: {onStart: onStartTransform},
Interpolate: {
perspective: perspective,
translate3d: translate3d,
rotate3d: rotate3d,
translate: translate, rotate: rotate, scale: scale, skew: skew
}
}
export default BaseTransform

90
src/components/transformMatrix.js
View file

@ -1,26 +1,19 @@
import KUTE from '../objects/kute.js'
import defaultValues from '../objects/defaultValues.js'
import Components from '../objects/components.js'
import {numbers,arrays} from '../objects/interpolate.js'
import {onStartTransform} from './transformMatrixBase.js'
// const transformMatrix = { property : 'transform', defaultValue: {}, interpolators: {} }, functions = { prepareStart, prepareProperty, onStart, crossCheck }
// Component name
const componentName = 'transformMatrix'
// Component special
export const CSS3Matrix = typeof(DOMMatrix) !== 'undefined' ? DOMMatrix
: typeof(WebKitCSSMatrix) !== 'undefined' ? WebKitCSSMatrix
: typeof(CSSMatrix) !== 'undefined' ? CSSMatrix
: typeof(MSCSSMatrix) !== 'undefined' ? MSCSSMatrix
: null
const matrixComponent = 'transformMatrix'
// Component Functions
export function getTransform(tweenProp, value){
function getTransform(tweenProp, value){
let transformObject = {}
if (this.element[componentName]) {
const currentValue = this.element[componentName]
if (this.element[matrixComponent]) {
const currentValue = this.element[matrixComponent]
for (const vS in currentValue) {
transformObject[vS] = currentValue[vS]
}
@ -31,7 +24,7 @@ export function getTransform(tweenProp, value){
}
return transformObject
}
export function prepareTransform(tweenProp,value){
function prepareTransform(tweenProp,value){
if ( typeof(value) === 'object' && !value.length) {
let transformObject = {},
translate3dObj = {},
@ -76,53 +69,16 @@ export function prepareTransform(tweenProp,value){
console.error(`KUTE.js - "${value}" is not valid/supported transform function`)
}
}
export const onStartTransform = {
transform : function(tweenProp) {
if (this.valuesEnd[tweenProp] && !KUTE[tweenProp]) {
KUTE[tweenProp] = (elem, a, b, v) => {
let matrix = new CSS3Matrix()
let transformObject = {}
for ( const p in b ) {
transformObject[p] = p === 'perspective' ? numbers(a[p],b[p],v) : arrays(a[p],b[p],v)
}
// set perspective
transformObject.perspective && (matrix.m34 = -1/transformObject.perspective)
// set translate
matrix = transformObject.translate3d ? (matrix.translate(transformObject.translate3d[0],transformObject.translate3d[1],transformObject.translate3d[2])) : matrix
// set rotation
matrix = transformObject.rotate3d ? (matrix.rotate(transformObject.rotate3d[0],transformObject.rotate3d[1],transformObject.rotate3d[2])) : matrix
// set skew
if (transformObject.skew) {
matrix = transformObject.skew[0] ? matrix.skewX(transformObject.skew[0]) : matrix;
matrix = transformObject.skew[1] ? matrix.skewY(transformObject.skew[1]) : matrix;
}
// set scale
matrix = transformObject.scale3d ? (matrix.scale(transformObject.scale3d[0],transformObject.scale3d[1],transformObject.scale3d[2])): matrix
// set element style
elem.style[tweenProp] = matrix.toString();
}
}
},
CSS3Matrix: function(prop) {
if (this.valuesEnd.transform){
!KUTE[prop] && (KUTE[prop] = CSS3Matrix)
}
},
}
export function onCompleteTransform(tweenProp){
function onCompleteTransform(tweenProp){
if (this.valuesEnd[tweenProp]) {
this.element[componentName] = {}
this.element[matrixComponent] = {}
for (const tf in this.valuesEnd[tweenProp]){
this.element[componentName][tf] = this.valuesEnd[tweenProp][tf]
this.element[matrixComponent][tf] = this.valuesEnd[tweenProp][tf]
}
}
}
export function crossCheckTransform(tweenProp){
function crossCheckTransform(tweenProp){
if (this.valuesEnd[tweenProp]) {
if (this.valuesEnd[tweenProp].perspective && !this.valuesStart[tweenProp].perspective){
this.valuesStart[tweenProp].perspective = this.valuesEnd[tweenProp].perspective
@ -131,7 +87,7 @@ export function crossCheckTransform(tweenProp){
}
// All Component Functions
export const matrixFunctions = {
const matrixFunctions = {
prepareStart: getTransform,
prepareProperty: prepareTransform,
onStart: onStartTransform,
@ -139,25 +95,9 @@ export const matrixFunctions = {
crossCheck: crossCheckTransform
}
// Component Base Object
export const baseMatrixTransformOps = {
component: componentName,
property: 'transform',
// subProperties: ['perspective','translate3d','translateX','translateY','translateZ','rotate3d','rotateX','rotateY','rotateZ','skew','skewX','skewY','scale3d','scaleX','scaleY','scaleZ'],
// defaultValue: {perspective:400,translate3d:[0,0,0],translateX:0,translateY:0,translateZ:0,rotate3d:[0,0,0],rotateX:0,rotateY:0,rotateZ:0,skew:[0,0],skewX:0,skewY:0,scale3d:[1,1,1],scaleX:1,scaleY:1,scaleZ:1},
functions: {onStart: onStartTransform},
Interpolate: {
perspective: numbers,
translate3d: arrays,
rotate3d: arrays,
skew: arrays,
scale3d: arrays
}
}
// Component Full Object
export const matrixTransformOps = {
component: componentName,
const matrixTransform = {
component: matrixComponent,
property: 'transform',
// subProperties: ['perspective','translate3d','translateX','translateY','translateZ','rotate3d','rotateX','rotateY','rotateZ','skew','skewX','skewY','scale3d','scaleX','scaleY','scaleZ'],
defaultValue: {perspective:400,translate3d:[0,0,0],translateX:0,translateY:0,translateZ:0,rotate3d:[0,0,0],rotateX:0,rotateY:0,rotateZ:0,skew:[0,0],skewX:0,skewY:0,scale3d:[1,1,1],scaleX:1,scaleY:1,scaleZ:1},
@ -171,4 +111,6 @@ export const matrixTransformOps = {
}
}
Components.TransformMatrix = matrixTransformOps
export default matrixTransform
Components.TransformMatrix = matrixTransform

61
src/components/transformMatrixBase.js Normal file
View file

@ -0,0 +1,61 @@
import KUTE from '../objects/kute.js'
import {numbers,arrays} from '../objects/interpolate.js'
// const transformMatrix = { property : 'transform', defaultValue: {}, interpolators: {} }, functions = { prepareStart, prepareProperty, onStart, crossCheck }
// Component name
const matrixComponent = 'transformMatrix'
// Component special
const CSS3Matrix = typeof(DOMMatrix) !== 'undefined' ? DOMMatrix
: typeof(WebKitCSSMatrix) !== 'undefined' ? WebKitCSSMatrix
: typeof(CSSMatrix) !== 'undefined' ? CSSMatrix
: typeof(MSCSSMatrix) !== 'undefined' ? MSCSSMatrix
: null
// Component Functions
export const onStartTransform = {
transform : function(tweenProp) {
if (this.valuesEnd[tweenProp] && !KUTE[tweenProp]) {
KUTE[tweenProp] = (elem, a, b, v) => {
let matrix = new CSS3Matrix(), transformObject = {}
for ( const p in b ) {
transformObject[p] = p === 'perspective' ? numbers(a[p],b[p],v) : arrays(a[p],b[p],v)
}
transformObject.perspective && (matrix.m34 = -1/transformObject.perspective)// set perspective
matrix = transformObject.translate3d ? (matrix.translate(transformObject.translate3d[0],transformObject.translate3d[1],transformObject.translate3d[2])) : matrix // set translate
matrix = transformObject.rotate3d ? (matrix.rotate(transformObject.rotate3d[0],transformObject.rotate3d[1],transformObject.rotate3d[2])) : matrix // set rotation
if (transformObject.skew) { // set 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
elem.style[tweenProp] = matrix.toString() // set element style
}
}
},
CSS3Matrix: function(prop) {
if (this.valuesEnd.transform){
!KUTE[prop] && (KUTE[prop] = CSS3Matrix)
}
},
}
// Component Base Object
export const baseMatrixTransform = {
component: matrixComponent,
property: 'transform',
functions: {onStart: onStartTransform},
Interpolate: {
perspective: numbers,
translate3d: arrays,
rotate3d: arrays,
skew: arrays,
scale3d: arrays
}
}
export default baseMatrixTransform

1
src/core/Render.js
View file

@ -1,7 +1,6 @@
import KUTE from '../objects/kute.js'
import Tweens from '../objects/tweens.js'
import globalObject from '../objects/globalObject.js'
import Interpolate from '../objects/interpolate.js'
import onStart from '../objects/onStart.js'

27
src/index-base.js
View file

@ -14,25 +14,26 @@ import TweenBase from './tween/tweenBase.js'
// Interface only fromTo
import fromTo from './interface/fromTo.js'
import {baseTransformOps} from './components/transformFunctions.js'
import {baseBoxModelOps} from './components/boxModelBase.js'
import {baseOpacityOps} from './components/opacityProperty.js'
// import {baseCrossBrowserMoveOps} from './components/crossBrowserMove.js'
// import baseTransform from './components/transformFunctionsBase.js'
import baseTransformMatrix from './components/transformMatrixBase.js'
import baseBoxModel from './components/boxModelBase.js'
import baseOpacity from './components/opacityPropertyBase.js'
// import {baseCrossBrowserMove} from './components/crossBrowserMove.js'
const BaseTransform = new Animation(baseTransformOps)
const BaseBoxModel = new Animation(baseBoxModelOps)
const BaseOpacity = new Animation(baseOpacityOps)
// const BaseCrossBrowserMove = new Animation(baseCrossBrowserMoveOps)
// const Transform = new Animation(baseTransform)
const Transform = new Animation(baseTransformMatrix)
const BoxModel = new Animation(baseBoxModel)
const Opacity = new Animation(baseOpacity)
// const Move = new Animation(baseCrossBrowserMove)
// support for kute-base.js ends here
export default {
Animation,
Components: {
BaseTransform,
BaseBoxModel,
BaseScroll,
BaseOpacity,
// BaseCrossBrowserMove
Transform,
BoxModel,
Opacity,
// Move
},
TweenBase,

32
src/index-extra.js
View file

@ -23,22 +23,22 @@ import allFromTo from './interface/allFromTo.js'
import Animation from './animation/animationDevelopment.js'
// components
import {bgPosOps} from './components/backgroundPosition.js'
import {radiusOps} from './components/borderRadius.js'
import {boxModelOps} from './components/boxModel.js'
import {clipOps} from './components/clipProperty.js'
import {colorsOps} from './components/colorProperties.js'
import {attrOps} from './components/htmlAttributes.js'
import {filterOps} from './components/filterEffects'
import {opacityOps} from './components/opacityProperty.js'
import {svgDrawOps} from './components/svgDraw.js'
import {svgCubicMorphOps} from './components/svgCubicMorph.js'
import {svgTransformOps} from './components/svgTransform.js'
import {scrollOps} from './components/scrollProperty.js'
import {shadowOps} from './components/shadowProperties.js'
import {textOps} from './components/textProperties.js'
import {textWriteOps} from './components/textWrite.js'
import {matrixTransformOps} from './components/transformMatrix.js'
import BackgroundPosition from './components/backgroundPosition.js'
import BorderRadius from './components/borderRadius.js'
import BoxModel from './components/boxModel.js'
import ClipProperty from './components/clipProperty.js'
import ColorProperties from './components/colorProperties.js'
import HTMLAttributes from './components/htmlAttributes.js'
import FilterEffects from './components/filterEffects'
import OpacityProperty from './components/opacityProperty.js'
import SVGDraw from './components/svgDraw.js'
import SVGCubicMorph from './components/svgCubicMorph.js'
import SVGTransform from './components/svgTransform.js'
import ScrollProperty from './components/scrollProperty.js'
import ShadowProperties from './components/shadowProperties.js'
import TextProperties from './components/textProperties.js'
import TextWriteProperties from './components/textWrite.js'
import matrixTransform from './components/transformMatrix.js'
for (let component in Components) {
let compOps = Components[component]

16
src/index.js
View file

@ -23,14 +23,14 @@ import allFromTo from './interface/allFromTo.js'
import Animation from './animation/animation.js'
// components
import {essentialBoxModelOps} from './components/boxModelEssential.js'
import {colorsOps} from './components/colorProperties.js'
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 {svgDrawOps} from './components/svgDraw.js'
import {svgMorphOps} from './components/svgMorph.js'
import EssentialBoxModel from './components/boxModelEssential.js'
import ColorsProperties from './components/colorProperties.js'
import HTMLAttributes from './components/htmlAttributes.js'
import OpacityProperty from './components/opacityProperty.js'
import TextWrite from './components/textWrite.js'
import TransformFunctions from './components/transformFunctions.js'
import SVGDraw from './components/svgDraw.js'
import SVGMorph from './components/svgMorph.js'
// init components
for (let component in Components) {

2
src/objects/ObjectsBase.js
View file

@ -2,12 +2,10 @@ import defaultOptions from './defaultOptions.js'
import linkProperty from './linkProperty.js'
import onStart from './onStart.js'
import onComplete from './onComplete.js'
import supportedProperties from './supportedProperties.js'
export default {
defaultOptions,
linkProperty,
onStart,
onComplete,
supportedProperties
}

11
src/tween/tween.js
View file

@ -1,7 +1,6 @@
import KUTE from '../objects/kute.js'
import TweenConstructor from '../objects/tweenConstructor.js'
import TweenBase from './tweenBase.js'
import add from '../core/add.js'
import remove from '../core/remove.js'
@ -162,14 +161,6 @@ export default class Tween extends TweenBase {
}
// }
}
chain(args) {
this._chain = []
this._chain = args.length ? args : this._chain.concat(args);
return this;
}
stopChainedTweens() {
this._chain && this._chain.length && this._chain.map(tw=>tw.stop())
}
update(time) {
time = time !== undefined ? time : KUTE.Time();
@ -216,7 +207,7 @@ export default class Tween extends TweenBase {
this.playing = false;
//stop ticking when finished
this.close();
this.close();
// start animating chained tweens
if (this._chain !== undefined && this._chain.length){

15
src/tween/tweenBase.js
View file

@ -78,7 +78,7 @@ export default class TweenBase {
// fire onStart actions
for (const obj in onStart) {
if (typeof (onStart[obj]) === 'function') {
onStart[obj].call(this,obj)
onStart[obj].call(this,obj) // easing functions
} else {
for (const prop in onStart[obj]) {
onStart[obj][prop].call(this,prop);
@ -117,6 +117,14 @@ export default class TweenBase {
this._startFired = false;
stop.call(this);
}
chain(args) {
this._chain = []
this._chain = args.length ? args : this._chain.concat(args);
return this;
}
stopChainedTweens() {
this._chain && this._chain.length && this._chain.map(tw=>tw.stop())
}
update(time) {
time = time !== undefined ? time : KUTE.Time();
@ -152,6 +160,11 @@ export default class TweenBase {
//stop ticking when finished
this.close();
// start animating chained tweens
if (this._chain !== undefined && this._chain.length){
this._chain.map(tw=>tw.start())
}
return false;
}

2
src/tween/tweenExtra.js
View file

@ -30,7 +30,7 @@ export default class TweenExtra extends Tween {
// to do
}
// set callbacks
callback(name,fn){
on(name,fn){
if ( ['start','stop','update','complete','pause','resume'].indexOf(name) >-1 ) {
this[`_on${name.charAt(0).toUpperCase() + name.slice(1)}`] = fn
}

2
src/util/selector.js
View file

@ -5,7 +5,7 @@ export default function selector(el, multi) {
if (multi){
requestedElem = el instanceof HTMLCollection
|| el instanceof NodeList
|| el instanceof Array && el[0] instanceof Element
|| el instanceof Array && el.every(x => x instanceof Element)
? el : document.querySelectorAll(el);
} else {
requestedElem = el instanceof Element