milas/jellyfish-web
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

add iron-list

Browse source
This commit is contained in:
Luke Pulverenti 2016-04-20 23:34:52 -04:00
parent 396b125d66
commit da7c9a4899
47 changed files with 36356 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

188
dashboard-ui/bower_components/iron-list/test/basic.html vendored Normal file
View file

@ -0,0 +1,188 @@
<!doctype html>
<!--
@license
Copyright (c) 2015 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
The complete set of authors may be found at http://polymer.github.io/AUTHORS
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS
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
-->
<html>
<head>
<meta charset="UTF-8">
<title>iron-list test</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
<script src="../../webcomponentsjs/webcomponents-lite.js"></script>
<script src="../../web-component-tester/browser.js"></script>
<link rel="import" href="helpers.html">
<link rel="import" href="x-list.html">
</head>
<body>
<test-fixture id="trivialList">
<template>
<x-list></x-list>
</template>
</test-fixture>
<script>
suite('basic features', function() {
var list, container;
setup(function() {
container = fixture('trivialList');
list = container.list;
});
test('defaults', function() {
assert.equal(list.items, null, 'items');
assert.equal(list.as, 'item', 'as');
assert.equal(list.indexAs, 'index', 'indexAs');
assert.equal(list.selectedAs, 'selected', 'selectedAs');
assert.equal(list.scrollTarget, list, 'scrollTarget');
assert.isFalse(list.selectionEnabled, 'selectionEnabled');
assert.isFalse(list.multiSelection, 'multiSelection');
});
test('check items length', function(done) {
container.data = buildDataSet(100);
flush(function() {
assert.equal(list.items.length, container.data.length);
done();
});
});
test('check physical item heights', function(done) {
container.data = buildDataSet(100);
flush(function() {
var rowHeight = list._physicalItems[0].offsetHeight;
list._physicalItems.forEach(function(item) {
assert.equal(item.offsetHeight, rowHeight);
});
done();
});
});
test('check physical item size', function(done) {
var setSize = 10;
container.data = buildDataSet(setSize);
flush(function() {
assert.equal(list.items.length, setSize);
done();
});
});
test('first visible index', function(done) {
container.data = buildDataSet(100);
flush(function() {
var setSize = list.items.length;
var rowHeight = container.itemHeight;
var viewportHeight = list.offsetHeight;
var scrollToItem;
function checkFirstVisible() {
assert.equal(list.firstVisibleIndex, scrollToItem);
assert.equal(getFirstItemFromList(list).textContent, scrollToItem);
}
function checkLastVisible() {
var visibleItemsCount = Math.floor(viewportHeight / rowHeight);
assert.equal(list.lastVisibleIndex, scrollToItem + visibleItemsCount - 1);
assert.equal(getLastItemFromList(list).textContent, scrollToItem + visibleItemsCount - 1);
}
function doneScrollDown() {
checkFirstVisible();
checkLastVisible();
scrollToItem = 1;
flush(function() {
simulateScroll({
list: list,
contribution: rowHeight,
target: scrollToItem*rowHeight,
onScrollEnd: doneScrollUp
});
});
}
function doneScrollUp() {
checkFirstVisible();
checkLastVisible();
done();
}
scrollToItem = 50;
simulateScroll({
list: list,
contribution: 50,
target: scrollToItem*rowHeight,
onScrollEnd: doneScrollDown
});
});
});
test('scroll to index', function(done) {
list.items = buildDataSet(100);
setTimeout(function() {
list.scrollToIndex(30);
assert.equal(list.firstVisibleIndex, 30);
list.scrollToIndex(0);
assert.equal(list.firstVisibleIndex, 0);
var rowHeight = getFirstItemFromList(list).offsetHeight;
var viewportHeight = list.offsetHeight;
var itemsPerViewport = Math.floor(viewportHeight/rowHeight);
list.scrollToIndex(99);
assert.equal(list.firstVisibleIndex, list.items.length - itemsPerViewport);
// make the height of the viewport same as the height of the row
// and scroll to the last item
list.style.height = list._physicalItems[0].offsetHeight + 'px';
setTimeout(function() {
list.scrollToIndex(99);
assert.equal(list.firstVisibleIndex, 99);
done();
}, 100);
}, 100);
});
test('reset items', function(done) {
list.items = buildDataSet(100);
flush(function() {
assert.equal(getFirstItemFromList(list).textContent, '0');
list.items = null;
flush(function() {
assert.notEqual(getFirstItemFromList(list).textContent, '0');
list.items = buildDataSet(100);
flush(function() {
assert.equal(getFirstItemFromList(list).textContent, '0');
done();
});
});
});
});
});
</script>
</body>
</html>

125
dashboard-ui/bower_components/iron-list/test/different-heights.html vendored Normal file
View file

@ -0,0 +1,125 @@
<!doctype html>
<!--
@license
Copyright (c) 2015 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
The complete set of authors may be found at http://polymer.github.io/AUTHORS
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS
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
-->
<html>
<head>
<meta charset="UTF-8">
<title>iron-list test</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
<script src="../../webcomponentsjs/webcomponents-lite.js"></script>
<script src="../../web-component-tester/browser.js"></script>
<script src="../../iron-test-helpers/mock-interactions.js"></script>
<link rel="import" href="helpers.html">
<link rel="import" href="x-list.html">
</head>
<body>
<test-fixture id="trivialList">
<template>
<x-list></x-list>
</template>
</test-fixture>
<script>
suite('Different heights', function() {
var list, container;
setup(function() {
container = fixture('trivialList');
list = container.list;
});
test('render without gaps 1', function(done) {
list.items = [
{index: 0, height: 791},
{index: 1, height: 671}
];
flush(function() {
list.push('items',
{index: 2, height: 251},
{index: 3, height: 191},
{index: 4, height: 151},
{index: 5, height: 191},
{index: 6, height: 51},
{index: 7, height: 51},
{index: 8, height: 51}
);
simulateScroll({
list: list,
contribution: 20,
target: 100000,
onScrollEnd: done,
onScroll: function() {
list.debounce('scroll', function() {
assert.isTrue(isFullOfItems(list));
});
}
});
});
});
test('render without gaps 2', function(done) {
var height = 2, items = [];
while (items.length < 15) {
items.push({height: height});
height *= 1.5;
}
list.items = items;
flush(function() {
simulateScroll({
list: list,
contribution: 20,
target: 100000,
onScrollEnd: done,
onScroll: function() {
list.debounce('scroll', function() {
assert.equal(isFullOfItems(list), true);
});
}
});
});
});
test('render without gaps 3', function(done) {
var heights = [20, 100, 140, 117, 800, 50, 15, 80, 90, 255, 20, 15, 19, 250, 314];
list.items = heights.map(function(height) {
return {height: height};
});
flush(function() {
simulateScroll({
list: list,
contribution: 20,
target: 100000,
onScrollEnd: done,
onScroll: function() {
list.debounce('scroll', function() {
assert.isTrue(isFullOfItems(list));
});
}
});
});
});
});
</script>
</body>
</html>

