@sutton-signwriting/sgnw-components
Version:
a javascript package of web components for use with the SignWriting script.
4 lines • 4.89 kB
JavaScript
/*!
* The Sutton SignWriting Web Components
*/
import{r as t,f as o,d as s,H as i,e as r,k as a}from"./p-BAJUTSOF.js";import{C as l,s as e}from"./p-BgrNWcmU.js";import{f as n}from"./p-CexNLLwH.js";import{a as c,b as f}from"./p-BZk4CAHi.js";import{d as h}from"./p-gk_3xxae.js";const b=class{constructor(o){t(this,o),this.sgnw=window.sgnw}connectedCallback(){if(this.colorWatch=new l(this.el,this),!this.sgnw){let t=this;function o(){t.sgnw=window.sgnw,window.removeEventListener("sgnw",o,!1)}window.addEventListener("sgnw",o,!1)}}disconnectedCallback(){this.colorWatch.dispose()}render(){const t=e.compose(Object.assign(o(this.el),{background:"transparent",zoom:"x"}));let r="";return this.symbol?r=this.sgnw?n.symbolSvg(this.symbol+t):"":this.sign?r=this.sgnw?n.signSvg(this.sign+t):"":this.svg&&(r=this.svg),s(i,{key:"c0995013dd80cdef237afa3e4e2ab822cbecf67e",innerHTML:c(r,"position:absolute;top:10%;bottom:10%;left:5%;right:5%;margin:auto;max-width:90%;max-height:80%;cursor:default;fill:var(--font-color)")})}get el(){return r(this)}};b.style='*.sc-fsw-button,*.sc-fsw-button::before,*.sc-fsw-button::after{box-sizing:border-box}.sc-fsw-button-h{--font-color:#424242;--button-color:lightgray;--button-hover:darkgray;--bg-color:#fff}[data-color-mode="dark"] .sc-fsw-button-h,[data-theme="dark"] .sc-fsw-button-h{--font-color:#e1e1ff;--button-color:gray;--button-hover:darkgray;--bg-color:#161625}.swu.sc-fsw-button{font-family:SuttonSignWritingOneD !important}.sc-fsw-button-h{display:inline-block;position:relative;border-radius:5px;color:var(--font-color);background-color:var(--button-color);width:5rem;height:4rem}.sc-fsw-button-h:hover{background-color:var(--button-hover)}.sc-fsw-button-s>svg{position:absolute;top:10%;bottom:10%;left:5%;right:5%;margin:auto;max-width:90%;max-height:80%;cursor:default}.sc-fsw-button-s>svg g text.sym-line,.sc-fsw-button-s>svg path{fill:var(--font-color) !important}.sc-fsw-button-s>svg g text.sym-fill{fill:var(--button-color) !important}.sc-fsw-button-h:hover.sc-fsw-button-s>svg g text.sym-fill{fill:var(--button-hover) !important}.sc-fsw-button-h{transition:color 1ms, background-color 1ms}';const m=class{constructor(o){t(this,o),this.paletteSymbolClick=a(this,"paletteSymbolClick"),this.paletteSymbolDrop=a(this,"paletteSymbolDrop"),this.sgnw=window.sgnw,this.dragging=!1}paletteSymbolClickHandler(){this.paletteSymbolClick.emit(this.symbol)}paletteSymbolDropHandler({},t){this.dragging=!1,this.paletteSymbolDrop.emit({encoding:"fsw",symbol:this.symbol,x:t.pageX,y:t.pageY}),this.el.style.top="0",this.el.style.left="0"}paletteSymbolDragStartHandler(){this.dragging=!0}connectedCallback(){if(!this.sgnw){let t=this;function o(){t.sgnw=window.sgnw,window.removeEventListener("sgnw",o,!1)}window.addEventListener("sgnw",o,!1)}}componentDidLoad(){this.draggie=new h(this.el),this.draggie.on("staticClick",this.paletteSymbolClickHandler.bind(this)),this.draggie.on("dragStart",this.paletteSymbolDragStartHandler.bind(this)),this.draggie.on("dragEnd",this.paletteSymbolDropHandler.bind(this))}render(){let t=this.sgnw?n.symbolSvg(this.symbol):"";return t=c(t,this.dragging?"position:absolute;display:block;top:0;bottom:initial;left:0;right:initial;margin:0;max-width:initial;max-height:initial;cursor:default":"position:absolute;display:block;top:2.5%;bottom:2.5%;left:2.5%;right:2.5%;margin:auto;max-width:95%;max-height:95%;cursor:default"),t=f(t,"sym-line","fill:var(--font-color) !important"),t=f(t,"sym-fill","fill:var(--bg-color) !important"),s(i,{key:"47faf6997eb350fba25e4612d8e8d3dcfaf81710",symbol:this.symbol,innerHTML:t})}get el(){return r(this)}};m.style='*.sc-fsw-palette-symbol,*.sc-fsw-palette-symbol::before,*.sc-fsw-palette-symbol::after{box-sizing:border-box}.sc-fsw-palette-symbol-h{--font-color:#424242;--button-color:lightgray;--button-hover:darkgray;--bg-color:#fff}[data-color-mode="dark"] .sc-fsw-palette-symbol-h,[data-theme="dark"] .sc-fsw-palette-symbol-h{--font-color:#e1e1ff;--button-color:gray;--button-hover:darkgray;--bg-color:#161625}.swu.sc-fsw-palette-symbol{font-family:SuttonSignWritingOneD !important}.sc-fsw-palette-symbol-h{border:1px solid var(--font-color);cursor:move;font-size:30px;color:var(--font-color);background:var(--bg-color)}.is-dragging.sc-fsw-palette-symbol-h{border:0px;z-index:1;text-align:initial;vertical-align:top;line-height:0px;font-size:0px;background:transparent}.sc-fsw-palette-symbol-s>svg{position:absolute;display:block;top:2.5%;bottom:2.5%;left:2.5%;right:2.5%;margin:auto;max-width:95%;max-height:95%;cursor:default}.sc-fsw-palette-symbol-h.is-dragging.sc-fsw-palette-symbol-s>svg{top:0;bottom:initial;left:0;right:initial;margin:0;max-width:initial;max-height:initial}.sc-fsw-palette-symbol-s>svg g text.sym-line{fill:var(--font-color) !important}.sc-fsw-palette-symbol-s>svg g text.sym-fill{fill:var(--bg-color) !important}';export{b as fsw_button,m as fsw_palette_symbol}