add iron-list

2025-03-30 19:56:21 +00:00 · 2016-04-20 23:34:52 -04:00 · 2016-04-20 23:34:52 -04:00 · da7c9a4899
commit da7c9a4899
parent 396b125d66
47 changed files with 36356 additions and 0 deletions
--- a/dashboard-ui/bower_components/iron-list/demo/scroll-threshold.html
+++ b/dashboard-ui/bower_components/iron-list/demo/scroll-threshold.html
@ -0,0 +1,191 @@
+<!--
+@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 id="html">
+<head>
+
+  <title>Load data using iron-scroll-threshold</title>
+
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=no">
+  <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-scroll-threshold/iron-scroll-threshold.html">
+  <link rel="import" href="../../paper-styles/color.html">
+  <link rel="import" href="../../paper-styles/typography.html">
+  <link rel="import" href="../../app-layout/app-toolbar/app-toolbar.html">
+  <link rel="import" href="../../paper-spinner/paper-spinner.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">
+
+  <style is="custom-style">
+
+    body {
+      @apply(--paper-font-common-base);
+      margin: 0;
+      padding: 0;
+      background-color: #eee;
+    }
+
+    app-toolbar {
+      position: fixed;
+      top: 0;
+      left: 0;
+      right: 0;
+      background: #F57C00;
+      box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.3);
+      color: white;
+      z-index: 1;
+      font-weight: bold;
+    }
+
+    .loadingIndicator {
+      text-align: center;
+      height: 40px;
+    }
+
+    .loadingIndicator paper-spinner {
+      width: 20px;
+      height: 20px;
+      margin-right: 10px;
+    }
+
+    iron-list {
+      padding-top: 64px;
+      padding-bottom: 16px;
+      --iron-list-items-container: {
+        max-width: 800px;
+        margin: auto;
+        margin-top: 60px;
+        margin-bottom: 10px;
+      };
+    }
+
+    .personItem {
+      @apply(--layout-horizontal);
+
+      margin: 16px 16px 0 16px;
+      padding: 20px;
+      border-radius: 8px;
+      background-color: white;
+      border: 1px solid #ddd;
+    }
+
+    .pad {
+      padding: 0 16px;
+      @apply(--layout-flex);
+      @apply(--layout-vertical);
+    }
+
+    .primary {
+      font-size: 16px;
+      font-weight: bold;
+    }
+
+    .secondary {
+      font-size: 14px;
+    }
+
+    .dim {
+      color: gray;
+    }
+
+    .spacer {
+      @apply(--layout-flex);
+    }
+
+    .index {
+      width: 30px;
+    }
+
+  </style>
+
+</head>
+<body unresolved>
+
+  <template is="dom-bind" id="app">
+
+    <iron-ajax id="ajax"
+      url="//www.filltext.com/"
+      params='{"rows": "20", "delay": 1, "fname":"{firstName}", "lname": "{lastName}", "address": "{streetAddress}",
+       "city": "{city}", "state": "{usState|abb}", "zip": "{zip}", "business": "{business}", "index": "{index}"}'
+      handle-as="json"
+      loading="{{loadingPeople}}"
+      on-response="_didRespond">
+    </iron-ajax>
+
+    <app-toolbar>
+      <div title>Load data using iron-scroll-threshold</div>
+    </app-toolbar>
+
+    <iron-list id="list" items="[]" as="person" scroll-target="html">
+      <template>
+        <div>
+          <div class="personItem" tabindex$="[[tabIndex]]">
+            <div class="pad">
+              <div class="primary">[[person.fname]] [[person.lname]]</div>
+              <div class="secondary">[[person.address]] [[person.city]]</div>
+              <div class="secondary">[[person.city]], [[person.state]] [[person.zip]]</div>
+              <div class="secondary dim">[[person.business]]</div>
+            </div>
+            <iron-icon icon$="[[_iconForPerson(person)]]"></iron-icon>
+          </div>
+        </div>
+      </template>
+    </iron-list>
+
+    <div class="loadingIndicator">
+      <paper-spinner active="{{loadingPeople}}"></paper-spinner> Fetching data
+    </div>
+
+    <!-- this element will load more data when the user scrolls down and reached the lower threshold -->
+    <iron-scroll-threshold id="scrollTheshold"
+      lower-threshold="500"
+      on-lower-threshold="_loadMoreData"
+      scroll-target="html">
+    </iron-scroll-threshold>
+
+  </template>
+
+  <script>
+
+    (function(scope) {
+
+      scope._iconForPerson = function(person) {
+        return person.integer < 50 ? 'star-border' : 'star';
+      };
+
+      scope._loadMoreData = function() {
+        scope.$.ajax.generateRequest();
+      };
+
+      scope._didRespond = function(e) {
+        var people = e.detail.response;
+
+        people.forEach(function(person) {
+          scope.$.list.push('items', person);
+        });
+        // Clear the lower threshold so we can load more data when the user scrolls down again.
+        scope.$.scrollTheshold.clearTriggers();
+      };
+
+    })(document.querySelector('#app'));
+
+  </script>
+
+</body>
+</html>