121
dashboard-ui/bower_components/iron-list/test/dynamic-item-size.html vendored Normal file
View file

@ -0,0 +1,121 @@
<!doctype html>
<!--
@license
Copyright (c) 2015 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
The complete set of authors may be found at http://polymer.github.io/AUTHORS
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS
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
-->
<html>
<head>
<meta charset="UTF-8">
<title>iron-list test</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
<script src="../../webcomponentsjs/webcomponents-lite.js"></script>
<script src="../../web-component-tester/browser.js"></script>
<script src="../../iron-test-helpers/mock-interactions.js"></script>
<link rel="import" href="helpers.html">
<link rel="import" href="x-list.html">
</head>
<body>
<test-fixture id="trivialList">
<template>
<x-list item-height="0" pre></x-list>
</template>
</test-fixture>
<script>
suite('Dynamic item size', function() {
var list, container;
setup(function() {
container = fixture('trivialList');
list = container.list;
});
test('update size using item index', function(done) {
list.items = buildDataSet(100);
flush(function() {
var firstItem = getFirstItemFromList(list);
var initHeight = firstItem.offsetHeight;
list.set('items.0.index', '1\n2\n3\n4');
list.updateSizeForItem(0);
assert.isAbove(firstItem.offsetHeight, initHeight*3);
list.set('items.0.index', '1');
list.updateSizeForItem(0);
assert.equal(firstItem.offsetHeight, initHeight);
done();
});
});
test('update size using item object', function(done) {
list.items = buildDataSet(100);
flush(function() {
var firstItem = getFirstItemFromList(list);
var initHeight = firstItem.offsetHeight;
list.set('items.0.index', '1\n2\n3\n4');
list.updateSizeForItem(list.items[0]);
assert.isAbove(firstItem.offsetHeight, initHeight*3);
list.set('items.0.index', '1');
list.updateSizeForItem(list.items[0]);
assert.equal(firstItem.offsetHeight, initHeight);
done();
});
});
test('ignore items that are not rendered', function(done) {
list.items = buildDataSet(100);
flush(function() {
list.updateSizeForItem(list.items[list.items.length - 1]);
done();
});
});
test('throw if the item is invalid', function(done) {
list.items = buildDataSet(100);
flush(function() {
var firstItem = getFirstItemFromList(list);
var initHeight = firstItem.offsetHeight;
var throws = 0;
try {
list.updateSizeForItem(100);
} catch (error) {
throws++;
}
try {
list.updateSizeForItem({});
} catch (error) {
throws++;
}
assert.equal(throws, 2);
done();
});
});
});
</script>
</body>
</html>

113
dashboard-ui/bower_components/iron-list/test/focus.html vendored Normal file
View file

@ -0,0 +1,113 @@
<!doctype html>
<!--
@license
Copyright (c) 2015 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
The complete set of authors may be found at http://polymer.github.io/AUTHORS
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS
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
-->
<html>
<head>
<meta charset="UTF-8">
<title>iron-list test</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
<script src="../../webcomponentsjs/webcomponents-lite.js"></script>
<script src="../../iron-test-helpers/mock-interactions.js"></script>
<script src="../../web-component-tester/browser.js"></script>
<link rel="import" href="helpers.html">
<link rel="import" href="x-list.html">
</head>
<body>
<test-fixture id="trivialList">
<template>
<x-list></x-list>
</template>
</test-fixture>
<script>
suite('basic features', function() {
var list, container;
setup(function() {
container = fixture('trivialList');
list = container.list;
});
test('first item should be focusable', function(done) {
container.data = buildDataSet(100);
flush(function() {
console.log(getFirstItemFromList(list));
assert.notEqual(getFirstItemFromList(list).tabIndex, -1);
done();
});
});
test('focus the first item and then reset the items', function(done) {
list.items = buildDataSet(100);
flush(function() {
getFirstItemFromList(list).focus();
simulateScroll({
list: list,
contribution: 200,
target: 3000,
onScrollEnd: function() {
list.items = [];
flush(function() {
done();
});
}
});
});
});
test('focus the first item and then splice all the items', function(done) {
list.items = buildDataSet(100);
flush(function() {
getFirstItemFromList(list).focus();
simulateScroll({
list: list,
contribution: 200,
target: 3000,
onScrollEnd: function() {
list.splice('items', 0, list.items.length);
flush(function() {
done();
});
}
});
});
});
test('should not hide the list', function(done) {
list.items = buildDataSet(100);
flush(function() {
// this index isn't rendered yet
list._focusedIndex = list.items.length-1;
list.scrollTarget.addEventListener('scroll', function() {
var rect = list.getBoundingClientRect();
assert.isTrue(rect.top + rect.height > 0);
done();
});
// trigger the scroll event
list._scrollTop = 1000;
});
});
});
</script>
</body>
</html>

164
dashboard-ui/bower_components/iron-list/test/grid.html vendored Normal file
View file

