@sutton-signwriting/sgnw-components
Version:
a javascript package of web components for use with the SignWriting script.
125 lines (124 loc) • 4.02 kB
JavaScript
/*!
* The Sutton SignWriting Web Components
*/
import { Component, Element, State, Prop, Host, h, Watch } from '@stencil/core';
import { info, parse as parseFSW } from '@sutton-signwriting/core/fsw/fsw';
import { compose as composeStyle } from '@sutton-signwriting/core/style/style';
import { cssValues } from '../../global/global';
export class FswVp {
constructor() {
this.sgnw = window.sgnw;
this.items = [];
}
parseText(newValue) {
this.items = parseFSW.text(newValue).map(val => {
let i = info(val);
i['text'] = val;
return i;
});
}
connectedCallback() {
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);
}
}
render() {
const values = cssValues(this.el);
const styling = composeStyle({
colorize: this.colorize,
detail: values.detail
});
const offset = 150;
return (h(Host, { vp: this.vp },
h("span", { class: "outside" },
h("span", { class: "middle" },
h("span", { 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("fsw-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("fsw-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 "fsw-vp"; }
static get encapsulation() { return "shadow"; }
static get originalStyleUrls() { return {
"$": ["fsw-vp.css"]
}; }
static get styleUrls() { return {
"$": ["fsw-vp.css"]
}; }
static get properties() { return {
"vp": {
"type": "string",
"mutable": true,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "FSW text"
},
"attribute": "vp",
"reflect": true
},
"colorize": {
"type": "boolean",
"mutable": true,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Colorize flag"
},
"attribute": "colorize",
"reflect": true
}
}; }
static get states() { return {
"sgnw": {},
"items": {}
}; }
static get elementRef() { return "el"; }
static get watchers() { return [{
"propName": "vp",
"methodName": "parseText"
}]; }
}