102 lines
3.9 KiB
JavaScript
102 lines
3.9 KiB
JavaScript
/* KUTE.js - The Light Tweening Engine
|
|
* package - Attributes Plugin
|
|
* desc - enables animation for color attributes and any numeric presentation attribute
|
|
* by dnp_theme
|
|
* Licensed under MIT-License
|
|
*/
|
|
|
|
(function (root,factory) {
|
|
if (typeof define === 'function' && define.amd) {
|
|
define(['./kute.js'], factory);
|
|
} else if(typeof module == 'object' && typeof require == 'function') {
|
|
module.exports = factory(require('./kute.js'));
|
|
} else if ( typeof root.KUTE !== 'undefined' ) {
|
|
factory(root.KUTE);
|
|
} else {
|
|
throw new Error("Attributes Plugin require KUTE.js.");
|
|
}
|
|
}(this, function (KUTE) {
|
|
'use strict';
|
|
|
|
var g = typeof global !== 'undefined' ? global : window, // connect to KUTE object and global
|
|
K = KUTE, DOM = K.dom, prepareStart = K.prepareStart, parseProperty = K.parseProperty,
|
|
trueColor = K.truC, trueDimension = K.truD, crossCheck = K.crossCheck,
|
|
unit = g.Interpolate.unit, number = g.Interpolate.number, color = g.Interpolate.color;
|
|
|
|
// here we go with the plugin
|
|
var getCurrentValue = function(e,a){ return e.getAttribute(a); }, // get current attribute value
|
|
svgColors = ['fill','stroke','stop-color'], attributes,
|
|
replaceUppercase = function(a) {
|
|
return a.replace(/[A-Z]/g, "-$&").toLowerCase();
|
|
};
|
|
|
|
prepareStart.attr = function(p,v){
|
|
var attrStartValues = {};
|
|
for (var a in v){
|
|
var attribute = replaceUppercase(a).replace(/_+[a-z]+/,''),
|
|
currentValue = getCurrentValue(this.element,attribute); // get the value for 'fill-opacity' not fillOpacity
|
|
attrStartValues[attribute] = svgColors.indexOf(attribute) !== -1 ? (currentValue || 'rgba(0,0,0,0)') : (currentValue || (/opacity/i.test(a) ? 1 : 0));
|
|
}
|
|
return attrStartValues;
|
|
};
|
|
|
|
// process attributes object K.pp.attr(t[x])
|
|
// and also register their render functions
|
|
parseProperty.attr = function(a,o){
|
|
if (!('attr' in DOM)) {
|
|
DOM.attr = function(l,p,a,b,v) {
|
|
for ( var o in b ){
|
|
DOM.attributes[o](l,o,a[o],b[o],v);
|
|
}
|
|
}
|
|
attributes = DOM.attributes = {}
|
|
}
|
|
|
|
var attributesObject = {};
|
|
for ( var p in o ) {
|
|
var prop = replaceUppercase(p), regex = /(%|[a-z]+)$/, cv = getCurrentValue(this.element,prop.replace(/_+[a-z]+/,''));
|
|
if ( svgColors.indexOf(prop) === -1) {
|
|
if ( cv !== null && regex.test(cv) ) {
|
|
var prefix = trueDimension(cv).u || trueDimension(o[p]).u, s = /%/.test(prefix) ? '_percent' : '_'+prefix;
|
|
if (!(prop+s in attributes)) {
|
|
if (/%/.test(prefix)) {
|
|
attributes[prop+s] = function(l,p,a,b,v) {
|
|
var _p = _p || p.replace(s,'');
|
|
l.setAttribute(_p, ((number(a.v,b.v,v) * 1000>>0)/1000) + b.u );
|
|
}
|
|
} else {
|
|
attributes[prop+s] = function(l,p,a,b,v) {
|
|
var _p = _p || p.replace(s,'');
|
|
l.setAttribute(_p, ( (number(a.v,b.v,v)*1000>>0)/1000) + b.u );
|
|
}
|
|
}
|
|
}
|
|
attributesObject[prop+s] = trueDimension(o[p]);
|
|
} else if ( !regex.test(o[p]) || cv === null || cv !== null && !regex.test(cv) ) {
|
|
if (!(prop in attributes)) {
|
|
if (/opacity/i.test(p)) {
|
|
attributes[prop] = function(l,o,a,b,v) {
|
|
l.setAttribute(o, (number(a,b,v) * 1000 >> 0) / 1000 );
|
|
}
|
|
} else {
|
|
attributes[prop] = function(l,o,a,b,v) {
|
|
l.setAttribute(o, (number(a,b,v) * 1000 >> 0) / 1000 );
|
|
}
|
|
}
|
|
}
|
|
attributesObject[prop] = parseFloat(o[p]);
|
|
}
|
|
} else {
|
|
if (!(prop in attributes)) {
|
|
attributes[prop] = function(l,u,a,b,v) {
|
|
l.setAttribute(u, color(a,b,v,o.keepHex));
|
|
}
|
|
}
|
|
attributesObject[prop] = trueColor(o[p]);
|
|
}
|
|
}
|
|
return attributesObject;
|
|
}
|
|
|
|
return this;
|
|
})); |