1
0
Fork 0
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:
Luke Pulverenti 2016-04-20 23:34:52 -04:00
parent 396b125d66
commit da7c9a4899
47 changed files with 36356 additions and 0 deletions

View file

@ -0,0 +1,298 @@
<!doctype html>
<!--
@license
Copyright (c) 2016 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-scroll-target-behavior 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="x-scrollable.html">
<link rel="import" href="x-nested-scrollable.html">
<style>
#temporaryScrollingRegion,
#region {
overflow: auto;
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<test-fixture id="trivialScrollable">
<template>
<div id="temporaryScrollingRegion">
<x-scrollable></x-scrollable>
</div>
</template>
</test-fixture>
<test-fixture id="trivialScrollingRegion">
<template>
<div id="region">
<x-scrollable scroll-target="region"></x-scrollable>
</div>
</template>
</test-fixture>
<test-fixture id="trivialNestedScrollingRegion">
<template>
<x-nested-scrollable id="nestedScrollingRegion"></x-nested-scrollable>
</template>
</test-fixture>
<test-fixture id="trivialDocumentScroll">
<template>
<x-scrollable scroll-target="document"></x-scrollable>
</template>
</test-fixture>
<script>
suite('basic features', function() {
var scrollingRegion, xScroll;
setup(function() {
scrollingRegion = fixture('trivialScrollable');
xScroll = Polymer.dom(scrollingRegion).querySelector('x-scrollable');
});
test('default', function() {
assert.equal(xScroll._scrollTop, 0, '_scrollTop');
assert.equal(xScroll._scrollLeft, 0, '_scrollLeft');
assert.equal(xScroll._scrollTargetWidth, 0, '_scrollTargetWidth');
assert.equal(xScroll._scrollTargetHeight, 0, '_scrollTargetHeight');
assert.equal(xScroll.scrollTarget, null, 'scrollTarget');
assert.equal(xScroll._defaultScrollTarget, xScroll.scrollTarget, '_defaultScrollTarget');
});
test('invalid `scrollTarget` selector', function(done) {
flush(function() {
xScroll.scrollTarget = 'invalid-id';
assert.equal(xScroll.scrollTarget, null);
done();
});
});
test('valid `scrollTarget` selector', function(done) {
flush(function() {
xScroll.scrollTarget = 'temporaryScrollingRegion';
assert.equal(xScroll.scrollTarget, scrollingRegion);
done();
});
});
});
suite('scrolling region', function() {
var scrollingRegion, xScrollable;
setup(function() {
scrollingRegion = fixture('trivialScrollingRegion');
xScrollable = Polymer.dom(scrollingRegion).querySelector('x-scrollable');
});
teardown(function() {
xScrollable._scrollTop = 0;
xScrollable._scrollLeft = 0;
});
test('scrollTarget reference', function(done) {
flush(function() {
assert.equal(xScrollable.scrollTarget, scrollingRegion);
done();
});
});
test('invalid scrollTarget', function(done) {
flush(function() {
assert.equal(xScrollable.scrollTarget, scrollingRegion);
done();
});
});
test('setters', function(done) {
flush(function() {
xScrollable._scrollTop = 100;
xScrollable._scrollLeft = 100;
assert.equal(scrollingRegion.scrollTop, 100);
assert.equal(scrollingRegion.scrollLeft, 100);
done();
});
});
test('getters', function(done) {
flush(function() {
scrollingRegion.scrollTop = 50;
scrollingRegion.scrollLeft = 50;
assert.equal(xScrollable._scrollTop, 50, '_scrollTop');
assert.equal(xScrollable._scrollLeft, 50, '_scrollLeft');
assert.equal(xScrollable._scrollTargetWidth, scrollingRegion.offsetWidth, '_scrollTargetWidth');
assert.equal(xScrollable._scrollTargetHeight, scrollingRegion.offsetHeight, '_scrollTargetHeight');
done();
});
});
test('scroll method', function(done) {
flush(function() {
xScrollable.scroll(110, 110);
assert.equal(xScrollable._scrollTop, 110);
assert.equal(xScrollable._scrollLeft, 110);
xScrollable.scroll(0, 0);
assert.equal(xScrollable._scrollTop, 0);
assert.equal(xScrollable._scrollLeft, 0);
done();
});
});
});
suite('document scroll', function() {
var xScrollable;
setup(function() {
xScrollable = fixture('trivialDocumentScroll');
});
teardown(function() {
xScrollable._scrollTop = 0;
xScrollable._scrollLeft = 0;
});
test('scrollTarget reference', function(done) {
flush(function() {
assert.equal(xScrollable.scrollTarget, document.documentElement);
done();
});
});
test('setters', function(done) {
flush(function() {
xScrollable._scrollTop = 100;
xScrollable._scrollLeft = 100;
assert.equal(window.pageXOffset, 100);
assert.equal(window.pageYOffset, 100);
done();
});
});
test('getters', function(done) {
flush(function() {
window.scrollTo(50, 50);
assert.equal(xScrollable._scrollTop, 50, '_scrollTop');
assert.equal(xScrollable._scrollLeft, 50, '_scrollLeft');
assert.equal(xScrollable._scrollTargetWidth, window.innerWidth, '_scrollTargetWidth');
assert.equal(xScrollable._scrollTargetHeight, window.innerHeight, '_scrollTargetHeight');
done();
});
});
test('scroll method', function(done) {
flush(function() {
xScrollable.scroll(1, 2);
assert.equal(xScrollable._scrollLeft, 1);
assert.equal(xScrollable._scrollTop, 2);
xScrollable.scroll(3, 4);
assert.equal(xScrollable._scrollLeft, 3);
assert.equal(xScrollable._scrollTop, 4);
done();
});
});
});
suite('nested scrolling region', function() {
var xScrollingRegion;
var xScrollable;
setup(function() {
var nestedScrollingRegion = fixture('trivialNestedScrollingRegion');
xScrollable = nestedScrollingRegion.$.xScrollable;
xScrollingRegion = nestedScrollingRegion.$.xRegion;
});
teardown(function() {
xScrollable._scrollTop = 0;
xScrollable._scrollLeft = 0;
});
test('scrollTarget reference', function(done) {
flush(function() {
assert.equal(xScrollable.scrollTarget, xScrollingRegion);
done();
});
});
test('setters', function(done) {
flush(function() {
xScrollable._scrollTop = 10;
xScrollable._scrollLeft = 20;
assert.equal(xScrollingRegion.scrollTop, 10);
assert.equal(xScrollingRegion.scrollLeft, 20);
done();
});
});
test('getters', function(done) {
flush(function() {
xScrollable._scrollTop = 10;
xScrollable._scrollLeft = 20;
assert.equal(xScrollable._scrollTop, 10, '_scrollTop');
assert.equal(xScrollable._scrollLeft, 20, '_scrollLeft');
done();
});
});
test('scroll method', function(done) {
flush(function() {
xScrollable.scroll(1, 2);
assert.equal(xScrollable._scrollLeft, 1);
assert.equal(xScrollable._scrollTop, 2);
xScrollable.scroll(3, 4);
assert.equal(xScrollable._scrollLeft, 3);
assert.equal(xScrollable._scrollTop, 4);
done();
});
});
});
</script>
</body>
</html>

