UNPKG

@sutton-signwriting/sgnw-components

Version:

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

4 lines 3.32 kB
/*! * The Sutton SignWriting Web Components */ import{proxyCustomElement as t,HTMLElement as s,createEvent as o,h as i,Host as l,transformTag as e}from"@stencil/core/internal/client";import{s as a}from"./swu.js";import{d as n}from"./draggabilly.js";import{a as r,b as g}from"./svg.js";const m=t(class extends s{constructor(t){super(),!1!==t&&this.__registerHost(),this.paletteSymbolClick=o(this,"paletteSymbolClick",7),this.paletteSymbolDrop=o(this,"paletteSymbolDrop",7),this.sgnw=window.sgnw,this.dragging=!1}paletteSymbolClickHandler(){this.paletteSymbolClick.emit(this.symbol)}paletteSymbolDropHandler({},t){this.dragging=!1,this.paletteSymbolDrop.emit({encoding:"swu",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 s(){t.sgnw=window.sgnw,window.removeEventListener("sgnw",s,!1)}window.addEventListener("sgnw",s,!1)}}componentDidLoad(){this.draggie=new n(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?a.symbolSvg(this.symbol):"";return t=r(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=g(t,"sym-line","fill:var(--font-color) !important"),t=g(t,"sym-fill","fill:var(--bg-color) !important"),i(l,{key:"e89b400b93d436bd905af636a98ad1dbf06ec58a",symbol:this.symbol,innerHTML:t})}get el(){return this}static get style(){return'*.sc-sgnw-palette-symbol,*.sc-sgnw-palette-symbol::before,*.sc-sgnw-palette-symbol::after{box-sizing:border-box}.sc-sgnw-palette-symbol-h{--font-color:#424242;--button-color:lightgray;--button-hover:darkgray;--bg-color:#fff}[data-color-mode="dark"] .sc-sgnw-palette-symbol-h,[data-theme="dark"] .sc-sgnw-palette-symbol-h{--font-color:#e1e1ff;--button-color:gray;--button-hover:darkgray;--bg-color:#161625}.swu.sc-sgnw-palette-symbol{font-family:SuttonSignWritingOneD !important}.sc-sgnw-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-sgnw-palette-symbol-h{border:0px;z-index:1;text-align:initial;vertical-align:top;line-height:0px;font-size:0px;background:transparent}.sc-sgnw-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-sgnw-palette-symbol-h.is-dragging.sc-sgnw-palette-symbol-s>svg{top:0;bottom:initial;left:0;right:initial;margin:0;max-width:initial;max-height:initial}.sc-sgnw-palette-symbol-s>svg g text.sym-line{fill:var(--font-color) !important}.sc-sgnw-palette-symbol-s>svg g text.sym-fill{fill:var(--bg-color) !important}'}},[2,"sgnw-palette-symbol",{symbol:[1537],sgnw:[32],dragging:[32]}]);function c(){"undefined"!=typeof customElements&&["sgnw-palette-symbol"].forEach((t=>{"sgnw-palette-symbol"===t&&(customElements.get(e(t))||customElements.define(e(t),m))}))}export{m as S,c as d}