@sutton-signwriting/sgnw-components
Version:
a javascript package of web components for use with the SignWriting script.
87 lines (82 loc) • 4 kB
JavaScript
/*!
* The Sutton SignWriting Web Components
*/
'use strict';
var index = require('./index-bYThyFO7.js');
var fsw = require('./fsw-BRgKY4JX.js');
var colorWatch = require('./color-watch-BMNbpkmB.js');
const fswVpCss = () => `:host{writing-mode:vertical-lr;border-right:1px solid blue;height:100%}:host svg{display:block}:host span.outside{font-size:0%;line-height:0%;border-left:1px solid blue;vertical-align:top}:host span.middle{vertical-align:bottom}:host span.inside{border-left:1px dashed red}fsw-sign,fsw-symbol{writing-mode:horizontal-tb;display:inline-block;vertical-align:middle;box-sizing:content-box}:host{transition:color 1ms, background-color 1ms}`;
const FswVp = class {
constructor(hostRef) {
index.registerInstance(this, hostRef);
this.sgnw = window.sgnw;
this.items = [];
}
parseText(newValue) {
this.items = fsw.fswExports.parse.text(newValue).map(val => {
let i = fsw.fswExports.info(val);
i['text'] = val;
return i;
});
}
connectedCallback() {
this.colorWatch = new colorWatch.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 = index.cssValues(this.el);
const styling = colorWatch.styleExports.compose({
colorize: this.colorize,
detail: values.detail
});
const offset = 150;
return (index.h(index.Host, { key: '1b18f185e422580cc19d542ba81957effd155ad5', vp: this.vp }, index.h("span", { key: '29096a55f34654afed7ba52298f3bbdf8928362c', class: "outside" }, index.h("span", { key: '473eb5eb25a017b834ba1729a78b7a17ce54802b', class: "middle" }, index.h("span", { key: '1d75c80f1d07a3b4d5d9a8b51e5be711038dfa33', 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 index.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 index.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 index.h("div", null, item['text']);
}
}))))));
}
get el() { return index.getElement(this); }
static get watchers() { return {
"vp": [{
"parseText": 0
}]
}; }
};
FswVp.style = fswVpCss();
exports.fsw_vp = FswVp;