add scroll threshold
This commit is contained in:
Luke Pulverenti
parent
942fceba52
commit
e1d75fd9c2
12 changed files with 1074 additions and 0 deletions
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>
|
||||
Loading…
Add table
Add a link
Reference in a new issue