Index: third_party/polymer/components-chromium/core-animated-pages/demos/list.html |
diff --git a/third_party/polymer/components-chromium/core-animated-pages/demos/list.html b/third_party/polymer/components-chromium/core-animated-pages/demos/list.html |
new file mode 100644 |
index 0000000000000000000000000000000000000000..90ed8a300679add5cf9932724b26d0e5a531c212 |
--- /dev/null |
+++ b/third_party/polymer/components-chromium/core-animated-pages/demos/list.html |
@@ -0,0 +1,117 @@ |
+<!doctype html> |
+<html> |
+<head> |
+ |
+ <script src="../../platform/platform.js"></script> |
+ <link href="../core-animated-pages.html" rel="import"> |
+ |
+ <style> |
+ body { |
+ font-family: Roboto, 'Helvetica Neue', Helvetica, Arial, sans-serif; |
+ margin: 0; |
+ } |
+ |
+ </style> |
+ |
+</head> |
+<body unresolved> |
+ |
+ <polymer-element name="list-demo"> |
+ <template> |
+ |
+ <style> |
+ p { |
+ margin: 8px; |
+ } |
+ |
+ .item { |
+ background: #e7e7e7; |
+ padding: 16px; |
+ margin: 8px; |
+ border-radius: 3px; |
+ box-sizing: border-box; |
+ position: relative; |
+ } |
+ </style> |
+ |
+ <p>Tap to move to top</p> |
+ |
+ <core-animated-pages id="pages" on-tap="{{reorder}}" selected="{{selected}}" on-core-animated-pages-transition-end="{{done}}" transitions="hero-transition"> |
+ |
+ <section> |
+ <template repeat="{{items}}"> |
+ <div hero-id="{{h}}" hero class="item">{{v}}</div> |
+ </template> |
+ </section> |
+ |
+ <section> |
+ <template repeat="{{items2}}"> |
+ <div hero-id="{{h}}" hero class="item">{{v}}</div> |
+ </template> |
+ </section> |
+ |
+ </core-animated-pages> |
+ |
+ </template> |
+ |
+ <script> |
+ |
+ Polymer('list-demo', { |
+ |
+ selected: 0, |
+ |
+ items: [ |
+ {h: 'matt', v: 'Matt McNulty'}, |
+ {h: 'scott', v: 'Scott Miles'}, |
+ {h: 'steve', v: 'Steve Orvell'}, |
+ {h: 'frankie', v: 'Frankie Fu'}, |
+ {h: 'daniel', v: 'Daniel Freedman'}, |
+ {h: 'yvonne', v: 'Yvonne Yip'}, |
+ ], |
+ |
+ items2: [ |
+ {h: 'matt', v: 'Matt McNulty'}, |
+ {h: 'scott', v: 'Scott Miles'}, |
+ {h: 'steve', v: 'Steve Orvell'}, |
+ {h: 'frankie', v: 'Frankie Fu'}, |
+ {h: 'daniel', v: 'Daniel Freedman'}, |
+ {h: 'yvonne', v: 'Yvonne Yip'}, |
+ ], |
+ |
+ reorder: function(e) { |
+ if (this.$.pages.transitioning.length) { |
+ return; |
+ } |
+ |
+ this.lastMoved = e.target; |
+ this.lastMoved.style.zIndex = 10005; |
+ var item = e.target.templateInstance.model; |
+ var items = this.selected ? this.items : this.items2; |
+ var i = this.selected ? this.items2.indexOf(item) : this.items.indexOf(item); |
+ if (i != 0) { |
+ items.splice(0, 0, item); |
+ items.splice(i + 1, 1); |
+ } |
+ |
+ this.lastIndex = i; |
+ this.selected = this.selected ? 0 : 1; |
+ }, |
+ |
+ done: function() { |
+ var i = this.lastIndex; |
+ var items = this.selected ? this.items : this.items2; |
+ var item = items[i]; |
+ items.splice(0, 0, item); |
+ items.splice(i + 1, 1); |
+ this.lastMoved.style.zIndex = null; |
+ } |
+ }); |
+ |
+ </script> |
+ |
+ </polymer-element> |
+ |
+ <list-demo></list-demo> |
+ |
+</body> |
+</html> |