@sutton-signwriting/sgnw-components/dist/cjs/sgnw-vp.cjs.entry.js

a javascript package of web components for use with the SignWriting script.

/*!
 * The Sutton SignWriting Web Components
 */
'use strict';

var index = require('./index-bYThyFO7.js');
var swu = require('./swu-BEvxNXWk.js');
var colorWatch = require('./color-watch-BMNbpkmB.js');

const sgnwVpCss = () => `:host{writing-mode:vertical-lr;border-left:1px solid blue;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}sgnw-sign,sgnw-symbol{writing-mode:horizontal-tb;display:inline-block;vertical-align:middle;box-sizing:content-box}:host{transition:color 1ms, background-color 1ms}`;

const SgnwVp = class {
    constructor(hostRef) {
        index.registerInstance(this, hostRef);
        this.sgnw = window.sgnw;
        this.items = [];
    }
    parseText(newValue) {
        this.items = swu.swuExports.parse.text(newValue).map(val => {
            let i = swu.swuExports.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: '3bf0a8d933adc7717ea5475879399667653ee1c9', vp: this.vp }, index.h("span", { key: 'f30475de1517a15a57c9e6ae70772d95a1b0ecdf', class: "outside" }, index.h("span", { key: 'aecc1ff9efd7c6ca8fa2f6babc6846432a165cf1', class: "middle" }, index.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 index.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 index.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 index.h("div", null, item['text']);
            }
        }))))));
    }
    get el() { return index.getElement(this); }
    static get watchers() { return {
        "vp": [{
                "parseText": 0
            }]
    }; }
};
SgnwVp.style = sgnwVpCss();

exports.sgnw_vp = SgnwVp;