third_party/polymer/components-chromium/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">
  14   <script src="../platform/platform.js"></script>
  15   <link rel="import" href="core-list.html">
  16   <style>
  17     html, body {
  18       height: 100%;
  19       margin: 0;
  20     }
  21
  22     list-test {
  23       display: block;
  24       height: 100%;
  25       margin: 0 auto;
  26     }
  27
  28     .stuff {
  29       min-height: 60px;
  30       background: red !important;
  31       border-bottom: 1px solid black;
  32     }
  33   </style>
  34 </head>
  35 <body>
  36
  37 <list-test></list-test>
  38
  39 <polymer-element name="list-test">
  40 <template>
  41   <style>
  42     core-list {
  43       height: 100%;
  44     }
  45
  46     .item {
  47       box-sizing: border-box;
  48       height: 80px;
  49       border-bottom: 1px solid #ddd;
  50       padding: 4px;
  51       cursor: default;
  52       background-color: white;
  53       overflow: hidden;
  54     }
  55
  56     .selected {
  57       background: silver;
  58     }
  59
  60     .message {
  61       padding-left: 77px;
  62       line-height: 167%;
  63       background-repeat: no-repeat;
  64       background-position: 10px 10px;
  65       background-size: 60px;
  66     }
  67
  68     .from {
  69       display: inline;
  70       font-weight: bold;
  71     }
  72
  73     .timestamp {
  74       margin-left: 10px;
  75       font-size: 12px;
  76       opacity: 0.8;
  77     }
  78
  79     .body {
  80       font-size: 12px;
  81     }
  82   </style>
  83   <core-list id="list" data="{{data}}" height="80">
  84     <template>
  85       <div class="item {{ {selected: selected} | tokenList }}">
  86         <div class="message" style="background-image: url(images/{{index % 4}}.png);">
  87           <span class="from">{{name}}</span>
  88           <span class="timestamp">{{time}}</span>
  89           <div class="subject">Infinite List. {{index}}</div>
  90           <div class="body">{{details}}</div>
  91         </div>
  92       </div>
  93     </template>
  94   </core-list>
  95
  96 </template>
  97 <script>
  98 (function() {
  99   var strings = [
 100     "PARKOUR!",
 101     "Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit...",
 102     "Lorem Ipsum is simply dummy text of the printing and typesetting industry."
 103   ];
 104
 105   var namegen = {
 106     generateString: function(inLength) {
 107       var s = '';
 108       for (var i=0; i<inLength; i++) {
 109         s += String.fromCharCode(Math.floor(Math.random() * 26) + 97);
 110       }
 111       return s;
 112     },
 113     generateName: function(inMin, inMax) {
 114       return this.generateString(Math.floor(Math.random() * (inMax - inMin + 1) + inMin));
 115     }
 116   };
 117
 118   Polymer('list-test', {
 119     count: 50000,
 120     ready: function() {
 121       this.data = this.generateData();
 122     },
 123     generateData: function() {
 124       var names = [], data = [];
 125       for (var i=0; i<this.count; i++) {
 126         names.push(namegen.generateName(4, 8));
 127       }
 128       names.sort();
 129       for (var i=0; i<this.count; i++) {
 130         var name = names[i];
 131         var divider = name.charAt(0);
 132         if (divider === (names[i-1] || '').charAt(0)) {
 133           divider = null;
 134         }
 135         data.push({
 136           index: i,
 137           name: name,
 138           divider: divider,
 139           details: strings[i % 3],
 140           time: '8:29pm'
 141         });
 142       }
 143       return data;
 144     },
 145     tapAction: function(e) {
 146       console.log('tap', e);
 147     }
 148   });
 149 })();
 150 </script>
 151 </polymer-element>
 152
 153 </body>
 154 </html>