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,39 @@
<!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>
<title>iron-scroll-target-behavior using the document scrolling</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="../iron-scroll-target-behavior.html">
<link rel="import" href="x-scrollable.html">
<style>
body {
margin: 0;
padding: 0;
}
</style>
</head>
<body unresolved>
<x-scrollable scroll-target="document"></x-scrollable>
</body>
</html>

View file

@ -0,0 +1,51 @@
<!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>
<title>iron-scroll-target-behavior using a scrolling region</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="../iron-scroll-target-behavior.html">
<link rel="import" href="x-scrollable.html">
<style>
body {
margin: 0;
padding: 0;
}
#region {
height: 50vh;
overflow: auto;
position: absolute;
top: 25vh;
left: 25vh;
right: 25vh;
box-shadow: 0 0 60px rgba(0,0,0,0.5);
}
</style>
</head>
<body unresolved>
<div id="region">
<x-scrollable scroll-target="region"></x-scrollable>
</div>
</body>
</html>

View file

@ -0,0 +1,105 @@
<!--
@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;
}
.scrollState {
border-left: 1px solid #ccc;
border-right: 1px solid #ccc;
border-bottom: 1px solid #ccc;
font-weight: bold;
background-color: #eee;
position: fixed;
top: 0;
left: calc(50% - 100px);
padding: 10px;
width: 220px;
text-align: center;
}
.item {
border-bottom: 1px solid #ccc;
background-color: white;
padding: 20px;
width: 200%;
}
</style>
<template>
<div class="scrollState">scrollTop: [[xScrollTop]] - scrollLeft: [[xScrollLeft]]</div>
<template is="dom-repeat" items="[[_getItems(itemCount)]]">
<div class="item">[[index]]</div>
</template>
</template>
</dom-module>
<script>
Polymer({
is: 'x-scrollable',
properties: {
xScrollTop: {
type: Number,
readOnly: true,
value: 0
},
xScrollLeft: {
type: Number,
readOnly: true,
value: 0
},
itemCount: {
type: Number,
value: 200
}
},
behaviors: [
Polymer.IronScrollTargetBehavior
],
attached: function() {
this._scrollHandler();
},
_scrollHandler: function() {
this._setXScrollTop(this._scrollTop);
this._setXScrollLeft(this._scrollLeft);
},
_getItems: function(itemCount) {
var items = new Array(itemCount);
while (itemCount > 0) {
items[--itemCount] = true;
}
return items;
}
});
</script>