Merge branch '1.0.0-b'

README.md

@@ -0,0 +1,64 @@
+iron-list
+========================
+
+`iron-list` displays a virtual, *'infinite'* list. The template inside
+the iron-list element represents the DOM to create for each list item.
+The `items` property specifies an array of list item data.
+
+For performance reasons, not every item in the list is rendered at once;
+instead a small subset of actual template elements *(enough to fill the viewport)*
+are rendered and reused as the user scrolls. As such, it is important that all
+state of the list template be bound to the model driving it, since the view may
+be reused with a new model at any time. Particularly, any state that may change
+as the result of a user interaction with the list item must be bound to the model
+to avoid view state inconsistency.
+
+__Important:__ `iron-list` must ether be explicitly sized, or delegate scrolling to an 
+explicitly sized parent. By "explicitly sized", we mean it either has an explicit
+CSS `height` property set via a class or inline style, or else is sized by other
+layout means (e.g. the `flex` or `fit` classes).
+
+### Template model
+
+List item templates should bind to template models of the following structure:
+
+```js
+{
+  index: 0,     // data index for this item
+  item: {       // user data corresponding to items[index]
+    /* user item data  */
+  }
+}
+```
+
+Alternatively, you can change the property name used as data index by changing the 
+`indexAs` property. The `as` property defines the name of the variable to add to the binding
+scope for the array.
+
+For example, given the following `data` array:
+
+##### data.json
+
+```js
+[
+  {"name": "Bob"},
+  {"name": "Tim"},
+  {"name": "Mike"}
+]
+```
+
+The following code would render the list (note the name and checked properties are
+bound from the model object provided to the template scope):
+
+```html
+<template is="dom-bind">
+  <iron-ajax url="data.json" last-response="{{data}}" auto></iron-ajax>
+  <iron-list items="[[data]]" as="item">
+    <template>
+      <div>
+        Name: <span>[[item.name]]</span>
+      </div>
+    </template>
+  </iron-list>
+</template>
+```

bower.json

@@ -1,21 +1,27 @@
 {
   "name": "iron-list",
-  "version": "0.0.1",
+  "version": "1.0.0",
   "homepage": "https://github.com/PolymerElements/iron-list",
   "authors": [
     "The Polymer Authors"
   ],
   "main": "iron-list.html",
   "license": "http://polymer.github.io/LICENSE.txt",
   "dependencies": {
-    "polymer": "polymer/polymer#0.8-preview"
+    "polymer": "Polymer/polymer#^1.0.0",
+    "iron-resizable-behavior": "polymerelements/iron-resizable-behavior#^1.0.0"
   },
   "devDependencies": {
-    "iron-icon": "polymerelements/iron-icon#^0.8.0",
-    "iron-icons": "polymerelements/iron-icons#^0.8.0",
-    "paper-styles": "polymerelements/paper-styles#^0.8.0",
-    "test-fixture": "polymerelements/test-fixture#^0.8.0",
-    "webcomponentsjs": "webcomponents/webcomponentsjs#^0.6.0",
-    "web-component-tester": "~2.2.6"
+    "iron-flex-layout": "polymerelements/iron-flex-layout#^1.0.1",
+    "iron-component-page": "polymerelements/iron-component-page#^1.0.0",
+    "paper-scroll-header-panel": "polymerelements/paper-scroll-header-panel#^1.0.0",
+    "paper-icon-button": "polymerelements/paper-icon-button#^1.0.0",
+    "iron-ajax": "polymerelements/iron-ajax#^1.0.0",
+    "iron-icon": "polymerelements/iron-icon#^1.0.0",
+    "iron-icons": "polymerelements/iron-icons#^1.0.0",
+    "paper-toolbar": "polymerelements/paper-toolbar#^1.0.0",
+    "test-fixture": "polymerelements/test-fixture#^1.0.0",
+    "webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.2",
+    "web-component-tester": "*"
   }
 }

demo/demo1.html

@@ -0,0 +1,154 @@
+<!--
+@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>iron-list demo</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-list.html">
+
+  <link rel="import" href="../../iron-ajax/iron-ajax.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">
+
+  <dom-module id="x-app">
+
+    <style>
+
+      :host {
+        @apply(--layout-fit);
+        @apply(--layout-vertical);
+
+        display: block;
+        font-family: sans-serif;
+      }
+
+      .toolbar {
+        background: #E91E63;
+        box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
+        color: white;
+      }
+
+      #list {
+        @apply(--layout-flex);
+      }
+
+      .item {
+        padding: 16px;
+        @apply(--layout-horizontal);
+      }
+
+      .avatar {
+        height: 40px;
+        width: 40px;
+        border-radius: 20px;
+        box-sizing: border-box;
+        border: 1px solid #DDD;
+        background-color: #DDD;
+      }
+
+      .pad {
+        padding: 0 16px;
+        @apply(--layout-flex);
+        @apply(--layout-vertical);
+      }
+
+      .primary {
+        font-size: 16px;
+      }
+
+      .secondary {
+        font-size: 14px;
+      }
+
+      .dim {
+        color: gray;
+      }
+
+      .border {
+        margin-left: 72px;
+        border-bottom: 1px solid #DDD;
+      }
+
+      iron-icon {
+        width: 24px;
+        height: 24px;
+      }
+
+    </style>
+
+    <template>
+
+      <iron-ajax url="data/contacts.json" last-response="{{data}}" auto></iron-ajax>
+
+      <paper-toolbar class="toolbar">
+        <div>Inbox</div>
+      </paper-toolbar>
+
+      <iron-list id="list" items="[[data]]" as="item">
+        <template>
+          <div>
+            <div class="item">
+              <img class="avatar" src="[[item.image]]">
+              <div class="pad">
+                <div class="primary">
+                  <span>[[index]]</span>
+                  <span>[[item.name]]</span>
+                </div>
+                <div class="secondary">[[item.shortText]]</div>
+                <div class="secondary dim">[[item.longText]]</div>
+              </div>
+              <iron-icon icon$="[[iconForItem(item)]]"></iron-icon>
+            </div>
+            <div class="border"></div>
+          </div>
+        </template>
+      </iron-list>
+
+    </template>
+  </dom-module>
+
+  <script>
+
+    HTMLImports.whenReady(function() {
+
+      Polymer({
+
+        is: 'x-app',
+
+        iconForItem: function(item) {
+          return item ? (item.integer < 50 ? 'star-border' : 'star') : '';
+        }
+
+      });
+
+   });
+
+  </script>
+
+</head>
+<body unresolved>
+
+  <x-app></x-app>
+
+</body>
+</html>