emoji-text.html

<!--
@license
Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<link rel="import" href="../polymer/polymer.html">
<script src="emoji-text.js"></script>

<!--
An element that translates text to emoji!

Example:

    <emoji-text>Cats love eating donuts!</emoji-text>

@group Seed Elements
@element emoji-text
@demo demo/index.html
@hero hero.svg
-->
<dom-module id="emoji-text">

  <style>
    :host {
      display: block;
      box-sizing: border-box;
    }
  </style>

  <template>
   <div id="output"></div>
   <div hidden><content id="content"></content></div>
  </template>

</dom-module>

<script>

  Polymer({

    is: 'emoji-text',

    properties: {

      /**
       * `text` defines the text we wish to emojify.
       */
      text: {
        type: String,
        value: '',
        notify: true,
        observer: '_textChanged'
      }
    },

    _updateOutput: function() {
      this.$.output.innerHTML = '';
      this.$.output.appendChild(this.textToEmoji());
    },

    attached: function() {
      this._updateOutput();
    },

    _textChanged: function() {
      this._updateOutput();
    },

    /**
     * Translate text to emoji
     *
     * If a valid `str` string is provided, we will
     * use it as input. Otherwise, textContent supplied
     * via the element's lightDOM will be used instead.
     *
     * @param {str} String to translate to emoji
     * @return {HTML} The container with emoji
     */
    textToEmoji: function(str) {

      if (typeof str === 'string') {
        this.text = str;
      } else if (!this.text) {
        this.text = this.textContent;
      }

      var text = this.text;
      var container = document.createElement('span');
      var allLines = text.split('\n');

      for (var line = 0; line < allLines.length; line++ ){
        if (allLines[line] == '')
          continue

        var words = allLines[line].split(' ');
        // Re-add the translated words.
        for (var i = 0; i < words.length; i++ ) {
          container.appendChild(translateWord(words[i]));
        }
        var newLine = document.createElement('br');
        container.appendChild(newLine);
      }

      return container;
    }

  });

</script>