Skip to content

Commit

Permalink
Convert variablelist into a HTML tab structure (#611)
Browse files Browse the repository at this point in the history 
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 <[email protected]>
  • Loading branch information
@tomschr @GGayathri3
tomschr and GGayathri3 authored Aug 21, 2024
1 parent 3772343 commit 477d626
Show file tree
Hide file tree
Showing 6 changed files with 183 additions and 83 deletions.
32 changes: 32 additions & 0 deletions source-assets/styles2022/sass/custom/content-formal-informal.sass
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
27 changes: 27 additions & 0 deletions suse2022-ns/static/css/style-new.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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; }

Expand Down
27 changes: 27 additions & 0 deletions suse2022-ns/static/css/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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; }

Expand Down
26 changes: 26 additions & 0 deletions suse2022-ns/static/js/script-purejs.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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');
}
}
26 changes: 26 additions & 0 deletions suse2022-ns/static/js/script.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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');
}
}
128 changes: 45 additions & 83 deletions suse2022-ns/xhtml/lists.xsl
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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">
Expand Down

0 comments on commit 477d626

Please sign in to comment.