@sutton-signwriting/sgnw-components
Version:
a javascript package of web components for use with the SignWriting script.
141 lines (140 loc) • 5.17 kB
JavaScript
/*!
* The Sutton SignWriting Web Components
*/
import { Host, h } from "@stencil/core";
import { info, parse as parseSGNW } from "@sutton-signwriting/core/swu/swu";
import { compose as composeStyle } from "@sutton-signwriting/core/style/style";
import { cssValues } from "../../global/global";
import { ColorWatch } from "../../global/color-watch";
export class SgnwVp {
constructor() {
this.sgnw = window.sgnw;
this.items = [];
}
parseText(newValue) {
this.items = parseSGNW.text(newValue).map(val => {
let i = info(val);
i['text'] = val;
return i;
});
}
connectedCallback() {
this.colorWatch = new ColorWatch(this.el, this);
if (!this.vp) {
this.vp = this.el.innerHTML;
}
else {
this.parseText(this.vp);
}
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 values = cssValues(this.el);
const styling = composeStyle({
colorize: this.colorize,
detail: values.detail
});
const offset = 150;
return (h(Host, { key: '3bf0a8d933adc7717ea5475879399667653ee1c9', vp: this.vp }, h("span", { key: 'f30475de1517a15a57c9e6ae70772d95a1b0ecdf', class: "outside" }, h("span", { key: 'aecc1ff9efd7c6ca8fa2f6babc6846432a165cf1', class: "middle" }, h("span", { key: '4ec328456fa1e19a681e8e65efc71ae8e96876ae', class: "inside" }, this.items.map((item) => {
let zoom, pad, width, height, right, padding;
if (item['segment'] == 'sign') {
zoom = values.zoom * item['zoom'];
pad = item['padding'] * zoom;
width = item['width'] * zoom + pad * 2;
height = item['height'] * zoom + pad * 2;
right = (1000 - (item["minX"] * 2) - item['width']) * zoom - (offset * values.zoom * item['lane']);
padding = Math.max(0, (20 * zoom) - pad);
return h("sgnw-sign", { styling: styling, style: { "font-size": (values.zoom * 30) + "px", "width": width + "px", "height": height + "px", "margin-right": ((right > 0) ? right : 0) + "px", "border-left": ((right < 0) ? (-right) : 0) + "px solid transparent", "padding": padding + "px" } }, item['text']);
}
else if (item['segment'] == 'symbol') {
zoom = values.zoom * item['zoom'];
pad = item['padding'] * zoom;
width = item['width'] * zoom + pad * 2;
height = item['height'] * zoom + pad * 2;
padding = Math.max(0, (20 * zoom) - pad);
return h("sgnw-symbol", { styling: styling, style: { "font-size": (values.zoom * 30) + "px", "width": width + "px", "height": height + "px", "padding-bottom": padding + "px" } }, item['text']);
}
else {
console.log("other");
return h("div", null, item['text']);
}
}))))));
}
static get is() { return "sgnw-vp"; }
static get encapsulation() { return "shadow"; }
static get originalStyleUrls() {
return {
"$": ["sgnw-vp.css"]
};
}
static get styleUrls() {
return {
"$": ["sgnw-vp.css"]
};
}
static get properties() {
return {
"vp": {
"type": "string",
"mutable": true,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "SWU text"
},
"getter": false,
"setter": false,
"reflect": true,
"attribute": "vp"
},
"colorize": {
"type": "boolean",
"mutable": true,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Colorize flag"
},
"getter": false,
"setter": false,
"reflect": true,
"attribute": "colorize"
}
};
}
static get states() {
return {
"sgnw": {},
"items": {}
};
}
static get elementRef() { return "el"; }
static get watchers() {
return [{
"propName": "vp",
"methodName": "parseText"
}];
}
}