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

intersection-observer 0.5.0 → 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 (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>