npm - intersection-observer - Versions diffs - 0.4.1 → 0.5.1 - Mend

intersection-observer 0.4.1 → 0.5.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (11) hide show

package/README.md +16 -2
package/border-test.html +47 -0
package/frame1.html +9 -0
package/frame2.html +9 -0
package/frames.html +33 -0
package/intersection-observer-test.html +3 -11
package/intersection-observer-test.js +20 -13
package/intersection-observer.js +26 -25
package/package.json +4 -4
package/slot.html +93 -0
package/.npmignore +0 -3

package/README.md CHANGED Viewed

@@ -1,6 +1,6 @@
 # `IntersectionObserver` polyfill
-This library polyfills the native [`IntersectionObserver`](http://wicg.github.io/IntersectionObserver/) API in unsupporting browsers. See the [API documentation](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API) for usage information.
+This library polyfills the native [`IntersectionObserver`](http://w3c.github.io/IntersectionObserver/) API in unsupporting browsers. See the [API documentation](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API) for usage information.
 - [Installation](#installation)
 - [Configuring the polyfill](#configuring-the-polyfill)
@@ -9,7 +9,7 @@ This library polyfills the native [`IntersectionObserver`](http://wicg.github.io
 ## Installation
-You can install the polyfill via npm or by downloading a [zip](https://github.com/WICG/IntersectionObserver/archive/gh-pages.zip) of this repository:
+You can install the polyfill via npm or by downloading a [zip](https://github.com/w3c/IntersectionObserver/archive/gh-pages.zip) of this repository:
 ```sh
 npm install intersection-observer
@@ -81,6 +81,20 @@ 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.
 ## Browser support
 The polyfill has been tested and known to work in the latest version of all browsers.

package/border-test.html ADDED Viewed

@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <script>
+// delete window.IntersectionObserver;
+    </script>
+    <script src="intersection-observer.js"></script>
+    <script>
+function init() {
+  function callback(entries, observer) {
+    Array.prototype.forEach.call(entries, function(entry) {
+      if (entry.intersectionRatio > 0) {
+        entry.target.classList.add('visible');
+      }
+    });
+  }
+  var observer = new IntersectionObserver(callback, { root: document.getElementById('outer') });
+  Array.prototype.forEach.call(document.querySelectorAll('#outer div'), function(el) {
+    observer.observe(el);
+  });
+}
+window.addEventListener('load', init);
+    </script>
+    <style>
+#outer {
+  overflow-y: hidden;
+  height: 2em;
+  border: 10px solid #0000;
+}
+#outer div {
+  height: 100%;
+}
+#el2 {
+  background: red;
+}
+    </style>
+  </head>
+  <body>
+    <div id="outer">
+      <div id="el1">Element 1</div>
+      <div id="el2">Element 2</div>
+      <div id="el3">Element 3</div>
+    </div>
+  </body>
+</html>

package/frame1.html ADDED Viewed

@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>Intersection Observer Frame Test</title>
+</head>
+<body>
+  <p>Hello World (1)</p>
+</body>
+</html>

package/frame2.html ADDED Viewed

@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>Intersection Observer Frame Test</title>
+</head>
+<body>
+  <p>Hello World (2)</p>
+</body>
+</html>

package/frames.html ADDED Viewed

@@ -0,0 +1,33 @@
+<!--
+Copyright 2016 Google Inc. All Rights Reserved.
+Licensed under the W3C SOFTWARE AND DOCUMENT NOTICE AND LICENSE.
+ https://www.w3.org/Consortium/Legal/2015/copyright-software-and-document
+-->
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+  <title>IntersectionObserver Tests</title>
+  <!-- Dependencies -->
+<!--   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/mocha/2.5.3/mocha.min.css">
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/mocha/2.5.3/mocha.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/expect.js/0.2.0/expect.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/sinon.js/3.2.1/sinon.min.js"></script>
+ -->
+  <styles>
+  </styles>
+</head>
+<body>
+  <iframe src="frame1.html"></iframe>
+  <iframe src="frame2.html"></iframe>
+</body>
+</html>

package/intersection-observer-test.html CHANGED Viewed

@@ -1,17 +1,9 @@
 <!--
 Copyright 2016 Google Inc. All Rights Reserved.
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
+Licensed under the W3C SOFTWARE AND DOCUMENT NOTICE AND LICENSE.
-    http://www.apache.org/licenses/LICENSE-2.0
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
+ https://www.w3.org/Consortium/Legal/2015/copyright-software-and-document
 -->
 <!DOCTYPE html>
 <html lang="en">
@@ -24,7 +16,7 @@ limitations under the License.
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/mocha/2.5.3/mocha.min.css">
   <script src="https://cdnjs.cloudflare.com/ajax/libs/mocha/2.5.3/mocha.min.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/expect.js/0.2.0/expect.min.js"></script>
-  <script src="https://cdnjs.cloudflare.com/ajax/libs/sinon.js/1.15.4/sinon.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/sinon.js/3.2.1/sinon.min.js"></script>
   <!-- Polyfills for IE7-8 -->
   <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=es5,getComputedStyle"></script>

package/intersection-observer-test.js CHANGED Viewed

@@ -1,17 +1,10 @@
 /**
  * Copyright 2016 Google Inc. All Rights Reserved.
  *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
+ * Licensed under the W3C SOFTWARE AND DOCUMENT NOTICE AND LICENSE.
  *
- *     http://www.apache.org/licenses/LICENSE-2.0
+ *  https://www.w3.org/Consortium/Legal/2015/copyright-software-and-document
  *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
  */
@@ -142,14 +135,14 @@ describe('IntersectionObserver', function() {
     it('throws when a threshold is not a number', function() {
       expect(function() {
         io = new IntersectionObserver(noop, {threshold: ['foo']});
-      }).to.throwException(/threshold/i);
+      }).to.throwException();
     });
     it('throws when a threshold value is not between 0 and 1', function() {
       expect(function() {
         io = new IntersectionObserver(noop, {threshold: [0, -1]});
-      }).to.throwException(/threshold/i);
+      }).to.throwException();
     });
   });
@@ -161,7 +154,7 @@ describe('IntersectionObserver', function() {
       expect(function() {
         io = new IntersectionObserver(noop);
         io.observe(null);
-      }).to.throwException(/element/i);
+      }).to.throwException();
     });
@@ -178,6 +171,20 @@ describe('IntersectionObserver', function() {
       io.observe(targetEl2);
     });
+    it('triggers for existing targets when observing begins after monitoring has begun', function(done) {
+      var spy = sinon.spy();
+      io = new IntersectionObserver(spy, {root: rootEl});
+      io.observe(targetEl1);
+      setTimeout(function() {
+        io.observe(targetEl2);
+        setTimeout(function() {
+          expect(spy.callCount).to.be(2);
+          done();
+        }, ASYNC_TIMEOUT);
+      }, ASYNC_TIMEOUT);
+    });
     it('triggers with the correct arguments', function(done) {
       io = new IntersectionObserver(function(records, observer) {
@@ -632,7 +639,7 @@ describe('IntersectionObserver', function() {
       // targetEl5 is initially not in the DOM. Note that this element must be
       // created outside of the addFixtures() function to catch the IE11 error
-      // described here: https://github.com/WICG/IntersectionObserver/pull/205
+      // described here: https://github.com/w3c/IntersectionObserver/pull/205
       var targetEl5 = document.createElement('div');
       targetEl5.setAttribute('id', 'target5');

package/intersection-observer.js CHANGED Viewed

@@ -1,17 +1,10 @@
 /**
  * Copyright 2016 Google Inc. All Rights Reserved.
  *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
+ * Licensed under the W3C SOFTWARE AND DOCUMENT NOTICE AND LICENSE.
  *
- *     http://www.apache.org/licenses/LICENSE-2.0
+ *  https://www.w3.org/Consortium/Legal/2015/copyright-software-and-document
  *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
  */
 (function(window, document) {
@@ -25,7 +18,7 @@ if ('IntersectionObserver' in window &&
     'intersectionRatio' in window.IntersectionObserverEntry.prototype) {
   // Minimal polyfill for Edge 15's lack of `isIntersecting`
-  // See: https://github.com/WICG/IntersectionObserver/issues/211
+  // See: https://github.com/w3c/IntersectionObserver/issues/211
   if (!('isIntersecting' in window.IntersectionObserverEntry.prototype)) {
     Object.defineProperty(window.IntersectionObserverEntry.prototype,
       'isIntersecting', {
@@ -40,7 +33,7 @@ if ('IntersectionObserver' in window &&
 /**
  * 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.
  */
@@ -49,7 +42,7 @@ var registry = [];
 /**
  * Creates the global IntersectionObserverEntry constructor.
- * https://wicg.github.io/IntersectionObserver/#intersection-observer-entry
+ * https://w3c.github.io/IntersectionObserver/#intersection-observer-entry
  * @param {Object} entry A dictionary of instance properties.
  * @constructor
  */
@@ -69,7 +62,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;
@@ -79,7 +74,7 @@ function IntersectionObserverEntry(entry) {
 /**
  * Creates the global IntersectionObserver constructor.
- * https://wicg.github.io/IntersectionObserver/#intersection-observer-interface
+ * https://w3c.github.io/IntersectionObserver/#intersection-observer-interface
  * @param {Function} callback The function to be invoked after intersection
  *     changes have queued. The function is not invoked if the queue has
  *     been emptied by calling the `takeRecords` method.
@@ -131,6 +126,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
@@ -138,10 +139,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;
   }
@@ -152,6 +154,7 @@ IntersectionObserver.prototype.observe = function(target) {
   this._registerInstance();
   this._observationTargets.push({element: target, entry: null});
   this._monitorIntersections();
+  this._checkForIntersections();
 };
@@ -249,15 +252,13 @@ 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() {
   if (!this._monitoringIntersections) {
     this._monitoringIntersections = true;
-    this._checkForIntersections();
     // If a poll interval is set, use polling instead of listening to
     // resize and scroll events or DOM mutations.
     if (this.POLL_INTERVAL) {
@@ -268,7 +269,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,
@@ -358,7 +359,7 @@ IntersectionObserver.prototype._checkForIntersections = function() {
  * Accepts a target and root rect computes the intersection between then
  * following the algorithm in the spec.
  * TODO(philipwalton): at this time clip-path is not considered.
- * https://wicg.github.io/IntersectionObserver/#calculate-intersection-rect-algo
+ * https://w3c.github.io/IntersectionObserver/#calculate-intersection-rect-algo
  * @param {Element} target The target DOM element
  * @param {Object} rootRect The bounding rect of the root after being
  *     expanded by the rootMargin value.
@@ -553,7 +554,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
@@ -647,7 +648,7 @@ function getBoundingClientRect(el) {
     rect = el.getBoundingClientRect();
   } catch (err) {
     // Ignore Windows 7 IE11 "Unspecified error"
-    // https://github.com/WICG/IntersectionObserver/pull/205
+    // https://github.com/w3c/IntersectionObserver/pull/205
   }
   if (!rect) return getEmptyRect();
@@ -684,7 +685,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.

package/package.json CHANGED Viewed

@@ -1,11 +1,11 @@
 {
   "name": "intersection-observer",
-  "version": "0.4.1",
+  "version": "0.5.1",
   "description": "A polyfill for IntersectionObserver",
   "main": "intersection-observer",
   "repository": {
     "type": "git",
-    "url": "git@github.com:WICG/IntersectionObserver.git"
+    "url": "git@github.com:w3c/IntersectionObserver.git"
   },
   "keywords": [
     "Intersection",
@@ -16,8 +16,8 @@
     "email": "philip@philipwalton.com",
     "url": "http://philipwalton.com"
   },
-  "license": "Apache-2.0",
+  "license": "W3C-20150513",
   "bugs": {
-    "url": "https://github.com/WICG/IntersectionObserver/issues"
+    "url": "https://github.com/w3c/IntersectionObserver/issues"
   }
 }

package/slot.html ADDED Viewed

@@ -0,0 +1,93 @@
+<template id="slot-test">
+  <style>
+  </style>
+  <div>
+    <h3>Title</h3>
+    <aside>
+      <slot name="contents"></slot>
+    </aside>
+  </div>
+</template>
+<my-el>
+  <ul slot="contents">
+    <li>one</li>
+    <li>two</li>
+    <li>three</li>
+  </ul>
+  <ul slot="contents">
+    <li>four</li>
+    <li>five</li>
+    <li>six</li>
+  </ul>
+</my-el>
+<script>
+class MyEl extends HTMLElement {
+  constructor() {
+    super();
+    const shadowRoot = this.attachShadow({mode: 'open'});
+    shadowRoot.innerHTML = `
+      <style>
+      </style>
+      <div>
+        <h3>Title</h3>
+        <aside>
+          <slot name="contents"></slot>
+        </aside>
+      </div>
+    `;
+  }
+}
+self.customElements.define('my-el', MyEl);
+/**
+ * Checks to see if a parent element contains a child elemnt (including inside
+ * shadow DOM).
+ * @param {Node} parent The parent element.
+ * @param {Node} child The child element.
+ * @return {boolean} True if the parent node contains the child node.
+ */
+function containsDeep(parent, child) {
+  var node = child;
+  while (node) {
+    if (node == parent) return true;
+    node = getParentNode(node);
+  }
+  return false;
+}
+/**
+ * Gets the parent node of an element or its host element if the parent node
+ * is a shadow root.
+ * @param {Node} node The node whose parent to get.
+ * @return {Node|null} The parent node or null if no parent exists.
+ */
+function getParentNode(node) {
+  var parent = node.parentNode;
+  if (parent) {
+    if (parent.nodeType == 11 && parent.host) {
+      // If the parent is a shadow root, return the host element.
+      return parent.host;
+    }
+    if (parent.assignedSlot) {
+      // If the parent is assigned a slot, return the slot's parent.
+      return parent.assignedSlot.parentNode;
+    }
+  }
+  return parent;
+}
+</script>

package/.npmignore DELETED Viewed

@@ -1,3 +0,0 @@
-# Sauce Labs testing files
-easy-sauce-config.json
-sauce.sh