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

intersection-observer 0.5.0 → 0.5.1

Files changed (8) hide show

package/README.md CHANGED Viewed

@@ -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.js CHANGED Viewed

@@ -33,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.
  */
@@ -62,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;
@@ -250,7 +252,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() {
@@ -552,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
@@ -683,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,6 +1,6 @@
 {
   "name": "intersection-observer",
-  "version": "0.5.0",
+  "version": "0.5.1",
   "description": "A polyfill for IntersectionObserver",
   "main": "intersection-observer",
   "repository": {

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>