Skip to content

Commit 8fb7949

Browse files
hmillersarahhmillersarah
committed
separate html from js file
1 parent 6c2dc0e commit 8fb7949

3 files changed

Lines changed: 89 additions & 83 deletions

File tree

‎ims-videos.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -77,7 +77,7 @@
7777
<script src="wp-includes/js/navbar.js"></script>
7878

7979
<!-- Web components -->
80-
<script src="web-components/video-card/video-card.js"></script>
80+
<script src="web-components/video-card/video-card.js" type="module"></script>
8181
</head>
8282

8383
<!-- PAGE CONTENT -->

‎web-components/video-card/video-card.html‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
<link href="web-components/video-card/video-card.css" rel="stylesheet">
2+
<div class="video-card">
3+
<div>
4+
<h2 class="video-name"></h2>
5+
<p class="video-desc"></p>
6+
<div class="inline-g">
7+
<p><b>Level: </b><span class="video-level"></span></p>
8+
<p><b>Time: </b><span class="video-time"></span></p>
9+
</div>
10+
</div>
11+
<div class="link-g">
12+
<a class="video-link" target="_blank" rel="noopener noreferrer"></a>
13+
<a class="video-link-2" target="_blank" rel="noopener noreferrer"></a>
14+
<a class="video-link-3" target="_blank" rel="noopener noreferrer"></a>
15+
</div>
16+
</div>

‎web-components/video-card/video-card.js‎

Lines changed: 72 additions & 82 deletions
Original file line numberDiff line numberDiff line change
@@ -1,97 +1,87 @@
1-
// HTML template
2-
const template = document.createElement('template');
3-
template.innerHTML =
4-
`
5-
<link rel='stylesheet' href="web-components/video-card/video-card.css">
6-
<div class="video-card">
7-
<div>
8-
<h2 class="video-name"></h2>
9-
<p class="video-desc"></p>
10-
<div class="inline-g">
11-
<p><b>Level: </b><span class="video-level"></span></p>
12-
<p><b>Time: </b><span class="video-time"></span></p>
13-
</div>
14-
</div>
15-
<div class="link-g">
16-
<a class="video-link" target="_blank" rel="noopener noreferrer"></a>
17-
<a class="video-link-2" target="_blank" rel="noopener noreferrer"></a>
18-
<a class="video-link-3" target="_blank" rel="noopener noreferrer"></a>
19-
</div>
20-
</div>
21-
`;
1+
// Fetch HTML template
2+
var html_template;
3+
fetch("web-components/video-card/video-card.html")
4+
.then(stream => stream.text())
5+
.then(text => createComponent(text))
226

