@sutton-signwriting/sgnw-components
Version:
a javascript package of web components for use with the SignWriting script.
104 lines (98 loc) • 6.75 kB
JavaScript
/*!
* The Sutton SignWriting Web Components
*/
import { r as registerInstance, f as cssValues, d as h, H as Host, e as getElement, k as createEvent } from './index-BAJUTSOF.js';
import { C as ColorWatch, s as styleExports } from './color-watch-DoznaU7s.js';
import { f as fswExports } from './fsw-CexNLLwH.js';
import { a as addSvgStyle, b as addSvgClassStyle } from './svg-BZk4CAHi.js';
import { d as draggabilly } from './draggabilly-gk_3xxae.js';
const fswButtonCss = () => `*.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 BUTTON_SVG_STYLE = 'position:absolute;top:10%;bottom:10%;left:5%;right:5%;margin:auto;max-width:90%;max-height:80%;cursor:default;fill:var(--font-color)';
const FswButton = class {
constructor(hostRef) {
registerInstance(this, hostRef);
this.sgnw = window.sgnw;
}
connectedCallback() {
this.colorWatch = new ColorWatch(this.el, this);
if (!this.sgnw) {
let self = this;
function handleSgnw() {
self.sgnw = window.sgnw;
window.removeEventListener("sgnw", handleSgnw, false);
}
window.addEventListener('sgnw', handleSgnw, false);
}
}
disconnectedCallback() {
this.colorWatch.dispose();
}
render() {
const styleStr = styleExports.compose(Object.assign(cssValues(this.el), { background: "transparent", zoom: "x" }));
let svg = '';
if (this.symbol) {
svg = this.sgnw ? fswExports.symbolSvg(this.symbol + styleStr) : '';
}
else if (this.sign) {
svg = this.sgnw ? fswExports.signSvg(this.sign + styleStr) : '';
}
else if (this.svg) {
svg = this.svg;
}
return (h(Host, { key: 'c0995013dd80cdef237afa3e4e2ab822cbecf67e', innerHTML: addSvgStyle(svg, BUTTON_SVG_STYLE) }));
}
get el() { return getElement(this); }
};
FswButton.style = fswButtonCss();
const fswPaletteSymbolCss = () => `*.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}`;
const PALETTE_SYMBOL_SVG_STYLE = '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';
const PALETTE_SYMBOL_DRAGGING_SVG_STYLE = 'position:absolute;display:block;top:0;bottom:initial;left:0;right:initial;margin:0;max-width:initial;max-height:initial;cursor:default';
const SYMBOL_LINE_STYLE = 'fill:var(--font-color) !important';
const SYMBOL_FILL_STYLE = 'fill:var(--bg-color) !important';
const FswPaletteSymbol = class {
constructor(hostRef) {
registerInstance(this, hostRef);
this.paletteSymbolClick = createEvent(this, "paletteSymbolClick");
this.paletteSymbolDrop = createEvent(this, "paletteSymbolDrop");
this.sgnw = window.sgnw;
this.dragging = false;
}
paletteSymbolClickHandler() {
this.paletteSymbolClick.emit(this.symbol);
}
paletteSymbolDropHandler({}, pointer) {
this.dragging = false;
this.paletteSymbolDrop.emit({ encoding: "fsw", symbol: this.symbol, x: pointer.pageX, y: pointer.pageY });
this.el.style.top = "0";
this.el.style.left = "0";
}
paletteSymbolDragStartHandler() {
this.dragging = true;
}
connectedCallback() {
if (!this.sgnw) {
let self = this;
function handleSgnw() {
self.sgnw = window.sgnw;
window.removeEventListener("sgnw", handleSgnw, false);
}
window.addEventListener('sgnw', handleSgnw, false);
}
}
componentDidLoad() {
this.draggie = new draggabilly(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 svg = this.sgnw ? fswExports.symbolSvg(this.symbol) : '';
svg = addSvgStyle(svg, this.dragging ? PALETTE_SYMBOL_DRAGGING_SVG_STYLE : PALETTE_SYMBOL_SVG_STYLE);
svg = addSvgClassStyle(svg, 'sym-line', SYMBOL_LINE_STYLE);
svg = addSvgClassStyle(svg, 'sym-fill', SYMBOL_FILL_STYLE);
return (h(Host, { key: '47faf6997eb350fba25e4612d8e8d3dcfaf81710', symbol: this.symbol, innerHTML: svg }));
}
get el() { return getElement(this); }
};
FswPaletteSymbol.style = fswPaletteSymbolCss();
export { FswButton as fsw_button, FswPaletteSymbol as fsw_palette_symbol };