mirror of
https://github.com/jellyfin/jellyfin-web
synced 2025-03-30 19:56:21 +00:00
add iron-list
This commit is contained in:
parent
396b125d66
commit
da7c9a4899
47 changed files with 36356 additions and 0 deletions
91
dashboard-ui/bower_components/iron-list/test/smoke/avg-worst-case.html
vendored
Normal file
91
dashboard-ui/bower_components/iron-list/test/smoke/avg-worst-case.html
vendored
Normal 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
18514
dashboard-ui/bower_components/iron-list/test/smoke/dummy-data.html
vendored
Normal 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
205
dashboard-ui/bower_components/iron-list/test/smoke/index.html
vendored
Normal 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
296
dashboard-ui/bower_components/iron-list/test/smoke/physical-count.html
vendored
Normal 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>
|
Loading…
Add table
Add a link
Reference in a new issue