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

intersection-observer 0.4.1 → 0.5.1

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