Skip to content

Commit a0e4f1f

Browse files
levonleelevonlee
committed
web components
1 parent d22df2a commit a0e4f1f

File tree

15 files changed

+1001
-0
lines changed

15 files changed

+1001
-0
lines changed

‎lynda-learning-web-components/CustomElements/customelem_finished.html‎

Lines changed: 128 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,128 @@
1+
<!doctype html>
2+
<html>
3+
4+
<head>
5+
<title>Custom Element Sample</title>
6+
<meta charset="utf-8">
7+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
8+
<link rel="stylesheet" href="../style.css">
9+
10+
<!-- include the polyfill for custom elements for browsers that don't support yet -->
11+
<script src="../polyfills/webcomponents-lite.js"></script>
12+
13+
<script>
14+
class MessageBanner extends HTMLElement {
15+
constructor() {
16+
super(); // always call super() first
17+
18+
// add a click event to hide the message
19+
this.addEventListener("click", e => {
20+
this.visible = false;
21+
console.log("message-banner closed");
22+
});
23+
}
24+
25+
/** Used to indicate which attributes will trigger the
26+
attributeChangedCallback function **/
27+
static get observedAttributes() {
28+
return ["visible"];
29+
}
30+
31+
/** Custom Component Reactions **/
32+
connectedCallback() {
33+
console.log("message-banner connected to page");
34+
this.visible = this.hasAttribute('visible');
35+
}
36+
37+
disconnectedCallback() {
38+
console.log("message-banner disconnected from page");
39+
}
40+
41+
adoptedCallback() {
42+
console.log("message-banner adopted in page");
43+
}
44+
45+
attributeChangedCallback(name, oldValue, newValue) {
46+
console.log("message-banner attr: " + name + " changed from '"
47+
+ oldValue + "' to '" + newValue + "'");
48+
}
49+
50+
/** Expose the visible attribute as getter and setter **/
51+
get visible() {
52+
return this.hasAttribute('visible');
53+
}
54+
55+
set visible(val) {
56+
if (val) {
57+
this.setAttribute('visible', '');
58+
console.log("message-banner visible");
59+
}
60+
else {
61+
this.removeAttribute('visible');
62+
console.log("message-banner hidden");
63+
}
64+
}
65+
}
66+
67+
customElements.define("message-banner", MessageBanner);
68+
69+
// Programmatically show and hide the banner by setting a property
70+
window.addEventListener("load", e => {
71+
document.getElementById("togglebtn").addEventListener("click", evt => {
72+
var banner = document.getElementById("banner");
73+
banner.visible = !banner.visible;
74+
});
75+
document.getElementById("createbtn").addEventListener("click", evt => {
76+
var newbanner = document.createElement("message-banner");
77+
newbanner.innerHTML="<div>Created from script, click on it to hide</div>";
78+
newbanner.visible = true;
79+
document.body.insertBefore(newbanner, document.body.firstChild);
80+
});
81+
});
82+
</script>
83+
<style>
84+
message-banner {
85+
background: cornsilk;
86+
border: 1pt solid goldenrod;
87+
margin: 0;
88+
max-height: 400px;
89+
padding: 10pt;
90+
position: relative;
91+
display: none;
92+
top: 0;
93+
right: 0;
94+
}
95+
message-banner[visible] {
96+
display: block;
97+
}
98+
</style>
99+
</head>
100+
101+
<body>
102+
<h1>Defining Custom Elements</h1>
103+
<div id="content">
104+
<p>
105+
Custom Elements let you add new tags to the browser that can be used
106+
just as if they were native to the browser. They can be instantiated
107+
via JavaScript, have their own JavaScript API, and can extend the functionality of existing tags.
108+
</p>
109+
<p>This example shows how to create a simple message banner that hides itself
110+
when clicked.</p>
111+
<p>It is implemented as a custom <code>&lt;message-banner&gt;</code> element.</p>
112+
113+
<!-- new content will be placed into this div -->
114+
<div id="example">
115+
<message-banner id="banner" visible>
116+
<div class="message">This is a message banner element. Click on me!</div>
117+
</message-banner>
118+
<p>
119+
Here is some other text content in the document.
120+
</p>
121+
</div>
122+
<p>It can also be manipulated using JavaScript. Click the button to toggle the banner.</p>
123+
<button id="togglebtn">Toggle Banner</button>
124+
<button id="createbtn">Create Banner</button>
125+
</div>
126+
</body>
127+
128+
</html>

