@sutton-signwriting/sgnw-components
Version:
a javascript package of web components for use with the SignWriting script.
101 lines (100 loc) • 3.41 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 { signSvg } from "@sutton-signwriting/font-ttf/swu/swu";
import { cssValues } from "../../global/global";
import { ColorWatch } from "../../global/color-watch";
export class SgnwSign {
constructor() {
this.sgnw = window.sgnw;
}
connectedCallback() {
this.colorWatch = new ColorWatch(this.el, this);
if (!this.sign) {
let sign = parseSWU.sign(this.el.innerHTML);
if (sign.style) {
this.styling = composeStyle(mergeStyle(parseStyle(sign.style), parseStyle(this.styling)));
}
sign.style = "";
this.sign = composeSWU.sign(sign);
}
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: 'cc1ffd2004b25f139c6c0a6fc13884f9a40ef33d', sign: this.sign, styling: this.styling, innerHTML: this.sgnw ? signSvg(this.sign + (styleStr)) : '' }, h("slot", { key: 'a02cce53502a3b97fbb13ce40d88aebdb34e2fc1' })));
}
static get is() { return "sgnw-sign"; }
static get encapsulation() { return "shadow"; }
static get originalStyleUrls() {
return {
"$": ["sgnw-sign.css"]
};
}
static get styleUrls() {
return {
"$": ["sgnw-sign.css"]
};
}
static get properties() {
return {
"sign": {
"type": "string",
"mutable": true,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "SWU string for sign"
},
"getter": false,
"setter": false,
"reflect": true,
"attribute": "sign"
},
"styling": {
"type": "string",
"mutable": true,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Style String for sign"
},
"getter": false,
"setter": false,
"reflect": true,
"attribute": "styling"
}
};
}
static get states() {
return {
"sgnw": {}
};
}
static get elementRef() { return "el"; }
}