From 477d6268e603a0f6c8123211b1c3cccbc478014a Mon Sep 17 00:00:00 2001
From: Tom Schraitle <tomschr@users.noreply.github.com>
Date: Wed, 21 Aug 2024 13:29:44 +0200
Subject: [PATCH] Convert variablelist into a HTML tab structure (#611)

If you want to turn your variablelist into tabs, use one of the following methods:

* With a role attribute:
  <variablelist role="tabs">

* With a processing instruction:
   <variablelist>
      <?dbhtml list-presentation="tabs"?>

---------

Co-authored-by: Gayathri Gandaboyina <gayathri.gandaboyina@suse.com>
---
 .../sass/custom/content-formal-informal.sass  |  32 +++++
 suse2022-ns/static/css/style-new.css          |  27 ++++
 suse2022-ns/static/css/style.css              |  27 ++++
 suse2022-ns/static/js/script-purejs.js        |  26 ++++
 suse2022-ns/static/js/script.js               |  26 ++++
 suse2022-ns/xhtml/lists.xsl                   | 128 ++++++------------
 6 files changed, 183 insertions(+), 83 deletions(-)

diff --git a/source-assets/styles2022/sass/custom/content-formal-informal.sass b/source-assets/styles2022/sass/custom/content-formal-informal.sass
index dffbfb9a..75112ed3 100644
--- a/source-assets/styles2022/sass/custom/content-formal-informal.sass
+++ b/source-assets/styles2022/sass/custom/content-formal-informal.sass
@@ -349,3 +349,35 @@ li > p
 
 div.blockquote
   margin: 17px 35px
+
+// CSS for Tab structure
+.tab-structure
+  display: flex
+  border: 1px solid #30ba78
+  flex-direction: column
+  margin-top: 32px
+  margin-bottom: 32px
+
+  .tabs
+    display: flex
+    overflow-x: auto
+    padding: 0
+    margin: 0
+
+    .tab
+      cursor: pointer
+      list-style: none
+      padding-top: 8px
+      padding-bottom: 8px
+      padding-left: 16px
+      padding-right: 16px
+      
+    .tab.active-tab
+      border-bottom: 3px solid #30ba78
+      color: #0c322c
+      font-size: bold
+
+  .content-container
+    background-color: rgb(246, 248, 250)
+    padding: 8px
+    overflow-x: auto
diff --git a/suse2022-ns/static/css/style-new.css b/suse2022-ns/static/css/style-new.css
index 5a60222d..0dcca200 100644
--- a/suse2022-ns/static/css/style-new.css
+++ b/suse2022-ns/static/css/style-new.css
@@ -2775,6 +2775,33 @@ li > p {
 div.blockquote {
   margin: 17px 35px; }
 
+.tab-structure {
+  display: flex;
+  border: 1px solid #30ba78;
+  flex-direction: column;
+  margin-top: 32px;
+  margin-bottom: 32px; }
+  .tab-structure .tabs {
+    display: flex;
+    overflow-x: auto;
+    padding: 0;
+    margin: 0; }
+    .tab-structure .tabs .tab {
+      cursor: pointer;
+      list-style: none;
+      padding-top: 8px;
+      padding-bottom: 8px;
+      padding-left: 16px;
+      padding-right: 16px; }
+    .tab-structure .tabs .tab.active-tab {
+      border-bottom: 3px solid #30ba78;
+      color: #0c322c;
+      font-size: bold; }
+  .tab-structure .content-container {
+    background-color: #f6f8fa;
+    padding: 8px;
+    overflow-x: auto; }
+
 .qandadiv {
   margin: 0 0 40px 0; }
 
diff --git a/suse2022-ns/static/css/style.css b/suse2022-ns/static/css/style.css
index 09bde999..f96ec8d6 100644
--- a/suse2022-ns/static/css/style.css
+++ b/suse2022-ns/static/css/style.css
@@ -3029,6 +3029,33 @@ li > p {
 div.blockquote {
   margin: 17px 35px; }
 
+.tab-structure {
+  display: flex;
+  border: 1px solid #30ba78;
+  flex-direction: column;
+  margin-top: 32px;
+  margin-bottom: 32px; }
+  .tab-structure .tabs {
+    display: flex;
+    overflow-x: auto;
+    padding: 0;
+    margin: 0; }
+    .tab-structure .tabs .tab {
+      cursor: pointer;
+      list-style: none;
+      padding-top: 8px;
+      padding-bottom: 8px;
+      padding-left: 16px;
+      padding-right: 16px; }
+    .tab-structure .tabs .tab.active-tab {
+      border-bottom: 3px solid #30ba78;
+      color: #0c322c;
+      font-size: bold; }
+  .tab-structure .content-container {
+    background-color: #f6f8fa;
+    padding: 8px;
+    overflow-x: auto; }
+
 .qandadiv {
   margin: 0 0 40px 0; }
 
diff --git a/suse2022-ns/static/js/script-purejs.js b/suse2022-ns/static/js/script-purejs.js
index 9a01ef17..ffd1be27 100644
--- a/suse2022-ns/static/js/script-purejs.js
+++ b/suse2022-ns/static/js/script-purejs.js
@@ -676,3 +676,29 @@ function addBugLinks() {
       return true;
     });
 }
+
+function showTabContent(event) {
+     var tab = event.target.closest('.tab')
+      if (tab) {
+          var tabs = tab.parentElement;
+   
+          // Get the index of the clicked tab
+          var index = Array.from(tabs.children).indexOf(tab);
+   
+          // Hide all tab contents
+          Array.from(tabs.nextElementSibling.children).forEach(content => {
+              content.style.display = 'none';
+          });
+   
+          // Remove "active" class from all tabs
+          tabs.querySelectorAll('.tab').forEach(tab => {
+              tab.classList.remove('active-tab');
+          });
+   
+          // Display the selected tab content
+          tabs.nextElementSibling.children[index].style.display = 'block';
+   
+          // Add "active" class to the clicked tab
+          tab.classList.add('active-tab');
+      }
+}
diff --git a/suse2022-ns/static/js/script.js b/suse2022-ns/static/js/script.js
index b90a5212..699591ed 100644
--- a/suse2022-ns/static/js/script.js
+++ b/suse2022-ns/static/js/script.js
@@ -585,3 +585,29 @@ function addBugLinks() {
   });
 
 }
