px-alert-message.html

<!--
Copyright (c) 2018, General Electric

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.
-->

<link rel="import" href="../polymer/polymer.html"/>
<link rel="import" href="../px-icon-set/px-icon-set-navigation.html"/>
<link rel="import" href="../px-icon-set/px-icon.html"/>
<link rel="import" href="../app-localize-behavior/app-localize-behavior.html"/>
<link rel="import" href="../px-alert-label/px-alert-label.html"/>
<link rel="import" href="css/px-alert-message-styles.html"/>

<!--

### Usage

    <px-alert-message
        type="important"
        message-title="Heads up!"
        message="This definitely needs our attention."
        action="https://www.predix.io/"
        auto-dismiss="5000"
        language="en">
    </px-alert-message>

With custom icon instead of the default severity badges:

    <px-alert-message type="information" message-title="Oops!" hide-badge>
      <px-icon icon="px-fea:analysis" style="color:white"></px-icon>
    </px-alert-message>

With custom content instead of the title/message:

    <px-alert-message type="information">
      <table slot="content">
        ...
      </table>
    </px-alert-message>

### Styling
The following custom properties are available for styling:

Custom property | Description
:----------------|:-------------
`--px-alert-message-background-color` | Background color for the body of the alert
`--px-alert-message-text-color` | Text color for the title and message
`--px-alert-message-color--important` | Status color for an 'important' alert
`--px-alert-message-color--warning` | Status color for a 'warning' alert
`--px-alert-message-color--error` | Status color for an 'error' alert
`--px-alert-message-color--information` | Status color for an 'information' alert
`--px-alert-message-dismiss-icon-color` | Color of the dismiss icon

@element px-alert-message
@blurb Alert message
@homepage index.html
@demo demo.html
-->
<dom-module id="px-alert-message">
  <template>
    <style include="px-alert-message-styles"></style>

    <div id="alert" class="alert-message shadow-notification flex flex--left flex--stretch" on-animationend="_handleAnimationEnd">
      <template is="dom-if" if="{{ !_isTrue(type, 'more') }}">
        <div class$="severity flex flex--center {{type}}">
          <template is="dom-if" if="{{ !_isTrue(type, 'custom') }}">
            <template is="dom-if" if="{{ !hideBadge }}">
              <px-alert-label id="icon" type="{{type}}" label="{{_getLabel(type, hideSeverity)}}" badge></px-alert-label>
            </template>
          </template>
          <slot></slot>
        </div>
      </template>
      <div class="message-column flex flex--middle">
        <div class="message-container">
          <slot name="content">
            <div class$="[[_getMessageClassNames(type, expanded)]]" id="message">
              <span class="title">{{ messageTitle }}</span>
              <span>{{ message }}</span>
            </div>
          </slot>
          <span id="showMoreButton" class$="[[_getShowMoreClassNames(overset)]]" hidden$="[[!overset]]">[[_showBtnText]]</span>
        </div>
      </div>
      <template is="dom-if" if="{{ action }}">
        <div class="action">
          <template is="dom-if" if="{{ _isTrue(action, 'dismiss') }}">
            <button id="dismissButton" class="btn btn--bare dismiss" on-click="_action">
              <px-icon icon="px-nav:close"></px-icon>
            </button>
          </template>
          <template is="dom-if" if="{{ !_isTrue(action, 'dismiss') }}">
            <button id="actionButton" class="btn btn--tertiary" on-click="_action">[[_actionText]]</button>
          </template>
        </div>
      </template>

    </div>
  </template>
</dom-module>

