Now the Attributes Plugin should be able to handle properties like 'stroke-width' or fillOpacity

This commit is contained in:
thednp 2016-09-20 06:30:53 +03:00
parent df9554252c
commit c6e7caabc6
3 changed files with 27 additions and 21 deletions

View file

@ -23,21 +23,24 @@
'use strict';
var K = window.KUTE, DOM = K.dom, PP = K.pp, unit = K.Interpolate.unit, number = K.Interpolate.number, atts,
gCA = function(e,a){ // get current attribute value
return e.getAttribute(a);
};
getCurrentValue = function(e,a){ return e.getAttribute(a); }, // get current attribute value
replaceUppercase = function(a) {
return /[A-Z]/g.test(a) ? a.replace(a.match(/[A-Z]/g)[0],'-'+a.match(/[A-Z]/g)[0].toLowerCase()) : a;
};
K.prS['attr'] = function(el,p,v){
var f = {};
for (var a in v){
f[a.replace(/_+[a-z]+/,'')] = gCA(el,a.replace(/_+[a-z]+/,''));
var _a = replaceUppercase(a).replace(/_+[a-z]+/,''),
_v = getCurrentValue(el,_a); // get the value for 'fill-opacity' not fillOpacity
f[_a] = _v || (/opacity/i.test(a) ? 1 : 0);
}
return f;
};
// process attributes object K.pp.attr(t[x])
// and also register their render functions
PP['attr'] = function(a,o){
PP['attr'] = function(a,o,l){
if (!('attr' in DOM)) {
DOM.attr = function(l,p,a,b,v) {
for ( var o in b ){
@ -49,19 +52,19 @@
var ats = {}, p;
for ( p in o ) {
if ( /%|px/.test(o[p]) ) {
var u = K.truD(o[p]).u, s = /%/.test(u) ? '_percent' : '_'+u;
var prop = replaceUppercase(p);
if ( /%|px/.test(o[p]) || /%|px/.test(getCurrentValue(l,prop.replace(/_+[a-z]+/,''))) ) {
var u = K.truD(o[p]).u, s = /%/.test(u) ? '_percent' : '_'+u; prop = prop.replace(s,'');
if (!(p+s in atts)) {
atts[p+s] = function(l,p,a,b,v) {
var _p = p.replace(s,'');
l.setAttribute(_p, unit(a.v,b.v,b.u,v) );
l.setAttribute(prop, unit(a.v,b.v,b.u,v) );
}
}
ats[p+s] = K.truD(o[p]);
} else {
if (!(p in atts)) {
atts[p] = function(l,o,a,b,v) {
l.setAttribute(o, number(a,b,v));
l.setAttribute(prop, number(a,b,v));
}
}
ats[p] = parseFloat(o[p]);

View file

@ -1,2 +1,2 @@
// Attributes Plugin for KUTE.js | dnp_theme | MIT License
(function(e){if("function"===typeof define&&define.amd)define(["./kute.js"],function(a){e(a);return a});else if("object"==typeof module&&"function"==typeof require){var a=require("./kute.js");module.exports=e(a)}else if("undefined"!==typeof window.KUTE)e(a);else throw Error("Attributes Plugin require KUTE.js.");})(function(e){var a=window.KUTE,h=a.dom;e=a.pp;var l=a.Interpolate.unit,m=a.Interpolate.number,g;a.prS.attr=function(a,c,f){c={};for(var b in f){f=b.replace(/_+[a-z]+/,"");var d;d=b.replace(/_+[a-z]+/,"");d=a.getAttribute(d);c[f]=d}return c};e.attr=function(e,c){"attr"in h||(h.attr=function(a,b,c,e,f){for(var d in e)h.attributes[d](a,d,c[d],e[d],f)},g=h.attributes={});var f={},b;for(b in c)if(/%|px/.test(c[b])){var d=a.truD(c[b]).u,k=/%/.test(d)?"_percent":"_"+d;b+k in g||(g[b+k]=function(a,b,d,c,e){b=b.replace(k,"");a.setAttribute(b,l(d.v,c.v,c.u,e))});f[b+k]=a.truD(c[b])}else b in g||(g[b]=function(a,b,c,d,e){a.setAttribute(b,m(c,d,e))}),f[b]=parseFloat(c[b]);return f}});
(function(c){if("function"===typeof define&&define.amd)define(["./kute.js"],function(a){c(a);return a});else if("object"==typeof module&&"function"==typeof require){var a=require("./kute.js");module.exports=c(a)}else if("undefined"!==typeof window.KUTE)c(a);else throw Error("Attributes Plugin require KUTE.js.");})(function(c){var a=window.KUTE,h=a.dom;c=a.pp;var l=a.Interpolate.unit,m=a.Interpolate.number,g,p=function(n,a){return n.getAttribute(a)},k=function(a){return/[A-Z]/g.test(a)?a.replace(a.match(/[A-Z]/g)[0],"-"+a.match(/[A-Z]/g)[0].toLowerCase()):a};a.prS.attr=function(a,d,c){d={};for(var b in c){c=k(b).replace(/_+[a-z]+/,"");var f=a.getAttribute(c);d[c]=f||(/opacity/i.test(b)?1:0)}return d};c.attr=function(c,d,q){"attr"in h||(h.attr=function(a,c,b,d,f){for(var e in d)h.attributes[e](a,e,b[e],d[e],f)},g=h.attributes={});c={};for(var b in d){var f=k(b);if(/%|px/.test(d[b])||/%|px/.test(p(q,f.replace(/_+[a-z]+/,"")))){var e=a.truD(d[b]).u,e=/%/.test(e)?"_percent":"_"+e,f=f.replace(e,"");b+e in g||(g[b+e]=function(a,c,b,d,e){a.setAttribute(f,l(b.v,d.v,d.u,e))});c[b+e]=a.truD(d[b])}else b in g||(g[b]=function(a,c,b,d,e){a.setAttribute(f,m(b,d,e))}),c[b]=parseFloat(d[b])}return c}});

View file

@ -23,21 +23,24 @@
'use strict';
var K = window.KUTE, DOM = K.dom, PP = K.pp, unit = K.Interpolate.unit, number = K.Interpolate.number, atts,
gCA = function(e,a){ // get current attribute value
return e.getAttribute(a);
};
getCurrentValue = function(e,a){ return e.getAttribute(a); }, // get current attribute value
replaceUppercase = function(a) {
return /[A-Z]/g.test(a) ? a.replace(a.match(/[A-Z]/g)[0],'-'+a.match(/[A-Z]/g)[0].toLowerCase()) : a;
};
K.prS['attr'] = function(el,p,v){
var f = {};
for (var a in v){
f[a.replace(/_+[a-z]+/,'')] = gCA(el,a.replace(/_+[a-z]+/,''));
var _a = replaceUppercase(a).replace(/_+[a-z]+/,''),
_v = getCurrentValue(el,_a); // get the value for 'fill-opacity' not fillOpacity
f[_a] = _v || (/opacity/i.test(a) ? 1 : 0);
}
return f;
};
// process attributes object K.pp.attr(t[x])
// and also register their render functions
PP['attr'] = function(a,o){
PP['attr'] = function(a,o,l){
if (!('attr' in DOM)) {
DOM.attr = function(l,p,a,b,v) {
for ( var o in b ){
@ -49,19 +52,19 @@
var ats = {}, p;
for ( p in o ) {
if ( /%|px/.test(o[p]) ) {
var u = K.truD(o[p]).u, s = /%/.test(u) ? '_percent' : '_'+u;
var prop = replaceUppercase(p);
if ( /%|px/.test(o[p]) || /%|px/.test(getCurrentValue(l,prop.replace(/_+[a-z]+/,''))) ) {
var u = K.truD(o[p]).u, s = /%/.test(u) ? '_percent' : '_'+u; prop = prop.replace(s,'');
if (!(p+s in atts)) {
atts[p+s] = function(l,p,a,b,v) {
var _p = p.replace(s,'');
l.setAttribute(_p, unit(a.v,b.v,b.u,v) );
l.setAttribute(prop, unit(a.v,b.v,b.u,v) );
}
}
ats[p+s] = K.truD(o[p]);
} else {
if (!(p in atts)) {
atts[p] = function(l,o,a,b,v) {
l.setAttribute(o, number(a,b,v));
l.setAttribute(prop, number(a,b,v));
}
}
ats[p] = parseFloat(o[p]);