@liquid-js/qr-code-styling
Version:
Generate styled QR codes on web or in Node
3 lines (2 loc) • 4.08 kB
JavaScript
let t=/\.?0+$/;function e(e){return"string"==typeof e?e:e.toFixed(7).replace(t,"")}function i(t,...i){return t.reduce((t,r,s)=>{let o="";return s&&(o=i[s-1]),"number"==typeof o&&(o=e(o)),`${t}${o}${r}`},"").trim().replace(/[\s\n\r]+/gim," ")}var r,s=r||={};s.top="top",s.bottom="bottom",s.left="left",s.right="right";export var BorderPlugin=class{pluginOptions;idSuffix;constructor(t,e=Math.random().toFixed(10).substring(2)){this.pluginOptions=t,this.idSuffix=e}postProcess(t,s){let{document:o}=s;var n=this.pluginOptions.size;let $=function(t,i){i=Math.max(i,0),t.setAttribute("width",e(parseFloat(t.getAttribute("width")||"0")+2*i)),t.setAttribute("height",e(parseFloat(t.getAttribute("height")||"0")+2*i));let r=(t.getAttribute("viewBox")||"").split(" ").map((t,e)=>parseFloat(t)+(e<2?-1:2)*i);if(t.setAttribute("viewBox",r.map(e).join(" ")),!(r.length<4))return{left:r[0],right:r[2]+r[0],top:r[1],bottom:r[3]+r[1]}}(t,n+(this.pluginOptions.margin||0));if($){n=Math.abs(n);var a=($.left+$.right)/2,h=($.top+$.bottom)/2,p=Math.min(s.width,s.height)/2*(1-(this.pluginOptions.round||0)),l=Math.min($.right-$.left-2*n,$.bottom-$.top-2*n)/2-p+n/2,u=this.pluginOptions.round?l:0,g=this.pluginOptions.round?p:p+l;(s=o.createElementNS("http://www.w3.org/2000/svg","rect")).setAttribute("width",e(2*(g+u))),s.setAttribute("height",e(2*(g+u))),s.setAttribute("x",e(a-g-u)),s.setAttribute("y",e(h-g-u)),s.setAttribute("rx",e(u)),s.setAttribute("fill","none"),s.setAttribute("stroke",this.pluginOptions.color),s.setAttribute("stroke-width",e(n)),this.pluginOptions.dasharray&&s.setAttribute("stroke-dasharray",this.pluginOptions.dasharray),t.appendChild(s),[r.left,r.top,r.right,r.bottom].forEach(s=>{var n=this.pluginOptions.text,$=n?.[s];if($){let d=Array.from(t.childNodes).find(t=>"DEFS"==t.tagName.toUpperCase());d||(d=o.createElementNS("http://www.w3.org/2000/svg","defs"),t.appendChild(d));let f=o.createElementNS("http://www.w3.org/2000/svg","path"),w=$.size||n.size||1;switch(u=this.pluginOptions.round?l-w/3:0,g=this.pluginOptions.round?p:p+(l-w/3),s){case r.top:f.setAttribute("d",i`M ${a} ${h+u+g} h ${-g} a ${u} ${u} 0 0 1 ${-u} ${-u} v ${-2*g} a ${u} ${u} 0 0 1 ${u} ${-u} h ${2*g} a ${u} ${u} 0 0 1 ${u} ${u} v ${2*g} a ${u} ${u} 0 0 1 ${-u} ${u} h ${-g}`);break;case r.bottom:this.pluginOptions.round?u+=2*w/3:g+=2*w/3,f.setAttribute("d",i`M ${a} ${h-u-g} h ${-g} a ${u} ${u} 0 0 0 ${-u} ${u} v ${2*g} a ${u} ${u} 0 0 0 ${u} ${u} h ${2*g} a ${u} ${u} 0 0 0 ${u} ${-u} v ${-2*g} a ${u} ${u} 0 0 0 ${-u} ${-u} h ${-g}`);break;case r.left:f.setAttribute("d",i`M ${a+u+g} ${h} v ${g} a ${u} ${u} 0 0 1 ${-u} ${u} h ${-2*g} a ${u} ${u} 0 0 1 ${-u} ${-u} v ${-2*g} a ${u} ${u} 0 0 1 ${u} ${-u} h ${2*g} a ${u} ${u} 0 0 1 ${u} ${u} v ${g}`);break;case r.right:f.setAttribute("d",i`M ${a-u-g} ${h} v ${-g} a ${u} ${u} 0 0 1 ${u} ${-u} h ${2*g} a ${u} ${u} 0 0 1 ${u} ${u} v ${2*g} a ${u} ${u} 0 0 1 ${-u} ${u} h ${-2*g} a ${u} ${u} 0 0 1 ${-u} ${-u} v ${-g}`)}s=`border-text-${s}-${this.idSuffix}`,f.setAttribute("id",s),f.setAttribute("fill","none");let b=o.createElementNS("http://www.w3.org/2000/svg","tspan");b.setAttribute("font-family",$.font||n.font||"sans-serif"),b.setAttribute("fill",$.color||n.color||"#000"),b.setAttribute("font-weight",e($.fontWeight||n.fontWeight||"normal")),b.setAttribute("font-style",$.fontStyle||n.fontStyle||"normal"),b.setAttribute("font-size",e(w)),b.textContent=$.content,(n=o.createElementNS("http://www.w3.org/2000/svg","textPath")).setAttributeNS("http://www.w3.org/1999/xlink","xlink:href","#"+s),n.setAttribute("startOffset","50%"),n.setAttribute("text-anchor","middle"),n.appendChild(b),($=o.createElementNS("http://www.w3.org/2000/svg","text")).appendChild(n),d.appendChild(f),t.appendChild($)}}),this.pluginOptions.fontFaces&&((n=Array.from(t.childNodes).find(t=>"DEFS"==t.tagName.toUpperCase()))||(n=o.createElementNS("http://www.w3.org/2000/svg","defs"),t.appendChild(n)),(s=o.createElementNS("http://www.w3.org/2000/svg","style")).innerHTML=this.pluginOptions.fontFaces,n.appendChild(s))}}};
//# sourceMappingURL=border-plugin.js.map