@sutton-signwriting/sgnw-components
Version:
a javascript package of web components for use with the SignWriting script.
4 lines • 2.85 kB
JavaScript
/*!
* The Sutton SignWriting Web Components
*/
import{proxyCustomElement as s,HTMLElement as t,h as e,Host as i,transformTag as o}from"@stencil/core/internal/client";import{f as n}from"./fsw2.js";import{C as l,s as r}from"./color-watch.js";import{c as a}from"./global.js";import{d}from"./fsw-sign2.js";import{d as c}from"./fsw-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=n.parse.text(s).map((s=>{let t=n.info(s);return t.text=s,t}))}connectedCallback(){if(this.colorWatch=new l(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=a(this.el),t=r.compose({colorize:this.colorize,detail:s.detail});return e(i,{key:"1b18f185e422580cc19d542ba81957effd155ad5",vp:this.vp},e("span",{key:"29096a55f34654afed7ba52298f3bbdf8928362c",class:"outside"},e("span",{key:"473eb5eb25a017b834ba1729a78b7a17ce54802b",class:"middle"},e("span",{key:"1d75c80f1d07a3b4d5d9a8b51e5be711038dfa33",class:"inside"},this.items.map((i=>{let o,n,l,r,a,d;return"sign"==i.segment?(o=s.zoom*i.zoom,n=i.padding*o,l=i.width*o+2*n,r=i.height*o+2*n,a=(1e3-2*i.minX-i.width)*o-150*s.zoom*i.lane,d=Math.max(0,20*o-n),e("fsw-sign",{styling:t,style:{"font-size":30*s.zoom+"px",width:l+"px",height:r+"px","margin-right":(a>0?a:0)+"px","border-left":(a<0?-a:0)+"px solid transparent",padding:d+"px"}},i.text)):"symbol"==i.segment?(o=s.zoom*i.zoom,n=i.padding*o,l=i.width*o+2*n,r=i.height*o+2*n,d=Math.max(0,20*o-n),e("fsw-symbol",{styling:t,style:{"font-size":30*s.zoom+"px",width:l+"px",height:r+"px","padding-bottom":d+"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-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}fsw-sign,fsw-symbol{writing-mode:horizontal-tb;display:inline-block;vertical-align:middle;box-sizing:content-box}:host{transition:color 1ms, background-color 1ms}"}},[1,"fsw-vp",{vp:[1537],colorize:[1540],sgnw:[32],items:[32]},void 0,{vp:[{parseText:0}]}]),p=h,f=function(){"undefined"!=typeof customElements&&["fsw-vp","fsw-sign","fsw-symbol"].forEach((s=>{switch(s){case"fsw-vp":customElements.get(o(s))||customElements.define(o(s),h);break;case"fsw-sign":customElements.get(o(s))||d();break;case"fsw-symbol":customElements.get(o(s))||c()}}))};export{p as FswVp,f as defineCustomElement}