@ -0,0 +1,164 @@
<!doctype html>
<!--
@license
Copyright (c) 2015 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
The complete set of authors may be found at http://polymer.github.io/AUTHORS
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS
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
-->
<html>
<head>
<meta charset="UTF-8">
<title>iron-list test</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
<script src="../../webcomponentsjs/webcomponents-lite.js"></script>
<script src="../../web-component-tester/browser.js"></script>
<link rel="import" href="helpers.html">
<link rel="import" href="x-grid.html">
</head>
<body>
<test-fixture id="trivialList">
<template>
<x-grid></x-grid>
</template>
</test-fixture>
<script>
suite('basic features', function() {
var list, container;
setup(function() {
container = fixture('trivialList');
list = container.list;
});
test('check horizontal rendering', function(done) {
container.data = buildDataSet(100);
flush(function() {
// Validate the first viewport
for (var i = 0; i < 9; i++) {
assert.equal(getNthItemFromGrid(list, i).textContent, i);
}
done();
});
});
test('first visible index', function(done) {
container.data = buildDataSet(100);
flush(function() {
var setSize = list.items.length;
var rowHeight = container.itemSize;
var viewportHeight = list.offsetHeight;
var scrollToItem;
function checkFirstVisible() {
assert.equal(list.firstVisibleIndex, getNthItemRowStart(list, scrollToItem));
assert.equal(getNthItemFromGrid(list, 0).textContent, getNthItemRowStart(list, scrollToItem));
}
function checkLastVisible() {
var visibleItemsCount = Math.floor(viewportHeight / rowHeight) * list._itemsPerRow;
var visibleItemStart = getNthItemRowStart(list, scrollToItem);
assert.equal(list.lastVisibleIndex, visibleItemStart + visibleItemsCount - 1);
assert.equal(getNthItemFromGrid(list, 8).textContent, visibleItemStart + visibleItemsCount - 1);
}
function doneScrollDown() {
checkFirstVisible();
checkLastVisible();
scrollToItem = 1;
flush(function() {
simulateScroll({
list: list,
contribution: rowHeight,
target: getGridRowFromIndex(list, scrollToItem)*rowHeight,
onScrollEnd: doneScrollUp
});
});
}
function doneScrollUp() {
checkFirstVisible();
checkLastVisible();
done();
}
scrollToItem = 50;
simulateScroll({
list: list,
contribution: rowHeight,
target: getGridRowFromIndex(list, scrollToItem)*rowHeight,
onScrollEnd: doneScrollDown
});
});
});
test('scroll to index', function(done) {
list.items = buildDataSet(100);
flush(function() {
list.scrollToIndex(30);
assert.equal(list.firstVisibleIndex, 30);
list.scrollToIndex(0);
assert.equal(list.firstVisibleIndex, 0);
list.scrollToIndex(60);
assert.equal(list.firstVisibleIndex, 60);
var rowHeight = getNthItemFromGrid(list, 0).offsetHeight;
var viewportHeight = list.offsetHeight;
var itemsPerViewport = Math.floor(viewportHeight/rowHeight) * list._itemsPerRow;
list.scrollToIndex(99);
// assert.equal(list.firstVisibleIndex, list.items.length - 7);
// make the height of the viewport same as the height of the row
// and scroll to the last item
list.style.height = list._physicalItems[0].offsetHeight + 'px';
flush(function() {
var idx = 99;
list.scrollToIndex(idx);
assert.equal(list.firstVisibleIndex, idx);
done();
});
});
});
test('reset items', function(done) {
list.items = buildDataSet(100);
flush(function() {
assert.equal(getNthItemFromGrid(list, 0).textContent, '0');
list.items = null;
flush(function() {
assert.notEqual(getNthItemFromGrid(list, 0).textContent, '0');
list.items = buildDataSet(100);
flush(function() {
assert.equal(getNthItemFromGrid(list, 0).textContent, '0');
done();
});
});
});
});
});
</script>
</body>
</html>

141
dashboard-ui/bower_components/iron-list/test/helpers.html vendored Normal file
View file

@ -0,0 +1,141 @@
<!--
@license
Copyright (c) 2015 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
The complete set of authors may be found at http://polymer.github.io/AUTHORS
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS
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
-->
<script>
function findElementInList(container, selector) {
var i = 0;
var children = container._children;
var ms = Polymer.DomApi.matchesSelector;
for (; i < children.length; i++) {
if (children[i].nodeType === Node.ELEMENT_NODE && ms.call(children[i], selector)) {
return children[i];
}
}
return null;
}
function buildItem(index) {
return {
index: index
};
}
function buildDataSet(size) {
var data = [];
while (data.length < size) {
data.push(buildItem(data.length));
}
return data;
}
function simulateScroll(config) {
var list = config.list;
var target = config.target;
var delay = config.delay || 1;
var contribution = Math.abs(config.contribution) || 10;
// scroll back up
if (target < list.scrollTop) {
contribution = -contribution;
}
function scrollHandler() {
setTimeout(function() {
var minScrollTop = 0;
var maxScrollTop = list.scrollHeight - list.offsetHeight;
config.onScroll && config.onScroll();
if (list.scrollTop < target && contribution > 0 && list.scrollTop < maxScrollTop) {
list.scrollTop = Math.min(maxScrollTop, list.scrollTop + contribution);
} else if (list.scrollTop > target && contribution < 0 && list.scrollTop > minScrollTop) {
list.scrollTop = Math.max(minScrollTop, list.scrollTop + contribution);
} else {
list.removeEventListener('scroll', scrollHandler);
list.scrollTop = target;
config.onScrollEnd && config.onScrollEnd();
}
}, delay);
}
list.addEventListener('scroll', scrollHandler);
scrollHandler();
}
function getGridRowFromIndex(grid, index) {
return Math.floor(index / grid._itemsPerRow);
}
function getNthItemFromGrid(grid, n, itemSize) {
itemSize = itemSize || 100;
var gridRect = grid.getBoundingClientRect();
var x = gridRect.left + ((n % grid._itemsPerRow) * itemSize) + (itemSize / 2);
var y = gridRect.top + (Math.floor(n / grid._itemsPerRow) * itemSize) + (itemSize / 2);
return document.elementFromPoint(x, y);
}
function getFirstItemFromList(list) {
var listRect = list.getBoundingClientRect();
return document.elementFromPoint(listRect.left + 100, listRect.top + 1);
}
function getLastItemFromList(list) {
var listRect = list.getBoundingClientRect();
return document.elementFromPoint(listRect.left + 100, listRect.top + listRect.height - 1);
}
function isFullOfItems(list) {
var listRect = list.getBoundingClientRect();
var listHeight = listRect.height - 1;
var item, y = listRect.top + 1;
// IE 10 & 11 doesn't render propertly :(
var badPixels = 0;
while (y < listHeight) {
item = document.elementFromPoint(listRect.left + 100, y);
if (!item || (item.parentNode && !item.parentNode._templateInstance)) {
badPixels++;
}
y++;
if (badPixels > 2) {
return false;
}
}
return true;
}
function checkRepeatedItems(list) {
var listRect = list.getBoundingClientRect();
var listHeight = list.offsetHeight;
var listItems = {};
return function() {
var itemKey;
var y = listRect.top;
while (y < listHeight) {
item = document.elementFromPoint(listRect.left + 100, y + 2);
itemKey = item.textContent || item.innerText;
if (item.parentNode && item.parentNode._templateInstance) {
if (listItems[itemKey] && listItems[itemKey] != item) {
return true;
}
listItems[itemKey] = item;
}
y += item.offsetHeight;
}
return false;
};
}
function getNthItemRowStart(grid, n) {
return n - (n % grid._itemsPerRow);
}
</script>

73
dashboard-ui/bower_components/iron-list/test/hidden-list.html vendored Normal file
View file

@ -0,0 +1,73 @@
<!doctype html>
<!--
@license
Copyright (c) 2015 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
The complete set of authors may be found at http://polymer.github.io/AUTHORS
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS
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
-->
<html>
<head>
<meta charset="UTF-8">
<title>iron-list test</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
<script src="../../webcomponentsjs/webcomponents-lite.js"></script>
<script src="../../web-component-tester/browser.js"></script>
<link rel="import" href="helpers.html">
<link rel="import" href="x-list.html">
</head>
<body>
<test-fixture id="trivialList">
<template>
<x-list hidden></x-list>
</template>
</test-fixture>
<script>
suite('hidden list', function() {
var list, container;
setup(function() {
container = fixture('trivialList');
list = container.list;
});
test('list size', function(done) {
list.items = buildDataSet(100);
flush(function() {
assert.equal(list.offsetWidth, 0);
assert.equal(list.offsetHeight, 0);
done();
});
});
test('iron-resize', function(done) {
list.items = buildDataSet(100);
list.fire('iron-resize');
assert.notEqual(getFirstItemFromList(list).textContent, '0');
Polymer.RenderStatus.whenReady(function() {
container.removeAttribute('hidden');
assert.notEqual(getFirstItemFromList(list).textContent, '0');
list.fire('iron-resize');
flush(function() {
assert.isTrue(list.isAttached);
assert.equal(getFirstItemFromList(list).textContent, '0');
done();
});
});
});
});
</script>
</body>
</html>

