@sutton-signwriting/sgnw-components/dist/collection/components/fsw-palette-symbol/fsw-palette-symbol.js

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

/*!
 * The Sutton SignWriting Web Components
 */
import { Component, Element, Prop, State, Event, Host, h } from '@stencil/core';
import { symbolSvg } from '@sutton-signwriting/font-ttf/fsw/fsw';
import draggabilly from 'draggabilly';
export class FswPaletteSymbol {
  constructor() {
    this.sgnw = window.sgnw;
  }
  paletteSymbolClickHandler() {
    this.paletteSymbolClick.emit(this.symbol);
  }
  paletteSymbolDropHandler({}, pointer) {
    this.paletteSymbolDrop.emit({ encoding: "fsw", symbol: this.symbol, x: pointer.pageX, y: pointer.pageY });
    this.el.style.top = "0";
    this.el.style.left = "0";
  }
  connectedCallback() {
    if (!this.sgnw) {
      let self = this;
      function handleSgnw() {
        self.sgnw = window.sgnw;
        window.removeEventListener("sgnw", handleSgnw, false);
      }
      window.addEventListener('sgnw', handleSgnw, false);
    }
  }
  componentDidLoad() {
    this.draggie = new draggabilly(this.el);
    this.draggie.on('staticClick', this.paletteSymbolClickHandler.bind(this));
    this.draggie.on('dragEnd', this.paletteSymbolDropHandler.bind(this));
  }
  render() {
    return (h(Host, { symbol: this.symbol, innerHTML: this.sgnw ? symbolSvg(this.symbol) : '' }));
  }
  static get is() { return "fsw-palette-symbol"; }
  static get encapsulation() { return "scoped"; }
  static get originalStyleUrls() { return {
    "$": ["fsw-palette-symbol.css"]
  }; }
  static get styleUrls() { return {
    "$": ["fsw-palette-symbol.css"]
  }; }
  static get properties() { return {
    "symbol": {
      "type": "string",
      "mutable": true,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "FSW key for symbol"
      },
      "attribute": "symbol",
      "reflect": true
    }
  }; }
  static get states() { return {
    "sgnw": {}
  }; }
  static get events() { return [{
      "method": "paletteSymbolClick",
      "name": "paletteSymbolClick",
      "bubbles": true,
      "cancelable": true,
      "composed": true,
      "docs": {
        "tags": [],
        "text": "click event for the symbol palette"
      },
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      }
    }, {
      "method": "paletteSymbolDrop",
      "name": "paletteSymbolDrop",
      "bubbles": true,
      "cancelable": true,
      "composed": true,
      "docs": {
        "tags": [],
        "text": "drop event for the signbox and sequence"
      },
      "complexType": {
        "original": "{encoding:string,symbol:string,x:number,y:number}",
        "resolved": "{ encoding: string; symbol: string; x: number; y: number; }",
        "references": {}
      }
    }]; }
  static get elementRef() { return "el"; }
}