23-
// Web component
24-
class VideoCard extends HTMLElement {
7+
// Create web component
8+
function createComponent(html) {
9+
// Web component
10+
class VideoCard extends HTMLElement {
2511

26-
// Creates element with default values
27-
constructor() {
28-
super();
29-
this.level = 'Varies';
30-
this.time = 'Varies';
31-
this.linktext = 'now';
32-
}
12+
// Creates element with default values
13+
constructor() {
14+
super();
15+
this.level = 'Varies';
16+
this.time = 'Varies';
17+
this.linktext = 'now';
18+
}
3319

34-
// Return array of properties to observe
35-
static get observedAttributes() {
36-
return ['name', 'desc', 'level', 'time', 'link', 'linktext', 'link2', 'linktext2', 'link3', 'linktext3'];
37-
}
20+
// Return array of properties to observe
21+
static get observedAttributes() {
22+
return ['name', 'desc', 'level', 'time', 'link', 'linktext', 'link2', 'linktext2', 'link3', 'linktext3'];
23+
}
3824

39-
// Called when an attribute is defined or changed
40-
attributeChangedCallback(property, oldValue, newValue) {
41-
if (oldValue === newValue) return;
42-
this[property] = newValue;
43-
}
44-
45-
// Invoked when element is added to document
46-
connectedCallback() {
47-
// Create shadow root for element
48-
const shadow = this.attachShadow({mode: 'closed'});
49-
shadow.append(
50-
// document.getElementById('video-card').content.cloneNode(true) // Use this line to test template in ims-videos.html
51-
template.content.cloneNode(true)
52-
);
25+
// Called when an attribute is defined or changed
26+
attributeChangedCallback(property, oldValue, newValue) {
27+
if (oldValue === newValue) return;
28+
this[property] = newValue;
29+
}
30+
31+
// Invoked when element is added to document
32+
connectedCallback() {
33+
// Create shadow root for element
34+
const shadow = this.attachShadow({mode: 'closed'});
35+
shadow.innerHTML = html;
36+
// shadow.append(
37+
// // document.getElementById('video-card').content.cloneNode(true) // Use this line to test template in ims-videos.html
38+
// template.content.cloneNode(true)
39+
// );
5340

54-
// Set video name
55-
const videoName = shadow.querySelector('.video-name');
56-
videoName.textContent = `${this.name}`;
41+
// Set video name
42+
const videoName = shadow.querySelector('.video-name');
43+
videoName.textContent = `${this.name}`;
5744

58-
// Set video desc
59-
const videoDesc = shadow.querySelector('.video-desc');
60-
videoDesc.textContent = `${this.desc}`;
45+
// Set video desc
46+
const videoDesc = shadow.querySelector('.video-desc');
47+
videoDesc.textContent = `${this.desc}`;
6148

62-
// Set video level
63-
const videoLevel = shadow.querySelector('.video-level');
64-
videoLevel.textContent = `${this.level}`;
49+
// Set video level
50+
const videoLevel = shadow.querySelector('.video-level');
51+
videoLevel.textContent = `${this.level}`;
6552

66-
// Set video time
67-
const videoTime = shadow.querySelector('.video-time');
68-
videoTime.textContent = `${this.time}`;
53+
// Set video time
54+
const videoTime = shadow.querySelector('.video-time');
55+
videoTime.textContent = `${this.time}`;
6956

70-
// Set video links
71-
const videoLink = shadow.querySelector('.video-link');
72-
const videoLink2 = shadow.querySelector('.video-link-2');
73-
const videoLink3 = shadow.querySelector('.video-link-3');
74-
const links = [
75-
[this.link, this.linktext, videoLink],
76-
[this.link2, this.linktext2, videoLink2],
77-
[this.link3, this.linktext3, videoLink3]
78-
]
57+
// Set video links
58+
const videoLink = shadow.querySelector('.video-link');
59+
const videoLink2 = shadow.querySelector('.video-link-2');
60+
const videoLink3 = shadow.querySelector('.video-link-3');
61+
const links = [
62+
[this.link, this.linktext, videoLink],
63+
[this.link2, this.linktext2, videoLink2],
64+
[this.link3, this.linktext3, videoLink3]
65+
]
7966

80-
links.forEach(link => {
81-
const url = link[0];
82-
const linkText = link[1];
83-
const linkObj = link[2];
67+
links.forEach(link => {
68+
const url = link[0];
69+
const linkText = link[1];
70+
const linkObj = link[2];
8471

85-
// Check if urls have been defined
86-
if (url != undefined) {
87-
linkObj.href = url;
88-
const altText = (linkText != 'now') ? `Watch ${this.name}, ${linkText}` : `Watch ${this.name}`; // Change link text if defined
89-
linkObj.setAttribute('alt', altText);
90-
linkObj.textContent = `Watch ${linkText} →`;
91-
}
92-
})
72+
// Check if urls have been defined
73+
if (url != undefined) {
74+
linkObj.href = url;
75+
const altText = (linkText != 'now') ? `Watch ${this.name}, ${linkText}` : `Watch ${this.name}`; // Change link text if defined
76+
linkObj.setAttribute('alt', altText);
77+
linkObj.textContent = `Watch ${linkText} →`;
78+
}
79+
})
80+
}
9381
}
82+
83+
customElements.define('video-card', VideoCard);
9484
}
9585

9686
// Register component
97-
customElements.define('video-card', VideoCard);
87+
// customElements.define('video-card', VideoCard);

0 commit comments

Comments
 (0)