‎lynda-learning-web-components/HTMLImports/component.html‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
<!-- Define the template that will hold content. The browser will parse this
2+
but will not try to use the content in any way -->
3+
<template id="tmpl">
4+
<p>This is a new paragraph item: <span></span></p>
5+
</template>
6+
<script>
7+
// In this case, our component will automatically add the template
8+
// to the document that is importing this file so it can be used.
9+
10+
// ownerDocument references this component document being imported
11+
var thisImportDoc = document.currentScript.ownerDocument;
12+
13+
// Get the template from this file, clone it,
14+
// and append it to the importing document.
15+
var tmplNode = thisImportDoc.querySelector('#tmpl');
16+
17+
// the "document" keyword here references the "main" document
18+
// (the one that's importing this HTML file)
19+
document.body.appendChild(tmplNode.cloneNode(true));
20+
</script>

‎lynda-learning-web-components/HTMLImports/import1_finished.html‎

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
<!doctype html>
2+
<html>
3+
4+
<head>
5+
<title>HTML Imports Sample</title>
6+
<meta charset="utf-8">
7+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
8+
<link rel="stylesheet" href="../style.css">
9+
10+
<!-- include the polyfill for web components. This must precede imports -->
11+
<script src="../polyfills/webcomponents-lite.js"></script>
12+
13+
<!-- import our template from an external file -->
14+
<link rel="import" href="template.html" id="tmplFile">
15+
</head>
16+
17+
<body>
18+
<h1>Using HTML Imports</h1>
19+
<div id="content">
20+
<p>
21+
HTML Imports provide a way to include web content into other HTML pages. This in turn
22+
leads to greater modularity and promotes re-use of components. Content can be HTML, CSS,
23+
or JavaScript, or a mix of all 3 - in other words, anything you would normally put into
24+
an HTML file.
25+
</p>
26+
<p>
27+
In this example, the template used to create content is imported from a separate document.
28+
</p>
29+
<!-- new content will be placed into this div -->
30+
<div id="example">
31+
</div>
32+
</div>
33+
<button type="button" id="btnStamp">Stamp New Item</button>
34+
35+
<script>
36+
var count = 1;
37+
38+
window.addEventListener("DOMContentLoaded", function(e) {
39+
// add a click listener to the button
40+
document.getElementById("btnStamp").addEventListener("click", function(e) {
41+
var tmplLink = document.querySelector("#tmplFile");
42+
// The import property gives us access to the import's content
43+
var tmplFile = tmplLink.import;
44+
45+
// get the template and modify the content
46+
var tmpl = tmplFile.querySelector("#tmpl");
47+
tmpl.content.querySelector("span").textContent = count++;
48+
49+
// make a deep copy of the template content and import it
50+
// into the current document
51+
var newNode = document.importNode(tmpl.content, true);
52+
document.getElementById("example").appendChild(newNode);
53+
})
54+
});
55+
</script>
56+
</body>
57+
58+
</html>

‎lynda-learning-web-components/HTMLImports/import1_start.html‎

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
<!doctype html>
2+
<html>
3+
4+
<head>
5+
<title>HTML Imports Sample</title>
6+
<meta charset="utf-8">
7+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
8+
<link rel="stylesheet" href="../style.css">
9+
10+
<!-- include the polyfill for web components. This must precede imports -->
11+
<script src="../polyfills/webcomponents-lite.js"></script>
12+
13+
<!-- TODO: import our template from an external file -->
14+
15+
</head>
16+
17+
<body>
18+
<h1>Using HTML Imports</h1>
19+
<div id="content">
20+
<p>
21+
HTML Imports provide a way to include web content into other HTML pages. This in turn
22+
leads to greater modularity and promotes re-use of components. Content can be HTML, CSS,
23+
or JavaScript, or a mix of all 3 - in other words, anything you would normally put into
24+
an HTML file.
25+
</p>
26+
<p>
27+
In this example, the template used to create content is imported from a separate document.
28+
</p>
29+
<!-- new content will be placed into this div -->
30+
<div id="example">
31+
</div>
32+
</div>
33+
<button type="button" id="btnStamp">Stamp New Item</button>
34+
35+
<script>
36+
var count = 1;
37+
38+
window.addEventListener("DOMContentLoaded", function(e) {
39+
// add a click listener to the button
40+
document.getElementById("btnStamp").addEventListener("click", function(e) {
41+
// TODO: Get the link tag that imports the template
42+
43+
// TODO: The import property gives us access to the import's content
44+
45+
// TODO: get the template and modify the content
46+
47+
// TODO: make a deep copy of the template content and import it
48+
// into the current document
49+
50+
})
51+
});
52+
</script>
53+
</body>
54+
55+
</html>

