| OLD | NEW |
|---|
| (Empty) | |
| 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.g
ithub.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/CONTRI
BUTORS.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/PATEN
TS.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, wh
en an unknown printer took a galley of type and scrambled it to make a type spec
imen 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> |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 592593002:
Inline scripts were extracted from Polymer elements. (Closed)
Base URL: https://chromium.googlesource.com/chromium/src.git@master
