exmg-toolbar.html

<link rel="import" href="../polymer/polymer-element.html">
<link rel="import" href="../iron-flex-layout/iron-flex-layout.html">
<link rel="import" href="../shadycss/apply-shim.html">

<dom-module id="exmg-toolbar">
  <template>
    <style>
      :host {
        display: block;
        position: relative;
        background-color: #f5f5f5;
        border-bottom: 1px solid #dbdbdb;
        color: rgba(0,0,0,.87);
        font-size: 20px;
      }

      #selected-toolbar {
        padding: 0px 24px;
      }

      ::slotted(*) {
        @apply --layout;
        @apply --layout-center;
        @apply --layout-justified;
        padding: 0px 24px;
        height: 64px;
        width: 100%;
        box-sizing: border-box;
      }

      #selected-toolbar {
        @apply --layout;
        @apply --layout-justified;
        background: var(--exm-toolbar-selection-color, #E8EFFD);
        transition: transform .1s linear;
        transform: scale(1,0);
        padding: 0;
        @apply --exm-toolbar-selection;
      }
      #selected-toolbar[data-visible]{
        transform: scale(1,1);
      }

      #selected-toolbar {
        @apply --layout-horizontal;
        @apply --layout-center;
        @apply --layout-fit;
      }

      .title-container {
        padding: 0 24px;
      }

    </style>

    <div id="default-toolbar">
      <slot name="default"></slot>
    </div>
    <div id="selected-toolbar" data-visible$="[[_isSelectedToolbarVisible(_selectedRows)]]">
      <div class="title-container">
        <span>[[_selectedRows]]</span> item<template is="dom-if" if="[[_multipleItemsSelected(_selectedRows)]]">s</template> selected
      </div>
      <div class="toolbar">
        <slot name="selected"></slot>
      </div>
    </div>
  </template>

  <script>
    /**
     * `exmg-toolbar`
     * Datatable
     *
     * @customElement
     * @polymer
     * @demo demo/index.html
     */
    class ExmgToolbar extends Polymer.Element {
      static get is() { return 'exmg-toolbar'; }
      static get properties() {
        return {
          /**
          * Number of selected rows
          */
          _selectedRows: {
            type: Number,
            value: 0
          },

          /**
          * When `multiSelection` is true, this is an array that contains the selected items.
          */
          selectedItems: {
            type: Object,
          },
        };
      }
      static get observers() {
        return [
            '_selectedItemsChanged(selectedItems.*)',
        ]
      }
      _selectedItemsChanged(changes) {
        if(changes.path === 'selectedItems') {
          this.set('_selectedRows', changes.value === null ? 0 : Array.isArray(changes.value) ? changes.value.length : 1);
        }
        if(changes.path === 'selectedItems.length') {
          this.set('_selectedRows', changes.value);
        }
      }
      _isSelectedToolbarVisible() {
        return this._selectedRows > 0 ? true : false;
      }
      _multipleItemsSelected() {
        return this._selectedRows > 1 ? true : false;
      }
    }

    window.customElements.define(ExmgToolbar.is, ExmgToolbar);
  </script>
</dom-module>