intersection-observer-element.html

<link rel="import" href="../polymer/polymer-element.html">

<dom-module id="intersection-observer-element">
	<template>
		<style>
			:host {
				display: block;
			}
		</style>
		<div id="slottedData">
			<slot></slot>
		</div>
	</template>

	<script>
		/**
		 * `intersection-observer-element`
		 * Reflects contained elements visibility in attributes
		 *
		 * @customElement
		 * @polymer
		 * @demo demo/index.html
		 */
		class IntersectionObserverElement extends Polymer.Element {
			static get is() {
				return 'intersection-observer-element';
			}

            static get properties() {
                return {
                    thresholds: {
                        type: Array,
                        value: [0.0, 0.25, 0.5, 0.75, 1.0]
                    },
                    rootMargin: {
                        type: String,
                        value: "0px"
                    },
                    visible: {
                        type: Boolean,
                        value: false,
                        reflectToAttribute: true,
                        readOnly: true,
                        notify: true
                    },
                    ratio: {
                        type: Number,
                        reflectToAttribute: true,
                        readOnly: true
                    },
                    visibleLimit: {
                        type: Number,
                        value: 0.5,
                        reflectToAttribute: true
                    }
                };
            }

			connectedCallback() {
				super.connectedCallback();

				this.observer = new IntersectionObserver(this.handleIntersectionCallback.bind(this), {
					root: document.rootElement,
					rootMargin: this.rootMargin,
					threshold: this.thresholds
				});

				this.observer.observe(this.$.slottedData);
			}

			handleIntersectionCallback(entries) {
				if (!document.hidden) {
					for (let entry of entries) {
						this._setRatio(Number(entry.intersectionRatio).toFixed(2));

						if (this.ratio > this.visibleLimit) {
							this._setVisible(true);
						} else {
							this._setVisible(false);
						}
					}
				} else {
					this._setVisible(false);
				}
			}
		}

		window.customElements.define(IntersectionObserverElement.is, IntersectionObserverElement);
	</script>
</dom-module>