uke-chord.min.js

(function(){const d=`
<svg id="ukeChordSvg" width="90" height="112" viewBox="0 0 90 112" style="font-family: sans-serif; font-size: 11px;" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <title id="title">uke-chord</title>
  <text id="chordName" x="50%" y="16"  text-anchor="middle" style="font-size: 16px;"></text>
  <defs>
    <circle id="bubble" r="6" transform="translate(1,11)"/>
    <path id="ex" d="M0,0L8,8m0,-8L0,8" stroke="black" stroke-width="1.1" transform="translate(-3,-11)"/>
    <circle id="openString" r="4" fill="none" stroke="black" stroke-width="1" transform="translate(1,-7)"/>
    <rect id="diamond" width="14" height="14" transform="translate(1,2),rotate(45)"></rect>
  </defs>
  <g id="tab">
    <text id="position" x="-6" y="15" text-anchor="end"></text>
    <g id="frets"></g>
    <g id="strings"></g>
  </g>
</svg>`,l=4,c=20,g=10;function p(t,e,i){i.setAttribute("transform","translate("+t+","+e+")")}function n(t,e){const i=document.createElementNS("http://www.w3.org/2000/svg",t);return Object.keys(e).forEach(a=>{i.setAttribute(a,e[a]+"")}),i}function r(t,e){const i=n("use",e);return i.setAttributeNS("http://www.w3.org/1999/xlink","xlink:href","#"+t),i}class f extends HTMLElement{connectedCallback(){for(let i=0;i<this.attributes.length;i++)this[this.attributes[i].name]=this.attributes[i].value;this.attachShadow({mode:"open"});const t=document.createElement("template");t.innerHTML=d;const e=t.content.querySelectorAll("*[id]");if(this.$={},e.forEach(i=>{this.$[i.id]=i}),this.frets)this.frets=this.frets?this.frets.split("").slice(0,g):[];else throw Error("frets attribute is required");if(this.fingers=this.fingers?this.fingers.split(""):[],this.sub=this.parseSub(this.sub),this.size=this.parseSize(this.size),this.r=this.r?this.r.split(""):[],this.position=parseInt(this.position)||null,this.name=this.name&&this.name.length>0?this.name:null,this.fretCount=this.parseLength(this.length),this.tabWidth=(this.frets.length-1)*20+2,this.viewBoxWidth=this.tabWidth+30+(this.position?6:0),this.tabHeight=this.fretCount*20,this.viewBoxHeight=this.tabHeight+25+(this.name?25:0),this.tabX=(this.viewBoxWidth-this.tabWidth)/2,this.tabY=12+(this.name?20:0),this.render(),this.hasAttribute("img")){const i=document.createElement("img");i.alt=(this.name?`${this.name} `:"")+"chord",i.title=i.alt,i.src=`data:image/svg+xml;utf8,${encodeURIComponent(t.innerHTML.replace(/\s*(\r\n|\n|\r)\s*/gm,""))}`,this.shadowRoot.appendChild(i)}else this.shadowRoot.appendChild(t.content)}render(){this.showPosition(),this.showName();for(let t=0;t<this.fretCount+1;t++){const e=n("rect",{x:0,y:t*20,width:this.tabWidth,fill:"black",height:2});this.$.frets.appendChild(e)}this.frets.forEach((t,e)=>{const i=e*20,a=n("rect",{x:i,y:0,width:2,fill:"black",height:this.tabHeight});if(this.$.strings.appendChild(a),this.r.includes(this.frets.length-e+"")){const s=(parseInt(t)-1)*20,h=r("diamond",{x:i,y:s});this.$.strings.appendChild(h)}if(t==="0"){const s=r("openString",{x:i});this.$.strings.appendChild(s)}else if(t==="x"||t==="X"){const s=r("ex",{x:i});this.$.strings.appendChild(s)}else if(parseInt(t)>0){const s=(parseInt(t)-1)*20,h=r("bubble",{x:i,y:s});if(this.$.strings.appendChild(h),this.fingers[e]){const o=n("text",{x:i+1,y:s+15,fill:"white","text-anchor":"middle"});o.innerHTML=this.fingers[e]!=="0"?this.fingers[e]:"",this.$.strings.appendChild(o)}}if(this.sub[e]){const s=this.tabHeight+13,h=n("text",{x:i,y:s,"text-anchor":"middle"});h.innerHTML=this.sub[e]!=="_"?this.sub[e]:"",this.$.tab.appendChild(h)}}),p(this.tabX,this.tabY,this.$.tab),this.$.ukeChordSvg.setAttribute("width",this.viewBoxWidth*this.size),this.$.ukeChordSvg.setAttribute("height",this.viewBoxHeight*this.size),this.$.ukeChordSvg.setAttribute("viewBox",`0 0 ${this.viewBoxWidth} ${this.viewBoxHeight}`)}showPosition(){const t=this.position;if(t===0){const e=n("rect",{x:0,y:-1,width:this.tabWidth,fill:"black",height:4});this.$.frets.appendChild(e)}else t>0&&t<100&&(this.$.position.innerHTML=t)}showName(){this.name&&(this.$.chordName.innerHTML=this.name),this.$.title.innerHTML=this.name||"Tab"}parseSub(t){let e;return t?(t.indexOf(",")>0?e=this.sub.split(","):e=this.sub.split(""),e||[]):[]}parseSize(t){let e=1;return t==="L"||t==="l"?e=1.8:parseFloat(t)>0&&(e=t),e}parseLength(t){let e=parseInt(t);return(!e||e>c)&&(e=l),e}}customElements.define("uke-chord",f)})();