Skip to content

Commit 7fcb74e

Browse files
hmillersarahhmillersarah
committed
add comments and update ids for video jump links
1 parent bb762b3 commit 7fcb74e

3 files changed

Lines changed: 25 additions & 54 deletions

File tree

‎ims-videos.html‎

Lines changed: 5 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -101,27 +101,13 @@
101101
link="https://mediacenter.ibm.com/channel/IMS%2BEducational%2BVideos/122579632"
102102
></hero-section>
103103

104+
<!-- =========================== Jump links =========================== -->
104105
<jump-links
105106
links="All roles, IMS database, System programming, Application development"
106107
></jump-links>
107108

108-
<!-- =========================== Filter =========================== -->
109-
<!-- remember, the behaviour is that clicking pulls you to the anchors -->
110-
<!-- <div class="zs-section filter-sec" id="anchor-link-menu">
111-
<div class="pure-g">
112-
<div class="ibm-sitenav-menu-list" id="anchor-link-menu-items">
113-
<ul class="menu">
114-
<li><a href="#all">All roles</a></li>
115-
<li><a href="#imsdb">IMS database</a></li>
116-
<li><a href="#sysprog">System programming</a></li>
117-
<li><a href="#appdev">Application development</a></li>
118-
</ul>
119-
</div>
120-
</div>
121-
</div> -->
122-
123109
<!-- =========================== Videos - all roles =========================== -->
124-
<section id="all" class="white-bg pure-g card-section">
110+
<section id="all-roles" class="white-bg pure-g card-section">
125111
<div class="pure-u-1 card-section-header"><h3>All roles</h3></div>
126112
<!-- IMS Community Calls -->
127113
<video-card
@@ -181,7 +167,7 @@
181167
</section>
182168

183169
<!-- =========================== Videos - database =========================== -->
184-
<section id="imsdb" class="white-bg pure-g card-section">
170+
<section id="ims-database" class="white-bg pure-g card-section">
185171
<div class="pure-u-1 card-section-header"><h3>IMS database</h3></div>
186172
<!-- IMS MACB -->
187173
<video-card
@@ -264,7 +250,7 @@
264250
</section>
265251

266252
<!-- =========================== Videos - system programming =========================== -->
267-
<section id="sysprog" class="white-bg pure-g card-section">
253+
<section id="system-programming" class="white-bg pure-g card-section">
268254
<div class="pure-u-1 card-section-header"><h3>System programming</h3></div>
269255
<!-- IMS DBDGEN and PSBGEN for Beginners -->
270256
<video-card
@@ -344,7 +330,7 @@
344330
</section>
345331

346332
<!-- =========================== Videos - system programming =========================== -->
347-
<section id="appdev" class="white-bg pure-g card-section">
333+
<section id="application-development" class="white-bg pure-g card-section">
348334
<div class="pure-u-1 card-section-header"><h3>Application development</h3></div>
349335
<!-- IMS Java Demos -->
350336
<video-card

‎web-components/jump-links/jump-links.html‎

Lines changed: 0 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -1,36 +1,7 @@
11
<link href="web-components/jump-links/jump-links.css" rel="stylesheet">
22
<link rel="stylesheet" href="wp-includes/css/pure.css">
3-
<link rel="stylesheet" href="wp-includes/css/grids-responsive-min.css">
43

54
<div class="jump-links pure-g">
65
<ul class="list pure-u-1">
7-
<!-- <li>
8-
<img src="wp-content/icons/icon_jump-link.svg" alt="">
9-
<a href="#all">All roles</a>
10-
</li>
11-
<li>
12-
<img src="wp-content/icons/icon_jump-link.svg" alt="">
13-
<a href="#imsdb">IMS database</a>
14-
</li>
15-
<li>
16-
<img src="wp-content/icons/icon_jump-link.svg" alt="">
17-
<a href="#sysprog">System programming</a>
18-
</li>
19-
<li>
20-
<img src="wp-content/icons/icon_jump-link.svg" alt="">
21-
<a href="#appdev">Application development</a>
22-
</li>
23-
<li>
24-
<img src="wp-content/icons/icon_jump-link.svg" alt="">
25-
<a href="#live">Instructor-led</a>
26-
</li>
27-
<li>
28-
<img src="wp-content/icons/icon_jump-link.svg" alt="">
29-
<a href="#faq">FAQs</a>
30-
</li>
31-
<li>
32-
<img src="wp-content/icons/icon_jump-link.svg" alt="">
33-
<a href="#support">Support</a>
34-
</li> -->
356
</ul>
367
</div>

‎web-components/jump-links/jump-links.js‎

Lines changed: 20 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -10,18 +10,30 @@ fetch("web-components/jump-links/jump-links.html")
1010
*/
1111
function createComponent(html) {
1212

13+
/**
14+
* Create list item with jump link and add to list
15+
* @param {string} link - The jump link
16+
* @param {boolean} shadow - A boolean indicating whether to use the shadow DOM for the element
17+
* @returns {void}
18+
*/
1319
function createLink(link, shadow) {
14-
let newListItem = document.createElement('li');
15-
let newImage = document.createElement('img');
20+
const newListItem = document.createElement('li');
21+
22+
// Add jump link icon
23+
const newImage = document.createElement('img');
1624
newImage.src = "wp-content/icons/icon_jump-link.svg";
1725
newImage.alt = "jump link";
1826
newListItem.appendChild(newImage);
19-
let newLink = document.createElement('a');
27+
28+
// Add jump link
29+
const newLink = document.createElement('a');
2030
newLink.textContent = link;
21-
let linkSrc = "#" + (link.toLowerCase().replaceAll(' ', '-'));
31+
const linkSrc = "#" + (link.toLowerCase().replaceAll(' ', '-'));
2232
newLink.href = linkSrc;
2333
newListItem.appendChild(newLink);
24-
let list = shadow.querySelector('.list');
34+
35+
// Add new list item to list
36+
const list = shadow.querySelector('.list');
2537
list.appendChild(newListItem);
2638
}
2739

@@ -53,13 +65,15 @@ function createComponent(html) {
5365
const shadow = this.attachShadow({mode: 'open'});
5466
shadow.innerHTML = html;
5567

68+
// Create array from link list
5669
const linksArr = (this.links).split(', ');
70+
// Add link to jump link list
5771
linksArr.forEach(link => {
5872
createLink(link, shadow);
5973
});
6074
}
6175
}
6276

63-
// Define new CourseCard element
77+
// Define new JumpLink element
6478
customElements.define('jump-links', JumpLinks);
6579
}

0 commit comments

Comments
 (0)