33
dashboard-ui/bower_components/iron-list/test/index.html vendored Normal file
View file

@ -0,0 +1,33 @@
<!doctype html>
<!--
@license
Copyright (c) 2015 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
The complete set of authors may be found at http://polymer.github.io/AUTHORS
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS
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
-->
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
<title>Tests</title>
<script src="../../web-component-tester/browser.js"></script>
</head>
<body>
<script>
WCT.loadSuites([
'basic.html',
'focus.html',
'mutations.html',
'physical-count.html',
'hidden-list.html',
'selection.html',
'dynamic-item-size.html',
'different-heights.html',
'grid.html'
]);
</script>
</body>
</html>

292
dashboard-ui/bower_components/iron-list/test/mutations.html vendored Normal file
View file

@ -0,0 +1,292 @@
<!doctype html>
<!--
@license
Copyright (c) 2015 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
The complete set of authors may be found at http://polymer.github.io/AUTHORS
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS
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
-->
<html>
<head>
<meta charset="UTF-8">
<title>iron-list test</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
<script src="../../webcomponentsjs/webcomponents-lite.js"></script>
<script src="../../web-component-tester/browser.js"></script>
<link rel="import" href="helpers.html">
<link rel="import" href="x-list.html">
</head>
<body>
<test-fixture id="trivialList">
<template>
<x-list></x-list>
</template>
</test-fixture>
<test-fixture id="trivialListPrimitiveItem">
<template>
<x-list primitive></x-list>
</template>
</test-fixture>
<script>
suite('mutations to the collection of items', function() {
var list, container;
setup(function() {
container = fixture('trivialList');
list = container.list;
});
test('update physical item', function(done) {
var setSize = 100;
var phrase = 'It works!';
list.items = buildDataSet(setSize);
list.set('items.0.index', phrase);
flush(function() {
assert.equal(getFirstItemFromList(list).textContent, phrase);
done();
});
});
test('update virtual item', function(done) {
var setSize = 100;
var phrase = 'It works!';
list.items = buildDataSet(setSize);
function scrollBackUp() {
simulateScroll({
list: list,
contribution: 200,
target: 0,
onScrollEnd: function() {
assert.equal(getFirstItemFromList(list).textContent, phrase);
done();
}
});
}
flush(function() {
var rowHeight = getFirstItemFromList(list).offsetHeight;
// scroll down
simulateScroll({
list: list,
contribution: 200,
target: setSize*rowHeight,
onScrollEnd: function() {
list.set('items.0.index', phrase);
scrollBackUp();
}
});
});
});
test('push', function(done) {
var setSize = 100;
list.items = buildDataSet(setSize);
setSize = list.items.length;
list.push('items', buildItem(setSize));
assert.equal(list.items.length, setSize + 1);
flush(function() {
var rowHeight = list._physicalItems[0].offsetHeight;
var viewportHeight = list.offsetHeight;
var itemsPerViewport = Math.floor(viewportHeight/rowHeight);
assert.equal(getFirstItemFromList(list).textContent, 0);
simulateScroll({
list: list,
contribution: 200,
target: list.items.length*rowHeight,
onScrollEnd: function() {
assert.equal(getFirstItemFromList(list).textContent,
list.items.length - itemsPerViewport);
done();
}
});
})
});
test('push and scroll to bottom', function(done) {
list.items = [buildItem(0)];
flush(function() {
var rowHeight = getFirstItemFromList(list).offsetHeight;
var viewportHeight = list.offsetHeight;
var itemsPerViewport = Math.floor(viewportHeight/rowHeight);
while (list.items.length < 200) {
list.push('items', buildItem(list.items.length));
}
list.scrollToIndex(list.items.length - 1);
assert.isTrue(isFullOfItems(list));
assert.equal(getFirstItemFromList(list).textContent.trim(),
list.items.length - itemsPerViewport);
done();
});
});
test('pop', function(done) {
var setSize = 100;
list.items = buildDataSet(setSize);
flush(function() {
var rowHeight = getFirstItemFromList(list).offsetHeight;
simulateScroll({
list: list,
contribution: 200,
target: setSize*rowHeight,
onScrollEnd: function() {
var viewportHeight = list.offsetHeight;
var itemsPerViewport = Math.floor(viewportHeight/rowHeight);
list.pop('items');
flush(function() {
assert.equal(list.items.length, setSize-1);
assert.equal(getFirstItemFromList(list).textContent, setSize - 3 - 1);
done();
});
}
});
});
});
test('splice', function(done) {
var setSize = 45;
var phrase = 'It works!'
list.items = buildDataSet(setSize);
list.splice('items', 0, setSize, buildItem(phrase));
flush(function() {
assert.equal(list.items.length, 1);
assert.equal(getFirstItemFromList(list).textContent, phrase);
done();
});
});
test('delete item and scroll to bottom', function() {
var setSize = 100, index;
list.items = buildDataSet(setSize);
while (list.items.length > 10) {
index = parseInt(list.items.length * Math.random());
list.arrayDelete('items', list.items[index]);
list.scrollToIndex(list.items.length - 1);
assert.isTrue(/^[0-9]*$/.test(getFirstItemFromList(list).textContent));
}
});
test('reassign items', function(done) {
list.items = buildDataSet(100);
container.itemHeight = 'auto';
flush(function() {
var itemHeight = getFirstItemFromList(list).offsetHeight;
var hasRepeatedItems = checkRepeatedItems(list);
simulateScroll({
list: list,
contribution: 200,
target: itemHeight * list.items.length,
onScrollEnd: function() {
list.items = list.items.slice(0);
simulateScroll({
list: list,
contribution: itemHeight,
target: itemHeight * list.items.length,
onScroll: function() {
assert.isFalse(hasRepeatedItems(), 'List should not have repeated items');
},
onScrollEnd: done
});
}
});
});
});
test('empty items array', function(done) {
list.items = buildDataSet(100);
flush(function() {
list.items = [];
flush(function() {
assert.notEqual(getFirstItemFromList(list).textContent, '0');
done();
});
});
});
test('should notify path to the right physical item', function(done) {
list.items = buildDataSet(100);
flush(function() {
var idx = list._physicalCount + 1;
list.scrollToIndex(idx);
list.notifyPath('items.1.index', 'bad');
assert.equal(getFirstItemFromList(list).textContent, idx);
done();
});
});
});
suite('mutations of primitive type items', function() {
var container, list;
setup(function() {
container = fixture('trivialListPrimitiveItem');
list = container.list;
});
test('push item = polymer', function(done) {
list.items = [];
list.push('items', 'polymer');
flush(function() {
assert.equal(getFirstItemFromList(list).textContent, 'polymer');
done();
});
});
test('push item = 0', function(done) {
list.items = [];
list.push('items', 0);
flush(function() {
assert.equal(getFirstItemFromList(list).textContent, '0');
done();
});
});
test('push item = false', function(done) {
list.items = [];
list.push('items', false);
flush(function() {
assert.equal(getFirstItemFromList(list).textContent, 'false');
done();
});
});
});
</script>
</body>
</html>

