intersection-observer 0.5.1 → 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.
package/package.json CHANGED
@@ -1,23 +1,23 @@
1
1
  {
2
2
  "name": "intersection-observer",
3
- "version": "0.5.1",
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
  }
package/border-test.html DELETED
@@ -1,47 +0,0 @@
1
- <!DOCTYPE html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8">
5
- <script>
6
- // delete window.IntersectionObserver;
7
- </script>
8
- <script src="intersection-observer.js"></script>
9
- <script>
10
- function init() {
11
- function callback(entries, observer) {
12
- Array.prototype.forEach.call(entries, function(entry) {
13
- if (entry.intersectionRatio > 0) {
14
- entry.target.classList.add('visible');
15
- }
16
- });
17
- }
18
- var observer = new IntersectionObserver(callback, { root: document.getElementById('outer') });
19
- Array.prototype.forEach.call(document.querySelectorAll('#outer div'), function(el) {
20
- observer.observe(el);
21
- });
22
- }
23
- window.addEventListener('load', init);
24
- </script>
25
- <style>
26
- #outer {
27
- overflow-y: hidden;
28
- height: 2em;
29
- border: 10px solid #0000;
30
- }
31
- #outer div {
32
- height: 100%;
33
- }
34
- #el2 {
35
- background: red;
36
- }
37
-
38
- </style>
39
- </head>
40
- <body>
41
- <div id="outer">
42
- <div id="el1">Element 1</div>
43
- <div id="el2">Element 2</div>
44
- <div id="el3">Element 3</div>
45
- </div>
46
- </body>
47
- </html>
package/frame1.html DELETED
@@ -1,9 +0,0 @@
1
- <!DOCTYPE html>
2
- <html>
3
- <head>
4
- <title>Intersection Observer Frame Test</title>
5
- </head>
6
- <body>
7
- <p>Hello World (1)</p>
8
- </body>
9
- </html>
package/frame2.html DELETED
@@ -1,9 +0,0 @@
1
- <!DOCTYPE html>
2
- <html>
3
- <head>
4
- <title>Intersection Observer Frame Test</title>
5
- </head>
6
- <body>
7
- <p>Hello World (2)</p>
8
- </body>
9
- </html>
package/frames.html DELETED
@@ -1,33 +0,0 @@
1
- <!--
2
- Copyright 2016 Google Inc. All Rights Reserved.
3
-
4
- Licensed under the W3C SOFTWARE AND DOCUMENT NOTICE AND LICENSE.
5
-
6
- https://www.w3.org/Consortium/Legal/2015/copyright-software-and-document
7
- -->
8
- <!DOCTYPE html>
9
- <html lang="en">
10
- <head>
11
- <meta charset="utf-8">
12
- <meta http-equiv="X-UA-Compatible" content="IE=edge" />
13
- <title>IntersectionObserver Tests</title>
14
-
15
- <!-- Dependencies -->
16
- <!-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/mocha/2.5.3/mocha.min.css">
17
- <script src="https://cdnjs.cloudflare.com/ajax/libs/mocha/2.5.3/mocha.min.js"></script>
18
- <script src="https://cdnjs.cloudflare.com/ajax/libs/expect.js/0.2.0/expect.min.js"></script>
19
- <script src="https://cdnjs.cloudflare.com/ajax/libs/sinon.js/3.2.1/sinon.min.js"></script>
20
-
21
- -->
22
-
23
- <styles>
24
-
25
- </styles>
26
- </head>
27
- <body>
28
-
29
- <iframe src="frame1.html"></iframe>
30
- <iframe src="frame2.html"></iframe>
31
-
32
- </body>
33
- </html>
package/slot.html DELETED
@@ -1,93 +0,0 @@
1
- <template id="slot-test">
2
- <style>
3
-
4
- </style>
5
- <div>
6
- <h3>Title</h3>
7
- <aside>
8
- <slot name="contents"></slot>
9
- </aside>
10
- </div>
11
- </template>
12
-
13
-
14
- <my-el>
15
- <ul slot="contents">
16
- <li>one</li>
17
- <li>two</li>
18
- <li>three</li>
19
- </ul>
20
- <ul slot="contents">
21
- <li>four</li>
22
- <li>five</li>
23
- <li>six</li>
24
- </ul>
25
- </my-el>
26
-
27
-
28
- <script>
29
- class MyEl extends HTMLElement {
30
- constructor() {
31
- super();
32
-
33
- const shadowRoot = this.attachShadow({mode: 'open'});
34
- shadowRoot.innerHTML = `
35
- <style>
36
-
37
- </style>
38
- <div>
39
- <h3>Title</h3>
40
- <aside>
41
- <slot name="contents"></slot>
42
- </aside>
43
- </div>
44
- `;
45
- }
46
- }
47
-
48
- self.customElements.define('my-el', MyEl);
49
-
50
-
51
- /**
52
- * Checks to see if a parent element contains a child elemnt (including inside
53
- * shadow DOM).
54
- * @param {Node} parent The parent element.
55
- * @param {Node} child The child element.
56
- * @return {boolean} True if the parent node contains the child node.
57
- */
58
- function containsDeep(parent, child) {
59
- var node = child;
60
- while (node) {
61
- if (node == parent) return true;
62
-
63
- node = getParentNode(node);
64
- }
65
- return false;
66
- }
67
-
68
-
69
- /**
70
- * Gets the parent node of an element or its host element if the parent node
71
- * is a shadow root.
72
- * @param {Node} node The node whose parent to get.
73
- * @return {Node|null} The parent node or null if no parent exists.
74
- */
75
- function getParentNode(node) {
76
- var parent = node.parentNode;
77
-
78
- if (parent) {
79
- if (parent.nodeType == 11 && parent.host) {
80
- // If the parent is a shadow root, return the host element.
81
- return parent.host;
82
- }
83
-
84
- if (parent.assignedSlot) {
85
- // If the parent is assigned a slot, return the slot's parent.
86
- return parent.assignedSlot.parentNode;
87
- }
88
- }
89
- return parent;
90
- }
91
-
92
-
93
- </script>