intersection-observer 0.10.0 → 0.12.2

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 (4) hide show
  1. package/README.md +8 -6
  2. package/intersection-observer-test.js +906 -103
  3. package/intersection-observer.js +64 -31
  4. package/package.json +8 -8
package/intersection-observer.js CHANGED
@@ -33,12 +33,32 @@ if ('IntersectionObserver' in window &&
33
33
  return;
34
34
  }
35
35
 
36
-
37
36
  /**
38
- * A local reference to the document.
37
+ * Returns the embedding frame element, if any.
38
+ * @param {!Document} doc
39
+ * @return {!Element}
39
40
  */
40
- var document = window.document;
41
+ function getFrameElement(doc) {
42
+ try {
43
+ return doc.defaultView && doc.defaultView.frameElement || null;
44
+ } catch (e) {
45
+ // Ignore the error.
46
+ return null;
47
+ }
48
+ }
41
49
 
50
+ /**
51
+ * A local reference to the root document.
52
+ */
53
+ var document = (function(startDoc) {
54
+ var doc = startDoc;
55
+ var frame = getFrameElement(doc);
56
+ while (frame) {
57
+ doc = frame.ownerDocument;
58
+ frame = getFrameElement(doc);
59
+ }
60
+ return doc;
61
+ })(window.document);
42
62
 
43
63
  /**
44
64
  * An IntersectionObserver registry. This registry exists to hold a strong
@@ -111,8 +131,12 @@ function IntersectionObserver(callback, opt_options) {
111
131
  throw new Error('callback must be a function');
112
132
  }
113
133
 
114
- if (options.root && options.root.nodeType != 1) {
115
- throw new Error('root must be an Element');
134
+ if (
135
+ options.root &&
136
+ options.root.nodeType != 1 &&
137
+ options.root.nodeType != 9
138
+ ) {
139
+ throw new Error('root must be a Document or Element');
116
140
  }
117
141
 
118
142
  // Binds and throttles `this._checkForIntersections`.
@@ -375,7 +399,9 @@ IntersectionObserver.prototype._monitorIntersections = function(doc) {
375
399
  });
376
400
 
377
401
  // Also monitor the parent.
378
- if (doc != (this.root && this.root.ownerDocument || document)) {
402
+ var rootDoc =
403
+ (this.root && (this.root.ownerDocument || this.root)) || document;
404
+ if (doc != rootDoc) {
379
405
  var frame = getFrameElement(doc);
380
406
  if (frame) {
381
407
  this._monitorIntersections(frame.ownerDocument);
@@ -395,7 +421,8 @@ IntersectionObserver.prototype._unmonitorIntersections = function(doc) {
395
421
  return;
396
422
  }
397
423
 
398
- var rootDoc = (this.root && this.root.ownerDocument || document);
424
+ var rootDoc =
425
+ (this.root && (this.root.ownerDocument || this.root)) || document;
399
426
 
400
427
  // Check if any dependent targets are still remaining.
401
428
  var hasDependentTargets =
@@ -473,11 +500,18 @@ IntersectionObserver.prototype._checkForIntersections = function() {
473
500
  var intersectionRect = rootIsInDom && rootContainsTarget &&
474
501
  this._computeTargetAndRootIntersection(target, targetRect, rootRect);
475
502
 
503
+ var rootBounds = null;
504
+ if (!this._rootContainsTarget(target)) {
505
+ rootBounds = getEmptyRect();
506
+ } else if (!crossOriginUpdater || this.root) {
507
+ rootBounds = rootRect;
508
+ }
509
+
476
510
  var newEntry = item.entry = new IntersectionObserverEntry({
477
511
  time: now(),
478
512
  target: target,
479
513
  boundingClientRect: targetRect,
480
- rootBounds: crossOriginUpdater && !this.root ? null : rootRect,
514
+ rootBounds: rootBounds,
481
515
  intersectionRect: intersectionRect
482
516
  });
483
517
 
@@ -598,12 +632,13 @@ IntersectionObserver.prototype._computeTargetAndRootIntersection =
598
632
  */
