WebCompDev / COMPONENTS

  'use strict';
  
  function _inherits(subClass, superClass) { if (typeof superClass !== 'function' && superClass !== null) { throw new TypeError('Super expression must either be null or a function, not ' + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) subClass.__proto__ = superClass; }
  
  function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError('Cannot call a class as a function'); } }
  
  (function () {
    'use strict';
  
    function L10nError(message, id, lang) {
      this.name = 'L10nError';
      this.message = message;
      this.id = id;
      this.lang = lang;
    }
    L10nError.prototype = Object.create(Error.prototype);
    L10nError.prototype.constructor = L10nError;
  
    function load(type, url) {
      return new Promise(function (resolve, reject) {
        var xhr = new XMLHttpRequest();
  
        if (xhr.overrideMimeType) {
          xhr.overrideMimeType(type);
        }
  
        xhr.open('GET', url, true);
  
        if (type === 'application/json') {
          xhr.responseType = 'json';
        }
  
        xhr.addEventListener('load', function io_onload(e) {
          if (e.target.status === 200 || e.target.status === 0) {
            resolve(e.target.response || e.target.responseText);
          } else {
            reject(new L10nError('Not found: ' + url));
          }
        });
        xhr.addEventListener('error', reject);
        xhr.addEventListener('timeout', reject);
  
        try {
          xhr.send(null);
        } catch (e) {
          if (e.name === 'NS_ERROR_FILE_NOT_FOUND') {
            reject(new L10nError('Not found: ' + url));
          } else {
            throw e;
          }
        }
      });
    }
  
    var io = {
      extra: function (code, ver, path, type) {
        return navigator.mozApps.getLocalizationResource(code, ver, path, type);
      },
      app: function (code, ver, path, type) {
        switch (type) {
          case 'text':
            return load('text/plain', path);
          case 'json':
            return load('application/json', path);
          default:
            throw new L10nError('Unknown file type: ' + type);
        }
      }
    };
  

    function fetchResource(ver, res, lang) {
      var url = res.replace('{locale}', lang.code);

      var type = res.endsWith('.json') ? 'json' : 'text';

      return io[lang.src](lang.code, ver, url, type);

    }
  
    function emit(listeners) {
      var _this = this;
  
      for (var _len = arguments.length, args = Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
        args[_key - 1] = arguments[_key];
      }
  
      var type = args.shift();
  
      if (listeners['*']) {
        listeners['*'].slice().forEach(function (listener) {
          return listener.apply(_this, args);
        });
      }
  
      if (listeners[type]) {
        listeners[type].slice().forEach(function (listener) {
          return listener.apply(_this, args);
        });
      }
    }
  
    function addEventListener(listeners, type, listener) {
      if (!(type in listeners)) {
        listeners[type] = [];
      }
      listeners[type].push(listener);
    }
  
    function removeEventListener(listeners, type, listener) {
      var typeListeners = listeners[type];
      var pos = typeListeners.indexOf(listener);
      if (pos === -1) {
        return;
      }
  
      typeListeners.splice(pos, 1);
    }
  
    var Client = (function () {
      function Client(remote) {
        _classCallCheck(this, Client);
  
        this.id = this;
        this.remote = remote;
  
        var listeners = {};
        this.on = function () {
          for (var _len2 = arguments.length, args = Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
            args[_key2] = arguments[_key2];
          }
  
          return addEventListener.apply(undefined, [listeners].concat(args));
        };
        this.emit = function () {
          for (var _len3 = arguments.length, args = Array(_len3), _key3 = 0; _key3 < _len3; _key3++) {
            args[_key3] = arguments[_key3];
          }
  
          return emit.apply(undefined, [listeners].concat(args));
        };
      }
  
      Client.prototype.method = function method(name) {
        var _remote;
  
        for (var _len4 = arguments.length, args = Array(_len4 > 1 ? _len4 - 1 : 0), _key4 = 1; _key4 < _len4; _key4++) {
          args[_key4 - 1] = arguments[_key4];
        }
  
        return (_remote = this.remote)[name].apply(_remote, args);
      };
  
      return Client;
    })();
  
    function broadcast(type, data) {
      Array.from(this.ctxs.keys()).forEach(function (client) {
        return client.emit(type, data);
      });
    }
  

    var reOverlay = /<|&#?\w+;/;
  
    var allowed = {
      elements: ['a', 'em', 'strong', 'small', 's', 'cite', 'q', 'dfn', 'abbr', 'data', 'time', 'code', 'var', 'samp', 'kbd', 'sub', 'sup', 'i', 'b', 'u', 'mark', 'ruby', 'rt', 'rp', 'bdi', 'bdo', 'span', 'br', 'wbr'],
      attributes: {
        global: ['title', 'aria-label', 'aria-valuetext', 'aria-moz-hint'],
        a: ['download'],
        area: ['download', 'alt'],
  
        input: ['alt', 'placeholder'],
        menuitem: ['label'],
        menu: ['label'],
        optgroup: ['label'],
        option: ['label'],
        track: ['label'],
        img: ['alt'],
        textarea: ['placeholder'],
        th: ['abbr']
      }
    };
  
    function overlayElement(element, translation) {
      var value = translation.value;
  
      if (typeof value === 'string') {
        if (!reOverlay.test(value)) {
          element.textContent = value;
        } else {
          var tmpl = element.ownerDocument.createElement('template');
          tmpl.innerHTML = value;
  
          overlay(element, tmpl.content);
        }
      }
  
      for (var key in translation.attrs) {
        var attrName = camelCaseToDashed(key);
        if (isAttrAllowed({ name: attrName }, element)) {
          element.setAttribute(attrName, translation.attrs[key]);
        }
      }
    }
  
    function overlay(sourceElement, translationElement) {
      var result = translationElement.ownerDocument.createDocumentFragment();
      var k = undefined,
          attr = undefined;
  
      var childElement = undefined;
      while (childElement = translationElement.childNodes[0]) {
        translationElement.removeChild(childElement);
  
        if (childElement.nodeType === childElement.TEXT_NODE) {
          result.appendChild(childElement);
          continue;
        }
  
        var index = getIndexOfType(childElement);
        var sourceChild = getNthElementOfType(sourceElement, childElement, index);
        if (sourceChild) {
          overlay(sourceChild, childElement);
          result.appendChild(sourceChild);
          continue;
        }
  
        if (isElementAllowed(childElement)) {
          var sanitizedChild = childElement.ownerDocument.createElement(childElement.nodeName);
          overlay(sanitizedChild, childElement);
          result.appendChild(sanitizedChild);
          continue;
        }
  
        result.appendChild(translationElement.ownerDocument.createTextNode(childElement.textContent));
      }
  
      sourceElement.textContent = '';
      sourceElement.appendChild(result);
  
      if (translationElement.attributes) {
        for (k = 0, attr; attr = translationElement.attributes[k]; k++) {
          if (isAttrAllowed(attr, sourceElement)) {
            sourceElement.setAttribute(attr.name, attr.value);
          }
        }
      }
    }
  
    function isElementAllowed(element) {
      return allowed.elements.indexOf(element.tagName.toLowerCase()) !== -1;
    }
  
    function isAttrAllowed(attr, element) {
      var attrName = attr.name.toLowerCase();
      var tagName = element.tagName.toLowerCase();
  
      if (allowed.attributes.global.indexOf(attrName) !== -1) {
        return true;
      }
  
      if (!allowed.attributes[tagName]) {
        return false;
      }
  
      if (allowed.attributes[tagName].indexOf(attrName) !== -1) {
        return true;
      }
  
      if (tagName === 'input' && attrName === 'value') {
        var type = element.type.toLowerCase();
        if (type === 'submit' || type === 'button' || type === 'reset') {
          return true;
        }
      }
      return false;
    }
  
    function getNthElementOfType(context, element, index) {
      var nthOfType = 0;
      for (var i = 0, child = undefined; child = context.children[i]; i++) {
        if (child.nodeType === child.ELEMENT_NODE && child.tagName === element.tagName) {
          if (nthOfType === index) {
            return child;
          }
          nthOfType++;
        }
      }
      return null;
    }
  
    function getIndexOfType(element) {
      var index = 0;
      var child = undefined;
      while (child = element.previousElementSibling) {
        if (child.tagName === element.tagName) {
          index++;
        }
      }
      return index;
    }
  
    function camelCaseToDashed(string) {
      if (string === 'ariaValueText') {
        return 'aria-valuetext';
      }
  
      return string.replace(/[A-Z]/g, function (match) {
        return '-' + match.toLowerCase();
      }).replace(/^-/, '');
    }
  
    var reHtml = /[&<>]/g;
    var htmlEntities = {
      '&': '&amp;',
      '<': '&lt;',
      '>': '&gt;'
    };
  

    function getResourceLinks(head) {
      return Array.prototype.map.call(head.querySelectorAll('link[rel="localization"]'), function (el) {
        return el.getAttribute('href');
      });
    }
  

    function setAttributes(element, id, args) {
      element.setAttribute('data-l10n-id', id);
      if (args) {
        element.setAttribute('data-l10n-args', JSON.stringify(args));
      }
    }
  
    function getAttributes(element) {
      return {
        id: element.getAttribute('data-l10n-id'),
        args: JSON.parse(element.getAttribute('data-l10n-args'))
      };
    }
  
    function getTranslatables(element) {
      var nodes = Array.from(element.querySelectorAll('[data-l10n-id]'));
  
      if (typeof element.hasAttribute === 'function' && element.hasAttribute('data-l10n-id')) {
        nodes.push(element);
      }
  
      return nodes;
    }
  

    function translateMutations(view, langs, mutations) {

      var targets = new Set();
  
      for (var _iterator = mutations, _isArray = Array.isArray(_iterator), _i = 0, _iterator = _isArray ? _iterator : _iterator[Symbol.iterator]();;) {
        var _ref;
  
        if (_isArray) {
          if (_i >= _iterator.length) break;
          _ref = _iterator[_i++];
        } else {
          _i = _iterator.next();
          if (_i.done) break;
          _ref = _i.value;
        }
  
        var mutation = _ref;
  
        switch (mutation.type) {
          case 'attributes':
            targets.add(mutation.target);
            break;
          case 'childList':
            for (var _iterator2 = mutation.addedNodes, _isArray2 = Array.isArray(_iterator2), _i2 = 0, _iterator2 = _isArray2 ? _iterator2 : _iterator2[Symbol.iterator]();;) {
              var _ref2;
  
              if (_isArray2) {
                if (_i2 >= _iterator2.length) break;
                _ref2 = _iterator2[_i2++];
              } else {
                _i2 = _iterator2.next();
                if (_i2.done) break;
                _ref2 = _i2.value;
              }
  
              var addedNode = _ref2;
  
              if (addedNode.nodeType === addedNode.ELEMENT_NODE) {
                if (addedNode.childElementCount) {
                  getTranslatables(addedNode).forEach(targets.add.bind(targets));
                } else {
                  if (addedNode.hasAttribute('data-l10n-id')) {
                    targets.add(addedNode);
                  }
                }
              }
            }
            break;
        }
      }
  
      if (targets.size === 0) {
        return;
      }
  

      translateElements(view, langs, Array.from(targets));

    }
  

    function _translateFragment(view, langs, frag) {
      return translateElements(view, langs, getTranslatables(frag));

    }
  

    function getElementsTranslation(view, langs, elems) {

      var keys = elems.map(function (elem) {
        var id = elem.getAttribute('data-l10n-id');
        var args = elem.getAttribute('data-l10n-args');
        return args ? [id, JSON.parse(args.replace(reHtml, function (match) {
          return htmlEntities[match];
        }))] : id;
      });
  

      return view._resolveEntities(langs, keys);

    }
  

    function translateElements(view, langs, elements) {
      return getElementsTranslation(view, langs, elements).then(function (translations) {

        return applyTranslations(view, elements, translations);
      });
    }
  
    function applyTranslations(view, elems, translations) {

      view._disconnect();

      for (var i = 0; i < elems.length; i++) {
        overlayElement(elems[i], translations[i]);
      }

      view._observe();

    }
  
    if (typeof NodeList === 'function' && !NodeList.prototype[Symbol.iterator]) {
      NodeList.prototype[Symbol.iterator] = Array.prototype[Symbol.iterator];
    }
  
    function documentReady() {
      if (document.readyState !== 'loading') {
        return Promise.resolve();
      }
  
      return new Promise(function (resolve) {
        document.addEventListener('readystatechange', function onrsc() {
          document.removeEventListener('readystatechange', onrsc);
          resolve();
        });
      });
    }
  
    function getDirection(code) {
      var tag = code.split('-')[0];
      return ['ar', 'he', 'fa', 'ps', 'ur'].indexOf(tag) >= 0 ? 'rtl' : 'ltr';
    }
  

    var observerConfig = {
      attributes: true,
      characterData: false,
      childList: true,
      subtree: true,
      attributeFilter: ['data-l10n-id', 'data-l10n-args']
    };

    var readiness = new WeakMap();

  
    var View = (function () {
      function View(client, doc) {
        var _this2 = this;
  
        _classCallCheck(this, View);
  

        this._doc = doc;

        this.pseudo = {
          'fr-x-psaccent': createPseudo(this, 'fr-x-psaccent'),
          'ar-x-psbidi': createPseudo(this, 'ar-x-psbidi')
        };
  

        this._interactive = documentReady().then(function () {

          return init(_this2, client);
        });

        var observer = new MutationObserver(onMutations.bind(this));
        this._observe = function () {
          return observer.observe(doc, observerConfig);
        };
        this._disconnect = function () {
          return observer.disconnect();
        };

        var translateView = function (langs) {
          return translateDocument(_this2, langs);

        };

        client.on('translateDocument', translateView);
        this.ready = this._interactive.then(function (client) {
          return client.method('resolvedLanguages');
        }).then(translateView);
      }

      View.prototype.requestLanguages = function requestLanguages(langs, global) {
        return this._interactive.then(function (client) {
          return client.method('requestLanguages', langs, global);
        });

      };
  

      View.prototype._resolveEntities = function _resolveEntities(langs, keys) {

        return this._interactive.then(function (client) {

          return client.method('resolveEntities', client.id, langs, keys);

        });
      };
  
      View.prototype.formatValue = function formatValue(id, args) {
        return this._interactive.then(function (client) {
          return client.method('formatValues', client.id, [[id, args]]);
        }).then(function (values) {
          return values[0];
        });
      };
  
      View.prototype.formatValues = function formatValues() {

        for (var _len5 = arguments.length, keys = Array(_len5), _key5 = 0; _key5 < _len5; _key5++) {
          keys[_key5] = arguments[_key5];

        }
  
        return this._interactive.then(function (client) {
          return client.method('formatValues', client.id, keys);
        });
      };
  
      View.prototype.translateFragment = function translateFragment(frag) {

        var _this3 = this;

        return this._interactive.then(function (client) {
          return client.method('resolvedLanguages');
        }).then(function (langs) {
          return _translateFragment(_this3, langs, frag);
        });

      };
  
      return View;
    })();
  
    View.prototype.setAttributes = setAttributes;
    View.prototype.getAttributes = getAttributes;
  
    function createPseudo(view, code) {
      return {
        getName: function () {
          return view._interactive.then(function (client) {
            return client.method('getName', code);
          });
        },
        processString: function (str) {
          return view._interactive.then(function (client) {
            return client.method('processString', code, str);
          });
        }
      };
    }
  
    function init(view, client) {

      view._observe();
      return client.method('registerView', client.id, getResourceLinks(view._doc.head)).then(function () {
        return client;

      });
    }
  

    function onMutations(mutations) {
      var _this4 = this;

      return this._interactive.then(function (client) {
        return client.method('resolvedLanguages');
      }).then(function (langs) {
        return translateMutations(_this4, langs, mutations);
      });

    }
  

    function translateDocument(view, langs) {
      var html = view._doc.documentElement;

      if (readiness.has(html)) {
        return _translateFragment(view, langs, html).then(function () {

          return setAllAndEmit(html, langs);
        });
      }
  

      var translated = langs[0].code === html.getAttribute('lang') ? Promise.resolve() : _translateFragment(view, langs, html).then(function () {

        return setLangDir(html, langs);
      });
  
      return translated.then(function () {
        setLangs(html, langs);

        readiness.set(html, true);

      });
    }
  
    function setLangs(html, langs) {
      var codes = langs.map(function (lang) {
        return lang.code;
      });
      html.setAttribute('langs', codes.join(' '));
    }
  
    function setLangDir(html, langs) {
      var code = langs[0].code;
      html.setAttribute('lang', code);
      html.setAttribute('dir', getDirection(code));
    }
  
    function setAllAndEmit(html, langs) {
      setLangDir(html, langs);
      setLangs(html, langs);
      html.parentNode.dispatchEvent(new CustomEvent('DOMRetranslated', {
        bubbles: false,
        cancelable: false
      }));
    }
  

    var MAX_PLACEABLES$1 = 100;

    var L20nParser = {
      parse: function (emit, string) {
        this._source = string;
        this._index = 0;
        this._length = string.length;
        this.entries = Object.create(null);
        this.emit = emit;

        return this.getResource();
      },

      getResource: function () {
        this.getWS();
        while (this._index < this._length) {
          try {
            this.getEntry();
          } catch (e) {
            if (e instanceof L10nError) {
              this.getJunkEntry();
              if (!this.emit) {
                throw e;
              }
            } else {
              throw e;
            }
          }

          if (this._index < this._length) {
            this.getWS();
          }
        }

        return this.entries;
      },

      getEntry: function () {
        if (this._source[this._index] === '<') {
          ++this._index;
          var id = this.getIdentifier();
          if (this._source[this._index] === '[') {
            ++this._index;
            return this.getEntity(id, this.getItemList(this.getExpression, ']'));
          }
          return this.getEntity(id);
        }

        if (this._source.startsWith('/*', this._index)) {
          return this.getComment();
        }

        throw this.error('Invalid entry');
      },

      getEntity: function (id, index) {
        if (!this.getRequiredWS()) {
          throw this.error('Expected white space');

        }

        var ch = this._source[this._index];
        var value = this.getValue(ch, index === undefined);
        var attrs = undefined;

        if (value === undefined) {
          if (ch === '>') {
            throw this.error('Expected ">"');
          }
          attrs = this.getAttributes();
        } else {
          var ws1 = this.getRequiredWS();
          if (this._source[this._index] !== '>') {
            if (!ws1) {
              throw this.error('Expected ">"');
            }
            attrs = this.getAttributes();
          }
        }

        ++this._index;

        if (id in this.entries) {
          throw this.error('Duplicate entry ID "' + id, 'duplicateerror');
        }
        if (!attrs && !index && typeof value === 'string') {
          this.entries[id] = value;
        } else {
          this.entries[id] = {
            value: value,
            attrs: attrs,
            index: index
          };
        }
      },

      getValue: function () {
        var ch = arguments.length <= 0 || arguments[0] === undefined ? this._source[this._index] : arguments[0];
        var optional = arguments.length <= 1 || arguments[1] === undefined ? false : arguments[1];

        switch (ch) {
          case '\'':
          case '"':
            return this.getString(ch, 1);
          case '{':
            return this.getHash();
        }

        if (!optional) {
          throw this.error('Unknown value type');
        }

        return;
      },

      getWS: function () {
        var cc = this._source.charCodeAt(this._index);
  
        while (cc === 32 || cc === 10 || cc === 9 || cc === 13) {
          cc = this._source.charCodeAt(++this._index);

        }

      },

      getRequiredWS: function () {
        var pos = this._index;
        var cc = this._source.charCodeAt(pos);

        while (cc === 32 || cc === 10 || cc === 9 || cc === 13) {
          cc = this._source.charCodeAt(++this._index);
        }
        return this._index !== pos;
      },

      getIdentifier: function () {
        var start = this._index;
        var cc = this._source.charCodeAt(this._index);
  
        if (cc >= 97 && cc <= 122 || cc >= 65 && cc <= 90 || cc === 95) {
          cc = this._source.charCodeAt(++this._index);

        } else {

          throw this.error('Identifier has to start with [a-zA-Z_]');
        }

        while (cc >= 97 && cc <= 122 || cc >= 65 && cc <= 90 || cc >= 48 && cc <= 57 || cc === 95) {
          cc = this._source.charCodeAt(++this._index);
        }

        return this._source.slice(start, this._index);
      },
  
      getUnicodeChar: function () {
        for (var i = 0; i < 4; i++) {
          var cc = this._source.charCodeAt(++this._index);
          if (cc > 96 && cc < 103 || cc > 64 && cc < 71 || cc > 47 && cc < 58) {
            continue;
          }
          throw this.error('Illegal unicode escape sequence');

        }

        this._index++;
        return String.fromCharCode(parseInt(this._source.slice(this._index - 4, this._index), 16));
      },

      stringRe: /"|'|{{|\\/g,
      getString: function (opchar, opcharLen) {
        var body = [];
        var placeables = 0;

        this._index += opcharLen;
        var start = this._index;

        var bufStart = start;
        var buf = '';

        while (true) {
          this.stringRe.lastIndex = this._index;
          var match = this.stringRe.exec(this._source);
  
          if (!match) {
            throw this.error('Unclosed string literal');
          }
  
          if (match[0] === '"' || match[0] === '\'') {
            if (match[0] !== opchar) {
              this._index += opcharLen;
              continue;
            }
            this._index = match.index + opcharLen;
            break;
          }
  
          if (match[0] === '{{') {
            if (placeables > MAX_PLACEABLES$1 - 1) {
              throw this.error('Too many placeables, maximum allowed is ' + MAX_PLACEABLES$1);
            }
            placeables++;
            if (match.index > bufStart || buf.length > 0) {
              body.push(buf + this._source.slice(bufStart, match.index));
              buf = '';
            }
            this._index = match.index + 2;
            this.getWS();
            body.push(this.getExpression());
            this.getWS();
            this._index += 2;
            bufStart = this._index;
            continue;
          }
  
          if (match[0] === '\\') {
            this._index = match.index + 1;
            var ch2 = this._source[this._index];
            if (ch2 === 'u') {
              buf += this._source.slice(bufStart, match.index) + this.getUnicodeChar();
            } else if (ch2 === opchar || ch2 === '\\') {
              buf += this._source.slice(bufStart, match.index) + ch2;
              this._index++;
            } else if (this._source.startsWith('{{', this._index)) {
              buf += this._source.slice(bufStart, match.index) + '{{';
              this._index += 2;
            } else {
              throw this.error('Illegal escape sequence');
            }
            bufStart = this._index;
          }

        }

  
        if (body.length === 0) {
          return buf + this._source.slice(bufStart, this._index - opcharLen);

        }

  
        if (this._index - opcharLen > bufStart || buf.length > 0) {
          body.push(buf + this._source.slice(bufStart, this._index - opcharLen));

        }

        return body;
      },

      getAttributes: function () {
        var attrs = Object.create(null);

        while (true) {
          this.getAttribute(attrs);
          var ws1 = this.getRequiredWS();
          var ch = this._source.charAt(this._index);
          if (ch === '>') {
            break;
          } else if (!ws1) {
            throw this.error('Expected ">"');
          }
        }
        return attrs;
      },

      getAttribute: function (attrs) {
        var key = this.getIdentifier();
        var index = undefined;

        if (this._source[this._index] === '[') {
          ++this._index;
          this.getWS();
          index = this.getItemList(this.getExpression, ']');

        }

        this.getWS();
        if (this._source[this._index] !== ':') {
          throw this.error('Expected ":"');
        }
        ++this._index;
        this.getWS();
        var value = this.getValue();

        if (key in attrs) {
          throw this.error('Duplicate attribute "' + key, 'duplicateerror');
        }

        if (!index && typeof value === 'string') {
          attrs[key] = value;
        } else {
          attrs[key] = {
            value: value,
            index: index
          };
        }
      },

      getHash: function () {
        var items = Object.create(null);

        ++this._index;
        this.getWS();

        var defKey = undefined;
  
        while (true) {
          var _getHashItem = this.getHashItem();
  
          var key = _getHashItem[0];
          var value = _getHashItem[1];
          var def = _getHashItem[2];
  
          items[key] = value;
  
          if (def) {
            if (defKey) {
              throw this.error('Default item redefinition forbidden');
            }
            defKey = key;
          }
          this.getWS();
  
          var comma = this._source[this._index] === ',';
          if (comma) {
            ++this._index;
            this.getWS();
          }
          if (this._source[this._index] === '}') {
            ++this._index;
            break;
          }
          if (!comma) {
            throw this.error('Expected "}"');
          }