intersection-observer 0.4.3 → 0.7.0

package/README.md

@@ -4,6 +4,7 @@ This library polyfills the native [`IntersectionObserver`](http://w3c.github.io/
 
 - [Installation](#installation)
 - [Configuring the polyfill](#configuring-the-polyfill)
+- [Limitations](#limitations)
 - [Browser support](#browser-support)
 - [Running the tests](#running-the-tests)
 
@@ -81,6 +82,26 @@ io.observe(someTargetElement);
 
 **Note:** the `POLL_INTERVAL` property must be set prior to calling the `.observe` method, or the default configuration will be used.
 
+**Ignoring DOM changes**
+
+You can also choose to not check for intersections when the DOM changes by setting an observer's `USE_MUTATION_OBSERVER` property to `false` (either globally on the prototype or per-instance)
+
+```js
+IntersectionObserver.prototype.USE_MUTATION_OBSERVER = false; // Globally
+
+// for an instance
+var io = new IntersectionObserver(callback);
+io.USE_MUTATION_OBSERVER = false;
+```
+
+This is recommended in cases where the DOM will update frequently but you know those updates will have no affect on the position or your target elements.
+
+## Limitations
+
+This polyfill does not attempt to report intersections across same-origin `iframe` boundaries. While supporting same-origin iframes is technically possible, it would drastically reduce performance. Since most `iframe` usage on the web is cross-origin, this polyfill chooses to optimize for performantly handling the most common use cases. (Note: neither this polyfill nor native implementations support reporting intersections across cross-origin `iframe` boundaries.)
+
+This polyfill also does not support the [proposed v2 additions](https://github.com/szager-chromium/IntersectionObserver/blob/v2/explainer.md), as these features are not currently possible to do with JavaScript and existing web APIs.
+
 ## Browser support
 
 The polyfill has been tested and known to work in the latest version of all browsers.

package/intersection-observer-test.js

@@ -724,6 +724,30 @@ describe('IntersectionObserver', function() {
 
         io.observe(targetEl1);
       });
+
+      it('handles roots in shadow DOM', function(done) {
+        var shadowRoot = grandParentEl.attachShadow({mode: 'open'});
+
+        shadowRoot.innerHTML =
+        '<style>' +
+          '#slot-parent {' +
+          '  position: relative;' +
+          '  width: 400px;' +
+          '  height: 200px;' +
+          '}' +
+        '</style>' +
+        '<div id="slot-parent"><slot></slot></div>';
+
+        var slotParent = shadowRoot.getElementById('slot-parent');
+
+        io = new IntersectionObserver(function(records) {
+          expect(records.length).to.be(1);
+          expect(records[0].intersectionRatio).to.be(1);
+          done();
+        }, {root: slotParent});
+
+        io.observe(targetEl1);
+      });
     }
 
 

package/intersection-observer.js

@@ -4,14 +4,17 @@
  * Licensed under the W3C SOFTWARE AND DOCUMENT NOTICE AND LICENSE.
  *
  *  https://www.w3.org/Consortium/Legal/2015/copyright-software-and-document
- * 
+ *
  */
-
-(function(window, document) {
+(function() {
 'use strict';
 
+// Exit early if we're not running in a browser.
+if (typeof window !== 'object') {
+  return;
+}
 
-// Exits early if all IntersectionObserver and IntersectionObserverEntry
+// Exit early if all IntersectionObserver and IntersectionObserverEntry
 // features are natively supported.
 if ('IntersectionObserver' in window &&
     'IntersectionObserverEntry' in window &&
@@ -31,9 +34,15 @@ if ('IntersectionObserver' in window &&
 }
 
 
+/**
+ * A local reference to the document.
+ */
+var document = window.document;
+
+
 /**
  * An IntersectionObserver registry. This registry exists to hold a strong
- * reference to IntersectionObserver instances currently observering a target
+ * reference to IntersectionObserver instances currently observing a target
  * element. Without this registry, instances without another reference may be
  * garbage collected.
  */
@@ -62,7 +71,9 @@ function IntersectionObserverEntry(entry) {
 
   // Sets intersection ratio.
   if (targetArea) {
-    this.intersectionRatio = intersectionArea / targetArea;
+    // Round the intersection ratio to avoid floating point math issues:
+    // https://github.com/w3c/IntersectionObserver/issues/324
+    this.intersectionRatio = Number((intersectionArea / targetArea).toFixed(4));
   } else {
     // If area is zero and is intersecting, sets to 1, otherwise to 0
     this.intersectionRatio = this.isIntersecting ? 1 : 0;
@@ -124,6 +135,12 @@ IntersectionObserver.prototype.THROTTLE_TIMEOUT = 100;
  */
 IntersectionObserver.prototype.POLL_INTERVAL = null;
 
+/**
+ * Use a mutation observer on the root element
+ * to detect intersection changes.
+ */
+IntersectionObserver.prototype.USE_MUTATION_OBSERVER = true;
+
 
 /**
  * Starts observing a target element for intersection changes based on
@@ -131,10 +148,11 @@ IntersectionObserver.prototype.POLL_INTERVAL = null;
  * @param {Element} target The DOM element to observe.
  */
 IntersectionObserver.prototype.observe = function(target) {
-  // If the target is already being observed, do nothing.
-  if (this._observationTargets.some(function(item) {
+  var isTargetAlreadyObserved = this._observationTargets.some(function(item) {
     return item.element == target;
-  })) {
+  });
+
+  if (isTargetAlreadyObserved) {
     return;
   }
 
@@ -243,7 +261,7 @@ IntersectionObserver.prototype._parseRootMargin = function(opt_rootMargin) {
 
 /**
  * Starts polling for intersection changes if the polling is not already
- * happening, and if the page's visibilty state is visible.
+ * happening, and if the page's visibility state is visible.
  * @private
  */
 IntersectionObserver.prototype._monitorIntersections = function() {
@@ -260,7 +278,7 @@ IntersectionObserver.prototype._monitorIntersections = function() {
       addEvent(window, 'resize', this._checkForIntersections, true);
       addEvent(document, 'scroll', this._checkForIntersections, true);
 
-      if ('MutationObserver' in window) {
+      if (this.USE_MUTATION_OBSERVER && 'MutationObserver' in window) {
         this._domObserver = new MutationObserver(this._checkForIntersections);
         this._domObserver.observe(document, {
           attributes: true,
@@ -545,7 +563,7 @@ function now() {
 
 
 /**
- * Throttles a function and delays its executiong, so it's only called at most
+ * Throttles a function and delays its execution, so it's only called at most
  * once within a given time period.
  * @param {Function} fn The function to throttle.
  * @param {number} timeout The amount of time that must pass before the
@@ -676,7 +694,7 @@ function getEmptyRect() {
 }
 
 /**
- * Checks to see if a parent element contains a child elemnt (including inside
+ * Checks to see if a parent element contains a child element (including inside
  * shadow DOM).
  * @param {Node} parent The parent element.
  * @param {Node} child The child element.
@@ -706,6 +724,12 @@ function getParentNode(node) {
     // If the parent is a shadow root, return the host element.
     return parent.host;
   }
+
+  if (parent && parent.assignedSlot) {
+    // If the parent is distributed in a <slot>, return the parent of a slot.
+    return parent.assignedSlot.parentNode;
+  }
+
   return parent;
 }
 
@@ -714,4 +738,4 @@ function getParentNode(node) {
 window.IntersectionObserver = IntersectionObserver;
 window.IntersectionObserverEntry = IntersectionObserverEntry;
 
-}(window, document));
+}());

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "intersection-observer",
-  "version": "0.4.3",
+  "version": "0.7.0",
   "description": "A polyfill for IntersectionObserver",
   "main": "intersection-observer",
   "repository": {