custom js card display based on card type

Author: hmillersarah

ims-docs.html

@@ -101,9 +101,7 @@
       src="web-components/hero-section/hero-section.js"
       type="module"></script>
     <script src="web-components/footer/footer.js" type="module"></script>
-    <script
-      src="web-components/card-tile/card-tile.js"
-      type="module"></script>
+    <script src="web-components/card-tile/card-tile.js" type="module"></script>
   </head>
 
   <!-- MASTHEAD_SITENAV_BEGIN -->
@@ -122,27 +120,31 @@
       <section class="white-bg pure-g card-section">
         <!-- IMS docs -->
         <card-tile
+          cardtype="support"
           name="IMS Docs home"
           desc="Start here to search across IMS or IBM product information."
-		  link="https://www.ibm.com/docs/en/ims/latest"
+          link="https://www.ibm.com/docs/en/ims/latest"
           class="pure-u-1 pure-u-lg-1-2">
         </card-tile>
         <!-- PDF docs -->
         <card-tile
+          cardtype="support"
           name="PDF documentation"
           desc="Download PDF files of IMS documentation."
           link="https://www.ibm.com/docs/en/ims/latest?topic=documentation-pdf-files-ims"
           class="pure-u-1 pure-u-lg-1-2">
         </card-tile>
         <!-- Release planning -->
         <card-tile
+          cardtype="support"
           name="Release planning"
           desc="See the latest continuous delivery product updates for IMS 15 and later."
           link="https://www.ibm.com/docs/en/ims/latest?topic=release-planning-ims"
           class="pure-u-1 pure-u-lg-1-2">
         </card-tile>
         <!-- IMS tools -->
         <card-tile
+          cardtype="support"
           name="IMS tools"
           desc="Start here to get information on all IMS tools."
           link="https://www.ibm.com/docs/en/ims-tools"

ims-videos.html

@@ -113,6 +113,8 @@
             <card-tile 
               name="IMS Community Calls" 
               desc="These calls cover the latest in what's going on in the world of IMS."
+              level="Varies"
+              time="Varies"
               link="https://mediacenter.ibm.com/playlist/dedicated/122579632/1_lgy10u5e/"
               id="ims-comm"
               class="pure-u-1 pure-u-lg-1-2 pure-u-xl-1-3"
@@ -149,6 +151,8 @@
             <card-tile 
               name="IMS Insights Series" 
               desc="These webinars cover timely topics such as new customer perspectives on IMS and managed ACBs."
+              level="Varies"
+              time="Varies"
               link="https://mediacenter.ibm.com/playlist/dedicated/122579632/1_05jsq9yl/1_ci4q5j5d"
               id="ims-insights"
               class="pure-u-1 pure-u-lg-1-2 pure-u-xl-1-3"
@@ -159,6 +163,8 @@
             <card-tile 
               name="IMS Tools" 
               desc="Review the various videos on IMS Tools."
+              level="Varies"
+              time="Varies"
               link="https://mediacenter.ibm.com/playlist/dedicated/189147413/1_cvhwa8r2/1_5xtr9qnf"
               id="ims-tools"
               class="pure-u-1 pure-u-lg-1-2 pure-u-xl-1-3"
@@ -225,6 +231,7 @@
               name="Managing IMS Buffers" 
               desc="Check out these three playlists on VSAM, OSAM, and dynamic full-function databases buffers."
               level="Intermediate"
+              time="Varies"
               link="https://mediacenter.ibm.com/playlist/details/1_ap436b3k/categoryId/122579632"
               linktext="VSAM"
               link2="https://mediacenter.ibm.com/playlist/details/1_ywfjxcwn/categoryId/122579632"

web-components/card-tile/card-tile.js

@@ -31,13 +31,23 @@ function createComponent(html) {
      * @param {boolean} shadow - A boolean indicating whether to use the shadow DOM for the element.
      * @returns {void}
      */
-    function setLink(url, linkText, cssSelector, name, shadow) {
+    function setLink(url, linkText, cssSelector, name, cardType, shadow) {
         if (url != undefined) {
             const linkObj = shadow.querySelector(cssSelector);
             linkObj.href = url;
-            const ariaText = (linkText != 'now') ? `Watch ${name}, ${linkText}` : `Watch ${name}`; // Change link text if defined
+
+            // Set link text and aria-label for link based on card type
+            let ariaText;
+            let newLinkText;
+            if (cardType == 'video') {
+                ariaText = (linkText != 'now') ? `Watch ${name}, ${linkText}` : `Watch ${name}`; // Change link text if defined
+                newLinkText = `Watch ${linkText} →`;
+            } else {
+                ariaText = `Explore ${name}`;
+                newLinkText = 'Explore →';
+            }
             linkObj.setAttribute('aria-label', ariaText);
-            linkObj.textContent = `Watch ${linkText} →`;
+            linkObj.textContent = newLinkText;
         }
     }
 
@@ -47,8 +57,7 @@ function createComponent(html) {
         // Creates an instance of cardCard
         constructor() {
             super();
-            this.level = 'Varies';
-            this.time = 'Varies';
+            this.cardtype= 'video';
             this.linktext = 'now';
         }
 
@@ -57,7 +66,7 @@ function createComponent(html) {
          * @returns {Array} An array of property names.
         */
         static get observedAttributes() {
-            return ['name', 'desc', 'level', 'time', 'link', 'linktext', 'link2', 'linktext2', 'link3', 'linktext3'];
+            return ['cardtype', 'name', 'desc', 'level', 'time', 'link', 'linktext', 'link2', 'linktext2', 'link3', 'linktext3'];
         }
 
         /**
@@ -79,6 +88,20 @@ function createComponent(html) {
             const shadow = this.attachShadow({mode: 'closed'});
             shadow.innerHTML = html;
 
+            // Set card type
+            const cardSelector = shadow.querySelector('.card');
+            switch (this.cardtype) {
+                case 'video':
+                    cardSelector.classList.add('video-card');
+                    break;
+                case 'support':
+                    cardSelector.classList.add('support-card');
+                    // Hide level and time
+                    const hideSelector = shadow.querySelector('.inline-g');
+                    hideSelector.style.display = 'none';
+                    break;
+            } 
+
             // Set card name
             setContent('.card-name', this.name, shadow);
             // Set card desc
@@ -87,10 +110,11 @@ function createComponent(html) {
             setContent('.card-level', this.level, shadow);
             // Set card time
             setContent('.card-time', this.time, shadow);
+
             // Set card links
-            setLink(this.link, this.linktext, '.card-link', this.name, shadow);
-            setLink(this.link2, this.linktext2, '.card-link-2', this.name, shadow);
-            setLink(this.link3, this.linktext3, '.card-link-3', this.name, shadow);
+            setLink(this.link, this.linktext, '.card-link', this.name, this.cardtype, shadow);
+            setLink(this.link2, this.linktext2, '.card-link-2', this.name, this.cardtype, shadow);
+            setLink(this.link3, this.linktext3, '.card-link-3', this.name, this.cardtype, shadow);
         }
     }