104
dashboard-ui/bower_components/iron-list/test/physical-count.html vendored Normal file
View file

@ -0,0 +1,104 @@
<!doctype html>
<!--
@license
Copyright (c) 2015 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
The complete set of authors may be found at http://polymer.github.io/AUTHORS
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS
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
-->
<html>
<head>
<meta charset="UTF-8">
<title>iron-list test</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
<script src="../../webcomponentsjs/webcomponents-lite.js"></script>
<script src="../../web-component-tester/browser.js"></script>
<link rel="import" href="helpers.html">
<link rel="import" href="x-list.html">
</head>
<body>
<test-fixture id="trivialList">
<template>
<x-list list-height="100" item-height="2"></x-list>
</template>
</test-fixture>
<test-fixture id="trivialListSmall">
<template>
<x-list list-height="2" item-height="2"></x-list>
</template>
</test-fixture>
<script>
suite('dynamic physical count', function() {
var list, container;
setup(function() {
container = fixture('trivialList');
list = container.list;
list.items = buildDataSet(200);
});
test('increase pool size', function(done) {
setTimeout(function() {
list.scrollTop = 0;
var lastItem = getLastItemFromList(list);
var lastItemHeight = lastItem.offsetHeight;
var expectedFinalItem = container.listHeight/lastItemHeight - 1;
assert.equal(list.offsetHeight, container.listHeight);
assert.equal(lastItemHeight, 2);
assert.isTrue(isFullOfItems(list));
assert.equal(lastItem.textContent, expectedFinalItem);
done();
}, 100);
});
});
suite('iron-resize', function() {
var list, container;
setup(function() {
container = fixture('trivialListSmall');
list = container.list;
list.style.display = 'none';
list.items = buildDataSet(200);
});
test('increase pool size after resizing the list', function(done) {
flush(function() {
list.style.display = '';
assert.notEqual(getFirstItemFromList(list).textContent, '0', 'Item should not be rendered');
list.fire('iron-resize');
flush(function() {
assert.equal(getFirstItemFromList(list).textContent, '0', 'Item should be rendered');
done();
});
});
});
test('pool should not increase if the list has no size', function(done) {
container.style.display = 'none';
list.fire('iron-resize');
flush(function() {
assert.isFalse(list._increasePoolIfNeeded());
done();
});
});
});
</script>
</body>
</html>

352
dashboard-ui/bower_components/iron-list/test/selection.html vendored Normal file
View file

