Home | History | Annotate | Download | only in demos 
      1 <!doctype html>
      2 <html>
      3 <head>
      4 
      5   <script src="../../platform/platform.js"></script>
      6   <link href="../core-animated-pages.html" rel="import">
      7 
      8   <style>
      9     body {
     10       font-family: Roboto, 'Helvetica Neue', Helvetica, Arial, sans-serif;
     11       margin: 0;
     12     }
     13 
     14   </style>
     15 
     16 </head>
     17 <body unresolved>
     18 
     19   <polymer-element name="list-demo">
     20   <template>
     21 
     22     <style>
     23       p {
     24         margin: 8px;
     25       }
     26 
     27       .item {
     28         background: #e7e7e7;
     29         padding: 16px;
     30         margin: 8px;
     31         border-radius: 3px;
     32         box-sizing: border-box;
     33         position: relative;
     34       }
     35     </style>
     36 
     37     <p>Tap to move to top</p>
     38 
     39     <core-animated-pages id="pages" on-tap="{{reorder}}" selected="{{selected}}" on-core-animated-pages-transition-end="{{done}}" transitions="hero-transition">
     40 
     41       <section>
     42         <template repeat="{{items}}">
     43           <div hero-id="{{h}}" hero class="item">{{v}}</div>
     44         </template>
     45       </section>
     46 
     47       <section>
     48         <template repeat="{{items2}}">
     49           <div hero-id="{{h}}" hero class="item">{{v}}</div>
     50         </template>
     51       </section>
     52 
     53     </core-animated-pages>
     54 
     55   </template>
     56 
     57   <script>
     58 
     59     Polymer('list-demo', {
     60 
     61       selected: 0,
     62 
     63       items: [
     64         {h: 'matt', v: 'Matt McNulty'},
     65         {h: 'scott', v: 'Scott Miles'},
     66         {h: 'steve', v: 'Steve Orvell'},
     67         {h: 'frankie', v: 'Frankie Fu'},
     68         {h: 'daniel', v: 'Daniel Freedman'},
     69         {h: 'yvonne', v: 'Yvonne Yip'},
     70       ],
     71 
     72       items2: [
     73         {h: 'matt', v: 'Matt McNulty'},
     74         {h: 'scott', v: 'Scott Miles'},
     75         {h: 'steve', v: 'Steve Orvell'},
     76         {h: 'frankie', v: 'Frankie Fu'},
     77         {h: 'daniel', v: 'Daniel Freedman'},
     78         {h: 'yvonne', v: 'Yvonne Yip'},
     79       ],
     80 
     81       reorder: function(e) {
     82         if (this.$.pages.transitioning.length) {
     83           return;
     84         }
     85 
     86         this.lastMoved = e.target;
     87         this.lastMoved.style.zIndex = 10005;
     88         var item = e.target.templateInstance.model;
     89         var items = this.selected ? this.items : this.items2;
     90         var i = this.selected ? this.items2.indexOf(item) : this.items.indexOf(item);
     91         if (i != 0) {
     92           items.splice(0, 0, item);
     93           items.splice(i + 1, 1);
     94         }
     95 
     96         this.lastIndex = i;
     97         this.selected = this.selected ? 0 : 1;
     98       },
     99 
    100       done: function() {
    101         var i = this.lastIndex;
    102         var items = this.selected ? this.items : this.items2;
    103         var item = items[i];
    104         items.splice(0, 0, item);
    105         items.splice(i + 1, 1);
    106         this.lastMoved.style.zIndex = null;
    107       }
    108     });
    109 
    110   </script>
    111 
    112   </polymer-element>
    113 
    114   <list-demo></list-demo>
    115 
    116 </body>
    117 </html>