chat-window.html

<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="chat-messages.html">
<link rel="import" href="chat-input.html">

<!--
CSS custom property | Description | Default
------------------- | ----------- | -------
`--chat-window` | Applied to the chat-window container | {}
`--chat-window-messages` | Applied to the `chat-messages` element | {}
`--chat-window-input` | Applied to the chat-input element | {}

See `chat-messages` and `chat-input` for additional property mixins.
-->
<dom-module id="chat-window">
  <template>
    <style>
      :host {
        display: block;
      }
      .container {
        @apply --chat-window;
      }
      chat-messages {
        @apply --chat-window-messages;
      }
      chat-input {
        @apply --chat-window-input;
      }
    </style>

    <div class="container">
      <slot name="chat-header"></slot>
      <chat-messages
        author="[[author]]"
        author-icon="[[authorIcon]]"
        others-icons="[[othersIcons]]"
        default-icon="[[defaultIcon]]"
        messages="[[messages]]"
        date-format="[[dateFormat]]"
        auto-scroll="[[autoScroll]]">
      </chat-messages>
      <slot name="chat-footer"></slot>
      <slot name="chat-input"></slot>
      <template is="dom-if" if="[[!_hasCustomInput()]]">
		    <chat-input
		      single-line="[[singleLine]]"
		      icon="[[sendIcon]]"
		      text="{{inputText}}"
		      send-on-enter="[[sendOnEnter]]"></chat-input>
      </template>
    </div>
  </template>

  <script>
    /**
     * `chat-window`
     * A simple and flexible chat window for listing messages.
     *
     * @customElement
     * @polymer
     * @demo demo/index.html
     */
    Polymer({

      is: 'chat-window',

      properties: {
        /**
         * Whether to allow single line messages only. This option has no effect
         * if using a custom input element.
         */
        singleLine: {
          type: Boolean,
          value: false,
          reflectToAttribute: true
        },

        /**
         * The value of the input field.
         */
        inputText: {
          type: String,
          notify: true
        },

        /**
         * The messages array. Each element must have three properties:
         * * `author`: The message's author
         * * `text`: The actual message
         * * `created`: The timestamp in millis the message was sent.
         */
        messages: {
          type: Array,
          value: function() { return []; }
        },

        /**
         * The author is compared to each message's author to determine how that
         * message should be displayed. If the message's author matches, the
         * default is to display it using flexbox's self-end alignment.
         */
        author: String,

        /**
         * The paper-icon-button's `icon` or a URL to use as the paper-icon-button's `src`.
         */
        sendIcon: {
          type: String,
          value: 'send'
        },

        /**
         * Whether to send the message when a user presses `enter` on the keyboard.
         * The default behavior is to send-on-enter when in single-line input mode,
         * and not send if in multiline input mode.
         */
        sendOnEnter: Boolean,

        /**
         * Whether to scroll to the bottom when the messages change.
         */
        autoScroll: {
          type: Boolean,
          value: true
        },

        /**
         * The date format to use when revealing the actual timestamp.
         * The default behavior is to use momentjs's `calendar` function.
         * See https://momentjs.com/docs/#/parsing/string-format/
         * Examples:
         *   YYYY-MM-DD HH:mm:ss
         *   MM/DD/YYYY hh:mm a
         *   Do of MMM, YYYY at hh:mm a
         */
        dateFormat: {
          type: String,
          // value: 'ddd, MMM D, YYYY h:mm a'
        },

        /**
        * The iron-icon's `icon` or a URL to use as the iron-icon's `src`.
        */
        authorIcon: {
          type: String,
          value: 'account-circle'
        },
        /**
         * Icons for other authors. Maps each author to an icon or URL.
         */
        othersIcons: Object,
        /**
         * The default icon/url to use when one isn't defined for an author.
         */
        defaultIcon: {
          type: String,
          value: 'face'
        }
      },


      _hasCustomInput: function () {
        var distributed = Polymer.dom(this).childNodes;
				for (var i = 0; i < distributed.length; i++) {
          if (distributed[i].slot == 'chat-input') {
            return true;
          }
				}
        return false;
			}
    });
  </script>
</dom-module>