@ -0,0 +1,352 @@
<!doctype html>
<!--
@license
Copyright (c) 2015 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
The complete set of authors may be found at http://polymer.github.io/AUTHORS
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS
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
-->
<html>
<head>
<meta charset="UTF-8">
<title>iron-list test</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
<script src="../../webcomponentsjs/webcomponents-lite.js"></script>
<script src="../../web-component-tester/browser.js"></script>
<script src="../../iron-test-helpers/mock-interactions.js"></script>
<link rel="import" href="helpers.html">
<link rel="import" href="x-list.html">
</head>
<body>
<test-fixture id="trivialList">
<template>
<x-list item-height="10"></x-list>
</template>
</test-fixture>
<script>
suite('selection', function() {
var list, container;
setup(function() {
container = fixture('trivialList');
list = container.list;
});
test('single selection by item index', function(done) {
list.items = buildDataSet(100);
flush(function() {
assert.isNull(list.selectedItem);
list.selectItem(0);
assert.deepEqual(list.selectedItem, list.items[0]);
list.deselectItem(0);
assert.deepEqual(list.selectedItem, null);
list.selectItem(99);
assert.deepEqual(list.selectedItem, list.items[99]);
done();
});
});
test('single selection by item object', function(done) {
list.items = buildDataSet(100);
flush(function() {
assert.isNull(list.selectedItem);
list.selectItem(list.items[50]);
assert.deepEqual(list.selectedItem, list.items[50]);
done();
});
});
test('multi selection by item index', function(done) {
list.items = buildDataSet(100);
flush(function() {
list.multiSelection = true;
assert.isArray(list.selectedItems);
list.selectItem(0);
list.selectItem(50);
list.selectItem(99);
assert.equal(list.selectedItems.length, 3);
assert.notEqual(list.selectedItems.indexOf(list.items[0]), -1);
assert.notEqual(list.selectedItems.indexOf(list.items[50]), -1);
assert.notEqual(list.selectedItems.indexOf(list.items[99]), -1);
assert.equal(list.selectedItems.indexOf(list.items[2]), -1);
done();
});
});
test('multi selection by item object', function(done) {
list.items = buildDataSet(100);
flush(function() {
list.multiSelection = true;
assert.isArray(list.selectedItems);
list.selectItem(list.items[0]);
list.selectItem(list.items[50]);
list.selectItem(list.items[99]);
assert.equal(list.selectedItems.length, 3);
assert.notEqual(list.selectedItems.indexOf(list.items[0]), -1);
assert.notEqual(list.selectedItems.indexOf(list.items[50]), -1);
assert.notEqual(list.selectedItems.indexOf(list.items[99]), -1);
assert.equal(list.selectedItems.indexOf(list.items[2]), -1);
done();
});
});
test('clear selection', function(done) {
list.items = buildDataSet(100);
flush(function() {
list.multiSelection = true;
assert.isArray(list.selectedItems);
list.items.forEach(function(item) {
list.selectItem(item);
});
assert.equal(list.selectedItems.length, list.items.length);
list.clearSelection();
assert.equal(list.selectedItems.length, 0);
done();
});
});
test('toggle selection by item index', function(done) {
list.items = buildDataSet(100);
flush(function() {
list.toggleSelectionForItem(0);
assert.deepEqual(list.selectedItem, list.items[0]);
list.toggleSelectionForItem(0);
assert.isNull(list.selectedItem);
done();
});
});
test('toggle selection by item object', function(done) {
list.items = buildDataSet(100);
flush(function() {
list.toggleSelectionForItem(list.items[0]);
assert.deepEqual(list.selectedItem, list.items[0]);
list.toggleSelectionForItem(list.items[0]);
assert.isNull(list.selectedItem);
done();
});
});
test('change multi property', function(done) {
list.items = buildDataSet(100);
flush(function() {
list.multiSelection = true;
assert.isArray(list.selectedItems);
list.multiSelection = false;
assert.isNotArray(list.selectedItems);
assert.isNull(list.selectedItems);
list.multiSelection = true;
assert.isArray(list.selectedItems);
done();
});
});
test('selectionEnabled with single selection', function(done) {
list.items = buildDataSet(100);
flush(function() {
list.selectionEnabled = true;
assert.isNull(list.selectedItem);
// select item[0]
MockInteractions.tap(list._physicalItems[0]);
assert.deepEqual(list.selectedItem, list.items[0]);
// select item[5] and deselect item[0]
MockInteractions.tap(list._physicalItems[5]);
// select item[1] and deselect item[5]
MockInteractions.tap(list._physicalItems[1]);
assert.deepEqual(list.selectedItem, list.items[1]);
done();
});
});
test('selectionEnabled with multiple selection', function(done) {
list.items = buildDataSet(100);
flush(function() {
list.multiSelection = true;
MockInteractions.tap(list._physicalItems[0]);
assert.equal(list.selectedItems.length, 0);
// enable the feature
list.selectionEnabled = true;
// select item[0]
MockInteractions.tap(list._physicalItems[0]);
assert.notEqual(list.selectedItems.indexOf(list.items[0]), -1);
// multiple selection
MockInteractions.tap(list._physicalItems[1]);
MockInteractions.tap(list._physicalItems[5]);
MockInteractions.tap(list._physicalItems[10]);
MockInteractions.tap(list._physicalItems[12]);
list.selectItem(0);
list.deselectItem(1);
assert.equal(list.selectedItems.indexOf(list.items[1]), -1);
assert.notEqual(list.selectedItems.indexOf(list.items[0]), -1);
assert.notEqual(list.selectedItems.indexOf(list.items[5]), -1);
assert.notEqual(list.selectedItems.indexOf(list.items[10]), -1);
assert.notEqual(list.selectedItems.indexOf(list.items[12]), -1);
list.clearSelection();
assert.equal(list.selectedItems.length, 0);
// disable the feature
list.selectionEnabled = false;
MockInteractions.tap(list._physicalItems[1]);
assert.equal(list.selectedItems.length, 0);
done();
});
});
test('toggle', function(done) {
list.items = buildDataSet(100);
flush(function() {
list.selectionEnabled = true;
MockInteractions.tap(list._physicalItems[0]);
assert.deepEqual(list.selectedItem, list.items[0]);
MockInteractions.tap(list._physicalItems[0]);
assert.isNull(list.selectedItem);
MockInteractions.tap(list._physicalItems[0]);
list.clearSelection();
assert.isNull(list.selectedItem);
done();
});
});
test('selectedAs', function(done) {
list.items = buildDataSet(100);
flush(function() {
// multi selection
list.multiSelection = true;
assert.isFalse(list._physicalItems[0]._templateInstance.selected);
list.selectItem(0);
assert.isTrue(list._physicalItems[0]._templateInstance.selected);
list.toggleSelectionForItem(0);
assert.isFalse(list._physicalItems[0]._templateInstance.selected);
// single selection
list.multiSelection = false;
list.selectItem(0);
list.selectItem(10);
assert.isFalse(list._physicalItems[0]._templateInstance.selected);
assert.isTrue(list._physicalItems[10]._templateInstance.selected);
done();
});
});
test('splice a selected item', function(done) {
list.items = buildDataSet(100);
flush(function() {
// multi selection
list.multiSelection = true;
// select the first two items
list.selectItem(0);
list.selectItem(1);
assert.equal(list.selectedItems.length, 2);
// remove the first two items
list.splice('items', 0, 2);
assert.equal(list.selectedItems.length, 0);
done();
});
});
});
</script>
</body>
</html>

91
dashboard-ui/bower_components/iron-list/test/smoke/avg-worst-case.html vendored Normal file
View file

@ -0,0 +1,91 @@
<!--
@license
Copyright (c) 2015 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
-->
<!doctype html>
<html>
<head>
<title>avg worst case</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
<script src="../../../webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="../../../polymer/polymer.html">
<link rel="import" href="../../iron-list.html">
<style is="custom-style">
body {
@apply(--layout-fullbleed);
}
iron-list {
width: 500px;
height: 400px;
float: left;
margin: 10px;
}
.item {
background-color: green;
border-bottom: 1px solid white;
}
</style>
</head>
<body unresolved>
<template is="dom-bind">
<h1>The physical average is not useful in this situations</h1>
<p>The list is correct if it can render all the items without empty spaces.</p>
<iron-list id="list" items="[791, 671]" as="item" style="width: 300px; height: 300px;">
<template>
<div class="item" style$="[[_getStyle(item)]]"><span>[[index]]</span> height: <span>[[item]]</span>
</div>
</template>
</iron-list>
<iron-list id="list2" items="[791, 671]" as="item" style="width: 710px; height: 453px;">
<template>
<div class="item" style$="[[_getStyle(item)]]"><span>[[index]]</span> height: <span>[[item]]</span>
</div>
</template>
</iron-list>
<iron-list items="[512, 256, 128, 64, 16, 16, 16, 16, 16, 16, 8, 4]" as="item" style="height: 256px;">
<template>
<div class="item" style$="[[_getStyle(item)]]"><span>[[index]]</span> height: <span>[[item]]</span>
</div>
</template>
</iron-list>
</template>
<script>
HTMLImports.whenReady(function() {
document.querySelector('template[is=dom-bind]')._getStyle = function(item) {
return 'height:' + item + 'px; ';
};
setTimeout(function() {
document.querySelector('#list').push('items', 251, 191, 151, 191, 51, 51, 51);
}, 100);
setTimeout(function() {
document.querySelector('#list2').push('items', 251, 191, 151, 191, 51, 51, 51);
}, 300);
});
</script>
</body>
</html>

18514
dashboard-ui/bower_components/iron-list/test/smoke/dummy-data.html vendored Normal file
View file

File diff suppressed because it is too large Load diff

205
dashboard-ui/bower_components/iron-list/test/smoke/index.html vendored Normal file
View file

