@sutton-signwriting/sgnw-components/dist/components/sgnw-vp.js

a javascript package of web components for use with the SignWriting script.

/*!
 * The Sutton SignWriting Web Components
 */
import{proxyCustomElement as s,HTMLElement as t,h as e,Host as i,transformTag as n}from"@stencil/core/internal/client";import{s as o}from"./swu2.js";import{C as a,s as l}from"./color-watch.js";import{c as r}from"./global.js";import{d as c}from"./sgnw-sign2.js";import{d}from"./sgnw-symbol2.js";const h=s(class extends t{constructor(s){super(),!1!==s&&this.__registerHost(),this.__attachShadow(),this.sgnw=window.sgnw,this.items=[]}parseText(s){this.items=o.parse.text(s).map((s=>{let t=o.info(s);return t.text=s,t}))}connectedCallback(){if(this.colorWatch=new a(this.el,this),this.vp?this.parseText(this.vp):this.vp=this.el.innerHTML,!this.sgnw){let s=this;function t(){s.sgnw=window.sgnw,window.removeEventListener("sgnw",t,!1)}window.addEventListener("sgnw",t,!1)}}disconnectedCallback(){this.colorWatch.dispose()}render(){const s=r(this.el),t=l.compose({colorize:this.colorize,detail:s.detail});return e(i,{key:"3bf0a8d933adc7717ea5475879399667653ee1c9",vp:this.vp},e("span",{key:"f30475de1517a15a57c9e6ae70772d95a1b0ecdf",class:"outside"},e("span",{key:"aecc1ff9efd7c6ca8fa2f6babc6846432a165cf1",class:"middle"},e("span",{key:"4ec328456fa1e19a681e8e65efc71ae8e96876ae",class:"inside"},this.items.map((i=>{let n,o,a,l,r,c;return"sign"==i.segment?(n=s.zoom*i.zoom,o=i.padding*n,a=i.width*n+2*o,l=i.height*n+2*o,r=(1e3-2*i.minX-i.width)*n-150*s.zoom*i.lane,c=Math.max(0,20*n-o),e("sgnw-sign",{styling:t,style:{"font-size":30*s.zoom+"px",width:a+"px",height:l+"px","margin-right":(r>0?r:0)+"px","border-left":(r<0?-r:0)+"px solid transparent",padding:c+"px"}},i.text)):"symbol"==i.segment?(n=s.zoom*i.zoom,o=i.padding*n,a=i.width*n+2*o,l=i.height*n+2*o,c=Math.max(0,20*n-o),e("sgnw-symbol",{styling:t,style:{"font-size":30*s.zoom+"px",width:a+"px",height:l+"px","padding-bottom":c+"px"}},i.text)):(console.log("other"),e("div",null,i.text))}))))))}get el(){return this}static get watchers(){return{vp:[{parseText:0}]}}static get style(){return":host{writing-mode:vertical-lr;border-left:1px solid blue;border-right:1px solid blue;height:100%}:host svg{display:block}:host span.outside{font-size:0%;line-height:0%;border-left:1px solid blue;vertical-align:top}:host span.middle{vertical-align:bottom}:host span.inside{border-left:1px dashed red}sgnw-sign,sgnw-symbol{writing-mode:horizontal-tb;display:inline-block;vertical-align:middle;box-sizing:content-box}:host{transition:color 1ms, background-color 1ms}"}},[1,"sgnw-vp",{vp:[1537],colorize:[1540],sgnw:[32],items:[32]},void 0,{vp:[{parseText:0}]}]),g=h,p=function(){"undefined"!=typeof customElements&&["sgnw-vp","sgnw-sign","sgnw-symbol"].forEach((s=>{switch(s){case"sgnw-vp":customElements.get(n(s))||customElements.define(n(s),h);break;case"sgnw-sign":customElements.get(n(s))||c();break;case"sgnw-symbol":customElements.get(n(s))||d()}}))};export{g as SgnwVp,p as defineCustomElement}