├── .gitignore
├── LICENSE.txt
├── README.md
├── bower.json
├── demo
    ├── demos.html
    ├── dom-repeat-demo.html
    ├── masonry-demo.html
    ├── parent-element.html
    ├── shadow-demo.html
    ├── simple-card.html
    └── simple-demo.html
└── zero-list-hero.html


/.gitignore:
--------------------------------------------------------------------------------
1 | bower_components/
2 | images/
3 | 


--------------------------------------------------------------------------------
/LICENSE.txt:
--------------------------------------------------------------------------------
 1 | The MIT License (MIT)
 2 | 
 3 | Copyright (c) 2015 Jason JC Lee <zerodevx@gmail.com>
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 
23 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | v0.2.1
  2 | # `<zero-list-hero>`
  3 | 
  4 | It's hero time! A Polymer 1.1+ web component that hero-animates and layouts a
  5 | sequence of elements. I do this so you don't have to.
  6 | 
  7 | ![demo.gif](https://zerodevx.github.io/zero-list-hero/images/demo.gif)
  8 | 
  9 | Featuring:
 10 | * Automatic transitions.
 11 | * NEW! Automatic responsive layout - masonry using first-fit algorithm à la
 12 | Pinterest.
 13 | * Bespoke cascaded entry-exit effects à la Google Play Newsstand App.
 14 | * Built-in debouncer.
 15 | * Configurable animations.
 16 | * Almost entirely declarative - works by itself!
 17 | 
 18 | 
 19 | ### Let's get this money
 20 | 
 21 | 1. Import `web-components-lite` polyfill.
 22 |   ```html
 23 | <script src="bower_components/webcomponentsjs/webcomponents-lite.js"></script>
 24 |   ```
 25 | 
 26 | 2. Import `zero-list-hero` web component.
 27 |   ```html
 28 | <link rel="import" href="bower_components/zero-list-hero/zero-list-hero.html">
 29 |   ```
 30 | 
 31 | 3. Profit!
 32 | 
 33 |   **Basic usage:**
 34 | 
 35 |   ```html
 36 | <zero-list-hero>
 37 |   <!-- Dynamically append/remove elements inside here -->
 38 |   ...
 39 |   <div hero-id="hero1">I'm Tom</div>
 40 |   <div hero-id="hero3">I'm Mary</div>
 41 |   <div hero-id="hero2">I'm John</div>
 42 |   ...
 43 | </zero-list-hero>
 44 |   ```
 45 | 
 46 |   **With Polymer's `dom-repeat`:**
 47 | 
 48 |   ```html
 49 | <zero-list-hero>
 50 |   <template is="dom-repeat" items="[[list]]">
 51 |     <my-card hero-id$="[[item.foo]]" foo$="[[item.foo]]" bar$="[[item.bar]]"></my-card>
 52 |   </template>
 53 | </zero-list-hero>
 54 |   ```
 55 | 
 56 |   **Using built-in responsive masonry layout:**
 57 | 
 58 |   ```html
 59 | <zero-list-hero layout="masonry">
 60 |   <template is="dom-repeat" items="[[list]]">
 61 |     <my-card hero-id$="[[item.foo]]" foo$="[[item.foo]]" bar$="[[item.bar]]"></my-card>
 62 |   </template>
 63 | </zero-list-hero>
 64 |   ```
 65 | 
 66 | 
 67 | ### Implementation notes
 68 | 
 69 | 1. Assign a unique `hero-id` for every display element that is wrapped inside
 70 | the `<zero-list-hero>...</zero-list-hero>` tags.
 71 | 
 72 | 2. If you're using Polymer's data-binding (eg. inside a `dom-repeat` template),
 73 | set your target attributes annotatively via the ***`$=`*** syntax.
 74 | 
 75 | 3. Transitions are automatic - create, update and remove operations on any
 76 | `hero` element is detected, consolidated and debounced with a default delay of
 77 | 500ms (optionally change delay timing using `debounce-delay` attribute).
 78 | 
 79 | 4. Note that automatic transitions **do not work** under native shadow DOM
 80 | behaviour.
 81 | 
 82 | 
 83 | ### Layout
 84 | 
 85 | `<zero-list-hero>` now handles the layout of children hero elements
 86 | responsively. To enable this feature, set the `layout` (and optionally the
 87 | `layoutOptions`) attribute declaratively in your HTML.
 88 | 
 89 | **Included layouts**
 90 | 
 91 | Currently, only *Masonry* layout is shipped. `<zero-list-hero>`'s definition
 92 | of this is a *left-to-right* display of a sequence of *fixed width*, *variable
 93 | height* elements:
 94 | 
 95 | ![masonry-demo.png](https://zerodevx.github.io/zero-list-hero/images/masonry-demo.png)
 96 | 
 97 | Layout is responsive; bin-packing is based on a first-fit algorithm where the
 98 | next element is placed into the shortest column.
 99 | 
100 | **Layout attributes**
101 | 
102 | | Attribute     | Type     | Values         | Description |
103 | |---------------|----------|----------------|-------------|
104 | | layout        | String   | masonry        | A *left-to-right* display of a sequence of *fixed width*, *variable height* hero elements. |
105 | | layoutOptions | Object   | "breakpoint"   | *Number* in px (default is 300) for the breakpoint multiple (ie. max-width of each column) before `<zero-list-hero>` attempts to repack the display elements again. |
106 | 
107 | Note that `layoutOptions` takes in a JSON object; it must be properly formatted
108 | valid JSON. This means that properties (and *String* values if applicable) must
109 | be wrapped with *double-quotes* ***""***.
110 | 
111 | **Example of Masonry layout, breakpoint of 100px**
112 | 
113 | ```html
114 | ...
115 | <zero-list-hero layout="masonry" layout-options='{"breakpoint": 100}'>
116 |   <div hero-id="1">Red</div>
117 |   <div hero-id="2">Blue</div>
118 |   <div hero-id="3">Green</div>
119 |   ...
120 | </zero-list-hero>
121 | ```
122 | 
123 | 
124 | ### Styling
125 | 
126 | If you're using Polymer, follow the Polymer-pattern and style hero elements
127 | using the exposed custom CSS mixin `--zero-list-hero-item-mixin`. The mixin
128 | will be applied on every hero element that is displayed.
129 | 
130 | **Example styling using Polymer's custom CSS**
131 | 
132 | ```html
133 | ...
134 | <template>
135 |   <style>
136 |     :host {
137 |       --zero-list-hero-item-mixin: {
138 |         background-color: blue;
139 |         font-size: 24px;
140 |         height: 96px;
141 |       };
142 |     }
143 |   </style>
144 |   <zero-list-hero>
145 |     <div hero-id="1">Item 1</div>
146 |     <div hero-id="2">Item 2</div>
147 |     <div hero-id="3">Item 3</div>
148 |     ...
149 |   </zero-list-hero>
150 | </template>
151 | ```
152 | 
153 | If you are using `<zero-list-hero>` as an individual component, it runs by
154 | default under *Shady DOM*, so you can simply style your hero elements directly.
155 | 
156 | **Example styling using simple CSS**
157 | 
158 | ```html
159 | <style>
160 |   .my-element {
161 |     background-color: blue;
162 |     font-size: 24px;
163 |     height: 96px;
164 |   }
165 | </style>
166 | <zero-list-hero>
167 |   <div hero-id="1" class="my-element">Item 1</div>
168 |   <div hero-id="2" class="my-element">Item 2</div>
169 |   <div hero-id="3" class="my-element">Item 3</div>
170 |   ...
171 | </zero-list-hero>
172 | ```
173 | 
174 | 
175 | ### Shady vs Shadow
176 | 
177 | Essentially, changes to contents inside the `<zero-list-hero>` tag are observed
178 | through the *MutationObservers* API - when change is detected, the `animate()`
179 | method is automatically called to start the transition.
180 | 
181 | Unfortunately, *mutation observers* are currently unable to detect changes to
182 | distributed nodes under native shadow behavior. Ongoing spec discussions can be
183 | found [here](https://groups.google.com/forum/#!msg/polymer-dev/GMYzuuqlQ7k/2-gxqwJdNpcJ)
184 | and [here](https://bugzilla.mozilla.org/show_bug.cgi?id=1026236).
185 | 
186 | Therefore, if you are using `<zero-list-hero>` natively, detect changes
187 | *outside* the component and manually call the `animate()` method. Asserting
188 | the `manual` attribute disables *MutationObservers* usage entirely.
189 | 
190 | So unless you plan to stick with shady DOM for the forever, future-proof your
191 | app by disabling automatic transitions and wire up your change observers
192 | manually. As a recommended pattern (that works under BOTH ***Shady*** and
193 | ***Shadow DOM***):
194 | 
195 | `parent-element.html`
196 | 
197 | ```html
198 | <link rel="import" href="bower_components/zero-list-hero/zero-list-hero.html">
199 | <link rel="import" href="elements/my-card.html">
200 | <dom-module id="parent-element">
201 |   <template>
202 |     ...
203 |     <zero-list-hero id="myhero" manual>
204 |       <template is="dom-repeat" items="{{list}}">
205 |         <my-card hero-id$="{{list.id}}" card-id="{{item.id}}" card-name="{{item.name}}"></my-card>
206 |       </template>
207 |     </zero-list-hero>
208 |     ...
209 |   </template>
210 |   <script>
211 |     Polymer({
212 |       is: "parent-element",
213 |       properties: {
214 |         list: { type: Array, value: function () { return []; } }
215 |       },
216 |       observers: [
217 |         "listChanged(list.*)"
218 |       ],
219 |       listChanged: function (changeRecord) {
220 |         this.$.myhero.animate();
221 |       }
222 |       ...
223 |     });
224 |   </script>
225 | </dom-module>
226 | 
227 | ```
228 | 
229 | **UPDATE: 2015-10-07**
230 | 
231 | BREAKING CHANGE - what is previously known as `shadow` attribute has now been
232 | **renamed** to `manual` attribute.
233 | 
234 | 
235 | ### Other issues
236 | 
237 | 1. Polymer has an ongoing issue retrieving distributed content nodes through
238 | `Polymer.dom(content).getDistributedNodes()`. The bug has been filed
239 | [here](https://github.com/Polymer/polymer/issues/2283). As a workaround,
240 | `<zero-list-hero>` will first try retrieving nodes via vanilla js (which works
241 | under ***Shady*** behavior), and will silently fall back to Polymer's `domAPI`
242 | should ***Shadow*** behavior be detected.
243 | 
244 | **UPDATE: 2015-10-07**
245 | 
246 | The bug has been [fixed](https://github.com/Polymer/polymer/issues/2283).
247 | Retrieval of content nodes will from v0.2.0 onwards will use the normalised
248 | `domAPI.getDistributedNodes()` method.
249 | 
250 | 
251 | ### Demos
252 | 
253 | **Simple demo**
254 | 
255 | ![simple-demo.png](https://zerodevx.github.io/zero-list-hero/images/simple-demo.png)
256 | 
257 | https://zerodevx.github.io/zero-list-hero/simple-demo.html
258 | 
259 | **Demo using `dom-repeat`**
260 | 
261 | ![dom-repeat-demo.png](https://zerodevx.github.io/zero-list-hero/images/dom-repeat-demo.png)
262 | 
263 | https://zerodevx.github.io/zero-list-hero/dom-repeat-demo.html
264 | 
265 | **Demo under native shadow-dom behavior**
266 | 
267 | ![shadow-demo.png](https://zerodevx.github.io/zero-list-hero/images/shadow-demo.png)
268 | 
269 | https://zerodevx.github.io/zero-list-hero/shadow-demo.html
270 | 
271 | **Use in-built masonry layout**
272 | 
273 | ![masonry-demo.png](https://zerodevx.github.io/zero-list-hero/images/masonry-demo.png)
274 | 
275 | https://zerodevx.github.io/zero-list-hero/masonry-demo.html
276 | 
277 | **Go crazy with Material Design - a demo Newsreader App**
278 | 
279 | ![newsreader-demo.png](https://zerodevx.github.io/zero-list-hero/images/newsreader-demo.png)
280 | 
281 | https://zerodevx.github.io/zero-list-hero/newsreader-demo.html
282 | 
283 | 
284 | ### Published properties
285 | 
286 | | Property        | Type    | Description |
287 | |-----------------|---------|-------------|
288 | | debounceDelay   | Number  | Debounce delay between consolidating changes to `hero` elements and actually starting the transition; defaults to 500ms. |
289 | | cascadeDelay    | Number  | Animation delay between multiple additions or removals of `hero` elements; defaults to 50ms. |
290 | | addAnimation    | String  | [Animation](https://github.com/PolymerElements/neon-animation/tree/master/animations) to use when `hero` elements are **added** into view; if unspecified, a special `zero-entry-animation` custom animation is used. |
291 | | removeAnimation | String  | [Animation](https://github.com/PolymerElements/neon-animation/tree/master/animations) to use when `hero` elements are **removed** from view; if unspecified, a special `zero-exit-animation` custom animation is used. |
292 | | manual          | Boolean | If `true`, disables *MutationObserver* usage. Manually call the `animate()` method to trigger the transitions. |
293 | | inTransit       | Boolean | Read-only convenience property; switches to `true` whenever a transition is ongoing. |
294 | | layout          | String  | Allowed values: ["masonry"]. Use `<zero-list-hero>` to handle element layout. At the moment, only 'masonry' layout is shipped.
295 | | layoutOptions   | Object  | Allowed values: [ { "breakpoint": *Number* } ]. Under 'masonry' layout mechanism, sets the "width" of each column in px before an attempt to add/remove a column is made. Defaults to 300. |
296 | 
297 | 
298 | ### Public methods
299 | 
300 | | Method    | Parameters | Description |
301 | |-----------|------------|-------------|
302 | | animate() | *none*     | Starts the transition process. Under ***shady*** dom behavior, this method is automatically called whenever changes are detected by the *MutationObserver* API. |
303 | 
304 | 
305 | ### Exposed CSS mixins
306 | 
307 | | Name                        | Description |
308 | |-----------------------------|-------------|
309 | | --zero-list-hero-item-mixin | Basket of CSS style rules to be applied to every `.zero-list-hero-item`. |
310 | 
311 | 
312 | ### Installation
313 | 
314 | Install through bower.
315 | 
316 |     bower install --save zerodevx/zero-list-hero#^0.2.1
317 | 
318 | Alternatively, download the project as a ZIP file and unpack into your
319 | components directory. `<zero-list-hero>` uses the following:
320 | * `Polymer`:
321 | https://github.com/Polymer/polymer
322 | * Polymer Elements' `<neon-animation>`:
323 | https://github.com/PolymerElements/neon-animation
324 | * Polymer Elements' `<iron-resizable-behavior>` for viewport change detection
325 | (and to play nicely with other Googly components):
326 | https://github.com/PolymerElements/iron-resizable-behavior
327 | * zerodevx's `<polymer-style-modules>` for `iron-flex-layout` style module
328 | (because `/deep/` and other shadow-piercing combinators are deprecated):
329 | https://github.com/zerodevx/polymer-style-modules
330 | * as well as their related dependencies.
331 | 
332 | Source provided as-is - no assumptions are made on your production build
333 | workflow.
334 | 
335 | 
336 | ### License
337 | 
338 | MIT, though I'll greatly appreciate a note if you find this useful.
339 | 
340 | 
341 | ### Version history
342 | 
343 | 1. 2015-08-19: v0.1.0
344 |   * Initial commit.
345 | 
346 | 2. 2015-10-07: v0.2.0
347 |   * BREAKING: `shadow` attribute renamed to `manual`.
348 |   * Add automatic layout layer (included layout: Masonry).
349 |   * Remove shadow dom detection workaround for content nodes retrieval.
350 |   * Use `<neon-animation>`'s in-built animatable wrapper instead.
351 |   * Improve async dom write timing resolutions.
352 |   * Other performance improvements.
353 | 
354 | 3. 2015-10-12: v0.2.1
355 |   * Updated README.md.
356 |   * Cleaned up stray comments in `zero-list-hero.html`.
357 | 
358 | 


--------------------------------------------------------------------------------
/bower.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "zero-list-hero",
 3 |   "version": "0.2.1",
 4 |   "authors": [
 5 |     "Jason JC Lee <zerodevx@gmail.com>"
 6 |   ],
 7 |   "description": "It's hero time! A Polymer 1.1+ web component that hero-animates a sequence of elements.",
 8 |   "keywords": [
 9 |     "web-components",
10 |     "polymer",
11 |     "neon-animation",
12 |     "hero",
13 |     "animations",
14 |     "layout",
15 |     "masonry"
16 |   ],
17 |   "main": "zero-list-hero.html",
18 |   "license": "https://github.com/zerodevx/zero-list-hero/blob/master/LICENSE",
19 |   "homepage": "https://github.com/zerodevx/zero-list-hero/",
20 |   "ignore": [
21 |     "/.*",
22 |     "/test/"
23 |   ],
24 |   "dependencies": {
25 |     "polymer": "Polymer/polymer#^1.1.0",
26 |     "neon-animation": "PolymerElements/neon-animation#^1.0.0",
27 |     "iron-resizable-behavior": "PolymerElements/iron-resizable-behavior#^1.0.0",
28 |     "polymer-style-modules": "zerodevx/polymer-style-modules#^1.0.0"
29 |   }
30 | }
31 | 


--------------------------------------------------------------------------------
/demo/demos.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |   <meta charset="utf-8">
 5 |   <title>&lt;zero-list-hero&gt; demo catalogue</title>
 6 |   <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
 7 | </head>
 8 | 
 9 | <body>
10 |   <h3>&lt;zero-list-hero&gt; demo catalogue</h3><br>
11 |   <a href="simple-demo.html">Simple Demo</a><br><br>
12 |   <a href="dom-repeat-demo.html">With `dom-repeat`</a><br><br>
13 |   <a href="shadow-demo.html">Using native shadow DOM</a><br><br>
14 |   <a href="masonry-demo.html">Masonry layout demo</a><br><br>
15 | </body>
16 | </html>
17 | 


--------------------------------------------------------------------------------
/demo/dom-repeat-demo.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |   <meta charset="utf-8">
 5 |   <title>&lt;zero-list-hero&gt; dom-repeat demo</title>
 6 |   <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
 7 |   <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
 8 |   <link rel="import" href="../../polymer/polymer.html">
 9 | 
10 |   <link rel="import" href="../zero-list-hero.html">
11 |   <link rel="import" href="simple-card.html">
12 | </head>
13 | 
14 | <body unresolved class="fullbleed">
15 |   <style>
16 |     .btn { font-size: 16px; height: 32px; }
17 |   </style>
18 | 
19 |   <h3>&lt;zero-list-hero&gt; dom-repeat demo</h3>
20 |   <button id="btn_add" class="btn">Add</button>
21 |   <button id="btn_remove" class="btn">Remove</button>
22 |   <button id="btn_update" class="btn">Update</button>
23 |   <button id="btn_reorder" class="btn">Sort</button><br><br>
24 | 
25 |   <template id="tpl" is="dom-bind">
26 | 
27 |     <zero-list-hero id="hero">
28 |       <template id="repeat" is="dom-repeat" items="{{list}}" sort="sort">
29 |         <simple-card hero-id$="{{item.foo}}" foo$="{{item.foo}}" bar$="{{item.bar}}"></simple-card>
30 |       </template>
31 |     </zero-list-hero>
32 | 
33 |   </template>
34 | 
35 |   <script>
36 | 
37 |     var app = {};
38 |     var tpl = {};
39 | 
40 |     function getRand(min, max) {
41 |       return (Math.floor(Math.random() * (max - min + 1)) + min);
42 |     }
43 | 
44 |     //window.addEventListener("WebComponentsReady", function (e) {
45 |     HTMLImports.whenReady(function () {
46 |       tpl = document.querySelector("#tpl");
47 |       tpl.list = [
48 |         { foo: getRand(0, 999999).toString(), bar: getRand(0, 999999).toString() },
49 |         { foo: getRand(0, 999999).toString(), bar: getRand(0, 999999).toString() },
50 |         { foo: getRand(0, 999999).toString(), bar: getRand(0, 999999).toString() },
51 |       ];
52 |       tpl.sortmode = 0;
53 |       tpl.sort = function (a, b) {
54 |         if (this.sortmode == 0) return 0;
55 |         if (this.sortmode == 1) {
56 |           if (a.foo < b.foo) return -1;
57 |           if (a.foo > b.foo) return 1;
58 |           return 0;
59 |         }
60 |         if (this.sortmode == 2) {
61 |           if (a.bar < b.bar) return -1;
62 |           if (a.bar > b.bar) return 1;
63 |           return 0;
64 |         }
65 |       };
66 |     });
67 | 
68 |     window.addEventListener("dom-change", function (e) {
69 |       app = document.querySelector("#hero");
70 |     });
71 | 
72 |     document.querySelector("#btn_add").addEventListener("click", function (e) {
73 |       tpl.splice("list", getRand(0, tpl.list.length - 1), 0, {
74 |         foo: getRand(0, 999999).toString(),
75 |         bar: getRand(0, 999999).toString()
76 |       });
77 |     });
78 | 
79 |     document.querySelector("#btn_remove").addEventListener("click", function (e) {
80 |       tpl.splice("list", getRand(0, tpl.list.length - 1), 1);
81 |     });
82 | 
83 |     document.querySelector("#btn_update").addEventListener("click", function (e) {
84 |       for (var a = 0, cnt = getRand(1, tpl.list.length); a < cnt; a++) {
85 |         var b = getRand(0, tpl.list.length - 1).toString();
86 |         tpl.set("list." + b + ".bar", getRand(0, 999999).toString());
87 |       }
88 |     });
89 | 
90 |     document.querySelector("#btn_reorder").addEventListener("click", function (e) {
91 |       (tpl.sortmode == 2) ? tpl.sortmode = 0 : tpl.sortmode++;
92 |       tpl.$.repeat.render();
93 |     });
94 | 
95 |   </script>
96 | 
97 | </body>
98 | </html>
99 | 


--------------------------------------------------------------------------------
/demo/masonry-demo.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html>
  3 | <head>
  4 |   <meta charset="utf-8">
  5 |   <title>&lt;zero-list-hero&gt; masonry layout demo</title>
  6 |   <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
  7 |   <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
  8 |   <!--<script>
  9 |     window.Polymer = window.Polymer || {};
 10 |     window.Polymer.dom = "shadow";
 11 |   </script>-->
 12 |   <link rel="import" href="../../polymer/polymer.html">
 13 | 
 14 |   <link rel="import" href="../zero-list-hero.html">
 15 | </head>
 16 | 
 17 | <body unresolved class="fullbleed">
 18 |   <style>
 19 |     /*html /deep/ .btn { font-size: 16px; height: 32px; }
 20 |     html /deep/ .card { text-align: center; font-size: 24px; box-sizing: border-box; margin: 4px; border-radius: 24px; display: block;}
 21 |     html /deep/ .red { background-color: red; height: 60px; }
 22 |     html /deep/ .blue { background-color: blue; height: 90px }
 23 |     html /deep/ .green { background-color: green; height: 120px; }
 24 |     html /deep/ .yellow { background-color: yellow; height: 150px; }
 25 |     html /deep/ .pink { background-color: pink; height: 180px; }*/
 26 |     .btn { font-size: 16px; height: 32px; }
 27 |     .card { text-align: center; font-size: 24px; box-sizing: border-box; margin: 4px; border-radius: 24px; display: block;}
 28 |     .red { background-color: red; height: 60px; }
 29 |     .blue { background-color: blue; height: 90px }
 30 |     .green { background-color: green; height: 120px; }
 31 |     .yellow { background-color: yellow; height: 150px; }
 32 |     .pink { background-color: pink; height: 180px; }
 33 |   </style>
 34 | 
 35 |   <h3>&lt;zero-list-hero&gt; masonry layout demo (resize me!)</h3>
 36 |   <button id="btn_add" class="btn">Add</button>
 37 |   <button id="btn_remove" class="btn">Remove</button>
 38 |   <button id="btn_update" class="btn">Update</button><br><br>
 39 | 
 40 |   <zero-list-hero id="hero" layout="masonry" layout-options='{"breakpoint":"150"}'>
 41 |     <div hero-id="1" class="card red">1</div>
 42 |     <div hero-id="2" class="card blue">2</div>
 43 |     <div hero-id="3" class="card red">3</div>
 44 |     <div hero-id="4" class="card green">4</div>
 45 |     <div hero-id="5" class="card red">5</div>
 46 |     <div hero-id="6" class="card pink">6</div>
 47 |     <div hero-id="7" class="card yellow">7</div>
 48 |     <div hero-id="8" class="card blue">8</div>
 49 |     <div hero-id="9" class="card red">9</div>
 50 |     <div hero-id="10" class="card red">10</div>
 51 |   </zero-list-hero>
 52 | 
 53 |   <script>
 54 | 
 55 |     var app = document.querySelector("#hero");
 56 |     var cnt = document.querySelectorAll("[hero-id]:not(.zero-list-hero-item)").length;
 57 | 
 58 |     function getRand(min, max) {
 59 |       return (Math.floor(Math.random() * (max - min + 1)) + min);
 60 |     }
 61 | 
 62 |     function getRandColor() {
 63 |       switch(getRand(0, 4)) {
 64 |         case 0: return "red"; break;
 65 |         case 1: return "blue"; break;
 66 |         case 2: return "green"; break;
 67 |         case 3: return "yellow"; break;
 68 |         default: return "pink";
 69 |       }
 70 |     }
 71 | 
 72 |     document.querySelector("#btn_add").addEventListener("click", function (e) {
 73 |       cnt++;
 74 |       var el = document.createElement("div");
 75 |       var heroId = getRand(0, 999999).toString();
 76 |       el.setAttribute("hero-id", heroId);
 77 |       el.classList.add("card", getRandColor());
 78 |       el.innerHTML = cnt.toString();
 79 |       Polymer.dom(app).appendChild(el);
 80 |     });
 81 | 
 82 |     document.querySelector("#btn_remove").addEventListener("click", function (e) {
 83 |       var nodes = document.querySelectorAll("#hero [hero-id]:not(.zero-list-hero-item)");
 84 |       var target = nodes[getRand(0, nodes.length - 1)];
 85 |       t = target;
 86 |       console.log(target);
 87 |       Polymer.dom(Polymer.dom(target).parentNode).removeChild(target);
 88 |     });
 89 | 
 90 |     document.querySelector("#btn_update").addEventListener("click", function (e) {
 91 |       var nodes = document.querySelectorAll("#hero [hero-id]:not(.zero-list-hero-item)");
 92 |       var target = nodes[getRand(0, nodes.length - 1)];
 93 |       target.innerHTML += " :)";
 94 |     });
 95 | 
 96 |   </script>
 97 | 
 98 | </body>
 99 | </html>
100 | 


--------------------------------------------------------------------------------
/demo/parent-element.html:
--------------------------------------------------------------------------------
 1 | <link rel="import" href="../../polymer/polymer.html">
 2 | <link rel="import" href="../zero-list-hero.html">
 3 | <link rel="import" href="simple-card.html">
 4 | 
 5 | <dom-module id="parent-element">
 6 |   <style>
 7 |     .btn { font-size: 16px; height: 32px; }
 8 |   </style>
 9 | 
10 |   <template>
11 |     <h3>&lt;zero-list-hero&gt; shadow-dom demo</h3>
12 |     <button id="btn_add" class="btn" on-tap="addTapped">Add</button>
13 |     <button id="btn_remove" class="btn" on-tap="removeTapped">Remove</button>
14 |     <button id="btn_update" class="btn" on-tap="updateTapped">Update</button>
15 |     <button id="btn_reorder" class="btn" on-tap="reorderTapped">Reorder</button><br><br>
16 | 
17 |     <zero-list-hero id="hero" shadow>
18 |       <template id="repeat" is="dom-repeat" items="{{list}}" sort="tplSort">
19 |         <simple-card hero-id$="{{item.foo}}" foo$="{{item.foo}}" bar$="{{item.bar}}"></simple-card>
20 |       </template>
21 |     </zero-list-hero>
22 | 
23 |   </template>
24 | 
25 |   <script>
26 |     Polymer({
27 |       is: "parent-element",
28 |       properties: {
29 |         list: { type: Object, value: function () { return []; } },
30 |         sortmode: { type: Number, value: 0 }
31 |       },
32 |       observers: [
33 |         "listChanged(list.*)"
34 |       ],
35 |       ready: function () {
36 |         this.push("list", { foo: this.getRand(0, 999999).toString(), bar: this.getRand(0, 999999).toString() });
37 |         this.push("list", { foo: this.getRand(0, 999999).toString(), bar: this.getRand(0, 999999).toString() });
38 |         this.push("list", { foo: this.getRand(0, 999999).toString(), bar: this.getRand(0, 999999).toString() });
39 |       },
40 |       getRand: function (min, max) {
41 |         return (Math.floor(Math.random() * (max - min + 1)) + min);
42 |       },
43 |       listChanged: function (changeRecord) {
44 |         this.$.hero.animate();
45 |       },
46 |       addTapped: function () {
47 |         this.splice("list", this.getRand(0, this.list.length - 1), 0, {
48 |           foo: this.getRand(0, 999999).toString(),
49 |           bar: this.getRand(0, 999999).toString()
50 |         });
51 |       },
52 |       removeTapped: function () {
53 |         this.splice("list", this.getRand(0, this.list.length - 1), 1);
54 |       },
55 |       updateTapped: function () {
56 |         for (var a = 0, cnt = this.getRand(1, this.list.length); a < cnt; a++) {
57 |           this.set("list." + this.getRand(0, this.list.length - 1).toString() + ".bar", this.getRand(0, 999999).toString());
58 |         }
59 |       },
60 |       reorderTapped: function () {
61 |         (this.sortmode == 2) ? this.sortmode = 0 : this.sortmode++;
62 |         this.$.repeat.render();
63 |         this.async(function () {
64 |           this.$.hero.animate();
65 |         });
66 |       },
67 |       tplSort: function (a, b) {
68 |         if (this.sortmode == 0) return 0;
69 |         if (this.sortmode == 1) {
70 |           if (a.foo < b.foo) return -1;
71 |           if (a.foo > b.foo) return 1;
72 |           return 0;
73 |         }
74 |         if (this.sortmode == 2) {
75 |           if (a.bar < b.bar) return -1;
76 |           if (a.bar > b.bar) return 1;
77 |           return 0;
78 |         }
79 |       }
80 | 
81 |     });
82 |   </script>
83 | </dom-module>
84 | 


--------------------------------------------------------------------------------
/demo/shadow-demo.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |   <meta charset="utf-8">
 5 |   <title>&lt;zero-list-hero&gt; shadow-dom demo</title>
 6 |   <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
 7 |   <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
 8 |   <script>
 9 |     window.Polymer = window.Polymer || {};
10 |     window.Polymer.dom = "shadow";
11 |   </script>
12 | 
13 |   <link rel="import" href="parent-element.html">
14 | </head>
15 | 
16 | <body unresolved class="fullbleed">
17 | 
18 |   <parent-element id="app"></parent-element>
19 | 
20 |   <script>
21 |     var app = document.querySelector("#app");
22 |   </script>
23 | </body>
24 | </html>
25 | 


--------------------------------------------------------------------------------
/demo/simple-card.html:
--------------------------------------------------------------------------------
 1 | <dom-module id="simple-card">
 2 |   <style>
 3 |     :host {
 4 |       display: inline-block;
 5 |       box-sizing: border-box;
 6 |       padding: 8px;
 7 |       background-color: #f1f1f1;
 8 |       color: #424242;
 9 |     }
10 |     .container {
11 |       box-shadow: 0 16px 24px 2px rgba(0, 0, 0, 0.14),
12 |                   0  6px 30px 5px rgba(0, 0, 0, 0.12),
13 |                   0  8px 10px -5px rgba(0, 0, 0, 0.4);
14 |       background-color: #fff;
15 |       padding: 8px;
16 |       width: 80px;
17 |     }
18 |   </style>
19 |   <template>
20 |     <div class="container">
21 |       <div><b>{{foo}}</b></div>
22 |       <div>{{bar}}</div>
23 |     </div>
24 |   </template>
25 |   <script>
26 |     Polymer({
27 |       is: "simple-card",
28 |       properties: {
29 |         foo: String,
30 |         bar: String
31 |       }
32 |     });
33 |   </script>
34 | </dom-module>
35 | 


--------------------------------------------------------------------------------
/demo/simple-demo.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |   <meta charset="utf-8">
 5 |   <title>&lt;zero-list-hero&gt; simple demo</title>
 6 |   <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
 7 |   <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
 8 |   <!--<script>
 9 |     window.Polymer = window.Polymer || {};
10 |     window.Polymer.dom = "shadow";
11 |   </script>-->
12 | 
13 |   <link rel="import" href="../zero-list-hero.html">
14 | </head>
15 | 
16 | <body unresolved class="fullbleed">
17 |   <style>
18 |     .btn { font-size: 16px; height: 32px; }
19 |     body /deep/ .card {
20 |       display: block;
21 |       height: 32px;
22 |       border: 1px solid black;
23 |       text-align: center;
24 |       font-size: 20px;
25 |     }
26 |   </style>
27 | 
28 |   <h3>&lt;zero-list-hero&gt; simple demo</h3>
29 |   <button id="btn_add" class="btn">Add</button>
30 |   <button id="btn_remove" class="btn">Remove</button>
31 |   <button id="btn_update" class="btn">Update</button>
32 |   <button id="btn_reorder" class="btn">Reorder</button><br><br>
33 | 
34 |   <zero-list-hero id="hero">
35 |     <div hero-id="tom" class="card" style="background-color: red">I'm Tom</div>
36 |     <div hero-id="mary" class="card" style="background-color: green">I'm Mary</div>
37 |     <div hero-id="john" class="card" style="background-color: yellow">I'm John</div>
38 |   </zero-list-hero>
39 | 
40 |   <script>
41 | 
42 |     var app = document.querySelector("#hero");
43 | 
44 |     function getRand(min, max) {
45 |       return (Math.floor(Math.random() * (max - min + 1)) + min);
46 |     }
47 | 
48 |     function getRandColor() {
49 |       switch(getRand(0, 4)) {
50 |         case 0: return "red"; break;
51 |         case 1: return "blue"; break;
52 |         case 2: return "green"; break;
53 |         case 3: return "yellow"; break;
54 |         default: return "pink";
55 |       }
56 |     }
57 | 
58 |     document.querySelector("#btn_add").addEventListener("click", function (e) {
59 |       var el = document.createElement("div");
60 |       var heroId = getRand(0, 9999999).toString();
61 |       el.setAttribute("hero-id", heroId);
62 |       el.style.backgroundColor = getRandColor();
63 |       el.classList.add("card");
64 |       el.innerHTML = "I'm " + heroId;
65 |       var nodes = document.querySelectorAll("[hero-id]:not(.zero-list-hero)");
66 |       var a = getRand(0, nodes.length - 1);
67 |       if (a === nodes.length - 1) {
68 |         Polymer.dom(app).appendChild(el);
69 |       } else {
70 |         Polymer.dom(app).insertBefore(el, nodes[a]);
71 |       }
72 |     });
73 | 
74 |     document.querySelector("#btn_remove").addEventListener("click", function (e) {
75 |       var nodes = document.querySelectorAll("#hero [hero-id]:not(.zero-list-hero)");
76 |       var target = nodes[getRand(0, nodes.length - 1)];
77 |       Polymer.dom(app).removeChild(target);
78 |     });
79 | 
80 |     document.querySelector("#btn_update").addEventListener("click", function (e) {
81 |       var nodes = document.querySelectorAll("#hero [hero-id]:not(.zero-list-hero)");
82 |       var target = nodes[getRand(0, nodes.length - 1)];
83 |       target.innerHTML += " :)";
84 |     });
85 | 
86 |     document.querySelector("#btn_reorder").addEventListener("click", function (e) {
87 |       var nodes = document.querySelectorAll("#hero [hero-id]:not(.zero-list-hero)");
88 |       var a = nodes[getRand(0, nodes.length - 1)];
89 |       var b = nodes[getRand(0, nodes.length - 1)];
90 |       var clone = a.cloneNode(true);
91 |       Polymer.dom(app).insertBefore(clone, b);
92 |       Polymer.dom(app).removeChild(a);
93 |     });
94 | 
95 |   </script>
96 | 
97 | </body>
98 | </html>
99 | 


--------------------------------------------------------------------------------
/zero-list-hero.html:
--------------------------------------------------------------------------------
  1 | <!--
  2 | The MIT License (MIT)
  3 | 
  4 | Copyright (c) 2015 Jason JC Lee <zerodevx@gmail.com>
  5 | 
  6 | Permission is hereby granted, free of charge, to any person obtaining a copy
  7 | of this software and associated documentation files (the "Software"), to deal
  8 | in the Software without restriction, including without limitation the rights
  9 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 10 | copies of the Software, and to permit persons to whom the Software is
 11 | furnished to do so, subject to the following conditions:
 12 | 
 13 | The above copyright notice and this permission notice shall be included in all
 14 | copies or substantial portions of the Software.
 15 | 
 16 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
 17 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
 18 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 19 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 20 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 21 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 22 | SOFTWARE.
 23 | -->
 24 | 
 25 | <link rel="import" href="../polymer/polymer.html">
 26 | <link rel="import" href="../neon-animation/neon-animated-pages.html">
 27 | <link rel="import" href="../neon-animation/neon-animatable.html">
 28 | <link rel="import" href="../neon-animation/neon-animatable-behavior.html">
 29 | <link rel="import" href="../neon-animation/neon-shared-element-animatable-behavior.html">
 30 | <link rel="import" href="../neon-animation/neon-animation-behavior.html">
 31 | <link rel="import" href="../neon-animation/web-animations.html">
 32 | <link rel="import" href="../neon-animation/animations/hero-animation.html">
 33 | <link rel="import" href="../neon-animation/animations/cascaded-animation.html">
 34 | <link rel="import" href="../iron-resizable-behavior/iron-resizable-behavior.html">
 35 | <link rel="import" href="../polymer-style-modules/iron-flex-layout-styles.html">
 36 | 
 37 | <dom-module id="zero-list-hero">
 38 |   <template>
 39 |     <style include="iron-flex-layout-styles"></style>
 40 |     <style>
 41 |       :host { width: 100%; }
 42 |       #content_wrap[offscreen] { position: fixed; right: 9999px; display: inline; }
 43 |       .zero-list-hero-item {
 44 |         @apply(--zero-list-hero-item-mixin);
 45 |       }
 46 |     </style>
 47 |     <div id="content_wrap" offscreen$="[[_computeLayout(layout)]]" hidden$="[[!_computeLayout(layout)]]"><content id="content" select="[hero-id]"></content></div>
 48 |     <neon-animated-pages id="pages" attr-for-selected="page" selected="data0" on-neon-animation-finish="_onNeonAnimationFinish" style="position:relative">
 49 |       <neon-animatable id="data0" page="data0"></neon-animatable>
 50 |       <neon-animatable id="data1" page="data1"></neon-animatable>
 51 |     </neon-animated-pages>
 52 |   </template>
 53 | </dom-module>
 54 | 
 55 | <script>
 56 |   (function () {
 57 |     Polymer({
 58 |       is: "zero-entry-animation",
 59 |       behaviors: [Polymer.NeonAnimationBehavior],
 60 |       configure: function(config) {
 61 |         var node = config.node;
 62 |         this._effect = new KeyframeEffect(node, [
 63 |           {"opacity": "0.0", "transform": "translate(-4vw, 16vh) rotate(8deg)"},
 64 |           {"opacity": "1.0", "transform": "translate(0px, 0px) rotate(0deg)"}
 65 |         ], this.timingFromConfig(config));
 66 |         return this._effect;
 67 |       }
 68 |     });
 69 |     Polymer({
 70 |       is: "zero-exit-animation",
 71 |       behaviors: [Polymer.NeonAnimationBehavior],
 72 |       configure: function(config) {
 73 |         var node = config.node;
 74 |         this._effect = new KeyframeEffect(node, [
 75 |           {"opacity": "1.0", "transform": "translate(0px, 0px) rotate(0deg)"},
 76 |           {"opacity": "0.0", "transform": "translate(4vw, -16vh) rotate(8deg)"}
 77 |         ], this.timingFromConfig(config));
 78 |         return this._effect;
 79 |       }
 80 |     });
 81 |     Polymer({
 82 |       is: "zero-list-hero",
 83 |       behaviors: [Polymer.IronResizableBehavior],
 84 |       properties: {
 85 |         debounceDelay: { type: Number, value: 500 },
 86 |         cascadeDelay: { type: Number, value: 50 },
 87 |         addAnimation: { type: String, value: "zero-entry-animation" },
 88 |         removeAnimation: { type: String, value: "zero-exit-animation" },
 89 |         manual: { type: Boolean, value: false },
 90 |         inTransit: { type: Boolean, value: false, notify: true, readOnly: true },
 91 |         layout: { type: String, value: "" },
 92 |         layoutOptions: { type: Object, value: function () { return {}; } },
 93 |         _observer: { type: Object, value: function () { return {}; } },
 94 |         _active: { type: String, value: "data0" },
 95 |         _inactive: { type: String, value: "data1" },
 96 |         _placed: { type: Array, value: function () { return []; } },
 97 |         _hero: { type: Boolean, value: false }
 98 |       },
 99 |       ready: function () {
100 |         this._resetAnimationConfigs();
101 |       },
102 |       attached: function () {
103 |         if (this.layout) {
104 |           if (this.layout === "masonry") {
105 |             if (!this.layoutOptions.breakpoint) { this.layoutOptions.breakpoint = 300; }
106 |             this.layoutOptions.columns = this._layout("getMasonryColumns");
107 |             this.listen(this, "iron-resize", "_onIronResize");
108 |           } else {
109 |             console.warn("[zero-list-hero] Invalid layout attribute", this.layout);
110 |             this.layout = "";
111 |           }
112 |         }
113 |         if (!this.manual) { this._startObserving(); }
114 |         this.animate(true);
115 |       },
116 |       detached: function () {
117 |         if (this.layout) { this.unlisten(this, "iron-resize", "_onIronResize"); }
118 |         if (!this.manual) { this._observer.disconnect(); }
119 |       },
120 |       _computeLayout: function (l) {
121 |         return Boolean(l);
122 |       },
123 |       _layout: function (mode, inp) {
124 |         switch(mode) {
125 |           case "findShortest":
126 |             var min = inp[0];
127 |             var index = 0;
128 |             for (var a = 1; a < inp.length; a++) {
129 |               if (inp[a] < min) {
130 |                 min = inp[a];
131 |                 index = a;
132 |               }
133 |             }
134 |             return index;
135 |             break;
136 |           case "getMasonryColumns":
137 |             var c = Math.floor(this.parentNode.offsetWidth / this.layoutOptions.breakpoint) || 1;
138 |             var l = this._placed.length || Polymer.dom(this.$.content).getDistributedNodes().length || 1;
139 |             return (c > l) ? l : c;
140 |             break;
141 |           default:
142 |             console.warn("[zero-list-hero] Invalid syntax in _layout API", o, inp);
143 |         }
144 |       },
145 |       _onIronResize: function (e) {
146 |         if (this.layout === "masonry") {
147 |           var c = this._layout("getMasonryColumns");
148 |           if (this.layoutOptions.columns !== c) {
149 |             this.animate(true);
150 |           }
151 |         }
152 |       },
153 |       _resetAnimationConfigs: function () {
154 |         this.$.data0.animationConfig = {
155 |           entry: [{
156 |             name: "cascaded-animation",
157 |             nodes: [],
158 |             animation: this.addAnimation,
159 |             nodeDelay: this.cascadeDelay
160 |           }],
161 |           exit: [{
162 |             name: "cascaded-animation",
163 |             nodes: [],
164 |             animation: this.removeAnimation,
165 |             nodeDelay: this.cascadeDelay
166 |           }]
167 |         };
168 |         this.$.data1.animationConfig = {
169 |           entry: [{
170 |             name: "cascaded-animation",
171 |             nodes: [],
172 |             animation: this.addAnimation,
173 |             nodeDelay: this.cascadeDelay
174 |           }],
175 |           exit: [{
176 |             name: "cascaded-animation",
177 |             nodes: [],
178 |             animation: this.removeAnimation,
179 |             nodeDelay: this.cascadeDelay
180 |           }]
181 |         };
182 |         this.$.data0.sharedElements = {};
183 |         this.$.data1.sharedElements = {};
184 |       },
185 |       _startObserving: function () {
186 |         // MutationObserver works only in shady dom
187 |         // var closest = function (el, fn) { return el && (fn(el) ? el : closest(el.parentElement, fn)); };
188 |         var self = this;
189 |         this._observer = new MutationObserver(function (mutations) {
190 |           self.animate();
191 |         });
192 |         this._observer.observe(this.$.content_wrap, {
193 |           childList: true,
194 |           attributes: true,
195 |           attributeFilter: ["hero-id"],
196 |           characterData: true,
197 |           subtree: true
198 |         });
199 |       },
200 |       _checkHero: function (nodes) {
201 |         if (nodes.length !== this._placed.length) { return true; }
202 |         var hero = false;
203 |         for (var a = 0; a < nodes.length; a++) {
204 |           if (nodes[a].getAttribute("hero-id") !== this._placed[a]) {
205 |             hero = true;
206 |             break;
207 |           }
208 |         }
209 |         return hero;
210 |       },
211 |       _clearPage: function (page) {
212 |         var t = this.$[page];
213 |         while (Polymer.dom(t).firstElementChild) { Polymer.dom(t).removeChild(Polymer.dom(t).firstElementChild); }
214 |       },
215 |       _clonePage: function (nodes, page) {
216 |         this._placed = [];
217 |         var tree = this.create("div");
218 |         if (this.layout === "masonry") {
219 |           tree.classList.add("layout", "horizontal");
220 |           var arr = [];
221 |           var idx = [];
222 |           var cols = this._layout("getMasonryColumns");
223 |           for (var a = 0; a < cols; a++) {
224 |             arr.push(tree.appendChild(this.create("div")));
225 |             arr[a].classList.add("flex", "layout", "vertical");
226 |             idx[a] = 0;
227 |           }
228 |           this.layoutOptions.columns = cols;
229 |           for (var a = 0; a < nodes.length; a++) {
230 |             var i = this._layout("findShortest", idx);
231 |             var b = arr[i].appendChild(nodes[a].cloneNode(true));
232 |             b.classList.add("zero-list-hero-item");
233 |             this._placed.push(b.getAttribute("hero-id"));
234 |             idx[i] += nodes[a].offsetHeight;
235 |           }
236 |         } else {
237 |           for (var a = 0; a < nodes.length; a++) {
238 |             var b = tree.appendChild(nodes[a].cloneNode(true));
239 |             b.classList.add("zero-list-hero-item");
240 |             this._placed.push(b.getAttribute("hero"));
241 |           }
242 |         }
243 |         Polymer.dom(this.$[page]).appendChild(tree);
244 |         this._hero = false;
245 |       },
246 |       _configureAnimations: function () {
247 |         var active = this.$[this._active];
248 |         var inactive = this.$[this._inactive];
249 |         var nodes = Polymer.dom(active).querySelectorAll("[hero-id]");
250 |         nodes.forEach(function (node) {
251 |           var heroid = node.getAttribute("hero-id");
252 |           var target = Polymer.dom(inactive).querySelector("[hero-id='" + heroid + "']");
253 |           if (target) {
254 |             active.animationConfig.exit.push({
255 |               name: "hero-animation",
256 |               id: heroid,
257 |               fromPage: active
258 |             });
259 |             inactive.animationConfig.entry.push({
260 |               name: "hero-animation",
261 |               id: heroid,
262 |               toPage: inactive
263 |             });
264 |             active.sharedElements[heroid] = node;
265 |             inactive.sharedElements[heroid] = target;
266 |           } else {
267 |             active.animationConfig.exit[0].nodes.push(node);
268 |           }
269 |         });
270 |         nodes = Polymer.dom(inactive).querySelectorAll("[hero-id]");
271 |         nodes.forEach(function (node) {
272 |           var heroid = node.getAttribute("hero-id");
273 |           var target = Polymer.dom(active).querySelector("[hero-id='" + heroid + "']");
274 |           if (!target) {
275 |             inactive.animationConfig.entry[0].nodes.push(node);
276 |           }
277 |         });
278 |       },
279 |       _playAnimation: function () {
280 |         Polymer.dom.flush();
281 |         this._configureAnimations();
282 |         this.$.pages.selected = this._inactive;
283 |       },
284 |       _onNeonAnimationFinish: function () {
285 |         this._resetAnimationConfigs();
286 |         var temp = this._active;
287 |         this._active = this._inactive;
288 |         this._inactive = temp;
289 |         this._hero = false;
290 |         this._setInTransit(false);
291 |         this._clearPage(this._inactive);
292 |       },
293 |       animate: function (hero) {
294 |         if (hero) { this._hero = true; }
295 |         this.debounce("animate-job", function () {
296 |           if (this.inTransit) {
297 |             this.animate();
298 |             return;
299 |           }
300 |           var nodes = Polymer.dom(this.$.content).getDistributedNodes();
301 |           this._setInTransit(true);
302 |           if ((this._hero) || (this._checkHero(nodes))) {
303 |             this._clonePage(nodes, this._inactive);
304 |             this._playAnimation();
305 |           } else {
306 |             this._clearPage(this._active);
307 |             this._clonePage(nodes, this._active);
308 |             Polymer.dom.flush();
309 |             this._setInTransit(false);
310 |           }
311 |         }, this.debounceDelay);
312 |       }
313 |     });
314 |   })();
315 | </script>
316 | 


--------------------------------------------------------------------------------