599
633
  IntersectionObserver.prototype._getRootRect = function() {
600
634
  var rootRect;
601
- if (this.root) {
635
+ if (this.root && !isDoc(this.root)) {
602
636
  rootRect = getBoundingClientRect(this.root);
603
637
  } else {
604
638
  // Use <html>/<body> instead of window since scroll bars affect size.
605
- var html = document.documentElement;
606
- var body = document.body;
639
+ var doc = isDoc(this.root) ? this.root : document;
640
+ var html = doc.documentElement;
641
+ var body = doc.body;
607
642
  rootRect = {
608
643
  top: 0,
609
644
  left: 0,
@@ -694,8 +729,12 @@ IntersectionObserver.prototype._rootIsInDom = function() {
694
729
  * @private
695
730
  */
696
731
  IntersectionObserver.prototype._rootContainsTarget = function(target) {
697
- return containsDeep(this.root || document, target) &&
698
- (!this.root || this.root.ownerDocument == target.ownerDocument);
732
+ var rootDoc =
733
+ (this.root && (this.root.ownerDocument || this.root)) || document;
734
+ return (
735
+ containsDeep(rootDoc, target) &&
736
+ (!this.root || rootDoc == target.ownerDocument)
737
+ );
699
738
  };
700
739
 
701
740
 
@@ -782,8 +821,8 @@ function removeEvent(node, event, fn, opt_useCapture) {
782
821
  if (typeof node.removeEventListener == 'function') {
783
822
  node.removeEventListener(event, fn, opt_useCapture || false);
784
823
  }
785
- else if (typeof node.detatchEvent == 'function') {
786
- node.detatchEvent('on' + event, fn);
824
+ else if (typeof node.detachEvent == 'function') {
825
+ node.detachEvent('on' + event, fn);
787
826
  }
788
827
  }
789
828
 
@@ -945,32 +984,26 @@ function getParentNode(node) {
945
984
  return getFrameElement(node);
946
985
  }
947
986
 
987
+ // If the parent has element that is assigned through shadow root slot
988
+ if (parent && parent.assignedSlot) {
989
+ parent = parent.assignedSlot.parentNode
990
+ }
991
+
948
992
  if (parent && parent.nodeType == 11 && parent.host) {
949
993
  // If the parent is a shadow root, return the host element.
950
994
  return parent.host;
951
995
  }
952
996
 
953
- if (parent && parent.assignedSlot) {
954
- // If the parent is distributed in a <slot>, return the parent of a slot.
955
- return parent.assignedSlot.parentNode;
956
- }
957
-
958
997
  return parent;
959
998
  }
960
999
 
961
-
962
1000
  /**
963
- * Returns the embedding frame element, if any.
964
- * @param {!Document} doc
965
- * @return {!Element}
1001
+ * Returns true if `node` is a Document.
1002
+ * @param {!Node} node
1003
+ * @returns {boolean}
966
1004
  */
967
- function getFrameElement(doc) {
968
- try {
969
- return doc.defaultView && doc.defaultView.frameElement || null;
970
- } catch (e) {
971
- // Ignore the error.
972
- return null;
973
- }
1005
+ function isDoc(node) {
1006
+ return node && node.nodeType === 9;
974
1007
  }
975
1008
 
976
1009
 
package/package.json CHANGED
@@ -1,23 +1,23 @@
1
1
  {
2
2
  "name": "intersection-observer",
3
- "version": "0.10.0",
3
+ "version": "0.12.2",
4
4
  "description": "A polyfill for IntersectionObserver",
5
- "main": "intersection-observer",
6
- "repository": {
7
- "type": "git",
8
- "url": "git@github.com:w3c/IntersectionObserver.git"
9
- },
10
5
  "keywords": [
11
6
  "Intersection",
12
7
  "Observer"
13
8
  ],
9
+ "main": "intersection-observer.js",
14
10
  "author": {
15
11
  "name": "Philip Walton",
16
12
  "email": "philip@philipwalton.com",
17
13
  "url": "http://philipwalton.com"
18
14
  },
19
- "license": "W3C-20150513",
15
+ "license": "Apache-2.0",
16
+ "repository": {
17
+ "type": "git",
18
+ "url": "https://github.com/GoogleChromeLabs/intersection-observer.git"
19
+ },
20
20
  "bugs": {
21
- "url": "https://github.com/w3c/IntersectionObserver/issues"
21
+ "url": "https://github.com/GoogleChromeLabs/intersection-observer/issues"
22
22
  }
23
23
  }