@ -0,0 +1,205 @@
<!--
@license
Copyright (c) 2015 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
-->
<!doctype html>
<html>
<head>
<title>iron-list demo</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="../../../webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="../../../polymer/polymer.html">
<link rel="import" href="../../../paper-styles/paper-styles.html">
<link rel="import" href="../../../iron-flex-layout/iron-flex-layout.html">
<link rel="import" href="../../iron-list.html">
<link rel="import" href="dummy-data.html">
<dom-module id="x-app">
<style>
:host {
display: block;
font-family: sans-serif;
@apply(--layout-horizontal);
}
iron-list {
@apply(--layout-flex);
height: 100%;
}
.item {
display: block;
padding: 8px;
border-bottom: 1px solid gray;
@apply(--layout-horizontal);
}
.item img {
height: 40px;
width: 40px;
}
.picture {
@apply(--layout-vertical);
}
#about {
color: lightgray;
font-style: italic;
font-size: 0.8em;
}
#last {
font-weight: bold;
font-size: 1.2em;
}
.padded {
@apply(--layout-flex);
}
.padded > * {
padding: 8px;
}
#index {
text-align: center;
padding-top: 8px;
}
#options {
background: white;
border-radius: 10px;
border: 1px solid gray;
position: absolute;
top: 5px;
right: 5px;
z-index: 10;
padding: 5px;
}
#friends {
height: 20px;
}
</style>
<template>
<div id="options">
<input value="{{separator::input}}" style="width:20px;">
<label><input type="checkbox" checked="{{showing::change}}">Show friends</label>
</div>
<iron-list id="list1" items="{{data}}">
<template>
<div class="item">
<div class="picture">
<img src="{{pictureForItem(item)}}">
<div>{{item.index}}</div>
</div>
<div class="padded">
<div>
<input placeholder="name.last" value="{{item.name.last::input}}">
<span>{{separator}}</span>
<input placeholder="name.first" value="{{item.name.first::input}}">
</div>
<div>{{item.about}}</div>
<div id="friends">
<template is="dom-if" if="{{showing}}">
<span><strong>Friends:</strong></span>
<template is="dom-repeat" items="{{item.friends}}">
<span>{{item.name}}</span>
<span>{{separator}}</span>
</template>
</template>
</div>
</div>
</div>
</template>
</iron-list>
<iron-list id="list2" items="{{data}}">
<template>
<div class="item">
<div class="picture">
<img src="{{pictureForItem(item)}}">
<div>{{item.index}}</div>
</div>
<div class="padded">
<div>
<input placeholder="name.last" value="{{item.name.last::input}}">
<span>{{separator}}</span>
<input placeholder="name.first" value="{{item.name.first::input}}">
</div>
<div>{{item.about}}</div>
<div id="friends">
<template is="dom-if" if="{{showing}}">
<span><strong>Friends:</strong></span>
<template is="dom-repeat" items="{{item.friends}}">
<span>{{item.name}}</span>
<span>{{separator}}</span>
</template>
</template>
</div>
</div>
</div>
</template>
</iron-list>
</template>
</dom-module>
<script>
HTMLImports.whenReady(function() {
Polymer({
is: 'x-app',
properties: {
data: {
value: window.dummyData
},
separator: {
value: '|'
},
showing: {
value: false
}
},
pictureForItem: function(item) {
return item.picture + '/' + item.guid.slice(0,6);
},
iconForItem: function(item) {
return item.gender == 'female' ? 'star' : 'star-outline';
}
});
});
</script>
<style is="custom-style">
body, x-app {
@apply(--layout-fit);
}
</style>
</head>
<body unresolved>
<x-app></x-app>
</body>
</html>

296
dashboard-ui/bower_components/iron-list/test/smoke/physical-count.html vendored Normal file
View file

