| Index: third_party/polymer/components/core-animated-pages/demos/list.html
|
| diff --git a/third_party/polymer/components/core-animated-pages/demos/list.html b/third_party/polymer/components/core-animated-pages/demos/list.html
|
| new file mode 100644
|
| index 0000000000000000000000000000000000000000..90ed8a300679add5cf9932724b26d0e5a531c212
|
| --- /dev/null
|
| +++ b/third_party/polymer/components/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>
|
|
|
Chromium Code Reviews
Issue 582873003:
Polymer elements added to third_party/polymer. (Closed)
Base URL: https://chromium.googlesource.com/chromium/src.git@master