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