@sutton-signwriting/sgnw-components
Version:
a javascript package of web components for use with the SignWriting script.
100 lines (99 loc) • 3.38 kB
JavaScript
/*!
* The Sutton SignWriting Web Components
*/
import { Host, h } from "@stencil/core";
import { parse as parseFSW } from "@sutton-signwriting/core/fsw/fsw";
import { parse as parseStyle, compose as composeStyle, merge as mergeStyle } from "@sutton-signwriting/core/style/style";
import { symbolSvg } from "@sutton-signwriting/font-ttf/fsw/fsw";
import { cssValues } from "../../global/global";
import { ColorWatch } from "../../global/color-watch";
export class FswSymbol {
constructor() {
this.sgnw = window.sgnw;
}
connectedCallback() {
this.colorWatch = new ColorWatch(this.el, this);
if (!this.symbol) {
let symbol = parseFSW.symbol(this.el.innerHTML);
if (symbol.style) {
this.styling = composeStyle(mergeStyle(parseStyle(symbol.style), parseStyle(this.styling)));
}
this.symbol = symbol.symbol;
}
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 = composeStyle(mergeStyle(cssValues(this.el), parseStyle(this.styling)));
return (h(Host, { key: '86f20d62b1a9c98b90474a9ec054a76ee3a2d1b9', symbol: this.symbol, styling: this.styling, innerHTML: this.sgnw ? symbolSvg(this.symbol + (styleStr)) : '' }, h("slot", { key: '526c8016004ba63407640a123475c6a9e3b48041' })));
}
static get is() { return "fsw-symbol"; }
static get encapsulation() { return "shadow"; }
static get originalStyleUrls() {
return {
"$": ["fsw-symbol.css"]
};
}
static get styleUrls() {
return {
"$": ["fsw-symbol.css"]
};
}
static get properties() {
return {
"symbol": {
"type": "string",
"mutable": true,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "FSW key for symbol"
},
"getter": false,
"setter": false,
"reflect": true,
"attribute": "symbol"
},
"styling": {
"type": "string",
"mutable": true,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Style String for symbol"
},
"getter": false,
"setter": false,
"reflect": true,
"attribute": "styling"
}
};
}
static get states() {
return {
"sgnw": {}
};
}
static get elementRef() { return "el"; }
}