View file

@ -0,0 +1,32 @@
<!doctype html>
<!--
@license
Copyright (c) 2016 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<html>
<head>
<meta charset="utf-8">
<title>Tests</title>
<script src="../../web-component-tester/browser.js"></script>
</head>
<body>
<script>
WCT.loadSuites([
'basic.html',
'basic.html?dom=shadow'
]);
</script>
</body>
</html>

View file

@ -0,0 +1,42 @@
<!--
@license
Copyright (c) 2016 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
-->
<link rel="import" href="../../polymer/polymer.html">
<link rel="import" href="x-scrollable.html">
<dom-module id="x-nested-scrollable">
<style>
:host {
display: block;
}
#xRegion {
width: 100px;
height: 100px;
overflow: auto;
}
</style>
<template>
<div id="xRegion">
<x-scrollable id="xScrollable" scroll-target="xRegion"></x-scrollable>
</div>
</template>
</dom-module>
<script>
Polymer({
is: 'x-nested-scrollable'
});
</script>

View file

@ -0,0 +1,68 @@
<!--
@license
Copyright (c) 2016 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
-->
<link rel="import" href="../../polymer/polymer.html">
<link rel="import" href="../iron-scroll-target-behavior.html">
<dom-module id="x-scrollable">
<style>
:host {
display: block;
font: 14px arial;
}
.item {
border-bottom: 1px solid #ccc;
background-color: white;
padding: 20px;
width: 200%;
}
</style>
<template>
<template is="dom-repeat" items="[[_getItems(itemCount)]]">
<div class="item">[[index]]</div>
</template>
</template>
</dom-module>
<script>
Polymer({
is: 'x-scrollable',
properties: {
itemCount: {
type: Number,
value: 200
}
},
behaviors: [
Polymer.IronScrollTargetBehavior
],
_defaultScrollTarget: null,
_getItems: function(itemCount) {
var items = new Array(itemCount);
while (itemCount > 0) {
items[--itemCount] = true;
}
return items;
}
});
</script>