ESY-6582 Tab can include src

SwedbankPay · Feb 25, 2025 · 43fb30e · 43fb30e
1 parent 440162a
commit 43fb30e
Show file tree

Hide file tree

Showing 3 changed files with 65 additions and 39 deletions.
diff --git a/_includes/tabs.html b/_includes/tabs.html
@@ -1,6 +1,7 @@
 {%- comment -%}
 **Parameters
-tab_list(required): An array with items having the attributes title(required), content (required), include_src(optional)
+tab_list(required): An array with items having the attributes title(required), content_text (required),
+content_src(optional)
 active_tab_index(optional): Index of the tab to be active by default
 {%- endcomment -%}
 
@@ -16,13 +17,14 @@
         {% endfor %}
     </ul>
 </div>
+
 {% for tab in tabs %}
 <p id="tab-content-{{ forloop.index }}" class="tab-content {% unless forloop.index == active_tab_index %}d-none{% endunless %}">
-    {{ tab.content }}
-    {% if tab.include_src %}
-    {{ tab.include_src }}
-    <!-- {% include tab.include_src %} -->
-        <!-- <iframe src="{{tab.include_src}}"></iframe> -->
+    {{ tab.content_text }}
+    {% if tab.content_src %}
+    <div id="tab-src-{{ forloop.index }}" class="tab-src {% unless forloop.index == active_tab_index %}d-none{% endunless %}">
+        {% include {{tab.content_src}} %}
+    </div>
     {% endif %}
 </p>
 {% endfor %}
@@ -31,16 +33,23 @@
     $("#tabs-container ul li a").click(function () {
         const tabTitles = $(".tab-title");
         for (let index = 0; index < tabTitles.length; index++) {
+            console.log("tabTitles[index]", tabTitles[index]);            
             const tab = tabTitles[index];
             tab.classList.remove("active");
         }
 
         $(this).parent().addClass("active");
         const tabContentId = $(this).attr("id").replace("tab-title-", "tab-content-");
+        const tabSrcId = $(this).attr("id").replace("tab-title-", "tab-src-");
+        console.log("tabContentId", tabContentId);
+        console.log("tabSrcId", tabSrcId);        
 
         let tabContents = $(".tab-content");
+        console.log("tabContents", tabContents);
+
         for (let index = 0; index < tabContents.length; index++) {
             const tabContent = tabContents[index];
+            console.log("tabContent", tabContent);
 
             switch (tabContent.id) {
                 case tabContentId:
@@ -52,5 +61,22 @@
                     break;
             }
         }
+        let tabSrcs = $(".tab-src");
+        console.log("tabSrcs", tabSrcs);
+
+        for (let index = 0; index < tabSrcs.length; index++) {
+            const tabSrc = tabSrcs[index];
+            console.log("tabSrc", tabSrc);
+
+            switch (tabSrc.id) {
+                case tabSrcId:
+                    tabSrc.classList.remove("d-none");
+                    break;
+                default:
+                    if (!tabSrc.classList.contains("d-none"))
+                    tabSrc.classList.add("d-none");
+                    break;
+            }
+        }
     });
 </script>
diff --git a/checkout/v3/index.md b/checkout/v3/index.md
@@ -32,36 +32,6 @@ table_content_authenticated:
     swedbankPay: true
   - label: PSP
     swedbankPay: true
-
-table_content_mac:
-  - label: Authentication
-    merchantSide: true 
-  - label: Delivery Info
-    merchantSide: true 
-  - label: Consumer Info
-    swedbankPay: true
-  - label: PSP
-    swedbankPay: true
-
-table_content_payments:
-  - label: Authentication
-    merchantSide: true 
-  - label: Delivery Info
-    merchantSide: true 
-  - label: Consumer Info
-    merchantSide: true 
-  - label: PSP
-    swedbankPay: true
-
-tab_list:
-- title: Checkout v2
-  content: Checkout v2 was the generally available version of Checkout between 2018
-    and 2021. Choose this if you have an **existing Checkout v2
-    integration**.
-- title: Checkout v3
-  content: Coming soon…
-- title: Checkout v3.1
-  content: Even more new and fantastic
 ---
 
 ## Choose The Right Implementation For Your Business
@@ -95,5 +65,3 @@ or two if that makes more sense for your business.
 
 -   **PSP:** The service of providing payment methods in the checkout or payment
     menu.
-
-{% include tabs.html tab_list=page.tab_list active_tab_index=2 %}
diff --git a/index.md b/index.md
@@ -7,7 +7,35 @@ description: |
     scrambled it to make a type specimen book.
 menu_order: 0
 sidebar_icon: home
-
+table_content_mac:
+  - label: Authentication
+    merchantSide: true 
+  - label: Delivery Info
+    merchantSide: true 
+  - label: Consumer Info
+    swedbankPay: true
+  - label: PSP
+    swedbankPay: true
+
+table_content_payments:
+  - label: Authentication
+    merchantSide: true 
+  - label: Delivery Info
+    merchantSide: true 
+  - label: Consumer Info
+    merchantSide: true 
+  - label: PSP
+    swedbankPay: true
+
+tab_list:
+- title: Checkout v2
+  content_text: Checkout v2 was the generally available version of Checkout between 2018
+    and 2021. Choose this if you have an **existing Checkout v2
+    integration**.
+- title: Checkout v3
+  content_text: Coming soon…
+- title: Checkout v3.1
+  content_text: Even more new and fantastic
 ---
 
 {% include card-list.html card_list=page.card_list col_class="col-lg-4" %}
@@ -161,6 +189,10 @@ Here we have also formatted the content as two paragraphs with padding.
     </div>
 </div>
 
+## Tabs
+
+{% include tabs.html tab_list=page.tab_list active_tab_index=2 %}
+
 ## Table
 
 Here's a nice table.