mirrors/jellyfin-web
1
0
Fork 0
mirror of https://github.com/jellyfin/jellyfin-web synced 2025-03-30 19:56:21 +00:00
Code Activity

add scroll threshold

Browse source
This commit is contained in:
Luke Pulverenti 2016-04-21 14:00:32 -04:00
parent 942fceba52
commit e1d75fd9c2
12 changed files with 1074 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

107
dashboard-ui/bower_components/iron-scroll-threshold/demo/scrolling-region-decoupled.html vendored Normal file
View file

@ -0,0 +1,107 @@
<!doctype html>
<!--
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-threshold 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-threshold.html">
<link rel="import" href="sample-content.html">
<style>
body {
margin: 0;
padding: 0;
}
.toolbar {
background-color: #3367d6;
z-index: 1;
font: 15px arial;
height: 54px;
line-height: 54px;
padding-left: 20px;
padding-right: 20px;
color: white;
}
.loader {
background-color: #0b8043;
text-align: center;
height: 44px;
font: 13px arial;
line-height: 44px;
color: white;
}
.scrollState {
text-align: center;
font: 14px arial;
line-height: 30px;
}
#scrollingRegion {
position: absolute;
top: 25vh;
left: 25vh;
right: 25vh;
height: 50vh;
box-shadow: 0 0 60px rgba(0,0,0,0.5);
overflow: auto;
}
iron-scroll-threshold {
display: none;
}
</style>
</head>
<body unresolved>
<template is="dom-bind" id="overlay" size="5">
<div id="scrollingRegion">
<div class="toolbar">iron-scroll-threshold using a scrolling region</div>
<sample-content size="[[size]]"></sample-content>
<div class="loader">Fetching new items...</div>
</div>
<!-- scroll-target uses #scrollingRegion -->
<iron-scroll-threshold id="scrollThreshold"
scroll-target="scrollingRegion"
lower-threshold="500"
on-lower-threshold="loadMoreData">
</iron-scroll-threshold>
</template>
<script>
(function(scope) {
scope.loadMoreData = function() {
// Simulate network delay
setTimeout(function() {
scope.size = +scope.size + 5;
scope.$.scrollThreshold.clearTriggers();
}, 500);
};
})(document.querySelector('#overlay'));
</script>
</body>
</html>