| Index: polymer_0.5.0/bower_components/core-scroll-threshold/core-scroll-threshold.html
|
| diff --git a/polymer_0.5.0/bower_components/core-scroll-threshold/core-scroll-threshold.html b/polymer_0.5.0/bower_components/core-scroll-threshold/core-scroll-threshold.html
|
| new file mode 100644
|
| index 0000000000000000000000000000000000000000..fee7615a1ee1b20d96f06d45573d2ac09619f0f0
|
| --- /dev/null
|
| +++ b/polymer_0.5.0/bower_components/core-scroll-threshold/core-scroll-threshold.html
|
| @@ -0,0 +1,220 @@
|
| +<!--
|
| +Copyright (c) 2014 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
|
| +-->
|
| +
|
| +<!--
|
| +`core-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 `clearUpper` or `clearLower` methods 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
|
| +
|
| +Example:
|
| +
|
| + <core-scroll-threshold id="threshold" lowerThreshold="500"
|
| + on-lower-triggered="{{loadMore}}" lowerTriggered="{{spinnerShouldShow}}">
|
| + </scroll-threshold>
|
| +
|
| + ...
|
| +
|
| + loadMore: function() {
|
| + this.asyncLoadStuffThen(function() {
|
| + this.$.threshold.clearLower();
|
| + }.bind(this));
|
| + }
|
| +
|
| +@group Polymer Core Elements
|
| +@element core-scroll-threshold
|
| +@homepage github.io
|
| +-->
|
| +
|
| +<link rel="import" href="../polymer/polymer.html">
|
| +
|
| +<polymer-element name="core-scroll-threshold">
|
| +
|
| +<script>
|
| +
|
| + Polymer({
|
| +
|
| + publish: {
|
| +
|
| + /**
|
| + * When set, the given element is observed for scroll position. When undefined,
|
| + * children can be placed inside and element itself can be used as the scrollable
|
| + * element.
|
| + *
|
| + * @attribute scrollTarget
|
| + * @type string
|
| + * @default null
|
| + */
|
| + scrollTarget: null,
|
| +
|
| + /**
|
| + * Orientation of the scroller to be observed (`v` for vertical, `h` for horizontal)
|
| + *
|
| + * @attribute orient
|
| + * @type boolean
|
| + * @default 'v'
|
| + */
|
| + orient: 'v',
|
| +
|
| + /**
|
| + * Distance from the top (or left, for horizontal) bound of the scroller
|
| + * where the "upper trigger" will fire.
|
| + *
|
| + * @attribute upperThreshold
|
| + * @type integer
|
| + * @default null
|
| + */
|
| + upperThreshold: null,
|
| +
|
| + /**
|
| + * Distance from the bottom (or right, for horizontal) bound of the scroller
|
| + * where the "lower trigger" will fire.
|
| + *
|
| + * @attribute lowerThreshold
|
| + * @type integer
|
| + * @default false
|
| + */
|
| + lowerThreshold: null,
|
| +
|
| + /**
|
| + * Read-only value that tracks the triggered state of the upper threshold
|
| + *
|
| + * @attribute upperTriggered
|
| + * @type boolean
|
| + * @default false
|
| + */
|
| + upperTriggered: false,
|
| +
|
| + /**
|
| + * Read-only value that tracks the triggered state of the lower threshold
|
| + *
|
| + * @attribute lowerTriggered
|
| + * @type boolean
|
| + * @default false
|
| + */
|
| + lowerTriggered: false
|
| +
|
| + },
|
| +
|
| + observe: {
|
| + 'upperThreshold lowerThreshold scrollTarget orient': 'setup'
|
| + },
|
| +
|
| + ready: function() {
|
| + this._boundScrollHandler = this.checkThreshold.bind(this);
|
| + },
|
| +
|
| + setup: function() {
|
| + // Remove listener for any previous scroll target
|
| + if (this._scrollTarget && (this._scrollTarget != this.target)) {
|
| + this._scrollTarget.removeEventListener(this._boundScrollHandler);
|
| + }
|
| +
|
| + // Add listener for new scroll target
|
| + var target = this.scrollTarget || this;
|
| + if (target) {
|
| + this._scrollTarget = target;
|
| + this._scrollTarget.addEventListener('scroll', this._boundScrollHandler);
|
| + }
|
| +
|
| + // If we're listening on ourself, make us auto in case someone put
|
| + // content inside
|
| + this.style.overflow = (target == this) ? 'auto' : null;
|
| +
|
| + // Setup extents based on orientation
|
| + this.scrollPosition = (this.orient == 'v') ? 'scrollTop' : 'scrollLeft';
|
| + this.sizeExtent = (this.orient == 'v') ? 'offsetHeight' : 'offsetWidth';
|
| + this.scrollExtent = (this.orient == 'v') ? 'scrollHeight' : 'scrollWidth';
|
| +
|
| + // Clear trigger state if user has cleared the threshold
|
| + if (!this.upperThreshold) {
|
| + this.upperTriggered = false;
|
| + }
|
| + if (!this.lowerThreshold) {
|
| + this.lowerTriggered = false;
|
| + }
|
| + },
|
| +
|
| + checkThreshold: function(e) {
|
| + var top = this._scrollTarget[this.scrollPosition];
|
| + if (!this.upperTriggered && this.upperThreshold != null) {
|
| + if (top < this.upperThreshold) {
|
| + this.upperTriggered = true;
|
| + this.fire('upper-trigger');
|
| + }
|
| + }
|
| + if (this.lowerThreshold != null) {
|
| + var bottom = top + this._scrollTarget[this.sizeExtent];
|
| + var size = this._scrollTarget[this.scrollExtent];
|
| + if (!this.lowerTriggered && (size - bottom) < this.lowerThreshold) {
|
| + this.lowerTriggered = true;
|
| + this.fire('lower-trigger');
|
| + }
|
| + }
|
| + },
|
| +
|
| + /**
|
| + * Clear the upper threshold, following an `upper-trigger` event.
|
| + *
|
| + * @method clearUpper
|
| + */
|
| + clearUpper: function(waitForMutation) {
|
| + if (waitForMutation) {
|
| + this._waitForMutation(function() {
|
| + this.clearUpper();
|
| + }.bind(this));
|
| + } else {
|
| + requestAnimationFrame(function() {
|
| + this.upperTriggered = false;
|
| + }.bind(this));
|
| + }
|
| + },
|
| +
|
| + /**
|
| + * Clear the lower threshold, following a `lower-trigger` event.
|
| + *
|
| + * @method clearLower
|
| + */
|
| + clearLower: function(waitForMutation) {
|
| + if (waitForMutation) {
|
| + this._waitForMutation(function() {
|
| + this.clearLower();
|
| + }.bind(this));
|
| + } else {
|
| + requestAnimationFrame(function() {
|
| + this.lowerTriggered = false;
|
| + }.bind(this));
|
| + }
|
| + },
|
| +
|
| + _waitForMutation: function(listener) {
|
| + var observer = new MutationObserver(function(mutations) {
|
| + listener.call(this, observer, mutations);
|
| + observer.disconnect();
|
| + }.bind(this));
|
| + observer.observe(this._scrollTarget, {attributes:true, childList: true, subtree: true});
|
| + }
|
| +
|
| + });
|
| +
|
| +</script>
|
| +</polymer-element>
|
|
|