myscript-languages-element.js

/* eslint-disable no-underscore-dangle,no-undef */
import { html, PolymerElement } from '@polymer/polymer';
import * as MyScript from 'myscript/dist/myscript.esm';
/**
`myscript-languages-element` is a web component to retrieve CDK available languages.

    <myscript-languages-element
        type="TEXT"
        applicationkey="YOUR MYSCRIPT DEVELOPER APPLICATION KEY"
        hmackey="YOUR MYSCRIPT DEVELOPER HMAC KEY">
    </myscript-languages-element>

@demo src/demo-app/examples/non-version-specific/get_languages.html Get languages [V4]
@demo src/demo-app/examples/non-version-specific/get_languages_programmatic.html Get languages programmatically [V4]
*/
class MyScriptLanguagesElement extends PolymerElement {
  static get template() {
    return html`
        <style>
            :host {
                contain: content;
                box-sizing: border-box;
                display: inline-block;
            }

            [hidden] {
                display: none !important;
            }

            select {
                width: auto;
                padding: 0 36px 0 12px;
                color: #131F26;
                background:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTgiIGhlaWdodD0iMTQiIHZpZXdCb3g9IjAgMCAxOCAxNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxwYXRoIGQ9Ik00LjQyMi4yNmMtLjIzMy0uMzM3LS42MS0uMzM3LS44NDQgMEwuMTc1IDUuMTdDLS4xNDIgNS42MjguMDQ4IDYgLjYxIDZoNi43OGMuNTU4IDAgLjc1NC0uMzcuNDM1LS44M0w0LjQyMi4yNnptLjAyIDEzLjQ3Yy0uMjM2LjM0Mi0uNjE4LjM0Ny0uODUuMDFMLjE2NyA4LjgxOEMtLjE0NiA4LjM2Ny4wNDggOCAuNjA4IDhoNi43ODNjLjU1OCAwIC43NTUuMzcuNDM3LjgzbC0zLjM4NSA0Ljl6IiBmaWxsPSIjMTMxRjI2Ii8+PC9nPjwvc3ZnPg==) right center no-repeat #fff;
                -webkit-appearance: none;
                appearance: none;
                height: 2.625rem;
                font: 600 16px "Source Sans Pro",sans-serif;
                border: 1px solid #CED5D9;
                border-radius: 3px;
                -webkit-tap-highlight-color: transparent;
            }

            select:focus {
                padding: 0 35px 0 11px;
                outline: 0;
                border: 2px solid #1a9fff;
                box-shadow: 0 1px 1px 0 rgba(0,0,0,.16);
            }
        </style>
        <select disabled="[[ unloaded ]]" hidden="[[ !select ]]" on-change="_selectListener"></select>
`;
  }

  static get is() {
    return 'myscript-languages-element';
  }

  static get properties() {
    return {
      /**
           * <b>not mutable</b><br />
           * The current recognition type (e.g. TEXT or ANALYZER)
           */
      type: {
        type: String,
        reflectToAttribute: true,
        value: 'TEXT'
      },
      /**
           * Scheme to use to connect to MyScript Cloud or Server. (https or http)
           */
      scheme: {
        type: String,
        reflectToAttribute: true,
        value: 'https'
      },
      /**
           * The current recognition service host.
           */
      host: {
        type: String,
        reflectToAttribute: true,
        value: 'cloud.myscript.com'
      },
      /**
           * Cloud API version to use.
           */
      apiversion: {
        type: String,
        reflectToAttribute: true,
        value: 'V4'
      },
      /**
           * Application key to use for recognition on MyScript handwriting recognition server.<br />
           * You have to create your own MyScript Developer account at http://dev.myscript.com and then generate your application key at http://cloud.myscript.com. See the Developer Guide to learn how to register.<br /><br />
           * <b>Warning</b>: This parameter is <b>mandatory</b> and its value should be a string.
           */
      applicationkey: {
        type: String,
        reflectToAttribute: true
      },
      /**
           * Language list sorts by values parameter. If false, language list sort by canonical name
           */
      sortbyvalue: {
        type: Boolean,
        reflectToAttribute: true,
        value: true
      },
      /**
           * Languages List
           */
      languages: {
        type: Array,
        value: [],
        notify: true
      },
      /**
           * Properties to set when you wish to set attributes in javascript. unloaded attributes should be removed once all properties are set.
           * (see demo/get_languages_programmatic.html for a better understanding)
           */
      unloaded: {
        type: Boolean,
        value: false,
        notify: true,
        reflectToAttribute: true,
        observer: '_unloadedChanged'
      },
      /**
           * Set the additional configuration used to feed MyScript ink Paper (Structure of object as defined in MyScriptjs MyScriptJSOptions.js file)
           * Configuration values are taken into account when myscript-common-element is attach to the dom and when unloaded is set to false.
           * Configuration values are not reflected to myscript-languages-element attributes plus attributes values are always taken into account before configuration values (see demo/programmatic_init.html for a better understanding).
           */
      configuration: {
        type: Object,
        notify: true
      },
      /**
           * True to display console output, false otherwise.
           */
      debug: {
        type: Boolean,
        value: false,
        reflectToAttribute: true
      },
      /**
           * If set to true, display the language select.
           */
      select: {
        type: Boolean,
        reflectToAttribute: true,
        value: false,
        notify: true
      },
      /**
           * The recognition language used by the recognition process.
           */
      language: {
        type: String,
        notify: true,
        reflectToAttribute: true,
        value: 'en_US'
      }
    };
  }