<script>
  Polymer({

    is: 'px-alert-message',
    /**
    * Use extension of app-localize-behavior to implement localization.
    */
    behaviors: [
       Polymer.AppLocalizeBehavior
    ],
    properties: {
    /**
       * A valid IETF language tag as a string that `app-localize-behavior` will
       * use to localize this component.
       *
       * See https://github.com/PolymerElements/app-localize-behavior for API
       * documentation and more information.
       */
      language: {
        type: String,
        value: 'en'
      },
      /**
      * Use the key for localization if value for  language is missing. Should
      * always be true for  our components
      */
      useKeyIfMissing: {
        type: Boolean,
        value: true
      },
      resources: {
        type: Object,
        value: function() {
          return {
            'en': {
              "Show More": "Show More",
              "OK": "OK",
              "Open": "Open"
            }
          }
        }
      },
    /**
     * Defines the alert level, reflected in the badge.
     *
     * The following options are available:
     *
     * - `important` - red triangle labeled 1
     * - `warning`- orange diamond labeled 2
     * - `error` - yellow square labeled 3
     * - `information` - blue circle labeled 4
     * - `unknown` - gray circle labeled 5
     * - `custom` - white background, no badge
     * - `more` - allows for a message indicating that there are more messages in the queue
     *
     * @default information
     */
    type: {
      type: String,
      reflect: true,
      value: 'information'
    },
    /**
     * The title of the alert message, displayed in bold.
     */
    messageTitle: {
      type: String,
      observer: '_checkMessageLength'
    },
    /**
     * The body of the alert message.
     */
    message: {
      type: String,
      observer: '_checkMessageLength'
    },
    /**
     * Automatically dismisses the alert message after a specified amount of time.
     */
    autoDismiss: {
      type: Number,
      observer: 'setAutoDismiss'
    },
    /**
    * User interaction on the right hand side of the message box:
    * - `dismiss` - displays (x) to dismiss
    * - `acknowledge` - displays (OK) to dismiss
    * - `URL` - string containing http url to be opened, displays (Open).
    */
    action: {
      type: String,
      reflect: true
    },
    /**
    * If set to true, the white cutout severity badge will not be displayed in the left
    * side of the alert message. The `type` property can still be used to dictate
    * a background color, and a custom icon can be passed in as a child of the alert.
    */
    hideBadge: {
      type: Boolean,
      value: false
    },
    /**
    * If set to true, the default numeric indicators will not be displayed
    * for the badges in the left side of the alert.
    */
    hideSeverity: {
      type: Boolean,
      value: false
    },
    /**
     * Gets the text for the action buttons.
     */
    _actionText: {
      type: String,
      computed: '_computeActionText(action, language, resources)'
    },
    /**
     * Stores the value to be displayed in the show more/show less action text
     */
     _showBtnText: {
       type: String,
       computed: '_computeShowBtnText(expanded, language, resources)'
     },
     /**
      * When `true` the alert message is visible. Otherwise, the alert message
      * will be hidden. Listen for updates to determine if the user has
      * dismissed the message or it was auto dismissed. Set the value to
      * show or hide the message programatically.
      */
     visible: {
       type: Boolean,
       value: false,
       notify: true,
       observer: '_handleVisibleChanged'
     },
     /**
      * Set to `true` to disable showing the alert message when it is first
      * attached to the DOM. The alert message can be shown by toggling
      * the `visible` attribute.
      */
     disableAutoShow: {
       type: Boolean,
       value: false
     },
     /**
      * If the alert `messageTitle` and `message` do not fit in the container,
      * the message is partially hidden. When the user taps the "Show More" or
      * "Show Less" button this property will be updated. Set the value to
      * expand or collapse the message programatically.
      * Set to `true` to expand the full
      * message. Will be automatically set when the user taps the Show More
      * or Show Less buttons.
      */
     expanded: {
       type: Boolean,
       notify: true,
       value: false
     },
     /**
      * If the `expanded` property is set then _expandedOnOpen is set to true
      * to ensure the alert opens in expanded form when it first loads.
      */
     _expandedOnOpen: {
       type: Boolean,
       value: false
     },
     /**
      * Read-only property set to `true` when the message text does not fit
      * and the message will be expandable.
      */
     overset: {
       type: Boolean,
       value: false,
       readOnly: true,
       notify: true
     }
  },
  observers: [
    '_checkMessageLength(language, resources, type)'
  ],
  created: function() {
    this._pendingDismiss = null;
  },
  attached: function() {
    this.listen(this, 'app-localize-resources-loaded', '_checkMessageLength');
    this.listen(this.$.showMoreButton, 'tap', '_toggleExpansion');
    if (!this.disableAutoShow) {
      this.visible = true;
    }
    this._expandedOnOpen = this.expanded;
 },
  detached: function() {
    this.unlisten(this, 'app-localize-resources-loaded', '_checkMessageLength');
    this.unlisten(this.$.showMoreButton, 'tap', '_toggleExpansion');
  },
  _getMessageClassNames: function(type, expanded) {
    var classNames = 'message ' + type;
    if (!expanded) {
      classNames += ' collapsed-message';
    }
    return classNames;
  },
  _getShowMoreClassNames: function(overset) {
    var classNames = 'actionable show-more';
    if (!overset) {
      classNames += ' visuallyhidden';
    }
    return classNames;
  },
  /**
   * Clear timer if needed and set the time to the autoDismiss property
   *
   */
  setAutoDismiss: function(dismissAfter) {
    if (this._pendingDismissTask) {
      // Clear the current timer
      this.cancelAsync(this._pendingDismissTask);
    }

    if (typeof dismissAfter === 'number' && dismissAfter > 0 && this.visible) {
      this._pendingDismissTask = this.async(function() {
        this._pendingDismissTask = null;
        this.visible = false;
        this.fire('px-alert-message-action-auto-dismissed');
      }, dismissAfter);
    }
  },
  /**
   * Fired when the alert message is auto dismissed after the `dismissAfter`
   * timer ends.
   *
   * @event px-alert-message-action-auto-dismissed
   */
  /**
   * helper method for calculating dom-if conditions
   */
  _isTrue: function(a, b) {
    return a === b;
  },
  /**
   * called when the 'show more' action text is clicked
   */
  _toggleExpansion: function() {
    this.expanded = !this.expanded;
  },
  /**
   * Checking to see if the combined message length of title and message exceed
   * the max height of the parent div.
   */
  _checkMessageLength: function() {
    this.debounce('check-message-length', function() {        
      if (this.expanded && !this._expandedOnOpen) {
        // When the message changes, we should collapse the alert message
        this.expanded = false;
        // Reset the expand on open property
      }
      this._expandedOnOpen = false;

      var messageDiv = this.$.message;

      if (this.type === 'more') {
        this._setOverset(false);
        return;
      }
      if (messageDiv.scrollHeight <= messageDiv.clientHeight) {
        this._setOverset(false);
      }
      else {
        this._setOverset(true);
      }
    }, 1);
  },
  /**
   * run when 'actionText' is clicked.
   * If action property is a URL then open it.
   * Else dismiss the alert message
   */
  _action: function() {
    if (this.action.indexOf('http') != -1) {
      window.open(this.action);
    } else if (this.action === 'dismiss' || this.action === 'acknowledge') {
      this.visible = false;
    }
    this.fire('px-alert-message-action-triggered', {
      action: this.action
    });
  },
  /**
   * Fired when the user triggers the alert message action (see the `action`
   * property documentation for more information.)
   *
   * The event's `detail.action` property will be set to the chosen action for
   * the alert message instance.
   *
   * @event px-alert-message-action-triggered
   */
  /**
   * Sets the text of action buttons based on what the action property is.
   */
  _computeActionText: function(action) {
    if (action === 'acknowledge') {
      return this.localize('OK');
    } else if (action !== undefined && action.indexOf('http') != -1) {
      return this.localize('Open');
    } else {
      return ''; // future custom button actions
    }
  },
  _computeShowBtnText: function(isExpanded) {
    if (isExpanded) {
      return this.localize('Show Less');
    } else {
      return this.localize('Show More');
    }
  },
  _getLabel: function(type, hideSeverity) {
    if(hideSeverity) return;
    if(type === 'important') return '1';
    if(type === 'warning') return '2';
    if(type === 'error') return '3';
    if(type === 'information') return '4';
    if(type === 'unknown') return '5';
  },
  _handleVisibleChanged: function(isVisible) {
    var alert = Polymer.dom(this.root).querySelector('#alert');
    if (alert === null) {
      return;
    }
    if (isVisible && !alert.classList.contains('alert-message--visible')) {
      alert.classList.add('alert-message--visible');
      alert.classList.add('fade-in');
      this._checkMessageLength();
      this.setAutoDismiss(this.autoDismiss || null);
    }
    else if (!isVisible && alert.classList.contains('alert-message--visible')) {
      this.expanded = false;
      alert.classList.add('fade-out');
    }
  },
  _handleAnimationEnd: function(evt) {
    var target = Polymer.dom(evt).rootTarget;
    if (target && target === this.$.alert) {
      if (target.classList.contains('fade-out')) {
        target.classList.remove('alert-message--visible');
        target.classList.remove('fade-out');
        this.fire('px-alert-message-hidden');
      }
      if (target.classList.contains('fade-in')) {
        target.classList.remove('fade-in');
      }
    }
  }
  /**
   * Fired fired when an alert message is hidden. The event.target will contain
   * a reference to the px-alert-message component that has been dismissed.
   *
   * @event px-alert-message-hidden
   */
});
</script>