mirror of
https://github.com/jellyfin/jellyfin-web.git
synced 2024-11-19 11:58:20 -07:00
297 lines
8.6 KiB
HTML
297 lines
8.6 KiB
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.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>
|