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> |