Fix pat-autotoc fieldset ID and refactor TOC navigation
#1479
There are no files selected for viewing
This file contains hidden or 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,6 +1,7 @@ | ||
| import $ from "jquery"; | ||
| import Base from "@patternslib/patternslib/src/core/base"; | ||
| import utils from "@patternslib/patternslib/src/core/utils"; | ||
| import Tab from "bootstrap/js/dist/tab"; | ||
|
|
||
| export default Base.extend({ | ||
| name: "autotoc", | ||
|
|
@@ -10,8 +11,9 @@ export default Base.extend({ | |
| section: "section", | ||
| levels: "h1,h2,h3", | ||
| IDPrefix: "autotoc-item-", | ||
| classTOCName: "autotoc-nav nav", | ||
| classContentAreaName: "autotoc-content tab-content", | ||
| classSectionName: "autotoc-section tab-pane fade", | ||
| classLevelPrefixName: "autotoc-level-", | ||
| classActiveName: "active", | ||
| scrollDuration: "slow", | ||
|
|
@@ -26,67 +28,108 @@ export default Base.extend({ | |
|
|
||
| var self = this; | ||
|
|
||
| const $nav = $("<nav/>") | ||
| .attr("aria-label", "Tab Navigation"); | ||
|
|
||
| const $toc = $("<ul/>") | ||
| .addClass(self.options.classTOCName) | ||
| .appendTo($nav); | ||
|
|
||
| if (self.options.prependTo) { | ||
| $nav.prependTo(self.options.prependTo); | ||
| } else if (self.options.appendTo) { | ||
| $nav.appendTo(self.options.appendTo); | ||
| } else { | ||
| $nav.prependTo(self.$el); | ||
| } | ||
|
|
||
| if (self.options.className) { | ||
| self.$el.addClass(self.options.className); | ||
| } | ||
|
|
||
| $(self.options.section, self.$el) | ||
| .addClass(self.options.classSectionName) | ||
| .attr("role", "tabpanel") | ||
| .attr("tabindex", "0"); | ||
|
|
||
| var asTabs = self.$el.hasClass("autotabs"); | ||
|
|
||
| if (asTabs) { | ||
| $toc.addClass("nav-tabs"); | ||
| self.$contentArea = $("<div/>").addClass(self.options.classContentAreaName); | ||
| self.$contentArea.insertAfter($nav); | ||
| $(self.options.section, self.$el).appendTo(self.$contentArea); | ||
| $(self.options.section, self.$el).find("legend").hide(); | ||
| } else { | ||
| $toc.addClass([ | ||
| "flex-column", | ||
| "float-end", | ||
| "border", | ||
| "mt-0", | ||
| "me-0", | ||
| "mb-3", | ||
| "ms-3", | ||
| "py-2", | ||
| "px-0" | ||
| ]); | ||
| } | ||
|
|
||
| var activeId = null; | ||
|
|
||
| $(self.options.levels, self.$el).each(function (i) { | ||
| const $level = $(this); | ||
| const $section = $level.closest(self.options.section); | ||
| let sectionId = $section.prop("id"); | ||
| let sectionHash = `#${sectionId}`; | ||
| const tabId = `${self.options.IDPrefix}${self.name}-${i}`; | ||
| const tabHash = `#${tabId}`; | ||
| const levelId = `${tabId}-pane`; | ||
| const levelHash = `#${levelId}`; | ||
|
|
||
| if (!asTabs) { | ||
| $level.attr("id", levelId).attr("aria-labelledby", tabId); | ||
| } else { | ||
| $section.attr("aria-labelledby", tabId); | ||
| if (!sectionId) { | ||
| // sections without ID get auto generated "<tabId>-pane" | ||
| sectionId = levelId; | ||
| sectionHash = `#${levelId}`; | ||
| $section.attr("id", levelId); | ||
| } | ||
| } | ||
|
|
||
| // NOTE: if you have nested autotocs then you have to add the | ||
| // parent autotoc tabId to `options.IDPrefix` of the sub autotoc | ||
| // in order to mark parent and sub tab as active. | ||
| if (activeId === null && (window.location.hash.indexOf(tabHash) == 0 || $level.hasClass(self.options.classActiveName))) { | ||
|
Member
Author
There was a problem hiding this comment. @cihanandac this solves the nested tab activation problem. however, we need to fix the |
||
| activeId = tabId; | ||
| } | ||
|
|
||
| const $navItem = $("<li/>"); | ||
| $navItem | ||
| .addClass("nav-item") | ||
| .attr("role", "presentation") | ||
| .appendTo($toc); | ||
|
|
||
| const $nav = $("<a/>"); | ||
| $nav.appendTo($navItem) | ||
| .html($level.html()) | ||
| .attr("id", tabId) | ||
| .attr("href", asTabs ? sectionHash : levelHash) | ||
| .attr("aria-controls", asTabs ? sectionId : levelId) | ||
| .attr("data-bs-toggle", "tab") | ||
| .attr("data-bs-target", asTabs ? sectionHash : levelHash) | ||
| .addClass([ | ||
| "nav-link", | ||
| self.options.classLevelPrefixName + self.getLevel($level), | ||
| ]) | ||
| .on("click", function (e, options) { | ||
| if (!options) { | ||
| options = { | ||
| doScroll: true, | ||
| skipHash: false, | ||
| }; | ||
| } | ||
| if ( | ||
| options.doScroll !== false && | ||
| self.options.scrollDuration && | ||
|
|
@@ -107,37 +150,36 @@ export default Base.extend({ | |
| $(this).trigger("clicked"); | ||
| if (!options.skipHash) { | ||
| if (window.history && window.history.pushState) { | ||
| window.history.pushState({}, "", tabHash); | ||
| } | ||
| } | ||
| }); | ||
|
|
||
| if (!asTabs) { | ||
| $nav.addClass([ | ||
| "text-decoration-underline", | ||
| "p-0", | ||
| "mx-3", | ||
| ]); | ||
| } | ||
|
|
||
| self.tabs.push({ | ||
| section: $section[0], | ||
| id: levelId, | ||
| nav: $nav[0], | ||
| }); | ||
| }); | ||
|
|
||
| const activeTabButton = activeId ? $toc.find("a#" + activeId)[0] : $toc.find("a").first()[0]; | ||
| const tab = Tab.getOrCreateInstance(activeTabButton); | ||
| tab.show(); | ||
|
|
||
| // After DOM tree is built, initialize eventual validation | ||
| this.initialize_validation(); | ||
| }, | ||
|
|
||
| initialize_validation: function () { | ||
| const el = this.el | ||
|
|
||
| // Initialize only on forms | ||
| const form = el.closest("form"); | ||
|
|
||
This file contains hidden or 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,69 +1,10 @@ | ||
| .pat-autotoc { | ||
| .autotoc-nav { | ||
| .autotoc-level-2 { | ||
| margin-left: 2em; | ||
| } | ||
| .autotoc-level-3 { | ||
| margin-left: 3em; | ||
| } | ||
| } | ||
| } |
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Uh oh!
There was an error while loading. Please reload this page.