+
+function showTabContent(event) {
+  var tab = event.target.closest('.tab')
+   if (tab) {
+       var tabs = tab.parentElement;
+
+       // Get the index of the clicked tab
+       var index = Array.from(tabs.children).indexOf(tab);
+
+       // Hide all tab contents
+       Array.from(tabs.nextElementSibling.children).forEach(content => {
+           content.style.display = 'none';
+       });
+
+       // Remove "active" class from all tabs
+       tabs.querySelectorAll('.tab').forEach(tab => {
+           tab.classList.remove('active-tab');
+       });
+
+       // Display the selected tab content
+       tabs.nextElementSibling.children[index].style.display = 'block';
+
+       // Add "active" class to the clicked tab
+       tab.classList.add('active-tab');
+   }
+}
diff --git a/suse2022-ns/xhtml/lists.xsl b/suse2022-ns/xhtml/lists.xsl
index 2bc0a889..92dda945 100644
--- a/suse2022-ns/xhtml/lists.xsl
+++ b/suse2022-ns/xhtml/lists.xsl
@@ -18,7 +18,7 @@
     xmlns="http://www.w3.org/1999/xhtml"
     exclude-result-prefixes="exsl d">
 
-  <xsl:template match="d:variablelist">
+  <xsl:template match="d:variablelist[@role='tabs' or processing-instruction('dbhtml')]">
     <xsl:variable name="pi-presentation">
       <xsl:call-template name="pi.dbhtml_list-presentation" />
     </xsl:variable>
@@ -31,105 +31,67 @@
           <xsl:value-of select="$pi-presentation" />
         </xsl:when>
         <xsl:when test="$variablelist.as.table != 0">
-          <xsl:value-of select="'table'" />
+          <xsl:text>table</xsl:text>
         </xsl:when>
         <xsl:otherwise>
-          <xsl:value-of select="'list'" />
+          <xsl:text>list</xsl:text>
         </xsl:otherwise>
       </xsl:choose>
     </xsl:variable>
 
-    <xsl:variable name="default.class">
-      <xsl:value-of select="local-name()" />
-      <xsl:if test="@spacing = 'compact'">
-        <xsl:text> compact</xsl:text>
-      </xsl:if>
-      <!-- Added to support tabs -->
-      <xsl:if test="@role = 'tabs' or $presentation = 'tabs'">
-        <xsl:text> tabs</xsl:text>
-      </xsl:if>
-    </xsl:variable>
-
-    <xsl:variable name="list-width">
-      <xsl:call-template name="pi.dbhtml_list-width" />
-    </xsl:variable>
-
-    <xsl:variable name="term-width">
-      <xsl:call-template name="pi.dbhtml_term-width" />
-    </xsl:variable>
-
-    <xsl:variable name="table-summary">
-      <xsl:call-template name="pi.dbhtml_table-summary" />
-    </xsl:variable>
-
   <div>
