@sutton-signwriting/sgnw-components
Version:
a javascript package of web components for use with the SignWriting script.
124 lines (123 loc) • 3.97 kB
JavaScript
/*!
* The Sutton SignWriting Web Components
*/
//
import { Host, h } from "@stencil/core";
import { compose as composeStyle } from "@sutton-signwriting/core/style/style";
import { symbolSvg, signSvg } from "@sutton-signwriting/font-ttf/fsw/fsw";
import { cssValues } from "../../global/global";
import { ColorWatch } from "../../global/color-watch";
import { addSvgStyle } from "../../global/svg";
const BUTTON_SVG_STYLE = 'position:absolute;top:10%;bottom:10%;left:5%;right:5%;margin:auto;max-width:90%;max-height:80%;cursor:default;fill:var(--font-color)';
export class FswButton {
constructor() {
this.sgnw = window.sgnw;
}
connectedCallback() {
this.colorWatch = new ColorWatch(this.el, this);
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(Object.assign(cssValues(this.el), { background: "transparent", zoom: "x" }));
let svg = '';
if (this.symbol) {
svg = this.sgnw ? symbolSvg(this.symbol + styleStr) : '';
}
else if (this.sign) {
svg = this.sgnw ? signSvg(this.sign + styleStr) : '';
}
else if (this.svg) {
svg = this.svg;
}
return (h(Host, { key: 'c0995013dd80cdef237afa3e4e2ab822cbecf67e', innerHTML: addSvgStyle(svg, BUTTON_SVG_STYLE) }));
}
static get is() { return "fsw-button"; }
static get encapsulation() { return "scoped"; }
static get originalStyleUrls() {
return {
"$": ["fsw-button.css"]
};
}
static get styleUrls() {
return {
"$": ["fsw-button.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"
},
"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"
},
"svg": {
"type": "string",
"mutable": true,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "SVG icon"
},
"getter": false,
"setter": false,
"reflect": true,
"attribute": "svg"
}
};
}
static get states() {
return {
"sgnw": {}
};
}
static get elementRef() { return "el"; }
}