@ -0,0 +1,296 @@
<!--
@license
Copyright (c) 2015 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
-->
<!doctype html>
<html>
<head>
<title>physical count</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
<script src="../../../webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="../../../polymer/polymer.html">
<link rel="import" href="../../../paper-button/paper-button.html">
<link rel="import" href="../../iron-list.html">
<style is="custom-style">
body {
@apply(--layout-fullbleed);
}
.item {
background-color: green;
border-bottom: 1px solid white;
overflow:hidden;
}
.wrapper {
position: relative;
margin: 10px;
}
.wrapper .count {
background-color: red;
position: absolute;
top: 0;
right: 0;
z-index: 1;
}
.wrapper .stats {
background-color: red;
position: absolute;
top: 20px;
right: 0;
z-index: 1;
}
.wrapper iron-list {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.group {
float: left;
}
</style>
</head>
<body unresolved>
<template is="dom-bind">
<h1>Physical count</h1>
<p>In red you can see the last physical count values</p>
<div class="group">
<p>100 items, 50px tall</p>
<div class="wrapper" style="width: 300px; height: 300px;">
<iron-list id="list1" as="item">
<template>
<div class="item" style$="[[_getStyle(item)]]"><span>[[index]]</span> height: <span>[[item]]</span>
<div>
<paper-button raised>Test</paper-button>
<paper-button raised>Test</paper-button>
<paper-button raised>Test</paper-button>
<paper-button raised>Test</paper-button>
</div>
</div>
</template>
</iron-list>
</div>
</div>
<!--
<div class="group">
<p>100 items, 300px tall</p>
<div class="wrapper" style="width: 300px; height: 300px;">
<iron-list id="list2" as="item">
<template>
<div class="item" style$="[[_getStyle(item)]]">
<span>[[index]]</span> height: <span>[[item]]</span>
</div>
</template>
</iron-list>
</div>
</div>
<div class="group">
<p>1000 items, 2px tall</p>
<div class="wrapper" style="width: 300px; height: 300px;">
<iron-list id="list3" as="item">
<template>
<div class="item" style$="[[_getStyle(item)]]">
<span>[[index]]</span> height: <span>[[item]]</span>
</div>
</template>
</iron-list>
</div>
</div>
<div class="group">
<p>First two items: 2px tall, next 100 items are 300px tall</p>
<div class="wrapper" style="width: 300px; height: 300px;">
<iron-list id="list4" as="item">
<template>
<div class="item" style$="[[_getStyle(item)]]">
<span>[[index]]</span> height: <span>[[item]]</span>
</div>
</template>
</iron-list>
</div>
</div>
<div class="group">
<p>100 items, 600px tall</p>
<div class="wrapper" style="width: 300px; height: 300px;">
<iron-list id="list5" as="item">
<template>
<div class="item" style$="[[_getStyle(item)]]">
<span>[[index]]</span> height: <span>[[item]]</span>
</div>
</template>
</iron-list>
</div>
</div>
<div class="group">
<p>1 item that is 2px tall, <br /> and then add 100 items async with different heights </p>
<div class="wrapper" style="width: 300px; height: 300px;">
<iron-list id="list6" as="item">
<template>
<div class="item" style$="[[_getStyle(item)]]">
<span>[[index]]</span> height: <span>[[item]]</span>
</div>
</template>
</iron-list>
</div>
</div>
<div class="group">
<p>200 items with random heights</p>
<div class="wrapper" style="width: 300px; height: 300px;">
<iron-list id="list7" as="item">
<template>
<div class="item" style$="[[_getStyle(item)]]">
<span>[[index]]</span> height: <span>[[item]]</span>
</div>
</template>
</iron-list>
</div>
</div>
<div class="group">
<p>200 items async with random heights</p>
<div class="wrapper" style="width: 300px; height: 300px;">
<iron-list id="list8" as="item">
<template>
<div class="item" style$="[[_getStyle(item)]]">
<span>[[index]]</span> height: <span>[[item]]</span>
</div>
</template>
</iron-list>
</div>
</div> -->
</template>
<script>
HTMLImports.whenReady(function() {
function observePhysicalCount(list) {
var div = document.createElement('div');
var stats = document.createElement('div');
var values = [];
var timer;
div.classList.add('count');
stats.classList.add('stats');
Object.observe(list, function(changes) {
var physicalCount = list._physicalCount;
changes.forEach(function(change) {
if (change.name === '_physicalCount') {
values.pop();
values.push(change.oldValue);
values.push(list._physicalCount);
div.innerText = values.join(' -> ');
} else if (change.name === '_lastPage') {
if (list._lastPage === 0) {
timer = Date.now();
} else if (list._lastPage === 1) {
stats.innerText = 'First paint: ' + (Date.now() - timer) + 'ms';
} else if (list._lastPage === list._maxPages) {
stats.innerText = stats.innerText + ' total: ' + (Date.now() - timer) + 'ms';
}
}
});
});
values.push(list._physicalCount);
div.innerText = list._physicalCount;
stats.innerText = 'Waiting for stats...';
Polymer.dom(list.parentNode).appendChild(div);
Polymer.dom(list.parentNode).appendChild(stats);
}
function arrayFill(size, value) {
return (new Array(size)).fill(value, 0, size);
}
function randomArrayFill(size, min, max) {
var a = [];
while (a.length < size) {
a.push(parseInt(Math.random() * (max-min+1)) + min);
}
return a;
}
function asyncJob(fn) {
if (fn()) {
setTimeout(asyncJob.bind(null, fn), 1);
}
}
document.querySelector('template[is=dom-bind]')._getStyle = function(item) {
return 'height:' + item + 'px; ';
};
setTimeout(function() {
var list1 = document.querySelector('#list1');
var list2 = document.querySelector('#list2');
var list3 = document.querySelector('#list3');
var list4 = document.querySelector('#list4');
var list5 = document.querySelector('#list5');
var list6 = document.querySelector('#list6');
var list7 = document.querySelector('#list7');
var list8 = document.querySelector('#list8');
var items = randomArrayFill(100, 1, 200);
list1.items = arrayFill(100, 50);
observePhysicalCount(list1);
// list2.items = arrayFill(100, 300);
// list3.items = arrayFill(1000, 2);
// list4.items = arrayFill(2, 2).concat(arrayFill(100, 300));
// list5.items = arrayFill(100, 600);
// list6.items = [2];
// setTimeout(function() {
// list6.push.apply(list6,
// ['items'].concat([512, 256, 128, 64, 16, 16, 16, 16, 16, 16, 8, 4])
// );
// }, 100);
// list7.items = randomArrayFill(100, 1, 200);
// list8.items = [];
// asyncJob(function() {
// list8.push('items', items.pop());
// return items.length > 0;
// });
// observePhysicalCount(list2);
// observePhysicalCount(list3);
// observePhysicalCount(list4);
// observePhysicalCount(list5);
// observePhysicalCount(list6);
// observePhysicalCount(list7);
// observePhysicalCount(list8);
}, 0);
});
</script>
</body>
</html>

81
dashboard-ui/bower_components/iron-list/test/x-grid.html vendored Normal file
View file

@ -0,0 +1,81 @@
<!--
@license
Copyright (c) 2015 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
The complete set of authors may be found at http://polymer.github.io/AUTHORS
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS
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
-->
<link rel="import" href="../../polymer/polymer.html">
<link rel="import" href="../../iron-flex-layout/iron-flex-layout.html">
<link rel="import" href="../iron-list.html">
<dom-module id="x-grid">
<style>
:host {
@apply(--layout-fit);
@apply(--layout-vertical);
display: block;
}
iron-list {
overflow: hidden;
}
</style>
<template>
<iron-list style$="[[_computedListSize(listSize)]]" items="[[data]]" as="item" id="list" grid>
<template>
<div class="item">
<div style$="[[_computeItemSize(item)]]">[[item.index]]</div>
</div>
</template>
</iron-list>
</template>
</dom-module>
<script>
Polymer({
is: 'x-grid',
properties: {
data: {
type: Array
},
itemSize: {
type: Number,
value: 100
},
listSize: {
type: Number,
value: 300
},
pre: {
type: Boolean
},
},
get list() {
return this.$.list;
},
_computeItemSize: function(item) {
var css = this.pre ? 'white-space:pre;' : '';
css += 'height: ' + (this.itemSize) + 'px;';
css += 'width: ' + (this.itemSize) + 'px;';
return css;
},
_computedListSize: function(listHeight) {
return 'height: ' + (listHeight) + 'px;' + 'width: ' + (listHeight) + 'px;';
}
});
</script>

102
dashboard-ui/bower_components/iron-list/test/x-list.html vendored Normal file
View file

@ -0,0 +1,102 @@
<!--
@license
Copyright (c) 2015 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
The complete set of authors may be found at http://polymer.github.io/AUTHORS
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS
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
-->
<link rel="import" href="../../polymer/polymer.html">
<link rel="import" href="../../iron-flex-layout/iron-flex-layout.html">
<link rel="import" href="../iron-list.html">
<dom-module id="x-list">
<style>
:host {
@apply(--layout-fit);
@apply(--layout-vertical);
display: block;
}
.item {
color: white;
}
.item:nth-child(odd) {
background-color: green;
}
.item:nth-child(even) {
background-color: red;
}
iron-list {
overflow: hidden;
}
</style>
<template>
<iron-list style$="[[_computedListHeight(listHeight)]]" items="[[data]]" as="item" id="list">
<template>
<div class="item">
<div style$="[[_computedItemHeight(item)]]" tabindex$="[[tabIndex]]" hidden$="[[primitive]]">[[item.index]]</div>
<div style$="[[_computedItemHeight(item)]]" tabindex$="[[tabIndex]]" hidden$="[[!primitive]]">[[item]]</div>
</div>
</template>
</iron-list>
</template>
</dom-module>
<script>
Polymer({
is: 'x-list',
properties: {
data: {
type: Array
},
itemHeight: {
type: Number,
value: 100
},
listHeight: {
type: Number,
value: 300
},
pre: {
type: Boolean
},
primitive: {
value: false,
type: Boolean
}
},
get list() {
return this.$.list;
},
_computedItemHeight: function(item) {
var css = this.pre ? 'white-space:pre;' : '';
if (item.height) {
css += this.itemHeight === 0 ? '' : 'height: ' + (item.height) + 'px;';
} else if (this.itemHeight) {
css += 'height: ' + (this.itemHeight) + 'px;';
}
return css;
},
_computedListHeight: function(listHeight) {
return 'height: ' + (listHeight) + 'px;';
}
});
</script>