third_party/polymer/components/core-list/demo.html

   1 <!doctype html>
   2 <!--
   3 Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
   4 This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
   5 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
   6 The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
   7 Code distributed by Google as part of the polymer project is also
   8 subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
   9 -->
  10 <html>
  11 <head>
  12   <title>core-list</title>
  13   <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
  14   <script src="../webcomponentsjs/webcomponents.js"></script>
  15   <link rel="import" href="../polymer/polymer.html">
  16   <link rel="import" href="core-list.html">
  17   <style>
  18     html, body {
  19       margin: 0;
  20       -webkit-tap-highlight-color: transparent;
  21       overflow: hidden;
  22     }
  23
  24     list-test {
  25       display: block;
  26       height: 100%;
  27       margin: 0 auto;
  28     }
  29
  30     .stuff {
  31       min-height: 60px;
  32       background: red !important;
  33       border-bottom: 1px solid black;
  34     }
  35   </style>
  36 </head>
  37 <body fit>
  38
  39 <list-test></list-test>
  40
  41 <polymer-element name="list-test" layout vertical>
  42 <template>
  43   <style>
  44     .item {
  45       box-sizing: border-box;
  46       height: 80px;
  47       border-bottom: 1px solid #ddd;
  48       padding: 4px;
  49       cursor: default;
  50       background-color: white;
  51       overflow: hidden;
  52     }
  53
  54     .selected {
  55       background: silver;
  56     }
  57
  58     .message {
  59       padding-left: 77px;
  60       line-height: 167%;
  61       background-repeat: no-repeat;
  62       background-position: 10px 10px;
  63       background-size: 60px;
  64     }
  65
  66     .from {
  67       display: inline;
  68       font-weight: bold;
  69     }
  70
  71     .timestamp {
  72       margin-left: 10px;
  73       font-size: 12px;
  74       opacity: 0.8;
  75     }
  76
  77     .body {
  78       font-size: 12px;
  79     }
  80
  81     .spaced {
  82       margin: 10px;
  83     }
  84
  85     .selection-display {
  86       background: lightgray;
  87       padding: 0 5px;
  88       margin: 0 5px;
  89     }
  90
  91     .narrow {
  92       width: 40px;
  93     }
  94
  95   </style>
  96
  97   <div class="spaced">
  98     <button on-tap="{{addRecord}}">Add row at index:</button>
  99     <input value="{{addIdx}}" class="narrow" type="number">
 100     <br>
 101     <button on-tap="{{deleteRecord}}">Delete row at index:</button>
 102     <input value="{{deleteIdx}}" class="narrow" type="number">
 103     <br>
 104     <button on-tap="{{deleteAll}}">Delete all</button>
 105     <button on-tap="{{deleteArray}}">Delete data array</button>
 106     <button on-tap="{{initArrayEmpty}}">Init empty array</button>
 107     <button on-tap="{{initArrayFull}}">Init full array</button>
 108     <br>
 109     <label><input type="checkbox" checked="{{selectionEnabled}}">Selection enabled</label>
 110     <label><input type="checkbox" checked="{{multi}}">Multiple selection</label>
 111     <br>
 112     <button on-tap="{{clearSelection}}">Clear selection</button>
 113     <button on-tap="{{deleteSelection}}">Delete selection</button>
 114   </div>
 115   <div layout horizontal wrap class="spaced">
 116     Selected values:
 117     <template repeat="{{multi ? selection: [selection]}}">
 118       <div class="selection-display">Id {{id}}: {{checked}} {{value}} {{['a','b','c'][type]}}</div>
 119     </template>
 120   </div>
 121   <core-list id="list" data="{{data}}" selectionEnabled="{{selectionEnabled}}"
 122     selection="{{selection}}" height="80" flex multi?={{multi}}>
 123     <template>
 124       <div class="item {{ {selected: selected} | tokenList }}">
 125         <div class="message" style="background-image: url(images/{{model.image}}.png);">
 126           <span class="from">{{model.name}}</span>
 127           <div class="subject">Row: {{index}}, Record ID: {{model.id}}</div>
 128           <input type="checkbox" checked="{{model.checked}}">
 129           <input type="number" value="{{model.value}}" class="narrow">
 130           <select selectedIndex="{{model.type}}"><option>a</option><option>b</option><option>c</option></select>
 131           <span class="body">{{model.details}}</span>
 132         </div>
 133       </div>
 134     </template>
 135   </core-list>
 136
 137 </template>
 138 <script>
 139 (function() {
 140   var strings = [
 141     "PARKOUR!",
 142     "Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit...",
 143     "Lorem Ipsum is simply dummy text of the printing and typesetting industry."
 144   ];
 145
 146   var namegen = {
 147     generateString: function(inLength) {
 148       var s = '';
 149       for (var i=0; i<inLength; i++) {
 150         s += String.fromCharCode(Math.floor(Math.random() * 26) + 97);
 151       }
 152       return s;
 153     },
 154     generateName: function(inMin, inMax) {
 155       return this.generateString(Math.floor(Math.random() * (inMax - inMin + 1) + inMin));
 156     }
 157   };
 158
 159   Polymer('list-test', {
 160     addIdx: 0,
 161     deleteIdx: 0,
 162     count: 50000,
 163     ready: function() {
 164       this.initArrayFull();
 165       window.list = this.$.list;
 166     },
 167     generateData: function() {
 168       var names = [], data = [];
 169       for (var i=0; i<this.count; i++) {
 170         names.push(namegen.generateName(4, 8));
 171       }
 172       names.sort();
 173       for (i=0; i<this.count; i++) {
 174         data.push({
 175           id: i,
 176           name: names[i],
 177           details: strings[i % 3],
 178           image: i % 4,
 179           value: 0,
 180           type: 0,
 181           checked: false
 182         });
 183       }
 184       return data;
 185     },
 186     addRecord: function() {
 187       this.data.splice(this.addIdx, 0, {
 188         id: ++this.count,
 189         name: namegen.generateName(4, 8),
 190         details: strings[this.count % 3],
 191         image: this.count % 4,
 192         value: 0,
 193         type: 0,
 194         checked: false
 195       });
 196     },
 197     deleteRecord: function() {
 198       this.data.splice(this.deleteIdx, 1);
 199     },
 200     deleteSelection: function() {
 201       var i, idx;
 202       if (this.multi) {
 203         if (this.selection.length) {
 204           for (i=0; i<this.selection.length; i++) {
 205             idx = this.data.indexOf(this.selection[i]);
 206             this.data.splice(idx, 1);
 207           }
 208         }
 209       } else {
 210         idx = this.data.indexOf(this.selection);
 211         this.data.splice(idx, 1);
 212       }
 213     },
 214     clearSelection: function() {
 215       this.$.list.clearSelection();
 216     },
 217     deleteAll: function() {
 218       this.data.splice(0,this.data.length);
 219       // this.data.length = 0;
 220     },
 221     deleteArray: function() {
 222       this.data = null;
 223     },
 224     initArrayEmpty: function() {
 225       this.data = [];
 226     },
 227     initArrayFull: function() {
 228       this.data = this.generateData();
 229     }
 230   });
 231 })();
 232 </script>
 233 </polymer-element>
 234
 235 </body>
 236 </html>