Skip to content

Commit 89c20e1

Browse files
hmillersarahhmillersarah
committed
jump link web component setup
1 parent 5415442 commit 89c20e1

5 files changed

Lines changed: 162 additions & 3 deletions

File tree

‎ims-education.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -72,6 +72,7 @@
7272
<!-- Web components -->
7373
<script src="web-components/nav-header/nav-header.js" type="module"></script>
7474
<script src="web-components/hero-section/hero-section.js" type="module"></script>
75+
<script src="web-components/jump-links/jump-links.js" type="module"></script>
7576
<script src="web-components/course-card/course-card.js" type="module"></script>
7677
<script src="web-components/footer/footer.js" type="module"></script>
7778
</head>

‎ims-videos.html‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -79,6 +79,7 @@
7979
<!-- Web components -->
8080
<script src="web-components/nav-header/nav-header.js" type="module"></script>
8181
<script src="web-components/hero-section/hero-section.js" type="module"></script>
82+
<script src="web-components/jump-links/jump-links.js" type="module"></script>
8283
<script src="web-components/video-card/video-card.js" type="module"></script>
8384
<script src="web-components/footer/footer.js" type="module"></script>
8485
</head>
@@ -100,11 +101,12 @@
100101
link="https://mediacenter.ibm.com/channel/IMS%2BEducational%2BVideos/122579632"
101102
></hero-section>
102103

104+
<jump-links></jump-links>
105+
103106
<!-- =========================== Filter =========================== -->
104107
<!-- remember, the behaviour is that clicking pulls you to the anchors -->
105-
<div class="zs-section filter-sec" id="anchor-link-menu">
108+
<!-- <div class="zs-section filter-sec" id="anchor-link-menu">
106109
<div class="pure-g">
107-
<!-- Filter list -->
108110
<div class="ibm-sitenav-menu-list" id="anchor-link-menu-items">
109111
<ul class="menu">
110112
<li><a href="#all">All roles</a></li>
@@ -114,7 +116,7 @@
114116
</ul>
115117
</div>
116118
</div>
117-
</div>
119+
</div> -->
118120

119121
<!-- =========================== Videos - all roles =========================== -->
120122
<section id="all" class="white-bg pure-g card-section">

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

Lines changed: 84 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,84 @@
1+
a, ul, li {
2+
font-family: "ibm-plex-sans", "Helvetica Neue", Arial, sans-serif;
3+
color: black;
4+
font-size: var(--plex-18);
5+
}
6+
7+
a, ul, li {
8+
margin: 0;
9+
padding: 0;
10+
}
11+
12+
.jump-links {
13+
padding: 1em 5em 0em 5em;
14+
position: sticky;
15+
top: 3em;
16+
border-bottom: solid lightgray;
17+
background-color: white;
18+
color: black;
19+
}
20+
21+
.jump-links ul {
22+
display: flex;
23+
flex-flow: row wrap;
24+
column-gap: 3em;
25+
row-gap: 0;
26+
padding: 0;
27+
line-height: 3em;
28+
}
29+
30+
.jump-links li {
31+
font-weight: 500;
32+
font-size: 0.9em;
33+
padding: 0;
34+
border-bottom: white solid 4px;
35+
display: flex !important;
36+
flex-flow: row nowrap;
37+
align-items: center;
38+
gap: 0.5em;
39+
}
40+
41+
.jump-links li img {
42+
padding: 0;
43+
margin: 0;
44+
max-height: 2em;
45+
display: none;
46+
}
47+
48+
.jump-links li:hover {
49+
border-color: #0f62fe;
50+
}
51+
52+
.jump-links li a {
53+
text-decoration: none;
54+
}
55+
56+
@media screen and (max-width: 48em) {
57+
.jump-links {
58+
padding: 2em;
59+
position: relative;
60+
top: 0;
61+
}
62+
63+
.jump-links ul {
64+
display: grid;
65+
grid-template-columns: repeat(2, 1fr);
66+
gap: 1em;
67+
}
68+
69+
.jump-links li img {
70+
display: block;
71+
}
72+
73+
.jump-links li:hover {
74+
border-color: white;
75+
}
76+
}
77+
78+
@media screen and (max-width: 27em) {
79+
.jump-links ul {
80+
display: flex;
81+
flex-flow: column wrap;
82+
gap: 0.2em;
83+
}
84+
}

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

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
<link href="web-components/jump-links/jump-links.css" rel="stylesheet">
2+
<link rel="stylesheet" href="wp-includes/css/pure.css">
3+
<link rel="stylesheet" href="wp-includes/css/grids-responsive-min.css">
4+
5+
<div class="jump-links pure-g">
6+
<ul class="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>
35+
</ul>
36+
</div>

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

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
// Fetch HTML template
2+
fetch("web-components/jump-links/jump-links.html")
3+
.then(stream => stream.text())
4+
.then(text => createComponent(text))
5+
6+
/**
7+
* Creates a web component using a given HTML template.
8+
* @param {string} html - The HTML template.
9+
* @returns {void}
10+
*/
11+
function createComponent(html) {
12+
// Web component class
13+
class JumpLinks extends HTMLElement {
14+
15+
/**
16+
* Called when an attribute is defined or changed.
17+
* @param {string} property - The name of the attribute.
18+
* @param {string} oldValue - The old value of the attribute.
19+
* @param {string} newValue - The new value of the attribute.
20+
*/
21+
attributeChangedCallback(property, oldValue, newValue) {
22+
if (oldValue === newValue) return;
23+
this[property] = newValue;
24+
}
25+
26+
// Invoked when element is added to document
27+
connectedCallback() {
28+
// Create shadow root for element
29+
const shadow = this.attachShadow({mode: 'closed'});
30+
shadow.innerHTML = html;
31+
}
32+
}
33+
34+
// Define new CourseCard element
35+
customElements.define('jump-links', JumpLinks);
36+
}

0 commit comments

Comments
 (0)