Index: third_party/polymer/components/core-list/demo.html |
diff --git a/third_party/polymer/components/core-list/demo.html b/third_party/polymer/components/core-list/demo.html |
deleted file mode 100644 |
index 84a28dcd2ab2529696b55a76c2261d5a895d16c1..0000000000000000000000000000000000000000 |
--- a/third_party/polymer/components/core-list/demo.html |
+++ /dev/null |
@@ -1,236 +0,0 @@ |
-<!doctype html> |
-<!-- |
-Copyright (c) 2014 The Polymer Project Authors. All rights reserved. |
-This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt |
-The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt |
-The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt |
-Code distributed by Google as part of the polymer project is also |
-subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt |
---> |
-<html> |
-<head> |
- <title>core-list</title> |
- <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"> |
- <script src="../webcomponentsjs/webcomponents.js"></script> |
- <link rel="import" href="../polymer/polymer.html"> |
- <link rel="import" href="core-list.html"> |
- <style> |
- html, body { |
- margin: 0; |
- -webkit-tap-highlight-color: transparent; |
- overflow: hidden; |
- } |
- |
- list-test { |
- display: block; |
- height: 100%; |
- margin: 0 auto; |
- } |
- |
- .stuff { |
- min-height: 60px; |
- background: red !important; |
- border-bottom: 1px solid black; |
- } |
- </style> |
-</head> |
-<body fit> |
- |
-<list-test></list-test> |
- |
-<polymer-element name="list-test" layout vertical> |
-<template> |
- <style> |
- .item { |
- box-sizing: border-box; |
- height: 80px; |
- border-bottom: 1px solid #ddd; |
- padding: 4px; |
- cursor: default; |
- background-color: white; |
- overflow: hidden; |
- } |
- |
- .selected { |
- background: silver; |
- } |
- |
- .message { |
- padding-left: 77px; |
- line-height: 167%; |
- background-repeat: no-repeat; |
- background-position: 10px 10px; |
- background-size: 60px; |
- } |
- |
- .from { |
- display: inline; |
- font-weight: bold; |
- } |
- |
- .timestamp { |
- margin-left: 10px; |
- font-size: 12px; |
- opacity: 0.8; |
- } |
- |
- .body { |
- font-size: 12px; |
- } |
- |
- .spaced { |
- margin: 10px; |
- } |
- |
- .selection-display { |
- background: lightgray; |
- padding: 0 5px; |
- margin: 0 5px; |
- } |
- |
- .narrow { |
- width: 40px; |
- } |
- |
- </style> |
- |
- <div class="spaced"> |
- <button on-tap="{{addRecord}}">Add row at index:</button> |
- <input value="{{addIdx}}" class="narrow" type="number"> |
- <br> |
- <button on-tap="{{deleteRecord}}">Delete row at index:</button> |
- <input value="{{deleteIdx}}" class="narrow" type="number"> |
- <br> |
- <button on-tap="{{deleteAll}}">Delete all</button> |
- <button on-tap="{{deleteArray}}">Delete data array</button> |
- <button on-tap="{{initArrayEmpty}}">Init empty array</button> |
- <button on-tap="{{initArrayFull}}">Init full array</button> |
- <br> |
- <label><input type="checkbox" checked="{{selectionEnabled}}">Selection enabled</label> |
- <label><input type="checkbox" checked="{{multi}}">Multiple selection</label> |
- <br> |
- <button on-tap="{{clearSelection}}">Clear selection</button> |
- <button on-tap="{{deleteSelection}}">Delete selection</button> |
- </div> |
- <div layout horizontal wrap class="spaced"> |
- Selected values: |
- <template repeat="{{multi ? selection: [selection]}}"> |
- <div class="selection-display">Id {{id}}: {{checked}} {{value}} {{['a','b','c'][type]}}</div> |
- </template> |
- </div> |
- <core-list id="list" data="{{data}}" selectionEnabled="{{selectionEnabled}}" |
- selection="{{selection}}" height="80" flex multi?={{multi}}> |
- <template> |
- <div class="item {{ {selected: selected} | tokenList }}"> |
- <div class="message" style="background-image: url(images/{{model.image}}.png);"> |
- <span class="from">{{model.name}}</span> |
- <div class="subject">Row: {{index}}, Record ID: {{model.id}}</div> |
- <input type="checkbox" checked="{{model.checked}}"> |
- <input type="number" value="{{model.value}}" class="narrow"> |
- <select selectedIndex="{{model.type}}"><option>a</option><option>b</option><option>c</option></select> |
- <span class="body">{{model.details}}</span> |
- </div> |
- </div> |
- </template> |
- </core-list> |
- |
-</template> |
-<script> |
-(function() { |
- var strings = [ |
- "PARKOUR!", |
- "Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit...", |
- "Lorem Ipsum is simply dummy text of the printing and typesetting industry." |
- ]; |
- |
- var namegen = { |
- generateString: function(inLength) { |
- var s = ''; |
- for (var i=0; i<inLength; i++) { |
- s += String.fromCharCode(Math.floor(Math.random() * 26) + 97); |
- } |
- return s; |
- }, |
- generateName: function(inMin, inMax) { |
- return this.generateString(Math.floor(Math.random() * (inMax - inMin + 1) + inMin)); |
- } |
- }; |
- |
- Polymer('list-test', { |
- addIdx: 0, |
- deleteIdx: 0, |
- count: 50000, |
- ready: function() { |
- this.initArrayFull(); |
- window.list = this.$.list; |
- }, |
- generateData: function() { |
- var names = [], data = []; |
- for (var i=0; i<this.count; i++) { |
- names.push(namegen.generateName(4, 8)); |
- } |
- names.sort(); |
- for (i=0; i<this.count; i++) { |
- data.push({ |
- id: i, |
- name: names[i], |
- details: strings[i % 3], |
- image: i % 4, |
- value: 0, |
- type: 0, |
- checked: false |
- }); |
- } |
- return data; |
- }, |
- addRecord: function() { |
- this.data.splice(this.addIdx, 0, { |
- id: ++this.count, |
- name: namegen.generateName(4, 8), |
- details: strings[this.count % 3], |
- image: this.count % 4, |
- value: 0, |
- type: 0, |
- checked: false |
- }); |
- }, |
- deleteRecord: function() { |
- this.data.splice(this.deleteIdx, 1); |
- }, |
- deleteSelection: function() { |
- var i, idx; |
- if (this.multi) { |
- if (this.selection.length) { |
- for (i=0; i<this.selection.length; i++) { |
- idx = this.data.indexOf(this.selection[i]); |
- this.data.splice(idx, 1); |
- } |
- } |
- } else { |
- idx = this.data.indexOf(this.selection); |
- this.data.splice(idx, 1); |
- } |
- }, |
- clearSelection: function() { |
- this.$.list.clearSelection(); |
- }, |
- deleteAll: function() { |
- this.data.splice(0,this.data.length); |
- // this.data.length = 0; |
- }, |
- deleteArray: function() { |
- this.data = null; |
- }, |
- initArrayEmpty: function() { |
- this.data = []; |
- }, |
- initArrayFull: function() { |
- this.data = this.generateData(); |
- } |
- }); |
-})(); |
-</script> |
-</polymer-element> |
- |
-</body> |
-</html> |