@sutton-signwriting/sgnw-components
Version:
a javascript package of web components for use with the SignWriting script.
64 lines (60 loc) • 2.77 kB
JavaScript
/*!
* The Sutton SignWriting Web Components
*/
import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
import { s as style } from './style.js';
import { f as fsw } from './fsw.js';
import { c as cssValues } from './global.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}";
const FswButton = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
constructor() {
super();
this.__registerHost();
this.sgnw = window.sgnw;
}
connectedCallback() {
if (!this.sgnw) {
let self = this;
function handleSgnw() {
self.sgnw = window.sgnw;
window.removeEventListener("sgnw", handleSgnw, false);
}
window.addEventListener('sgnw', handleSgnw, false);
}
}
render() {
const styleStr = style.compose(Object.assign(cssValues(this.el), { background: "transparent", zoom: "x" }));
let svg = '';
if (this.symbol) {
svg = this.sgnw ? fsw.symbolSvg(this.symbol + styleStr) : '';
}
else if (this.sign) {
svg = this.sgnw ? fsw.signSvg(this.sign + styleStr) : '';
}
else if (this.svg) {
svg = this.svg;
}
return (h(Host, { innerHTML: svg }));
}
get el() { return this; }
static get style() { return fswButtonCss; }
}, [2, "fsw-button", {
"symbol": [1537],
"sign": [1537],
"svg": [1537],
"sgnw": [32]
}]);
function defineCustomElement() {
if (typeof customElements === "undefined") {
return;
}
const components = ["fsw-button"];
components.forEach(tagName => { switch (tagName) {
case "fsw-button":
if (!customElements.get(tagName)) {
customElements.define(tagName, FswButton);
}
break;
} });
}
export { FswButton as F, defineCustomElement as d };