selection.html 7.7 KB

Edit Raw Blame History

<!--
@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
-->

<!doctype html>
<html>
<head>

  <title>Select contacts</title>

  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">
  <meta name="mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-capable" content="yes">

  <script src="../../webcomponentsjs/webcomponents-lite.js"></script>

  <link rel="import" href="../../polymer/polymer.html">
  <link rel="import" href="../../iron-flex-layout/iron-flex-layout.html">
  <link rel="import" href="../../iron-ajax/iron-ajax.html">
  <link rel="import" href="../../paper-icon-button/paper-icon-button.html">
  <link rel="import" href="../../iron-icon/iron-icon.html">
  <link rel="import" href="../../iron-icons/iron-icons.html">
  <link rel="import" href="../../paper-toolbar/paper-toolbar.html">
  <link rel="import" href="../../paper-menu/paper-menu.html">
  <link rel="import" href="../../paper-item/paper-item.html">
  <link rel="import" href="../../paper-badge/paper-badge.html">
  <link rel="import" href="../iron-list.html">

  <dom-module id="x-app">

    <style>
      :host {
        @apply(--layout-fit);
        @apply(--layout-vertical);
        @apply(--paper-font-common-base);

        display: block;
        font-family: sans-serif;
      }

      .toolbar {
        background: var(--paper-pink-500);
        box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.3);
        z-index: 1;
        --paper-toolbar-title: {
          font-size: 16px;
          line-height: 16px;
          font-weight: bold;
          margin-left: 0;
        };
      }

      .toolbar paper-icon-button {
        --paper-icon-button-ink-color: white;
      }

      #itemsList,
      #selectedItemsList {
        @apply(--layout-flex);
      }

      .item {
        @apply(--layout-horizontal);
        cursor: pointer;
        padding: 16px 22px;
        border-bottom: 1px solid #DDD;
      }

      .item:hover {
        background-color: var(--google-grey-100);
      }

      .item:focus,
      .item.selected:focus {
        outline: 0;
      }

      .item.selected .star {
        color: var(--paper-blue-600);
      }

      .item.selected {
        background-color: var(--google-grey-100);
      }

      .avatar {
        height: 40px;
        width: 40px;
        border-radius: 20px;
        box-sizing: border-box;
        background-color: #DDD;
      }

      .pad {
        @apply(--layout-flex);
        @apply(--layout-vertical);
        padding: 0 16px;
      }

      .primary {
        font-size: 16px;
      }

      .secondary {
        font-size: 14px;
      }

      .dim {
        color: gray;
      }

      .star {
        width: 24px;
        height: 24px;
      }

      paper-badge {
        -webkit-transition: all 0.1s;
        transition: all 0.1s;
        opacity: 1;
        margin-top: 5px;
      }

      paper-badge[label="0"] {
        opacity: 0;
      }

      #starredView {
        width: 200px;
        border-left: 1px solid #ddd;
      }

      paper-item {
        white-space: nowrap;
        cursor: pointer;
        position: relative;
      }

      paper-item:focus {
        outline: 0;
        background-color: #ddd;
      }

      paper-item:hover::after {
        content: "－";
        width: 16px;
        height: 16px;
        display: block;
        border-radius: 50% 50%;
        background-color: var(--google-red-300);
        margin-left: 10px;
        line-height: 16px;
        text-align: center;
        color: white;
        font-weight: bold;
        text-decoration: none;
        position: absolute;
        right: 15px;
        top: calc(50% - 8px);
      }

      .noSelection {
        color: #999;
        margin-left: 10px;
        line-height: 50px;
      }

      .twoColumns {
        @apply(--layout-flex);
        @apply(--layout-horizontal);
        overflow: hidden;
      }

      #starredView {
        @apply(--layout-vertical);
      }
    </style>

    <template>
      <iron-ajax url="data/contacts.json" last-response="{{data}}" auto></iron-ajax>

      <paper-toolbar class="toolbar">
        <div class="title">Selection using iron-list</div>
        <div>
          <paper-icon-button icon="icons:star" alt="Starred" on-tap="_toggleStarredView"></paper-icon-button>
          <paper-badge label$="[[selectedItems.length]]"></paper-badge>
        </div>
      </paper-toolbar>
      <div class="twoColumns">
        <!-- Main List for the items -->
        <iron-list id="itemsList" items="[[data]]" selected-items="{{selectedItems}}" selection-enabled multi-selection>
          <template>
            <div>
              <div tabindex="0" aria-label$="[[_getAriaLabel(item, selected)]]" class$="[[_computedClass(selected)]]">
                <img class="avatar" src="[[item.image]]">
                <div class="pad">
                  <div class="primary">
                    [[item.name]]
                  </div>
                  <div class="secondary dim">[[item.shortText]]</div>
                </div>
                <iron-icon icon$="[[iconForItem(selected)]]" class="star"></iron-icon>
              </div>
              <div class="border"></div>
            </div>
          </template>
        </iron-list>
        <div id="starredView" hidden$="[[!showSelection]]">
          <template is="dom-if" if="[[!selectedItems.length]]">
            <div class="noSelection">Select a contact</div>
          </template>
          <!-- List for the selected items -->
          <iron-list id="selectedItemsList" items="[[selectedItems]]" hidden$="[[!selectedItems.length]]">
            <template>
              <paper-item on-tap="_unselect" tabindex="0">[[item.name]]</paper-item>
            </template>
          </iron-list>
        </div>
      </div>
    </template>
  </dom-module>

  <script>

    HTMLImports.whenReady(function() {

      Polymer({

        is: 'x-app',

        properties: {
          selectedItems: {
            type: Object
          },

          showSelection: {
            type: Boolean,
            value: true,
            observer: '_showSelectionChanged'
          }
        },

        iconForItem: function(isSelected) {
          return isSelected ? 'star' : 'star-border';
        },

        _computedClass: function(isSelected) {
          var classes = 'item';
          if (isSelected) {
            classes += ' selected';
          }
          return classes;
        },

        _unselect: function(e) {
          this.$.itemsList.deselectItem(e.model.item);
        },

        _toggleStarredView: function() {
          this.showSelection = !this.showSelection;
        },

        _showSelectionChanged: function() {
          this.$.selectedItemsList.fire('resize');
        },

        _getAriaLabel: function(item, selected) {
          return selected ? 'Deselect ' + item.name : 'Select ' + item.name;
        }
      });

   });

  </script>

</head>
<style is="custom-style">
  body {
    @apply(--layout-fullbleed);
  }
</style>
<body unresolved>

  <x-app></x-app>

</body>
</html>