@sutton-signwriting/sgnw-components
Version:
a javascript package of web components for use with the SignWriting script.
4 lines • 4.35 kB
JavaScript
/*!
* The Sutton SignWriting Web Components
*/
import{r as t,i as s,a as e,c as i,h as a,d as h,H as l,e as r}from"./p-BAJUTSOF.js";import{c,H as n,C as f,A as o,a as p,b as w,d as m}from"./p-CIRp6scd.js";const d=class{constructor(e){t(this,e),this.orientation="vertical",this.major=10,this.minor=3,this.total=30,this.size="small",this.alphabet=s,this.group=null,this.base=null,this.more=!1,this.hasMore=!1,this.lower=!1,this.hasLower=!1,this.palette=[]}parseSizeProp(t){switch(t){case"large":this.major=16,this.minor=6;break;case"medium":this.major=10,this.minor=6;break;default:this.major=10,this.minor=3}this.total=this.major*this.minor}watchGroup(){null==this.group&&null!=this.base?this.base=null:this.setPalette()}watchBase(){this.setPalette()}watchMore(){this.setPalette()}watchLower(){this.setPalette()}getPaletteAll(){let t=Object.keys(this.alphabet);return"large"==this.size&&(t=e(t,10,16)),t=i(t,this.total),this.more=!1,this.hasMore=!1,this.lower=!1,this.hasLower=!1,t}getPaletteGroup(){let t=this.alphabet[this.group];return"large"==this.size&&(t=e(t,10,16)),t=i(t,this.total),t.length>this.total?(this.hasMore=!0,t=this.more?t.slice(this.total,2*this.total):t.slice(0,this.total)):(this.more=!1,this.hasMore=!1),this.lower=!1,this.hasLower=!1,t}getPaletteBase(){const t=this.base.slice(0,4);let s;const i=t+"18",h=t+"30";let l=0,r=16,n=0,f=6;"large"!=this.size&&(this.hasLower=a(c.key2id(t+"08"))||a(c.key2id(i)),this.lower?l=8:r=8),"small"==this.size&&(this.hasMore=a(c.key2id(h)),this.more?n=3:f=3);let o=[];for(var p=n;p<f;p++)for(var w=l;w<r;w++)s=t+p+w.toString(16),o.push(s);return"large"!=this.size&&(o=e(o,8,10)),o}setPalette(){let t;switch(!0){case!this.group:t=this.getPaletteAll();break;case!!this.group&&!!this.base:t=this.getPaletteBase();break;case!!this.group:t=this.getPaletteGroup()}this.palette=[...t]}paletteSymbolClickHandler(t){switch(!0){case!this.group:this.group=t.detail;break;case!!this.group&&!!this.base:break;case!!this.group:this.base=t.detail,this.more=!1}}componentWillLoad(){"string"==typeof this.alphabet&&(this.alphabet=JSON.parse(this.alphabet)),this.parseSizeProp(this.size),this.setPalette()}render(){return h(l,{key:"daf9f849406f889c8e248bbd31ad959399b146d6",class:this.orientation+" "+this.size},h("nav",{key:"44db475c1b05e9eba9b3c6140d76db96e43918e0"},h("fsw-button",{key:"127f68408c406871a8e0cb6a2a50c3ab2f7c021f",svg:n,onClick:()=>{this.group=null}}),this.group?h("fsw-button",{svg:f,onClick:()=>{this.base?(this.base=null,this.more=null):this.group=null}}):h("div",null),this.hasMore?h("fsw-button",{svg:this.more?o:p,onClick:()=>{this.more=!this.more}}):"small"==this.size?h("div",null):null,this.hasLower?h("fsw-button",{svg:this.lower?w:m,onClick:()=>{this.lower=!this.lower}}):"large"!=this.size?h("div",null):null),h("main",{key:"3994c70708d811621084a62e4a0532a1f489022d"},this.palette.map((t=>h("fsw-palette-symbol",{symbol:t})))))}get el(){return r(this)}static get watchers(){return{size:[{parseSizeProp:0}],group:[{watchGroup:0}],base:[{watchBase:0}],more:[{watchMore:0}],lower:[{watchLower:0}]}}};d.style=".sc-fsw-palette-h{width:100%;height:100%;display:flex}.sc-fsw-palette-h nav.sc-fsw-palette{height:100%;width:100%;flex:0 0 10%;display:flex;align-items:center}.sc-fsw-palette-h nav.sc-fsw-palette fsw-button.sc-fsw-palette,.sc-fsw-palette-h nav.sc-fsw-palette div.sc-fsw-palette{flex:25%;height:100%;width:100%;margin:1%}.sc-fsw-palette-h main.sc-fsw-palette{flex:0 0 90%;width:100%;height:100%;display:grid}.horizontal.sc-fsw-palette-h{flex-direction:row}.horizontal.sc-fsw-palette-h nav.sc-fsw-palette{flex-direction:column}.horizontal.small.sc-fsw-palette-h main.sc-fsw-palette{grid-template-columns:repeat(10,1fr)}.horizontal.medium.sc-fsw-palette-h main.sc-fsw-palette{grid-template-columns:repeat(10,1fr)}.horizontal.large.sc-fsw-palette-h main.sc-fsw-palette{grid-template-columns:repeat(16,1fr)}.vertical.sc-fsw-palette-h{flex-direction:column}.vertical.sc-fsw-palette-h nav.sc-fsw-palette{flex-direction:row}.vertical.sc-fsw-palette-h main.sc-fsw-palette{grid-auto-flow:column}.vertical.small.sc-fsw-palette-h main.sc-fsw-palette{grid-template-rows:repeat(10,1fr)}.vertical.medium.sc-fsw-palette-h main.sc-fsw-palette{grid-template-rows:repeat(10,1fr)}.vertical.large.sc-fsw-palette-h main.sc-fsw-palette{grid-template-rows:repeat(16,1fr)}";export{d as fsw_palette}