Skip to content

Commit a65e668

Browse files
hmillersarahhmillersarah
authored
Merge pull request #38 from imsdev/web-component-cleanup
Web component cleanup
2 parents 58f14ff + 729d9c9 commit a65e668

2 files changed

Lines changed: 108 additions & 49 deletions

File tree

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

Lines changed: 48 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -3,34 +3,75 @@ fetch("web-components/course-card/course-card.html")
33
.then(stream => stream.text())
44
.then(text => createComponent(text))
55

6-
// Create web component
6+
/**
7+
* Creates a web component using a given HTML template.
8+
* @param {string} html - The HTML template.
9+
* @returns {void}
10+
*/
711
function createComponent(html) {
812

13+
/**
14+
* Sets the content of an element based on a CSS selector.
15+
* @param {string} cssSelector - The CSS selector of the element to set the content for.
16+
* @param {string} content - The content to set for the element.
17+
* @param {boolean} shadow - A boolean indicating whether to use the shadow DOM for the element.
18+
* @returns {void}
19+
*/
920
function setContent(cssSelector, content, shadow) {
1021
const selector = shadow.querySelector(cssSelector);
1122
selector.textContent = content;
1223
}
1324

25+
/**
26+
* Sets the link of an element based on a CSS selector.
27+
* @param {string} cssSelector - The CSS selector of the element to set the link for.
28+
* @param {string} url - The link url.
29+
* @param {string} name - The name of the element containing the link.
30+
* @param {boolean} shadow - A boolean indicating whether to use the shadow DOM for the element.
31+
* @returns {void}
32+
*/
1433
function setLink(cssSelector, url, name, shadow) {
1534
const link = shadow.querySelector(cssSelector);
1635
link.href = url;
1736
link.setAttribute('aria-label', `Learn more about ${name}`);
1837
}
1938

20-
// Web component class
39+
/**
40+
* Sets the content of an element based on a CSS selector.
41+
* @param {string} cssSelector - The CSS selector of the element to set the content for.
42+
* @param {string} src - The image source to set for the element.
43+
* @param {string} name - The name of the element containing the image.
44+
* @param {boolean} shadow - A boolean indicating whether to use the shadow DOM for the element.
45+
* @returns {void}
46+
*/
47+
function setImage(cssSelector, src, name, shadow) {
48+
const courseImg = shadow.querySelector(cssSelector);
49+
courseImg.src = src;
50+
courseImg.setAttribute('alt', `${name} badge`);
51+
}
52+
53+
// Web component class representing a course card.
2154
class CourseCard extends HTMLElement {
2255

23-
// Creates element with default values
56+
// Creates an instance of CourseCard
2457
constructor() {
2558
super();
2659
}
2760

28-
// Return array of properties to observe
61+
/**
62+
* Returns an array of properties to observe.
63+
* @returns {Array} An array of property names.
64+
*/
2965
static get observedAttributes() {
3066
return ['name', 'desc', 'imgsrc', 'level', 'cost', 'badge', 'time', 'link', 'livelevel', 'livecost', 'livebadge', 'livetime', 'livelink'];
3167
}
3268

33-
// Called when an attribute is defined or changed
69+
/**
70+
* Called when an attribute is defined or changed.
71+
* @param {string} property - The name of the attribute.
72+
* @param {string} oldValue - The old value of the attribute.
73+
* @param {string} newValue - The new value of the attribute.
74+
*/
3475
attributeChangedCallback(property, oldValue, newValue) {
3576
if (oldValue === newValue) return;
3677
this[property] = newValue;
@@ -43,10 +84,7 @@ function createComponent(html) {
4384
shadow.innerHTML = html;
4485

4586
// Set course img
46-
const courseImg = shadow.querySelector('.course-img');
47-
courseImg.src = this.imgsrc;
48-
courseImg.setAttribute('alt', `${this.name} badge`);
49-
87+
setImage('.course-img', this.imgsrc, this.name, shadow);
5088
// Set course name
5189
setContent('.course-name', this.name, shadow);
5290
// Set course desc
@@ -82,5 +120,6 @@ function createComponent(html) {
82120
}
83121
}
84122

123+
// Define new CourseCard element
85124
customElements.define('course-card', CourseCard);
86125
}

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

Lines changed: 60 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -3,31 +3,77 @@ fetch("web-components/video-card/video-card.html")
33
.then(stream => stream.text())
44
.then(text => createComponent(text))
55

6-
// Create web component
6+
/**
7+
* Creates a web component using a given HTML template.
8+
* @param {string} html - The HTML template.
9+
* @returns {void}
10+
*/
711
function createComponent(html) {
8-
// Web component class
12+
13+
/**
14+
* Sets the content of an element based on a CSS selector.
15+
* @param {string} cssSelector - The CSS selector of the element to set the content for.
16+
* @param {string} content - The content to set for the element.
17+
* @param {boolean} shadow - A boolean indicating whether to use the shadow DOM for the element.
18+
* @returns {void}
19+
*/
20+
function setContent(cssSelector, content, shadow) {
21+
const selector = shadow.querySelector(cssSelector);
22+
selector.textContent = content;
23+
}
24+
25+
/**
26+
* Sets the link of an element based on a CSS selector.
27+
* @param {string} url - The link url.
28+
* @param {string} linkText - The link text.
29+
* @param {string} cssSelector - The CSS selector of the element to set the content for.
30+
* @param {string} name - The name of the element containing the link.
31+
* @param {boolean} shadow - A boolean indicating whether to use the shadow DOM for the element.
32+
* @returns {void}
33+
*/
34+
function setLink(url, linkText, cssSelector, name, shadow) {
35+
if (url != undefined) {
36+
const linkObj = shadow.querySelector(cssSelector);
37+
linkObj.href = url;
38+
const ariaText = (linkText != 'now') ? `Watch ${name}, ${linkText}` : `Watch ${name}`; // Change link text if defined
39+
linkObj.setAttribute('aria-label', ariaText);
40+
linkObj.textContent = `Watch ${linkText} →`;
41+
}
42+
}
43+
44+
// Web component class representing a video card.
945
class VideoCard extends HTMLElement {
1046

11-
// Creates element with default values
47+
// Creates an instance of VideoCard
1248
constructor() {
1349
super();
1450
this.level = 'Varies';
1551
this.time = 'Varies';
1652
this.linktext = 'now';
1753
}
1854

19-
// Return array of properties to observe
55+
/**
56+
* Returns an array of properties to observe.
57+
* @returns {Array} An array of property names.
58+
*/
2059
static get observedAttributes() {
2160
return ['name', 'desc', 'level', 'time', 'link', 'linktext', 'link2', 'linktext2', 'link3', 'linktext3'];
2261
}
2362

24-
// Called when an attribute is defined or changed
63+
/**
64+
* Called when an attribute is defined or changed.
65+
* @param {string} property - The name of the attribute.
66+
* @param {string} oldValue - The old value of the attribute.
67+
* @param {string} newValue - The new value of the attribute.
68+
*/
2569
attributeChangedCallback(property, oldValue, newValue) {
2670
if (oldValue === newValue) return;
2771
this[property] = newValue;
2872
}
2973

30-
// Invoked when element is added to document
74+
/**
75+
* Invoked when the element is added to the document.
76+
*/
3177
connectedCallback() {
3278
// Create shadow root for element
3379
const shadow = this.attachShadow({mode: 'closed'});
@@ -38,47 +84,21 @@ function createComponent(html) {
3884
// );
3985

4086
// Set video name
41-
const videoName = shadow.querySelector('.video-name');
42-
videoName.textContent = this.name;
43-
87+
setContent('.video-name', this.name, shadow);
4488
// Set video desc
45-
const videoDesc = shadow.querySelector('.video-desc');
46-
videoDesc.textContent = this.desc;
47-
89+
setContent('.video-desc', this.desc, shadow);
4890
// Set video level
49-
const videoLevel = shadow.querySelector('.video-level');
50-
videoLevel.textContent = this.level;
51-
91+
setContent('.video-level', this.level, shadow);
5292
// Set video time
53-
const videoTime = shadow.querySelector('.video-time');
54-
videoTime.textContent = this.time;
55-
93+
setContent('.video-time', this.time, shadow);
5694
// Set video links
57-
const videoLink = shadow.querySelector('.video-link');
58-
const videoLink2 = shadow.querySelector('.video-link-2');
59-
const videoLink3 = shadow.querySelector('.video-link-3');
60-
const links = [
61-
[this.link, this.linktext, videoLink],
62-
[this.link2, this.linktext2, videoLink2],
63-
[this.link3, this.linktext3, videoLink3]
64-
]
65-
66-
links.forEach(link => {
67-
const url = link[0];
68-
const linkText = link[1];
69-
const linkObj = link[2];
70-
71-
// Check if urls have been defined
72-
if (url != undefined) {
73-
linkObj.href = url;
74-
const ariaText = (linkText != 'now') ? `Watch ${this.name}, ${linkText}` : `Watch ${this.name}`; // Change link text if defined
75-
linkObj.setAttribute('aria-label', ariaText);
76-
linkObj.textContent = `Watch ${linkText} →`;
77-
}
78-
})
95+
setLink(this.link, this.linktext, '.video-link', this.name, shadow);
96+
setLink(this.link2, this.linktext2, '.video-link-2', this.name, shadow);
97+
setLink(this.link3, this.linktext3, '.video-link-3', this.name, shadow);
7998
}
8099
}
81100

101+
// Define new VideoCard element
82102
customElements.define('video-card', VideoCard);
83103
}
84104

0 commit comments

Comments
 (0)