@sutton-signwriting/sgnw-components/dist/components/fsw-vp.js

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

/*!
 * The Sutton SignWriting Web Components
 */
import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
import { f as fsw } from './fsw2.js';
import { s as style } from './style.js';
import { c as cssValues } from './global.js';
import { d as defineCustomElement$3 } from './fsw-sign2.js';
import { d as defineCustomElement$2 } from './fsw-symbol2.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}";

const FswVp$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
  constructor() {
    super();
    this.__registerHost();
    this.__attachShadow();
    this.sgnw = window.sgnw;
    this.items = [];
  }
  parseText(newValue) {
    this.items = fsw.parse.text(newValue).map(val => {
      let i = fsw.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 = style.compose({
      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']);
      }
    }))))));
  }
  get el() { return this; }
  static get watchers() { return {
    "vp": ["parseText"]
  }; }
  static get style() { return fswVpCss; }
}, [1, "fsw-vp", {
    "vp": [1537],
    "colorize": [1540],
    "sgnw": [32],
    "items": [32]
  }]);
function defineCustomElement$1() {
  if (typeof customElements === "undefined") {
    return;
  }
  const components = ["fsw-vp", "fsw-sign", "fsw-symbol"];
  components.forEach(tagName => { switch (tagName) {
    case "fsw-vp":
      if (!customElements.get(tagName)) {
        customElements.define(tagName, FswVp$1);
      }
      break;
    case "fsw-sign":
      if (!customElements.get(tagName)) {
        defineCustomElement$3();
      }
      break;
    case "fsw-symbol":
      if (!customElements.get(tagName)) {
        defineCustomElement$2();
      }
      break;
  } });
}

const FswVp = FswVp$1;
const defineCustomElement = defineCustomElement$1;

export { FswVp, defineCustomElement };