ESY-6582 Tab can include src

_includes/example-1.md

@@ -0,0 +1,25 @@
+
+The  **Example 1** integration consists of three main steps. **Creating** the payment order,
+**displaying** the payment menu, and **capturing** the funds. In addition, there
+are other post-purchase options you need. We get to them later on.
+
+## Create Payment Order
+
+When your customer has initiated a purchase, you need to create a payment order.
+Start by performing a `POST` request towards the `paymentorder` resource with
+payer information and a `completeUrl`.
+
+The `productName` field has been removed in v3.1, and you identify the
+`paymentOrder` version as v3.1 in the header instead.
+
+`POST`, `PATCH`, `GET` and `PUT` requests use this header:
+
+`Content-Type: application/json;version=3.1`
+
+`GET` requests can also use this header:
+
+`Accept: application/json;version=3.1`
+
+Valid versions are **3.1**, **3.0** and **2.0**. If you do not add a version,
+the request will default to **2.0**. Using the `productName` and setting it to
+`checkout3` will default to **3.0**.

_includes/example.md → _includes/example-2.md

@@ -1,5 +1,5 @@
 
-The integration consists of three main steps. **Creating** the payment order,
+The **Example 2** integration consists of three main steps. **Creating** the payment order,
 **displaying** the payment menu, and **capturing** the funds. In addition, there
 are other post-purchase options you need. We get to them later on.
 

_includes/example-3.md

@@ -0,0 +1,25 @@
+
+The  **Example 3** integration consists of three main steps. **Creating** the payment order,
+**displaying** the payment menu, and **capturing** the funds. In addition, there
+are other post-purchase options you need. We get to them later on.
+
+## Create Payment Order
+
+When your customer has initiated a purchase, you need to create a payment order.
+Start by performing a `POST` request towards the `paymentorder` resource with
+payer information and a `completeUrl`.
+
+The `productName` field has been removed in v3.1, and you identify the
+`paymentOrder` version as v3.1 in the header instead.
+
+`POST`, `PATCH`, `GET` and `PUT` requests use this header:
+
+`Content-Type: application/json;version=3.1`
+
+`GET` requests can also use this header:
+
+`Accept: application/json;version=3.1`
+
+Valid versions are **3.1**, **3.0** and **2.0**. If you do not add a version,
+the request will default to **2.0**. Using the `productName` and setting it to
+`checkout3` will default to **3.0**.

_includes/tabs.html

@@ -2,77 +2,79 @@
 **Parameters
 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
+default_tab_index(optional): Index of the tab to be active by default, starting from 1
 {%- endcomment -%}
 
-{% assign tabs = include.tab_list %}
-{% assign active_tab_index = include.active_tab_index | default: 1 %}
+{%- comment -%}
+{%- endcomment -%}
 
+{% assign tabs = include.tab_list %}
+{% assign default_tab_index = include.default_tab_index | minus:1 | at_least:0 %}
 <div id="tabs-container" class="tabs">
     <ul>
         {% for tab in tabs %}
-        <li class="tab-title {% if forloop.index == active_tab_index %}active{% endif %}">
-            <a id="tab-title-{{ forloop.index }}">{{ tab.title }}</a>
+        <li class="{% if forloop.index0 == default_tab_index %}active{% endif %}">
+            <a id="{{ forloop.index0 }}">{{ tab.title }}</a>
         </li>
         {% 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_text }}
-    {% if tab.content_src %}
-    <div id="tab-src-{{ forloop.index }}" class="tab-src {% unless forloop.index == active_tab_index %}d-none{% endunless %}">
-        {% capture sourced_content %}
-        {% include {{tab.content_src}} %}
-        {% endcapture %}
-        {{ sourced_content | markdownify }}
-    </div>
-    {% endif %}
+<p id="tab-content-text">
 </p>
+<div id="tab-content-src">
+</div>
+{% for tab in tabs %}
+{% if tab.content_src %}
+<div class="tab-src">
+    {% capture sourced_content %}
+    {% include {{tab.content_src}} %}
+    {% endcapture %}
+    {{ sourced_content | markdownify }}
+</div>
+{% endif %}
 {% endfor %}
 
 <script>
-    $("#tabs-container ul li a").click(function () {
-        const tabTitles = $(".tab-title");
-        for (let index = 0; index < tabTitles.length; index++) {          
-            const tab = tabTitles[index];
-            tab.classList.remove("active");
+    var defaultIndex = {{ default_tab_index | jsonify }};
+    const allTabs = {{ tabs | jsonify }};
+    const compiledTabTextContents = allTabs.map(tab => tab.content_text);
+    const compiledTabSrcContents = $(".tab-src");
+</script>
+
+<script>
+    $(document).ready(function () {
+        let tabSrcContents = [];
+        for (let index = 0; index < compiledTabSrcContents.length; index++) {
+            tabSrcContents[index] = compiledTabSrcContents[index].innerHTML;
         }
+        $(".tab-src").remove();
 
-        $(this).parent().addClass("active");
-        const tabContentId = $(this).attr("id").replace("tab-title-", "tab-content-");
-        const tabSrcId = $(this).attr("id").replace("tab-title-", "tab-src-");
+        $("#tabs-container ul li a").click(function () {
+            const tabTitles = $("#tabs-container ul li");
+            for (let index = 0; index < tabTitles.length; index++) {
+                tabTitles[index].classList.remove("active");
+            }
 
-        let tabContents = $(".tab-content");
-
-        for (let index = 0; index < tabContents.length; index++) {
-            const tabContent = tabContents[index];
+            $(this).parent().addClass("active");
+            populateTabContent(this.id);
+        });
 
-            switch (tabContent.id) {
-                case tabContentId:
-                    tabContent.classList.remove("d-none");
-                    break;
-                default:
-                    if (!tabContent.classList.contains("d-none"))
-                        tabContent.classList.add("d-none");
-                    break;
+        function populateTabContent(index) {
+            if (compiledTabTextContents[index]) {
+                $("#tab-content-text").html(compiledTabTextContents[index]);
+            } else {
+                $("#tab-content-text").html("");
             }
-        }
-        let tabSrcs = $(".tab-src");
-
-        for (let index = 0; index < tabSrcs.length; index++) {
-            const tabSrc = tabSrcs[index];
 
-            switch (tabSrc.id) {
-                case tabSrcId:
-                    tabSrc.classList.remove("d-none");
-                    break;
-                default:
-                    if (!tabSrc.classList.contains("d-none"))
-                    tabSrc.classList.add("d-none");
-                    break;
+            if (compiledTabSrcContents[index]) {                
+                $("#tab-content-src").html(compiledTabSrcContents[index]);
+            }
+            else {
+                $("#tab-content-src").html("");
             }
         }
+
+        populateTabContent(defaultIndex);
+
     });
 </script>

index.md

@@ -29,11 +29,13 @@ table_content_payments:
 
 tab_list:
 - title: Tab 1 with content as text
-  content_text: Some content.
+  content_text: Some intro text for tab 1.
+  content_src: example-1.md
 - title: Tab 2 with content from src
-  content_src: example.md
+  content_src: example-2.md
 - title: Tab 3 with content from text
-  content_text: Text content
+  content_text: Tab 3 intro text
+  content_src: example-3.md
 ---
 
 {% include card-list.html card_list=page.card_list col_class="col-lg-4" %}
@@ -189,7 +191,7 @@ Here we have also formatted the content as two paragraphs with padding.
 
 ## Tabs
 
-{% include tabs.html tab_list=page.tab_list active_tab_index=2 %}
+{% include tabs.html tab_list=page.tab_list default_tab_index=3 %}
 
 ## Table