bower_components/iron-list/demo/collapse.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
-->

<!doctype html>
<html>
<head>

  <title>Collapsable items using iron-list</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="../../paper-toolbar/paper-toolbar.html">
  <link rel="import" href="../../paper-scroll-header-panel/paper-scroll-header-panel.html">
  <link rel="import" href="../../paper-icon-button/paper-icon-button.html">
  <link rel="import" href="../../iron-ajax/iron-ajax.html">
  <link rel="import" href="../../iron-icons/iron-icons.html">
  <link rel="import" href="../iron-list.html">

</head>
<body unresolved>

<dom-module id="x-collapse">
  <template>
    <style>
      :host {
        @apply(--layout-fit);
        @apply(--layout-vertical);
        @apply(--paper-font-common-base);
        background-color: var(--paper-grey-200, #eee);
      }

      paper-toolbar {
        background: var(--google-green-700);
        box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.3);
        font-weight: bold;
        z-index: 1;
        --paper-toolbar-title: {
          overflow: visible;
        };
      }

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

      iron-list {
        padding-top: 1px;
        padding-bottom: 16px;
        -webkit-flex: 1 1;
        flex: 1 1;
        --iron-list-items-container: {
          max-width: 800px;
          margin: auto;
          margin-top: 60px;
          margin-bottom: 60px;
          border-bottom: 1px solid #ddd;
        };
      }

      .item {
        @apply(--layout-horizontal);
        padding: 20px;
        background-color: white;
        border: 1px solid #ddd;

        cursor: pointer;
        margin-bottom: 10px;
      }

      .item:focus {
        outline: 0;
        border-color: #666;
      }

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

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

      .primary {
        font-size: 16px;
        font-weight: bold;
      }

      .shortText, .longText {
        font-size: 14px;
      }

      .longText {
        color: gray;
        display: none;
      }

      .item:hover .shortText::after {
        content: ' [+]';
        color: gray;
      }

      .item.expanded:hover .shortText::after {
        content: '';
      }

      .item.expanded .longText {
        display: block;
      }

      .item.expanded:hover .longText::after {
        content: ' [–]';
      }

      .spacer {
        @apply(--layout-flex);
      }

      @media (max-width: 460px) {
        paper-toolbar .bottom.title {
          font-size: 14px;
        }
      }
    </style>
    <iron-ajax url="data/contacts.json" last-response="{{items}}" auto></iron-ajax>
      <paper-toolbar>
        <paper-icon-button icon="arrow-back" alt="Back"></paper-icon-button>
        <div class="spacer"></div>
        <paper-icon-button icon="search" alt="Search"></paper-icon-button>
        <paper-icon-button icon="more-vert" alt="More options"></paper-icon-button>
        <div class="bottom title">Collapsable items using iron-list</div>
      </paper-toolbar>
      <iron-list id="list" items="[[items]]" as="item">
        <template>
          <div on-tap="_collapseExpand">
            <div class$="[[getClassForItem(item, item.expanded)]]" tabindex="0">
              <img class="avatar" src="[[item.image]]">
              <div class="pad">
                <div class="primary">[[item.name]]</div>
                <div class="shortText">[[item.shortText]]</div>
                <div class="longText">[[item.longText]]</div>
              </div>
              <iron-icon icon$="[[iconForItem(item)]]"></iron-icon>
            </div>
          </div>
        </template>
      </iron-list>
  </template>
  <script>
  HTMLImports.whenReady(function() {
      Polymer({
        is: 'x-collapse',
        properties: {
          items: {
            type: Array
          }
        },

        _collapseExpand: function(e) {
          var list = this.$.list;
          var index = e.model.index;
          var isExpanded = list.items[index].expanded;

          list.set('items.' + index + '.expanded', !isExpanded);
          list.updateSizeForItem(e.model.index);
        },

        iconForItem: function(item) {
          return item ? (item.integer < 50 ? 'star-border' : 'star') : '';
        },

        getClassForItem: function(item, expanded) {
          return expanded ? 'item expanded' : 'item';
        }
      });
    });
  </script>
</dom-module>

<x-collapse></x-collapse>

</body>
</html>