Merge pull request #3 from ThinkDeepTech/hm/impl

Migrated to intersection observers instead of resize observers.

Author: haydenmcp

bower.json

@@ -3,6 +3,7 @@
   "description": "Polymer behavior providing useful hooks into HTMLElement state (i.e, element.isVisible if the element is displayed to the user).",
   "main": "deep-element-behavior.html",
   "dependencies": {
+    "deep-intersection-observer": "ThinkDeepTech/deep-intersection-observer#^0.0.1",
     "polymer": "Polymer/polymer#^1.0 || ^2.0"
   },
   "devDependencies": {

deep-element-behavior.html

@@ -1,3 +1,5 @@
+<link rel="import" href="../deep-intersection-observer/deep-intersection-observer.html">
+
 <script>
   window.deep = window.deep || {};
 
@@ -8,20 +10,22 @@
       isVisibleToUser: {
         type: Boolean,
         value: false
-      },
-      /* Observer monitoring resize events */
-      __resizeObserver: Object
+      }
     },
     attached() {
-      this.__resizeObserver = new ResizeObserver(this.__updateVisibility.bind(this));
-      this.__resizeObserver.observe(this);
+      // NOTE: A null root defaults to the device view port.
+      this.__visibilityObserver = new IntersectionObserver(this.__updateVisibility.bind(this), {
+        root: this.parentNode || null,
+        threshold: 0.9
+      });
+      this.__visibilityObserver.observe(this);
     },
     detached() {
-      this.__resizeObserver.disconnect();
+      this.__visibilityObserver.disconnect();
     },
-    __updateVisibility(resizeEntries) {
-      if(!Array.isArray(resizeEntries) || !resizeEntries.length) return;
-      const boundingRectangle = resizeEntries[0].contentRect;
+    __updateVisibility(entries) {
+      if(!Array.isArray(entries) || !entries.length) return;
+      const boundingRectangle = entries[0].boundingClientRect || {height: 0, width: 0};
       const {height, width} = boundingRectangle;
       this.set('isVisibleToUser', Boolean(height) || Boolean(width));
     }