functionality for adding jump links to list

Author: hmillersarah

ims-videos.html

@@ -101,7 +101,9 @@
             link="https://mediacenter.ibm.com/channel/IMS%2BEducational%2BVideos/122579632"
           ></hero-section>
 
-          <jump-links></jump-links>
+          <jump-links
+            links="All roles, IMS database, System programming, Application development"
+          ></jump-links>
 
           <!-- =========================== Filter =========================== -->
           <!-- remember, the behaviour is that clicking pulls you to the anchors -->

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

@@ -3,8 +3,8 @@
 <link rel="stylesheet" href="wp-includes/css/grids-responsive-min.css">
 
 <div class="jump-links pure-g">
-    <ul class="pure-u-1">
-        <li>
+    <ul class="list pure-u-1">
+        <!-- <li>
             <img src="wp-content/icons/icon_jump-link.svg" alt="">
             <a href="#all">All roles</a>
         </li>
@@ -31,6 +31,6 @@
         <li>
             <img src="wp-content/icons/icon_jump-link.svg" alt="">
             <a href="#support">Support</a>
-        </li>
+        </li> -->
     </ul>
 </div>

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

@@ -9,9 +9,33 @@ fetch("web-components/jump-links/jump-links.html")
  * @returns {void}
  */
 function createComponent(html) {
+
+    function createLink(link, shadow) {
+        let newListItem = document.createElement('li');
+        let newImage = document.createElement('img');
+        newImage.src = "wp-content/icons/icon_jump-link.svg";
+        newImage.alt = "jump link";
+        newListItem.appendChild(newImage);
+        let newLink = document.createElement('a');
+        newLink.textContent = link;
+        let linkSrc = "#" + (link.toLowerCase().replaceAll(' ', '-'));
+        newLink.href = linkSrc;
+        newListItem.appendChild(newLink);
+        let list = shadow.querySelector('.list');
+        list.appendChild(newListItem);
+    }
+
     // Web component class
     class JumpLinks extends HTMLElement {
 
+        /**
+         * Returns an array of properties to observe.
+         * @returns {Array} An array of property names.
+        */
+        static get observedAttributes() {
+            return ['links'];
+        }
+
         /**
          * Called when an attribute is defined or changed.
          * @param {string} property - The name of the attribute.
@@ -26,8 +50,13 @@ function createComponent(html) {
         // Invoked when element is added to document
         connectedCallback() {
             // Create shadow root for element
-            const shadow = this.attachShadow({mode: 'closed'});
+            const shadow = this.attachShadow({mode: 'open'});
             shadow.innerHTML = html;
+
+            const linksArr = (this.links).split(', ');
+            linksArr.forEach(link => {
+                createLink(link, shadow);
+            });
         }
     }