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