Skip to content

Commit 6f54278

Browse files
haydenmcphaydenmcp
committed
initialized element
0 parents  commit 6f54278

File tree

8 files changed

+211
-0
lines changed

8 files changed

+211
-0
lines changed

‎README.md‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
# \<deep-intersection-observer\>
2+
3+
Polymer element providing import of intersection observer polyfill.
4+
5+
## Install the Polymer-CLI
6+
7+
First, make sure you have the [Polymer CLI](https://www.npmjs.com/package/polymer-cli) installed. Then run `polymer serve` to serve your element locally.
8+
9+
## Viewing Your Element
10+
11+
```
12+
$ polymer serve
13+
```
14+
15+
## Running Tests
16+
17+
```
18+
$ polymer test
19+
```
20+
21+
Your application is already set up to be tested via [web-component-tester](https://github.com/Polymer/web-component-tester). Run `polymer test` to run your application's test suite locally.

‎bower.json‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
{
2+
"name": "deep-intersection-observer",
3+
"description": "Polymer element providing import of intersection observer polyfill.",
4+
"main": "deep-intersection-observer.html",
5+
"dependencies": {
6+
"polymer": "Polymer/polymer#^1.0 || ^2.0"
7+
},
8+
"devDependencies": {
9+
"iron-demo-helpers": "PolymerElements/iron-demo-helpers#^2.0.0",
10+
"web-component-tester": "Polymer/web-component-tester#^6.0.0",
11+
"webcomponentsjs": "webcomponents/webcomponentsjs#^1.0.0"
12+
},
13+
"resolutions": {
14+
"polymer": "^2.0.0"
15+
},
16+
"variants": {
17+
"1.x": {
18+
"dependencies": {
19+
"polymer": "Polymer/polymer#^1.9"
20+
},
21+
"devDependencies": {
22+
"iron-demo-helpers": "PolymerElements/iron-demo-helpers#^1.0.0",
23+
"web-component-tester": "Polymer/web-component-tester#^4.0.0",
24+
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
25+
},
26+
"resolutions": {
27+
"webcomponentsjs": "^0.7"
28+
}
29+
}
30+
}
31+
}

‎deep-intersection-observer.html‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
<link rel="import" href="../polymer/polymer-element.html">
2+
3+
<dom-module id="deep-intersection-observer">
4+
<template>
5+
<style>
6+
:host {
7+
display: block;
8+
}
9+
</style>
10+
<h2>Hello [[prop1]]!</h2>
11+
</template>
12+
13+
<script>
14+
/**
15+
* `deep-intersection-observer`
16+
* Polymer element providing import of intersection observer polyfill.
17+
*
18+
* @customElement
19+
* @polymer
20+
* @demo demo/index.html
21+
*/
22+
class DeepIntersectionObserver extends Polymer.Element {
23+
static get is() { return 'deep-intersection-observer'; }
24+
static get properties() {
25+
return {
26+
prop1: {
27+
type: String,
28+
value: 'deep-intersection-observer'
29+
}
30+
};
31+
}
32+
}
33+
34+
window.customElements.define(DeepIntersectionObserver.is, DeepIntersectionObserver);
35+
</script>
36+
</dom-module>

‎demo/index.html‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes">
6+
7+
<title>deep-intersection-observer demo</title>
8+
9+
<script src="../../webcomponentsjs/webcomponents-lite.js"></script>
10+
11+
<link rel="import" href="../../iron-demo-helpers/demo-pages-shared-styles.html">
12+
<link rel="import" href="../../iron-demo-helpers/demo-snippet.html">
13+
<link rel="import" href="../deep-intersection-observer.html">
14+
15+
<custom-style>
16+
<style is="custom-style" include="demo-pages-shared-styles">
17+
</style>
18+
</custom-style>
19+
</head>
20+
<body>
21+
<div class="vertical-section-container centered">
22+
<h3>Basic deep-intersection-observer demo</h3>
23+
<demo-snippet>
24+
<template>
25+
<deep-intersection-observer></deep-intersection-observer>
26+
</template>
27+
</demo-snippet>
28+
</div>
29+
</body>
30+
</html>

‎index.html‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
<!doctype html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<meta http-equiv="refresh" content="0;url=demo/" />
6+
<title>deep-intersection-observer</title>
7+
</head>
8+
<body>
9+
<!--
10+
ELEMENT API DOCUMENTATION SUPPORT COMING SOON
11+
Visit demo/index.html to see live examples of your element running.
12+
This page will automatically redirect you there when run in the browser
13+
with `polymer serve`.
14+
-->
15+
</body>
16+
</html>

‎polymer.json‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
{
2+
"lint": {
3+
"rules": [
4+
"polymer-2"
5+
]
6+
}
7+
}

‎test/deep-intersection-observer_test.html‎

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes">
6+
7+
<title>deep-intersection-observer test</title>
8+
9+
<script src="../../webcomponentsjs/webcomponents-lite.js"></script>
10+
<script src="../../web-component-tester/browser.js"></script>
11+
12+
<link rel="import" href="../deep-intersection-observer.html">
13+
</head>
14+
<body>
15+
16+
<test-fixture id="BasicTestFixture">
17+
<template>
18+
<deep-intersection-observer></deep-intersection-observer>
19+
</template>
20+
</test-fixture>
21+
22+
<test-fixture id="ChangedPropertyTestFixture">
23+
<template>
24+
<deep-intersection-observer prop1="new-prop1"></deep-intersection-observer>
25+
</template>
26+
</test-fixture>
27+
28+
<script>
29+
suite('deep-intersection-observer', () => {
30+
31+
test('instantiating the element with default properties works', () => {
32+
const element = fixture('BasicTestFixture');
33+
assert.equal(element.prop1, 'deep-intersection-observer');
34+
const elementShadowRoot = element.shadowRoot;
35+
const elementHeader = elementShadowRoot.querySelector('h2');
36+
assert.equal(elementHeader.innerHTML, 'Hello deep-intersection-observer!');
37+
});
38+
39+
test('setting a property on the element works', () => {
40+
// Create a test fixture
41+
const element = fixture('ChangedPropertyTestFixture');
42+
assert.equal(element.prop1, 'new-prop1');
43+
const elementShadowRoot = element.shadowRoot;
44+
const elementHeader = elementShadowRoot.querySelector('h2');
45+
assert.equal(elementHeader.innerHTML, 'Hello new-prop1!');
46+
});
47+
48+
});
49+
</script>
50+
51+
</body>
52+
</html>

‎test/index.html‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
<!doctype html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
6+
7+
<script src="../../webcomponentsjs/webcomponents-lite.js"></script>
8+
<script src="../../web-component-tester/browser.js"></script>
9+
</head>
10+
<body>
11+
<script>
12+
// Load and run all tests (.html, .js):
13+
WCT.loadSuites([
14+
'deep-intersection-observer_test.html'
15+
]);
16+
</script>
17+
18+
</body></html>

0 commit comments

Comments
 (0)