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