  static _generateConfiguration(configuration, language, triggerdelay, processdelay, type, protocol, apiversion, scheme, host, applicationkey, hmackey) {
    // FIXME: find a way to do a proper deep merge
    const conf = Object.assign({}, configuration);
    if (!conf.triggers) {
      conf.triggers = {};
    }
    if (!conf.recognitionParams) {
      conf.recognitionParams = {};
    }
    if (!conf.recognitionParams.server) {
      conf.recognitionParams.server = {};
    }
    if (!conf.recognitionParams.v3) {
      conf.recognitionParams.v3 = {};
    }
    if (!conf.recognitionParams.v3.textParameter) {
      conf.recognitionParams.v3.textParameter = {};
    }
    if (!conf.recognitionParams.v3.textParameter.textProperties) {
      conf.recognitionParams.v3.textParameter.textProperties = {};
    }
    if (!conf.recognitionParams.v4) {
      conf.recognitionParams.v4 = {};
    }
    if (!conf.recognitionParams.v4.text) {
      conf.recognitionParams.v4.text = {};
    }
    if (language) {
      conf.recognitionParams.v3.textParameter.language = language;
      conf.recognitionParams.v4.lang = language;
    }
    if (triggerdelay) {
      conf.triggerDelay = triggerdelay;
    }
    if (processdelay) {
      conf.processDelay = processdelay;
    }
    if (protocol) {
      conf.recognitionParams.protocol = protocol;
      conf.triggers.exportContent = protocol === 'REST' ? 'QUIET_PERIOD' : 'POINTER_UP';
    }
    if (type) {
      conf.recognitionParams.type = type;
    }
    if (apiversion) {
      conf.recognitionParams.apiVersion = apiversion;
    }
    if (scheme) {
      conf.recognitionParams.server.scheme = scheme;
    }
    if (host) {
      conf.recognitionParams.server.host = host;
    }
    if (applicationkey) {
      conf.recognitionParams.server.applicationKey = applicationkey;
    }
    if (hmackey) {
      conf.recognitionParams.server.hmacKey = hmackey;
    }
    return conf;
  }

  _buildConfiguration() {
    return MyScriptLanguagesElement._generateConfiguration(
      this.configuration,
      this.language,
      this.triggerdelay,
      this.processdelay,
      this.type,
      this.protocol,
      this.apiversion,
      this.scheme,
      this.host,
      this.applicationkey,
      this.hmackey
    );
  }

  _selectListener(event) {
    this.languages = this.languages.map(language => Object.assign(language, {
      selected: language.value === event.target.value
    }));
    this.language = this.languages.find(language => language.selected);
    this.dispatchEvent(new CustomEvent('change', {
      detail: this.languages
    }));
  }

  constructor() {
    super();
    this.logger = MyScript.LoggerConfig.getLogger('languages-element');
    this.logger.setLevel(this.debug ? 'DEBUG' : 'ERROR', false);
    Object
      .keys(MyScript.Constants.Logger)
      .forEach((key) => {
        MyScript.LoggerConfig
          .getLogger(MyScript.Constants.Logger[key])
          .setLevel(this.debug ? 'DEBUG' : 'ERROR', false);
      });
    this.configuration = this._buildConfiguration(); // Build default configuration
  }

  connectedCallback() {
    super.connectedCallback();
    this.selectElement = this.shadowRoot.querySelector('select');
    this._unloadedChanged(this.unloaded);
    this.logger.info('languages connected');
  }

  disconnectedCallback() {
    super.disconnectedCallback();
    this.logger.info('languages disconnected');
  }

  _unloadedChanged(unloaded) {
    if (unloaded === false && (this.select === true ? this.selectElement : true)) {
      this.logger.trace('unloaded changed', unloaded);
      this._getLanguages();
    }
  }

  _getLanguages() {
    const res = MyScript.getAvailableLanguageList();
    this.languages = Object
      .keys(res.result)
      .map(key => ({
        value: key,
        description: res.result[key],
        selected: this.language === key
      }));

    this.languages.forEach((language) => {
      this.selectElement.options[this.selectElement.options.length] = new Option(language.description, language.value, language.selected, language.selected);
    });
    this.selectElement.disabled = false;
    this.dispatchEvent(new CustomEvent('change', {
      detail: this.languages
    }));
    return this.languages;
  }
}

customElements.define(MyScriptLanguagesElement.is, MyScriptLanguagesElement);