-    <xsl:call-template name="common.html.attributes"/>
+    <xsl:call-template name="common.html.attributes">
+      <xsl:with-param name="class">tab-structure</xsl:with-param>
+    </xsl:call-template>
     <xsl:call-template name="id.attribute"/>
     <xsl:call-template name="anchor"/>
     <xsl:if test="d:title|d:info/d:title">
       <xsl:call-template name="formal.object.heading"/>
     </xsl:if>
 
-      <xsl:choose>
-        <xsl:when test="$presentation = 'table'">
-          <!-- Preserve order of PIs and comments -->
-          <xsl:apply-templates
-            select="*[not(self::d:varlistentry or self::d:title or self::d:titleabbrev)]
-                    | comment()[not(preceding-sibling::d:varlistentry)]
-                    | processing-instruction()[not(preceding-sibling::d:varlistentry)]" />
-          <table border="{$table.border.off}">
-            <xsl:call-template name="generate.class.attribute">
-              <xsl:with-param name="class" select="$default.class" />
-            </xsl:call-template>
-            <xsl:if test="$list-width != ''">
-              <xsl:attribute name="width">
-                <xsl:value-of select="$list-width" />
-              </xsl:attribute>
-            </xsl:if>
-            <xsl:if test="$table-summary != ''">
-              <xsl:attribute name="summary">
-                <xsl:value-of select="$table-summary" />
-              </xsl:attribute>
-            </xsl:if>
-            <colgroup>
-              <col align="{$direction.align.start}" valign="top">
-                <xsl:if test="$term-width != ''">
-                  <xsl:attribute name="width">
-                    <xsl:value-of select="$term-width" />
-                  </xsl:attribute>
-                </xsl:if>
-              </col>
-              <col />
-            </colgroup>
-            <tbody>
-              <xsl:apply-templates mode="varlist-table"
-                select="d:varlistentry | comment()[preceding-sibling::d:varlistentry]
-                        | processing-instruction()[preceding-sibling::d:varlistentry]"
-               />
-            </tbody>
-          </table>
-        </xsl:when>
-        <xsl:otherwise>
-          <!-- Preserve order of PIs and comments -->
-          <xsl:apply-templates
-            select="*[not(self::d:varlistentry or self::d:title or self::d:titleabbrev)]
-                    | comment()[not(preceding-sibling::d:varlistentry)]
-                    | processing-instruction()[not(preceding-sibling::d:varlistentry)]" />
-          <dl>
-            <xsl:call-template name="generate.class.attribute">
-              <xsl:with-param name="class" select="$default.class" />
-            </xsl:call-template>
-            <xsl:apply-templates
-              select="d:varlistentry | comment()[preceding-sibling::d:varlistentry]
-                      | processing-instruction()[preceding-sibling::d:varlistentry]"
-             />
-          </dl>
-        </xsl:otherwise>
-      </xsl:choose>
+    <ul class="tabs" onclick="showTabContent(event)">
+     <xsl:apply-templates select="d:varlistentry|comment()[preceding-sibling::d:varlistentry]
+                                  |processing-instruction()[preceding-sibling::d:varlistentry]"
+        mode="tab-titles" />
+    </ul>
+    <div class="content-container">
+      <xsl:apply-templates select="d:varlistentry|comment()[preceding-sibling::d:varlistentry]
+                                   |processing-instruction()[preceding-sibling::d:varlistentry]"
+        mode="tab-content" />
+    </div>
   </div>
   </xsl:template>
 
+ <xsl:template match="d:varlistentry" mode="tab-titles">
+    <li>
+      <xsl:attribute name="class">
+        <xsl:choose>
+          <xsl:when test="position() = 1">tab active-tab</xsl:when>
+          <xsl:otherwise>tab</xsl:otherwise>
+        </xsl:choose>
+      </xsl:attribute>
+      <xsl:apply-templates select="d:term" mode="tab-term" />
+    </li>
+ </xsl:template>
+
+ <xsl:template match="d:varlistentry" mode="tab-content">
+   <div class="tab-content" id="tabContent{position()}">
+        <xsl:choose>
+          <xsl:when test="position() != 1" >
+            <xsl:attribute name="style">display: none;</xsl:attribute>
+          </xsl:when>
+          <xsl:otherwise/>
+        </xsl:choose>
+     <xsl:apply-templates select="d:listitem" />
+   </div>
+ </xsl:template>
+
+  <!-- We don't want the extra <span> element -->
+  <xsl:template match="d:term" mode="tab-term">
+    <xsl:apply-templates/>
+  </xsl:template>
 
+  <!-- =============================================================== -->
   <xsl:template match="d:varlistentry">
     <dt>
       <xsl:call-template name="id.attribute">