@belvo-finance/belvo-vue-components
Version:
## Project setup ``` npm install ```
107 lines (103 loc) • 4.96 kB
JavaScript
function SVGStrokeEffect(elem, filterManager){
this.initialized = false;
this.filterManager = filterManager;
this.elem = elem;
this.paths = [];
}
SVGStrokeEffect.prototype.initialize = function(){
var elemChildren = this.elem.layerElement.children || this.elem.layerElement.childNodes;
var path,groupPath, i, len;
if(this.filterManager.effectElements[1].p.v === 1){
len = this.elem.maskManager.masksProperties.length;
i = 0;
} else {
i = this.filterManager.effectElements[0].p.v - 1;
len = i + 1;
}
groupPath = createNS('g');
groupPath.setAttribute('fill','none');
groupPath.setAttribute('stroke-linecap','round');
groupPath.setAttribute('stroke-dashoffset',1);
for(i;i<len;i+=1){
path = createNS('path');
groupPath.appendChild(path);
this.paths.push({p:path,m:i});
}
if(this.filterManager.effectElements[10].p.v === 3){
var mask = createNS('mask');
var id = createElementID();
mask.setAttribute('id',id);
mask.setAttribute('mask-type','alpha');
mask.appendChild(groupPath);
this.elem.globalData.defs.appendChild(mask);
var g = createNS('g');
g.setAttribute('mask','url(' + locationHref + '#'+id+')');
while (elemChildren[0]) {
g.appendChild(elemChildren[0]);
}
this.elem.layerElement.appendChild(g);
this.masker = mask;
groupPath.setAttribute('stroke','#fff');
} else if(this.filterManager.effectElements[10].p.v === 1 || this.filterManager.effectElements[10].p.v === 2){
if(this.filterManager.effectElements[10].p.v === 2){
elemChildren = this.elem.layerElement.children || this.elem.layerElement.childNodes;
while(elemChildren.length){
this.elem.layerElement.removeChild(elemChildren[0]);
}
}
this.elem.layerElement.appendChild(groupPath);
this.elem.layerElement.removeAttribute('mask');
groupPath.setAttribute('stroke','#fff');
}
this.initialized = true;
this.pathMasker = groupPath;
};
SVGStrokeEffect.prototype.renderFrame = function(forceRender){
if(!this.initialized){
this.initialize();
}
var i, len = this.paths.length;
var mask, path;
for(i=0;i<len;i+=1){
if(this.paths[i].m === -1) {
continue;
}
mask = this.elem.maskManager.viewData[this.paths[i].m];
path = this.paths[i].p;
if(forceRender || this.filterManager._mdf || mask.prop._mdf){
path.setAttribute('d',mask.lastPath);
}
if(forceRender || this.filterManager.effectElements[9].p._mdf || this.filterManager.effectElements[4].p._mdf || this.filterManager.effectElements[7].p._mdf || this.filterManager.effectElements[8].p._mdf || mask.prop._mdf){
var dasharrayValue;
if(this.filterManager.effectElements[7].p.v !== 0 || this.filterManager.effectElements[8].p.v !== 100){
var s = Math.min(this.filterManager.effectElements[7].p.v,this.filterManager.effectElements[8].p.v)/100;
var e = Math.max(this.filterManager.effectElements[7].p.v,this.filterManager.effectElements[8].p.v)/100;
var l = path.getTotalLength();
dasharrayValue = '0 0 0 ' + l*s + ' ';
var lineLength = l*(e-s);
var segment = 1+this.filterManager.effectElements[4].p.v*2*this.filterManager.effectElements[9].p.v/100;
var units = Math.floor(lineLength/segment);
var j;
for(j=0;j<units;j+=1){
dasharrayValue += '1 ' + this.filterManager.effectElements[4].p.v*2*this.filterManager.effectElements[9].p.v/100 + ' ';
}
dasharrayValue += '0 ' + l*10 + ' 0 0';
} else {
dasharrayValue = '1 ' + this.filterManager.effectElements[4].p.v*2*this.filterManager.effectElements[9].p.v/100;
}
path.setAttribute('stroke-dasharray',dasharrayValue);
}
}
if(forceRender || this.filterManager.effectElements[4].p._mdf){
this.pathMasker.setAttribute('stroke-width',this.filterManager.effectElements[4].p.v*2);
}
if(forceRender || this.filterManager.effectElements[6].p._mdf){
this.pathMasker.setAttribute('opacity',this.filterManager.effectElements[6].p.v);
}
if(this.filterManager.effectElements[10].p.v === 1 || this.filterManager.effectElements[10].p.v === 2){
if(forceRender || this.filterManager.effectElements[3].p._mdf){
var color = this.filterManager.effectElements[3].p.v;
this.pathMasker.setAttribute('stroke','rgb('+bm_floor(color[0]*255)+','+bm_floor(color[1]*255)+','+bm_floor(color[2]*255)+')');
}
}
};