‎lynda-learning-web-components/HTMLImports/import2_finished.html‎

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
<!doctype html>
2+
<html>
3+
4+
<head>
5+
<title>Reusable Templates Sample</title>
6+
<meta charset="utf-8">
7+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
8+
<link rel="stylesheet" href="../style.css">
9+
10+
<!-- include the polyfill for web components. This must precede imports -->
11+
<script src="../polyfills/webcomponents-lite.js"></script>
12+
13+
<!-- import our template from an external file -->
14+
<link rel="import" href="component.html">
15+
</head>
16+
17+
<body>
18+
<h1>Reusable Templates with HTML Imports</h1>
19+
<div id="content">
20+
<p>
21+
HTML Imports provide a way to include web content into other HTML pages. This in turn
22+
leads to greater modularity and promotes re-use of components. Content can be HTML, CSS,
23+
or JavaScript, or a mix of all 3 - in other words, anything you would normally put into
24+
an HTML file.
25+
</p>
26+
<p>
27+
In this example, the template used to create content is imported from a separate document.
28+
</p>
29+
<!-- new content will be placed into this div -->
30+
<div id="example">
31+
</div>
32+
</div>
33+
<button type="button" id="btnStamp">Stamp New Item</button>
34+
35+
<script>
36+
var count = 1;
37+
38+
window.addEventListener("DOMContentLoaded", function(e) {
39+
// add a click listener to the button
40+
document.getElementById("btnStamp").addEventListener("click", function(e) {
41+
// get the template and modify the content
42+
var tmpl = document.querySelector("#tmpl");
43+
tmpl.content.querySelector("span").textContent = count++;
44+
45+
// make a deep copy of the template content and import it
46+
// into the current document
47+
var newNode = document.importNode(tmpl.content, true);
48+
document.getElementById("example").appendChild(newNode);
49+
})
50+
});
51+
</script>
52+
</body>
53+
54+
</html>

‎lynda-learning-web-components/HTMLImports/import2_start.html‎

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
<!doctype html>
2+
<html>
3+
4+
<head>
5+
<title>Reusable Templates Sample</title>
6+
<meta charset="utf-8">
7+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
8+
<link rel="stylesheet" href="../style.css">
9+
10+
<!-- include the polyfill for web components. This must precede imports -->
11+
<script src="../polyfills/webcomponents-lite.js"></script>
12+
13+
<!-- import our template from an external file -->
14+
<link rel="import" href="component.html">
15+
</head>
16+
17+
<body>
18+
<h1>Reusable Templates with HTML Imports</h1>
19+
<div id="content">
20+
<p>
21+
HTML Imports provide a way to include web content into other HTML pages. This in turn
22+
leads to greater modularity and promotes re-use of components. Content can be HTML, CSS,
23+
or JavaScript, or a mix of all 3 - in other words, anything you would normally put into
24+
an HTML file.
25+
</p>
26+
<p>
27+
In this example, the template used to create content is imported from a separate document.
28+
</p>
29+
<!-- new content will be placed into this div -->
30+
<div id="example">
31+
</div>
32+
</div>
33+
<button type="button" id="btnStamp">Stamp New Item</button>
34+
35+
<script>
36+
var count = 1;
37+
38+
window.addEventListener("DOMContentLoaded", function(e) {
39+
// add a click listener to the button
40+
document.getElementById("btnStamp").addEventListener("click", function(e) {
41+
// TODO: get the template and modify the content
42+
43+
// TODO: make a deep copy of the template content and import it
44+
// into the current document
45+
46+
})
47+
});
48+
</script>
49+
</body>
50+
51+
</html>

‎lynda-learning-web-components/HTMLImports/template.html‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
<!-- Define the template that will hold content. The browser will parse this
2+
but will not try to use the content in any way -->
3+
<template id="tmpl">
4+
<p>This is a new paragraph item: <span></span></p>
5+
</template>

0 commit comments

Comments
 (0)