npm_modules: Fork bower_components into Polymer 0.4.0 and 0.5.0 versions

polymer_0.5.0/bower_components/core-scroll-threshold/core-scroll-threshold.html

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