Skip to content

Commit 7de40c9

Browse files
hmillersarahhmillersarah
committed
Merge branch 'master' of https://github.com/imsdev/imsdev.github.io into 34-live-courses-component
2 parents 0ffe35d + 99bceeb commit 7de40c9

3 files changed

Lines changed: 86 additions & 45 deletions

File tree

‎index.html‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -325,7 +325,8 @@ <h5>IMS support</h5>
325325
<div class="banner-container">
326326
<img src="wp-content/Icon_02_IMS GoldPage.svg" alt="Blog">
327327
<p class="banner-text-left"><a onfocus="closeNavMenu()" href="https://imsdev.github.io/ims-internship-2025.html" rel="noopener noreferrer">Register for the May 2025 Customer Internship!</a> </p>
328-
<p class="banner-text-right"><a href="https://early-access.ibm.com/software/support/trial/cst/welcomepage.wss?siteId=2047&tabId=5718&w=1" target="_blank" rel="noopener noreferrer">New! IBM IMS Z Trial →</a> </p>
328+
<p class="banner-text-right"><a href="https://forms.office.com/r/GVb90wUSXf" target="_blank" rel="noopener noreferrer">IMS modernization survey →</a> </p>
329+
<!-- <p class="banner-text-right"><a href="https://early-access.ibm.com/software/support/trial/cst/welcomepage.wss?siteId=2047&tabId=5718&w=1" target="_blank" rel="noopener noreferrer">New! IBM IMS Z Trial →</a> </p> -->
329330
</div>
330331
</span>
331332
</div>

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

Lines changed: 24 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,20 @@ 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;
@@ -26,18 +37,26 @@ function createComponent(html) {
2637
// Web component class
2738
class CourseCard extends HTMLElement {
2839

29-
// Creates element with default values
40+
// Creates an instance of CourseCard
3041
constructor() {
3142
super();
3243
this.selfpaced = 'true';
3344
}
3445

35-
// Return array of properties to observe
46+
/**
47+
* Returns an array of properties to observe.
48+
* @returns {Array} An array of property names.
49+
*/
3650
static get observedAttributes() {
3751
return ['name', 'session', 'desc', 'imgsrc', 'selfpaced', 'level', 'cost', 'badge', 'time', 'start', 'end', 'link'];
3852
}
3953

40-
// Called when an attribute is defined or changed
54+
/**
55+
* Called when an attribute is defined or changed.
56+
* @param {string} property - The name of the attribute.
57+
* @param {string} oldValue - The old value of the attribute.
58+
* @param {string} newValue - The new value of the attribute.
59+
*/
4160
attributeChangedCallback(property, oldValue, newValue) {
4261
if (oldValue === newValue) return;
4362
this[property] = newValue;
@@ -100,5 +119,6 @@ function createComponent(html) {
100119
}
101120
}
102121

122+
// Define new CourseCard element
103123
customElements.define('course-card', CourseCard);
104124
}

‎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)