event-infinite-scroll.html

<!--
Element providing infinite scroll to track the parentNode on reaching bottom and end.
It will raise event when it reaches.
##### Example

    <event-infinite-scroll
        auto-start
        scroll-offset="500"
        loading-delay="1000"
        on-reach-bottom="{{reachBottom}}"
        on-reach-top="{{reachTop}}">
    </event-infinite-scroll>

@element event-infinite-scroll
@blurb Element providing infinite scroll to track the parentNode on reaching bottom and end.
@status alpha
@homepage http://chadliu23.github.io/event-infinite-scroll
@demo demo/index.html
-->
<link rel="import" href="../polymer/polymer.html">
<dom-module id="event-infinite-scroll">

    <template></template>
    <script>
    Polymer({
        is: "event-infinite-scroll",
        /**
         * Fired when reach bottom.
         *
         * @event reach-bottom
         */

        /**
         * Fired when reach top.
         *
         * @event reach-top
         */

        properties: {
            /**
             * track scroll on ready
             * otherwise you can call observer when ever you want
             *
             * @boolean autoStart
             */
            autoStart: {
                type: Boolean,
                value: false,
                observer: '_startScroll'
            },

            /**
             * The offset is used for triggering the notifications
             * before the real top/bottom is reached
             *
             * @int scrollOffset
             */
            scrollOffset: {
                type: Number,
                value: 200,
                reflectToAttribute: true
            },

            /**
             * You can set your item loading delay time when scroll infinite
             *
             * @int loadingDelay (in milliseconds)
             */
            loadingDelay: {
                type: Number,
                value: 0,
                reflectToAttribute: true
            }
        },

        observerStatus: true,
        observer: null,

        /**
         * Triggered when the autoStart status is changed
         *
         * @readyOnStart [boolean] autoStart
         */
        _startScroll: function( newValue ) {
            if ( newValue ) {
                this.startObserve();
            }
        },

        startObserve: function () {
            this.parentNode.addEventListener( "scroll", function () {
                this.scrolled();
            }.bind( this ) );

            this.parentNode.addEventListener( "mousewheel", function () {
                this.scrolledWheel();
            }.bind( this ) );

            var self = this;

            this.observer = new MutationObserver( function () {
                window.setTimeout( function () {
                    if ( ! self.observerStatus ) {
                        this.observer.disconnect();
                        return;
                    }

                    this.scrolled();
                }.bind( this ), 10 );
            }.bind( this ) );

            this.observer.observe( this.parentNode, {
                childList:     true,
                subtree:       true,
                characterData: true
            });
        },

        stopObserve: function () {
            this.parentNode.removeEventListener("scroll");
            this.parentNode.removeEventListener("mousewheel");

            if (this.observer) {
                this.observer.disconnect();
            }
        },

        scrolledWheel: function () {
            if ( this.parentNode.scrollHeight == this.parentNode.clientHeight ) {
                this.scrolled();
            }
        },

        scrolled: function () {
            if ( this._isReachBottom() ) {
                // fire the reach-bottom after with delay if loadingDelay is set
                this.async( function () {
                    this.fire( "reach-bottom" );
                }, this.loadingDelay );
            }

            else if ( this._isReachTop() ) {
                // fire the reach-top after with delay if loadingDelay is set
                this.async( function () {
                    this.fire( "reach-top" );
                }, this.loadingDelay );
            }
        },

        _isReachTop: function () {
            return ( this.parentNode.scrollTop <= this.scrollOffset );
        },

        _isReachBottom: function () {
            var scrollBottom = this.parentNode.scrollTop + this.parentNode.clientHeight;
            var belowView = this.parentNode.scrollHeight - scrollBottom;
            return ( belowView <= this.scrollOffset );
        }
    });
    </script>

</dom-module>