WebCompDev / COMPONENTS

  <!--
  @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
  The complete set of authors may be found at http://polymer.github.io/AUTHORS
  The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS
  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
  -->
  
  <link rel="import" href="../../polymer/polymer.html">
  <link rel="import" href="../../iron-flex-layout/iron-flex-layout.html">
  <link rel="import" href="../iron-list.html">
  
  <dom-module id="x-list">
  
    <style>
      :host {
        @apply(--layout-fit);
        @apply(--layout-vertical);
  
        display: block;
      }
  
      .item {
        color: white;
      }
  
      .item:nth-child(odd) {
        background-color: green;
      }
  
      .item:nth-child(even) {
        background-color: red;
      }

  
      iron-list {
        overflow: hidden;
      }

    </style>
  
    <template>
      <iron-list style$="[[_computedListHeight(listHeight)]]" items="[[data]]" as="item" id="list">
        <template>
          <div class="item">

            <div style$="[[_computedItemHeight(item)]]" tabindex$="[[tabIndex]]" hidden$="[[primitive]]">[[item.index]]</div>
            <div style$="[[_computedItemHeight(item)]]" tabindex$="[[tabIndex]]" hidden$="[[!primitive]]">[[item]]</div>

          </div>
        </template>
      </iron-list>
    </template>
  
  </dom-module>
  
  <script>
    Polymer({
      is: 'x-list',
  
      properties: {
        data: {
          type: Array
        },
  
        itemHeight: {
          type: Number,
          value: 100
        },
  
        listHeight: {
          type: Number,
          value: 300

        },
  
        pre: {
          type: Boolean

        },
  
        primitive: {
          value: false,
          type: Boolean

        }
      },
  
      get list() {
        return this.$.list;
      },
  

      _computedItemHeight: function(item) {
        var css = this.pre ? 'white-space:pre;' : '';
        if (item.height) {
          css += this.itemHeight === 0 ? '' : 'height: ' + (item.height) + 'px;';
        } else if (this.itemHeight) {
          css += 'height: ' + (this.itemHeight) + 'px;';
        }

        return css;

      },
  
      _computedListHeight: function(listHeight) {

        return 'height: ' + (listHeight) + 'px;';

      }

    });
  </script>