Skip to content
This repository has been archived by the owner on Mar 13, 2018. It is now read-only.

Commit

Permalink
more tests
Browse files Browse the repository at this point in the history
  • Loading branch information
@sorvell
sorvell committed Nov 6, 2013
1 parent 75cd97e commit b5fc31e
Show file tree
Hide file tree
Showing 13 changed files with 702 additions and 11 deletions.
163 changes: 163 additions & 0 deletions list/elements/examples/element-fixed/element.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,163 @@
<!doctype html>
<!--
Copyright 2013 The Polymer Authors. All rights reserved.
Use of this source code is governed by a BSD-style
license that can be found in the LICENSE file.
-->
<html>
<head>
<title>list: medium</title>
<meta name="viewport" content="width=device-width">
<script src="../../../../../polymer/polymer.js"></script>
<script src="../test.js"></script>
<link rel="import" href="../../polymer-list/polymer-list.html">
<style>
html, body {
height: 100%;
margin: 0;
}

list-test {
display: block;
height: 100%;
margin: 0 auto;
}

.stuff {
min-height: 60px;
background: red !important;
border-bottom: 1px solid black;
}
</style>
</head>
<body>
<list-test id="lt"></list-test>

<polymer-element name="list-item" attributes="data" noscript>
<template>
<style>
.message {
box-sizing: border-box;
height: 80px;
padding: 4px;
padding-left: 77px;
line-height: 167%;
cursor: default;
background-color: white;
position: relative;
color: black;
background-repeat: no-repeat;
background-position: 10px 10px;
background-size: 60px;
border-bottom: 1px solid #ddd;
}

.from {
display: inline;
font-weight: bold;
}

.timestamp {
margin-left: 10px;
font-size: 12px;
opacity: 0.8;
}

.body {
font-size: 12px;
opacity: 0.8;
}

.subject {
}

.divider {
background: grey;
color: white;
height: 30px;
line-height: 30px;
padding: 0 10px;
text-transform: uppercase;
}
</style>
<div class="message" Xstyle="background-image: url(images/{{data.index % 4}}.png);">
<span class="from">{{data.name}}</span>
<span class="timestamp">{{data.time}}</span>
<div class="subject">Infinite List. {{data.index}}</div>
<div class="body">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>
</div>
</template>
</polymer-element>

<polymer-element name="list-test">
<template>
<style>
polymer-list {
height: 100%;
}
</style>
<polymer-list id="list" data="{{data}}" listData="{{listData}}" fixedHeight>
<template repeat="{{listData}}">
<div class="{{page}}">
<list-item data="{{}}"></list-item>
</div>
</template>
</polymer-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. 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."
];

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', {
count: 50000,
ready: function() {
this.data = this.generateData();
},
generateData: function() {
var names = [], data = [];
for (var i=0; i<this.count; i++) {
names.push(namegen.generateName(4, 8));
}
names.sort();
for (var i=0; i<this.count; i++) {
var name = names[i];
var divider = name.charAt(0);
if (divider === (names[i-1] || '').charAt(0)) {
divider = null;
}
data.push({
index: i,
name: name,
divider: divider,
details: strings[i % 3],
time: '8:29pm'
});
}
return data;
},
tapAction: function(e) {
console.log('tap', e);
}
});
})();
</script>
</polymer-element>
</body>
</html>
163 changes: 163 additions & 0 deletions list/elements/examples/element-fixed/element1-hat.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,163 @@
<!doctype html>
<!--
Copyright 2013 The Polymer Authors. All rights reserved.
Use of this source code is governed by a BSD-style
license that can be found in the LICENSE file.
-->
<html>
<head>
<title>list: medium</title>
<meta name="viewport" content="width=device-width">
<script src="../../../../../polymer/polymer.js"></script>
<script src="../test.js"></script>
<link rel="import" href="../../polymer-list/polymer-list.html">
<style>
html, body {
height: 100%;
margin: 0;
}

list-test {
display: block;
height: 100%;
margin: 0 auto;
}

.stuff {
min-height: 60px;
background: red !important;
border-bottom: 1px solid black;
}
</style>
</head>
<body>
<list-test id="lt"></list-test>

<polymer-element name="list-item" attributes="data" noscript>
<template>
<div class="message" Xstyle="background-image: url(images/{{data.index % 4}}.png);">
<span class="from">{{data.name}}</span>
<span class="timestamp">{{data.time}}</span>
<div class="subject">Infinite List. {{data.index}}</div>
<div class="body">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>
</div>
</template>
</polymer-element>

<polymer-element name="list-test">
<template>
<style>
polymer-list {
height: 100%;
}

list-item ^ .message {
box-sizing: border-box;
height: 80px;
padding: 4px;
padding-left: 77px;
line-height: 167%;
cursor: default;
background-color: white;
position: relative;
color: black;
background-repeat: no-repeat;
background-position: 10px 10px;
background-size: 60px;
border-bottom: 1px solid #ddd;
}

list-item ^ .from {
display: inline;
font-weight: bold;
}

list-item ^ .timestamp {
margin-left: 10px;
font-size: 12px;
opacity: 0.8;
}

list-item ^ .body {
font-size: 12px;
opacity: 0.8;
}

list-item ^ .subject {
}

list-item ^ .divider {
background: grey;
color: white;
height: 30px;
line-height: 30px;
padding: 0 10px;
text-transform: uppercase;
}
</style>
<polymer-list id="list" data="{{data}}" listData="{{listData}}" fixedHeight>
<template repeat="{{listData}}">
<div class="{{page}}">
<list-item data="{{}}"></list-item>
</div>
</template>
</polymer-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. 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."
];

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', {
count: 50000,
ready: function() {
this.data = this.generateData();
},
generateData: function() {
var names = [], data = [];
for (var i=0; i<this.count; i++) {
names.push(namegen.generateName(4, 8));
}
names.sort();
for (var i=0; i<this.count; i++) {
var name = names[i];
var divider = name.charAt(0);
if (divider === (names[i-1] || '').charAt(0)) {
divider = null;
}
data.push({
index: i,
name: name,
divider: divider,
details: strings[i % 3],
time: '8:29pm'
});
}
return data;
},
tapAction: function(e) {
console.log('tap', e);
}
});
})();
</script>
</polymer-element>
</body>
</html>
Loading

0 comments on commit b5fc31e

Please sign in to comment.