gr-imagare/gr-imagare-inline.js

/**
 * @license
 * Copyright (C) 2016 The Android Open Source Project
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

const LINK_DECORATIONS = {
  NONE: 1,
  INLINE: 2,
  TOOLTIP: 3,
};

class GrImagareInline extends Polymer.GestureEventListeners(
    Polymer.LegacyElementMixin(
        Polymer.Element)) {
  /** @returns {?} template for this component */
  static get template() { return Polymer.html``; }

  /** @returns {string} name of the component */
  static get is() { return 'gr-imagare-inline'; }

  /**
   * Defines properties of the component
   *
   * @returns {?}
   */
  static get properties() {
    return {
      _expandedObserver: MutationObserver,
      _messageAddedObserver: MutationObserver,
      _messages: Object,
      _link_decoration: Number,
      _pattern: String,
      _decorator_fn: Function,
    };
  }

  attached() {
    super.attached();
    this._getAccountPrefs().then(() => {
      if (this._link_decoration === LINK_DECORATIONS.NONE) {
        return;
      }

      this._expandedObserver = new MutationObserver(mutations => {
        mutations.forEach(mut => {
          if (!mut.target.classList.contains('expanded')) {
            return;
          }
          const links = this._getLinksFromMessage(mut.target);

          if (!links) {
            return;
          }

          for (const link of links) {
            this._decorator_fn(link);
          }
        });
      });

      this._messageAddedObserver = new MutationObserver(mutations => {
        mutations.forEach(mut => {
          mut.addedNodes.forEach(node => {
            if (node.tagName === 'GR-MESSAGE') {
              this._addExpandedObservers(node);
            }
          });
        });
      });

      this._messageAddedObserver.observe(
          util.querySelector(document.body, 'gr-messages-list'),
          {
            childList: true,
          });

      this._addObserversToMessages();
    });
  }

  detached() {
    super.detached();
    this._expandedObserver.disconnect();
    this._messageAddedObserver.disconnect();
  }

  _addObserversToMessages() {
    this._messages = this._getMessages();

    if (!this._messages) {
      return;
    }

    for (const message of this._messages) {
      this._addExpandedObservers(message);
    }
  }

  _addExpandedObservers(message) {
    this._expandedObserver.observe(message, {
      attributes: true,
      attributeOldValue: true,
      attributFilter: ['class'],
    });
  }

  _getAccountPrefs() {
    return this.plugin.restApi('/accounts/self/imagare~preference')
        .get('')
        .then(prefs => {
          if (!prefs || !prefs.link_decoration) {
            this._link_decoration = LINK_DECORATIONS.NONE;
            this._pattern = '.*';
          } else {
            this._link_decoration = LINK_DECORATIONS[
                prefs.link_decoration.toUpperCase()
            ];
            this._pattern = prefs.pattern || '.*';
          }

          switch (this._link_decoration) {
            case LINK_DECORATIONS.INLINE:
              this._decorator_fn = this._insertImage.bind(this);
              break;
            case LINK_DECORATIONS.TOOLTIP:
              this._decorator_fn = this._addTooltip.bind(this);
              break;
            case LINK_DECORATIONS.NONE:
            default:
              this._decorator_fn = () => {};
          }
        });
  }

  _getMessages() {
    const messageList = util.querySelector(document.body, 'gr-messages-list');
    if (messageList) {
      return util.querySelectorAll(messageList, 'gr-message');
    }
  }

  _getLinksFromMessage(message) {
    let links = [];
    const linkedTexts = util.querySelectorAll(message, 'gr-linked-text');
    for (const e of linkedTexts) {
      const aTags = util.querySelectorAll(e, 'a');
      if (aTags && aTags.length > 0) {
        for (const a of aTags) {
          if (util.querySelectorAll(a, 'img').length > 0) {
            continue;
          }
          if (!a.href.match(this._pattern)) {
            continue;
          }

          links = links.concat(a);
        }
      }
    }
    return links.length > 0 ? links : null;
  }

  _createImage(url) {
    const img = document.createElement('img');
    img.setAttribute('src', url);
    img.setAttribute('style', 'max-width: 100%; height: auto;');

    return img;
  }

  _insertImage(link) {
    if (!link) {
      return;
    }

    link.replaceWith(this._createImage(link.href));
  }

  _addTooltip(link) {
    if (!link) {
      return;
    }

    link.onmouseover = event => {
      const img = this._createImage(link.href);
      img.onmouseout = event => {
        event.target.replaceWith(link);
      };

      event.target.replaceWith(img);
    };
  }
}

customElements.define(GrImagareInline.is, GrImagareInline);