-
Notifications
You must be signed in to change notification settings - Fork 3
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
11 changed files
with
155 additions
and
260 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,4 @@ | ||
|
|
||
| ### Example 1 | ||
|
|
||
| The src content for **Example 1** |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,4 @@ | ||
|
|
||
| ### Example 2 | ||
|
|
||
| The src content for **Example 2** |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,4 @@ | ||
|
|
||
| ### Example 3 | ||
|
|
||
| The src content for **Example 3** |
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,78 +1,106 @@ | ||
| {%- comment -%} | ||
| **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 | ||
| content_src(optional), mark_with_star (optional) | ||
| 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 %} | ||
| {% assign max_index = include.tab_list | size | minus:1 %} | ||
| {% assign default_tab_index = include.default_tab_index | minus:1 | at_least:0 | at_most:max_index %} | ||
|
|
||
| <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 id="{{ tab.title | replace: ' ', '_' | replace: '.', '' }}" | ||
| class="{% if forloop.index0 == default_tab_index %}active{% endif %}"> | ||
| <a id="{{ forloop.index0 }}">{{ tab.title }}{% if tab.mark_with_star %}*{% endif %}</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(); | ||
|
|
||
| $("#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"); | ||
| } | ||
|
|
||
| $(this).parent().addClass("active"); | ||
| const tabContentId = $(this).attr("id").replace("tab-title-", "tab-content-"); | ||
| const tabSrcId = $(this).attr("id").replace("tab-title-", "tab-src-"); | ||
| $(this).parent().addClass("active"); | ||
| populateTabContent(this.id); | ||
| }); | ||
|
|
||
| let tabContents = $(".tab-content"); | ||
|
|
||
| for (let index = 0; index < tabContents.length; index++) { | ||
| const tabContent = tabContents[index]; | ||
| function populateTabContent(index) { | ||
| if (compiledTabTextContents && compiledTabTextContents[index]) { | ||
| $("#tab-content-text").html(compiledTabTextContents[index]); | ||
| } else { | ||
| $("#tab-content-text").html(""); | ||
| } | ||
|
|
||
| switch (tabContent.id) { | ||
| case tabContentId: | ||
| tabContent.classList.remove("d-none"); | ||
| break; | ||
| default: | ||
| if (!tabContent.classList.contains("d-none")) | ||
| tabContent.classList.add("d-none"); | ||
| break; | ||
| if (compiledTabSrcContents && compiledTabSrcContents[index]) { | ||
| $("#tab-content-src").html(compiledTabSrcContents[index]); | ||
| } | ||
| else { | ||
| $("#tab-content-src").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; | ||
| function setActiveTabOnLoad() { | ||
| const hash = window.location.hash; | ||
|
|
||
| if (hash) { | ||
| const hashParts = hash.split("-").reverse(); | ||
| const tabTitles = $("#tabs-container ul li"); | ||
| for (let index = 0; index < tabTitles.length; index++) { | ||
| const tabTitleParts = tabTitles[index].id.split("_").reverse(); | ||
|
|
||
| if (hashParts[0] === tabTitleParts[0]) { | ||
| defaultIndex = index; | ||
| } | ||
| } | ||
| } | ||
|
|
||
| const tabTitles = $("#tabs-container ul li"); | ||
| for (let index = 0; index < tabTitles.length; index++) { | ||
|
|
||
| if (index === defaultIndex) { | ||
| tabTitles[index].classList.add("active"); | ||
| } else { | ||
| tabTitles[index].classList.remove("active"); | ||
| } | ||
| } | ||
| } | ||
|
|
||
| setActiveTabOnLoad(); | ||
| populateTabContent(defaultIndex); | ||
| }); | ||
| </script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.