mirror of
https://github.com/jellyfin/jellyfin-web
synced 2025-03-30 19:56:21 +00:00
add scroll threshold
This commit is contained in:
Luke Pulverenti
parent
942fceba52
commit
e1d75fd9c2
12 changed files with 1074 additions and 0 deletions
39
dashboard-ui/bower_components/iron-scroll-threshold/.bower.json
vendored
Normal file
39
dashboard-ui/bower_components/iron-scroll-threshold/.bower.json
vendored
Normal file
|
|
@ -0,0 +1,39 @@
|
|||
{
|
||||
"name": "iron-scroll-threshold",
|
||||
"description": "Triggers an event when nearing the beginning or end of a scrollable element ",
|
||||
"keywords": [
|
||||
"web-components",
|
||||
"polymer"
|
||||
],
|
||||
"version": "1.0.1",
|
||||
"homepage": "https://github.com/PolymerElements/iron-scroll-threshold",
|
||||
"authors": [
|
||||
"The Polymer Authors"
|
||||
],
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "git://github.com/PolymerElements/iron-scroll-threshold"
|
||||
},
|
||||
"main": "iron-scroll-threshold.html",
|
||||
"license": "http://polymer.github.io/LICENSE.txt",
|
||||
"ignore": [],
|
||||
"dependencies": {
|
||||
"polymer": "Polymer/polymer#^1.1.0",
|
||||
"iron-scroll-target-behavior": "PolymerElements/iron-scroll-target-behavior#^1.0.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"iron-component-page": "polymerelements/iron-component-page#^1.0.0",
|
||||
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.2",
|
||||
"web-component-tester": "^4.0.0"
|
||||
},
|
||||
"_release": "1.0.1",
|
||||
"_resolution": {
|
||||
"type": "version",
|
||||
"tag": "v1.0.1",
|
||||
"commit": "d09176cbef2e4cebb6c44754f7a2582b30f5ecf4"
|
||||
},
|
||||
"_source": "git://github.com/PolymerElements/iron-scroll-threshold.git",
|
||||
"_target": "^1.0.1",
|
||||
"_originalSource": "PolymerElements/iron-scroll-threshold",
|
||||
"_direct": true
|
||||
}
|
||||
1
dashboard-ui/bower_components/iron-scroll-threshold/.gitignore
vendored
Normal file
1
dashboard-ui/bower_components/iron-scroll-threshold/.gitignore
vendored
Normal file
|
|
@ -0,0 +1 @@
|
|||
bower_components/
|
||||
72
dashboard-ui/bower_components/iron-scroll-threshold/CONTRIBUTING.md
vendored
Normal file
72
dashboard-ui/bower_components/iron-scroll-threshold/CONTRIBUTING.md
vendored
Normal file
|
|
@ -0,0 +1,72 @@
|
|||
|
||||
<!--
|
||||
This file is autogenerated based on
|
||||
https://github.com/PolymerElements/ContributionGuide/blob/master/CONTRIBUTING.md
|
||||
|
||||
If you edit that file, it will get updated everywhere else.
|
||||
If you edit this file, your changes will get overridden :)
|
||||
-->
|
||||
# Polymer Elements
|
||||
## Guide for Contributors
|
||||
|
||||
Polymer Elements are built in the open, and the Polymer authors eagerly encourage any and all forms of community contribution. When contributing, please follow these guidelines:
|
||||
|
||||
### Filing Issues
|
||||
|
||||
**If you are filing an issue to request a feature**, please provide a clear description of the feature. It can be helpful to describe answers to the following questions:
|
||||
|
||||
1. **Who will use the feature?** _“As someone filling out a form…”_
|
||||
2. **When will they use the feature?** _“When I enter an invalid value…”_
|
||||
3. **What is the user’s goal?** _“I want to be visually notified that the value needs to be corrected…”_
|
||||
|
||||
**If you are filing an issue to report a bug**, please provide:
|
||||
|
||||
1. **A clear description of the bug and related expectations.** Consider using the following example template for reporting a bug:
|
||||
|
||||
```markdown
|
||||
The `paper-foo` element causes the page to turn pink when clicked.
|
||||
|
||||
## Expected outcome
|
||||
|
||||
The page stays the same color.
|
||||
|
||||
## Actual outcome
|
||||
|
||||
The page turns pink.
|
||||
|
||||
## Steps to reproduce
|
||||
|
||||
1. Put a `paper-foo` element in the page.
|
||||
2. Open the page in a web browser.
|
||||
3. Click the `paper-foo` element.
|
||||
```
|
||||
|
||||
2. **A reduced test case that demonstrates the problem.** If possible, please include the test case as a JSBin. Start with this template to easily import and use relevant Polymer Elements: [http://jsbin.com/cagaye](http://jsbin.com/cagaye/edit?html,output).
|
||||
|
||||
3. **A list of browsers where the problem occurs.** This can be skipped if the problem is the same across all browsers.
|
||||
|
||||
### Submitting Pull Requests
|
||||
|
||||
**Before creating a pull request**, please ensure that an issue exists for the corresponding change in the pull request that you intend to make. **If an issue does not exist, please create one per the guidelines above**. The goal is to discuss the design and necessity of the proposed change with Polymer authors and community before diving into a pull request.
|
||||
|
||||
When submitting pull requests, please provide:
|
||||
|
||||
1. **A reference to the corresponding issue** or issues that will be closed by the pull request. Please refer to these issues using the following syntax:
|
||||
|
||||
```markdown
|
||||
(For a single issue)
|
||||
Fixes #20
|
||||
|
||||
(For multiple issues)
|
||||
Fixes #32, #40
|
||||
```
|
||||
|
||||
2. **A succinct description of the design** used to fix any related issues. For example:
|
||||
|
||||
```markdown
|
||||
This fixes #20 by removing styles that leaked which would cause the page to turn pink whenever `paper-foo` is clicked.
|
||||
```
|
||||
|
||||
3. **At least one test for each bug fixed or feature added** as part of the pull request. Pull requests that fix bugs or add features without accompanying tests will not be considered.
|
||||
|
||||
If a proposed change contains multiple commits, please [squash commits](https://www.google.com/url?q=http://blog.steveklabnik.com/posts/2012-11-08-how-to-squash-commits-in-a-github-pull-request) to as few as is necessary to succinctly express the change. A Polymer author can help you squash commits, so don’t be afraid to ask us if you need help with that!
|
||||
29
dashboard-ui/bower_components/iron-scroll-threshold/bower.json
vendored
Normal file
29
dashboard-ui/bower_components/iron-scroll-threshold/bower.json
vendored
Normal file
|
|
@ -0,0 +1,29 @@
|
|||
{
|
||||
"name": "iron-scroll-threshold",
|
||||
"description": "Triggers an event when nearing the beginning or end of a scrollable element ",
|
||||
"keywords": [
|
||||
"web-components",
|
||||
"polymer"
|
||||
],
|
||||
"version": "1.0.1",
|
||||
"homepage": "https://github.com/PolymerElements/iron-scroll-threshold",
|
||||
"authors": [
|
||||
"The Polymer Authors"
|
||||
],
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "git://github.com/PolymerElements/iron-scroll-threshold"
|
||||
},
|
||||
"main": "iron-scroll-threshold.html",
|
||||
"license": "http://polymer.github.io/LICENSE.txt",
|
||||
"ignore": [],
|
||||
"dependencies": {
|
||||
"polymer": "Polymer/polymer#^1.1.0",
|
||||
"iron-scroll-target-behavior": "PolymerElements/iron-scroll-target-behavior#^1.0.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"iron-component-page": "polymerelements/iron-component-page#^1.0.0",
|
||||
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.2",
|
||||
"web-component-tester": "^4.0.0"
|
||||
}
|
||||
}
|
||||
103
dashboard-ui/bower_components/iron-scroll-threshold/demo/document.html
vendored
Normal file
103
dashboard-ui/bower_components/iron-scroll-threshold/demo/document.html
vendored
Normal file
|
|
@ -0,0 +1,103 @@
|
|||
<!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 id="html">
|
||||
<head>
|
||||
|
||||
<title>iron-scroll-threshold using the document scroll</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;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
box-shadow: 0 0 5px rgba(0, 0, 0, 0.8);
|
||||
}
|
||||
|
||||
.loader {
|
||||
background-color: #0b8043;
|
||||
text-align: center;
|
||||
height: 44px;
|
||||
font: 13px arial;
|
||||
line-height: 44px;
|
||||
color: white;
|
||||
}
|
||||
|
||||
sample-content {
|
||||
padding-top: 54px;
|
||||
}
|
||||
|
||||
iron-scroll-threshold {
|
||||
display: none;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
</head>
|
||||
<body unresolved>
|
||||
|
||||
<template is="dom-bind" id="overlay" size="5">
|
||||
|
||||
<div class="toolbar">
|
||||
<b>Document Scroll</b> |
|
||||
Upper: [[upperTriggered]] - Lower: [[lowerTriggered]]
|
||||
</div>
|
||||
|
||||
<sample-content size="[[size]]"></sample-content>
|
||||
<div class="loader">Fetching new items...</div>
|
||||
|
||||
<!-- scroll-target uses the document scroll -->
|
||||
<iron-scroll-threshold id="scrollThreshold"
|
||||
scroll-target="html"
|
||||
lower-threshold="500"
|
||||
lower-triggered="{{lowerTriggered}}"
|
||||
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>
|
||||
105
dashboard-ui/bower_components/iron-scroll-threshold/demo/sample-content.html
vendored
Normal file
105
dashboard-ui/bower_components/iron-scroll-threshold/demo/sample-content.html
vendored
Normal 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">
|
||||
|
||||
<dom-module id="sample-content">
|
||||
|
||||
<script>
|
||||
|
||||
Polymer({
|
||||
is: 'sample-content',
|
||||
|
||||
properties: {
|
||||
|
||||
size: {
|
||||
type: Number,
|
||||
value: 0,
|
||||
notify: true
|
||||
},
|
||||
|
||||
label: {
|
||||
value: ''
|
||||
},
|
||||
|
||||
padding: {
|
||||
value: '16px'
|
||||
},
|
||||
|
||||
margin: {
|
||||
value: '24px'
|
||||
},
|
||||
|
||||
boxShadow: {
|
||||
value: '0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2)'
|
||||
}
|
||||
|
||||
},
|
||||
|
||||
observers: [
|
||||
'_render(size, label, padding, margin, boxShadow)'
|
||||
],
|
||||
|
||||
_lorem_ipsum_strings: [
|
||||
'Lorem ipsum dolor sit amet, per in nusquam nominavi periculis, sit elit oportere ea.',
|
||||
'Ut labores minimum atomorum pro. Laudem tibique ut has.',
|
||||
'Fugit adolescens vis et, ei graeci forensibus sed.',
|
||||
'Convenire definiebas scriptorem eu cum. Sit dolor dicunt consectetuer no.',
|
||||
'Ea duis bonorum nec, falli paulo aliquid ei eum.',
|
||||
'Usu eu novum principes, vel quodsi aliquip ea.',
|
||||
'Has at minim mucius aliquam, est id tempor laoreet.',
|
||||
'Pro saepe pertinax ei, ad pri animal labores suscipiantur.',
|
||||
'Detracto suavitate repudiandae no eum. Id adhuc minim soluta nam.',
|
||||
'Iisque perfecto dissentiet cum et, sit ut quot mandamus, ut vim tibique splendide instructior.',
|
||||
'Id nam odio natum malorum, tibique copiosae expetenda mel ea.',
|
||||
'Cu mei vide viris gloriatur, at populo eripuit sit.',
|
||||
'Modus commodo minimum eum te, vero utinam assueverit per eu.',
|
||||
'No nam ipsum lorem aliquip, accumsan quaerendum ei usu.'
|
||||
],
|
||||
|
||||
ready: function() {
|
||||
this.style.display = 'block';
|
||||
},
|
||||
|
||||
_randomString: function(size) {
|
||||
var ls = this._lorem_ipsum_strings;
|
||||
var s = '';
|
||||
do {
|
||||
s += ls[Math.floor(Math.random() * ls.length)];
|
||||
size--;
|
||||
} while (size > 0);
|
||||
return s;
|
||||
},
|
||||
|
||||
_randomLetter: function() {
|
||||
return String.fromCharCode(65 + Math.floor(Math.random() * 26));
|
||||
},
|
||||
|
||||
_render: function(size, label, padding, margin, boxShadow) {
|
||||
var html = this._lastSize < size ? this.innerHTML : '';
|
||||
var lastItem = this._lastSize < size ? size - this._lastSize : size;
|
||||
for (var i = 0; i < lastItem; i++) {
|
||||
html +=
|
||||
'<div style="box-shadow: ' + boxShadow + '; padding: ' + padding + '; margin: ' + margin + '; border-radius: 5px; background-color: #fff; color: #757575;">' +
|
||||
'<div style="display: inline-block; height: 64px; width: 64px; border-radius: 50%; background: #ddd; line-height: 64px; font-size: 30px; color: #555; text-align: center;">' + this._randomLetter() + '</div>' +
|
||||
'<div style="font-size: 22px; margin: 16px 0; color: #212121;">' + this.label + ' ' + this._randomString() + '</div>' +
|
||||
'<p style="font-size: 16px;">' + this._randomString() + '</p>' +
|
||||
'<p style="font-size: 14px;">' + this._randomString(3) + '</p>' +
|
||||
'</div>';
|
||||
}
|
||||
this.innerHTML = html;
|
||||
this._lastSize = size;
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
</dom-module>
|
||||
107
dashboard-ui/bower_components/iron-scroll-threshold/demo/scrolling-region-decoupled.html
vendored
Normal file
107
dashboard-ui/bower_components/iron-scroll-threshold/demo/scrolling-region-decoupled.html
vendored
Normal 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>
|
||||
102
dashboard-ui/bower_components/iron-scroll-threshold/demo/scrolling-region.html
vendored
Normal file
102
dashboard-ui/bower_components/iron-scroll-threshold/demo/scrolling-region.html
vendored
Normal file
|
|
@ -0,0 +1,102 @@
|
|||
<!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;
|
||||
|
||||
}
|
||||
|
||||
iron-scroll-threshold {
|
||||
position: absolute;
|
||||
top: 25vh;
|
||||
left: 25vh;
|
||||
right: 25vh;
|
||||
height: 50vh;
|
||||
box-shadow: 0 0 60px rgba(0,0,0,0.5);
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
</head>
|
||||
<body unresolved>
|
||||
|
||||
<template is="dom-bind" id="overlay" size="5">
|
||||
|
||||
<iron-scroll-threshold id="scrollThreshold" lower-threshold="500" on-lower-threshold="loadMoreData">
|
||||
|
||||
<div class="toolbar">iron-scroll-threshold using a scrolling region</div>
|
||||
|
||||
<sample-content size="[[size]]"></sample-content>
|
||||
|
||||
<div class="loader">Fetching new items...</div>
|
||||
|
||||
</iron-scroll-threshold>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
(function(scope) {
|
||||
scope.loadMoreData = function(e) {
|
||||
if (scope.size) {
|
||||
// Simulate network delay
|
||||
setTimeout(function() {
|
||||
scope.size = +scope.size + 5;
|
||||
scope.$.scrollThreshold.clearTriggers();
|
||||
}, 500);
|
||||
}
|
||||
};
|
||||
})(document.querySelector('#overlay'));
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
28
dashboard-ui/bower_components/iron-scroll-threshold/index.html
vendored
Normal file
28
dashboard-ui/bower_components/iron-scroll-threshold/index.html
vendored
Normal file
|
|
@ -0,0 +1,28 @@
|
|||
<!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-threshold</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-component-page/iron-component-page.html">
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<iron-component-page></iron-component-page>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
236
dashboard-ui/bower_components/iron-scroll-threshold/iron-scroll-threshold.html
vendored
Normal file
236
dashboard-ui/bower_components/iron-scroll-threshold/iron-scroll-threshold.html
vendored
Normal file
|
|
@ -0,0 +1,236 @@
|
|||
<!--
|
||||
@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/iron-scroll-target-behavior.html">
|
||||
|
||||
<!--
|
||||
`iron-scroll-threshold` is a utility element that listens for `scroll` events from a
|
||||
scrollable region and fires events to indicate when the scroller has reached a pre-defined
|
||||
limit, specified in pixels from the upper and lower bounds of the scrollable region.
|
||||
This element may wrap a scrollable region and will listen for `scroll` events bubbling
|
||||
through it from its children. In this case, care should be taken that only one scrollable
|
||||
region with the same orientation as this element is contained within. Alternatively,
|
||||
the `scrollTarget` property can be set/bound to a non-child scrollable region, from which
|
||||
it will listen for events.
|
||||
|
||||
Once a threshold has been reached, a `lower-threshold` or `upper-threshold` event will
|
||||
be fired, at which point the user may perform actions such as lazily-loading more data
|
||||
to be displayed. After any work is done, the user must then clear the threshold by
|
||||
calling the `clearTriggers` method on this element, after which it will
|
||||
begin listening again for the scroll position to reach the threshold again assuming
|
||||
the content in the scrollable region has grown. If the user no longer wishes to receive
|
||||
events (e.g. all data has been exhausted), the threshold property in question (e.g.
|
||||
`lowerThreshold`) may be set to a falsy value to disable events and clear the associated
|
||||
triggered property.
|
||||
|
||||
### Example
|
||||
|
||||
```html
|
||||
<iron-scroll-threshold on-lower-threshold="loadMoreData">
|
||||
<div>content</div>
|
||||
</iron-scroll-threshold>
|
||||
```
|
||||
|
||||
```js
|
||||
loadMoreData: function() {
|
||||
// load async stuff. e.g. XHR
|
||||
asyncStuff(function done() {
|
||||
ironScrollTheshold.clearTriggers();
|
||||
});
|
||||
}
|
||||
```
|
||||
|
||||
### Using dom-repeat
|
||||
|
||||
```html
|
||||
<iron-scroll-threshold on-lower-threshold="loadMoreData">
|
||||
<dom-repeat items="[[items]]">
|
||||
<template>
|
||||
<div>[[index]]</div>
|
||||
</template>
|
||||
</dom-repeat>
|
||||
</iron-scroll-threshold>
|
||||
```
|
||||
|
||||
### Using iron-list
|
||||
|
||||
```html
|
||||
<iron-scroll-threshold on-lower-threshold="loadMoreData" id="threshold">
|
||||
<iron-list scroll-target="threshold" items="[[items]]">
|
||||
<template>
|
||||
<div>[[index]]</div>
|
||||
</template>
|
||||
</iron-list>
|
||||
</iron-scroll-threshold>
|
||||
```
|
||||
|
||||
@group Iron Element
|
||||
@element iron-scroll-threshold
|
||||
@demo demo/scrolling-region.html Scrolling Region
|
||||
@demo demo/document.html Document Element
|
||||
-->
|
||||
|
||||
<dom-module id="iron-scroll-threshold">
|
||||
<template>
|
||||
<style>
|
||||
:host {
|
||||
display: block;
|
||||
}
|
||||
</style>
|
||||
|
||||
<content></content>
|
||||
|
||||
</template>
|
||||
</dom-module>
|
||||
|
||||
<script>
|
||||
|
||||
Polymer({
|
||||
|
||||
is: 'iron-scroll-threshold',
|
||||
|
||||
properties: {
|
||||
|
||||
/**
|
||||
* Distance from the top (or left, for horizontal) bound of the scroller
|
||||
* where the "upper trigger" will fire.
|
||||
*/
|
||||
upperThreshold: {
|
||||
type: Number,
|
||||
value: 100
|
||||
},
|
||||
|
||||
/**
|
||||
* Distance from the bottom (or right, for horizontal) bound of the scroller
|
||||
* where the "lower trigger" will fire.
|
||||
*/
|
||||
lowerThreshold: {
|
||||
type: Number,
|
||||
value: 100
|
||||
},
|
||||
|
||||
/**
|
||||
* Read-only value that tracks the triggered state of the upper threshold.
|
||||
*/
|
||||
upperTriggered: {
|
||||
type: Boolean,
|
||||
value: false,
|
||||
notify: true,
|
||||
readOnly: true
|
||||
},
|
||||
|
||||
/**
|
||||
* Read-only value that tracks the triggered state of the lower threshold.
|
||||
*/
|
||||
lowerTriggered: {
|
||||
type: Boolean,
|
||||
value: false,
|
||||
notify: true,
|
||||
readOnly: true
|
||||
},
|
||||
|
||||
/**
|
||||
* True if the orientation of the scroller is horizontal.
|
||||
*/
|
||||
horizontal: {
|
||||
type: Boolean,
|
||||
value: false
|
||||
}
|
||||
},
|
||||
|
||||
behaviors: [
|
||||
Polymer.IronScrollTargetBehavior
|
||||
],
|
||||
|
||||
observers: [
|
||||
'_setOverflow(scrollTarget)',
|
||||
'_initCheck(horizontal, isAttached)'
|
||||
],
|
||||
|
||||
get _defaultScrollTarget() {
|
||||
return this;
|
||||
},
|
||||
|
||||
_setOverflow: function(scrollTarget) {
|
||||
this.style.overflow = scrollTarget === this ? 'auto' : '';
|
||||
},
|
||||
|
||||
_scrollHandler: function() {
|
||||
// throttle the work on the scroll event
|
||||
var THROTTLE_THRESHOLD = 200;
|
||||
if (!this.isDebouncerActive('_checkTheshold')) {
|
||||
this.debounce('_checkTheshold', function() {
|
||||
this.checkScrollThesholds();
|
||||
}, THROTTLE_THRESHOLD);
|
||||
}
|
||||
},
|
||||
|
||||
_initCheck: function(horizontal, isAttached) {
|
||||
if (isAttached) {
|
||||
this.debounce('_init', function() {
|
||||
this.clearTriggers();
|
||||
this.checkScrollThesholds();
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Checks the scroll thresholds.
|
||||
* This method is automatically called by iron-scroll-threshold.
|
||||
*
|
||||
* @method checkScrollThesholds
|
||||
*/
|
||||
checkScrollThesholds: function() {
|
||||
if (!this.scrollTarget || (this.lowerTriggered && this.upperTriggered)) {
|
||||
return;
|
||||
}
|
||||
var upperScrollValue = this.horizontal ? this._scrollLeft : this._scrollTop;
|
||||
var lowerScrollValue = this.horizontal ?
|
||||
this.scrollTarget.scrollWidth - this._scrollTargetWidth - this._scrollLeft :
|
||||
this.scrollTarget.scrollHeight - this._scrollTargetHeight - this._scrollTop;
|
||||
|
||||
// Detect upper threshold
|
||||
if (upperScrollValue <= this.upperThreshold && !this.upperTriggered) {
|
||||
this._setUpperTriggered(true);
|
||||
this.fire('upper-threshold');
|
||||
}
|
||||
// Detect lower threshold
|
||||
if (lowerScrollValue <= this.lowerThreshold && !this.lowerTriggered) {
|
||||
this._setLowerTriggered(true);
|
||||
this.fire('lower-threshold');
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Clear the upper and lower threshold states.
|
||||
*
|
||||
* @method clearTriggers
|
||||
*/
|
||||
clearTriggers: function() {
|
||||
this._setUpperTriggered(false);
|
||||
this._setLowerTriggered(false);
|
||||
}
|
||||
|
||||
/**
|
||||
* Fires when the lower threshold has been reached.
|
||||
*
|
||||
* @event lower-threshold
|
||||
*/
|
||||
|
||||
/**
|
||||
* Fires when the upper threshold has been reached.
|
||||
*
|
||||
* @event upper-threshold
|
||||
*/
|
||||
|
||||
});
|
||||
|
||||
</script>
|
||||
223
dashboard-ui/bower_components/iron-scroll-threshold/test/basic.html
vendored
Normal file
223
dashboard-ui/bower_components/iron-scroll-threshold/test/basic.html
vendored
Normal file
|
|
@ -0,0 +1,223 @@
|
|||
<!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 id="html">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>iron-scroll-threshold 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="../iron-scroll-threshold.html">
|
||||
|
||||
<style>
|
||||
#scrollingRegion {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
overflow: auto;
|
||||
background: green;
|
||||
}
|
||||
.content {
|
||||
height: 2000px;
|
||||
width: 2px;
|
||||
background-color: gray;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<test-fixture id="trivialScrollThreshold">
|
||||
<template>
|
||||
<iron-scroll-threshold id="scrollingRegion">
|
||||
<div class="content"></div>
|
||||
</iron-scroll-threshold>
|
||||
</template>
|
||||
</test-fixture>
|
||||
|
||||
<test-fixture id="trivialDocumentScrolling">
|
||||
<template>
|
||||
<iron-scroll-threshold scroll-target="html">
|
||||
<div class="content"></div>
|
||||
</iron-scroll-threshold>
|
||||
</template>
|
||||
</test-fixture>
|
||||
|
||||
<script>
|
||||
|
||||
suite('basic features', function() {
|
||||
var scrollThreshold;
|
||||
|
||||
setup(function() {
|
||||
scrollThreshold = fixture('trivialScrollThreshold');
|
||||
});
|
||||
|
||||
teardown(function() {
|
||||
scrollThreshold.clearTriggers();
|
||||
scrollThreshold._scrollTop = 0;
|
||||
});
|
||||
|
||||
test('default', function() {
|
||||
assert.equal(scrollThreshold._defaultScrollTarget, scrollThreshold, '_defaultScrollTarget');
|
||||
assert.equal(scrollThreshold.scrollTarget, scrollThreshold, 'scrollTarget');
|
||||
assert.equal(scrollThreshold.upperThreshold, 100, 'upperThreshold');
|
||||
assert.equal(scrollThreshold.lowerThreshold, 100, 'lowerThreshold');
|
||||
assert.equal(scrollThreshold.horizontal, false, 'horizontal');
|
||||
assert.equal(window.getComputedStyle(scrollThreshold.scrollTarget).overflow, 'auto', 'overflow');
|
||||
});
|
||||
|
||||
test('upper-threshold event', function(done) {
|
||||
flush(function() {
|
||||
scrollThreshold.addEventListener('upper-threshold', function() {
|
||||
assert.isTrue(scrollThreshold.upperTriggered);
|
||||
done();
|
||||
});
|
||||
assert.isTrue(scrollThreshold.upperTriggered);
|
||||
|
||||
scrollThreshold.clearTriggers();
|
||||
scrollThreshold._scrollTop = scrollThreshold._scrollTop + 1;
|
||||
});
|
||||
});
|
||||
|
||||
test('lower-threshold event', function(done) {
|
||||
flush(function() {
|
||||
scrollThreshold.addEventListener('lower-threshold', function() {
|
||||
assert.isTrue(scrollThreshold.lowerTriggered);
|
||||
done();
|
||||
});
|
||||
scrollThreshold._scrollTop = scrollThreshold.scrollTarget.scrollHeight;
|
||||
});
|
||||
});
|
||||
|
||||
test('clearTriggers', function(done) {
|
||||
flush(function() {
|
||||
assert.isTrue(scrollThreshold.upperTriggered);
|
||||
scrollThreshold.clearTriggers();
|
||||
assert.isFalse(scrollThreshold.upperTriggered);
|
||||
done();
|
||||
});
|
||||
});
|
||||
|
||||
test('checkScrollThesholds', function(done) {
|
||||
flush(function() {
|
||||
scrollThreshold._scrollTop = scrollThreshold.scrollTarget.scrollHeight;
|
||||
|
||||
assert.isFalse(scrollThreshold.lowerTriggered, 'check assumption');
|
||||
scrollThreshold.checkScrollThesholds();
|
||||
assert.isTrue(scrollThreshold.lowerTriggered, 'check triggers');
|
||||
scrollThreshold.clearTriggers();
|
||||
assert.isFalse(scrollThreshold.lowerTriggered, 'reset triggers');
|
||||
done();
|
||||
});
|
||||
});
|
||||
|
||||
test('horizontal', function(done) {
|
||||
scrollThreshold.horizontal = true;
|
||||
flush(function() {
|
||||
scrollThreshold.clearTriggers();
|
||||
scrollThreshold._scrollLeft = scrollThreshold.scrollTarget.scrollWidth;
|
||||
|
||||
assert.isFalse(scrollThreshold.lowerTriggered, 'check assumption');
|
||||
scrollThreshold.checkScrollThesholds();
|
||||
assert.isTrue(scrollThreshold.lowerTriggered, 'check lowerTriggered');
|
||||
scrollThreshold._scrollLeft = 0;
|
||||
scrollThreshold.checkScrollThesholds();
|
||||
assert.isTrue(scrollThreshold.upperTriggered, 'upperTriggered');
|
||||
done();
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
suite('document scroll', function() {
|
||||
var scrollThreshold;
|
||||
|
||||
setup(function() {
|
||||
scrollThreshold = fixture('trivialDocumentScrolling');
|
||||
});
|
||||
|
||||
teardown(function() {
|
||||
scrollThreshold.clearTriggers();
|
||||
scrollThreshold._scrollTop = 0;
|
||||
});
|
||||
|
||||
test('default', function() {
|
||||
assert.equal(scrollThreshold.scrollTarget, scrollThreshold._doc, 'scrollTarget');
|
||||
assert.equal(scrollThreshold.upperThreshold, 100, 'upperThreshold');
|
||||
assert.equal(scrollThreshold.lowerThreshold, 100, 'lowerThreshold');
|
||||
assert.equal(scrollThreshold.horizontal, false, 'horizontal');
|
||||
});
|
||||
|
||||
test('upper-threshold event', function(done) {
|
||||
flush(function() {
|
||||
scrollThreshold.addEventListener('upper-threshold', function() {
|
||||
assert.isTrue(scrollThreshold.upperTriggered);
|
||||
done();
|
||||
});
|
||||
assert.isTrue(scrollThreshold.upperTriggered);
|
||||
|
||||
scrollThreshold.clearTriggers();
|
||||
scrollThreshold._scrollTop = scrollThreshold._scrollTop + 1;
|
||||
});
|
||||
});
|
||||
|
||||
test('lower-threshold event', function(done) {
|
||||
flush(function() {
|
||||
scrollThreshold.addEventListener('lower-threshold', function() {
|
||||
assert.isTrue(scrollThreshold.lowerTriggered);
|
||||
done();
|
||||
});
|
||||
scrollThreshold._scrollTop = scrollThreshold.scrollTarget.scrollHeight;
|
||||
});
|
||||
});
|
||||
|
||||
test('clearTriggers', function(done) {
|
||||
flush(function() {
|
||||
assert.isTrue(scrollThreshold.upperTriggered);
|
||||
scrollThreshold.clearTriggers();
|
||||
assert.isFalse(scrollThreshold.upperTriggered);
|
||||
done();
|
||||
});
|
||||
});
|
||||
|
||||
test('checkScrollThesholds', function(done) {
|
||||
flush(function() {
|
||||
scrollThreshold._scrollTop = scrollThreshold.scrollTarget.scrollHeight;
|
||||
|
||||
assert.isFalse(scrollThreshold.lowerTriggered, 'check assumption');
|
||||
scrollThreshold.checkScrollThesholds();
|
||||
assert.isTrue(scrollThreshold.lowerTriggered, 'check triggers');
|
||||
scrollThreshold.clearTriggers();
|
||||
assert.isFalse(scrollThreshold.lowerTriggered, 'reset triggers');
|
||||
done();
|
||||
});
|
||||
});
|
||||
|
||||
test('horizontal', function(done) {
|
||||
scrollThreshold.horizontal = true;
|
||||
flush(function() {
|
||||
scrollThreshold.clearTriggers();
|
||||
scrollThreshold._scrollLeft = scrollThreshold.scrollTarget.scrollWidth;
|
||||
|
||||
assert.isFalse(scrollThreshold.lowerTriggered, 'check assumption');
|
||||
scrollThreshold.checkScrollThesholds();
|
||||
assert.isTrue(scrollThreshold.lowerTriggered, 'check lowerTriggered');
|
||||
scrollThreshold._scrollLeft = 0;
|
||||
scrollThreshold.checkScrollThesholds();
|
||||
assert.isTrue(scrollThreshold.upperTriggered, 'upperTriggered');
|
||||
done();
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
29
dashboard-ui/bower_components/iron-scroll-threshold/test/index.html
vendored
Normal file
29
dashboard-ui/bower_components/iron-scroll-threshold/test/index.html
vendored
Normal file
|
|
@ -0,0 +1,29 @@
|
|||
<!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>
|
||||
|
||||
<meta charset="utf-8">
|
||||
<title>Tests</title>
|
||||
<script src="../../web-component-tester/browser.js"></script>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<script>
|
||||
|
||||
WCT.loadSuites([
|
||||
'basic.html'
|
||||
]);
|
||||
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Add table
Add a link
Reference in a new issue