javier/Stirling-PDF
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix tab container logic bug (#2840)

Browse Source 
# Description of Changes

Please provide a summary of the changes, including:

Overhauled logic for tab-containers on sign page to fix compatibility
issues with new Tooltip system

Closes #(2839)

---

## Checklist

### General

- [x ] I have read the [Contribution
Guidelines](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/CONTRIBUTING.md)
- [ x] I have read the [Stirling-PDF Developer
Guide](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/DeveloperGuide.md)
(if applicable)
- [ x] I have read the [How to add new languages to
Stirling-PDF](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/HowToAddNewLanguage.md)
(if applicable)
- [ x] I have performed a self-review of my own code
- [x ] My changes generate no new warnings

### Documentation

- [ x] I have updated relevant docs on [Stirling-PDF's doc
repo](https://github.com/Stirling-Tools/Stirling-Tools.github.io/blob/main/docs/)
(if functionality has heavily changed)
- [ x] I have read the section [Add New Translation
Tags](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/HowToAddNewLanguage.md#add-new-translation-tags)
(for new translation tags only)

### UI Changes (if applicable)

- [ x] Screenshots or videos demonstrating the UI changes are attached
(e.g., as comments or direct attachments in the PR)

### Testing (if applicable)

- [ x] I have tested my changes locally. Refer to the [Testing
Guide](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/DeveloperGuide.md#6-testing)
for more details.
This commit is contained in:
reecebrowne
2025-01-31 23:03:32 +00:00
committed by GitHub
parent b865f4379f
commit d9eda14521
3 changed files with 28 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
src/main/resources/static/js/tab-container.js
View File

@@ -1,15 +1,14 @@
TabContainer = {
initTabGroups() {
const groups = document.querySelectorAll(".tab-group");
const groups = document.querySelectorAll('.tab-group');
const unloadedGroups = [...groups].filter((g) => !g.initialised);
unloadedGroups.forEach((group) => {
const containers = group.querySelectorAll(".tab-container");
const tabTitles = [...containers].map((c) => c.getAttribute("title"));
const tabList = document.createElement("div");
tabList.classList.add("tab-buttons");
const containers = group.querySelectorAll('.tab-container');
const tabTitles = [...containers].map((c) => c.getAttribute('data-title'));
const tabList = document.createElement('div');
tabList.classList.add('tab-buttons');
tabTitles.forEach((title) => {
const tabButton = document.createElement("button");
const tabButton = document.createElement('button');
tabButton.innerHTML = title;
tabButton.onclick = (e) => {
this.setActiveTab(e.target);
@@ -24,15 +23,15 @@ TabContainer = {
});
},
setActiveTab(tabButton) {
const group = tabButton.closest(".tab-group");
const group = tabButton.closest('.tab-group');
group.querySelectorAll(".active").forEach((el) => el.classList.remove("active"));
group.querySelectorAll('.active').forEach((el) => el.classList.remove('active'));
tabButton.classList.add("active");
group.querySelector(`[title="${tabButton.innerHTML}"]`).classList.add("active");
tabButton.classList.add('active');
group.querySelector(`[data-title="${tabButton.innerHTML}"]`).classList.add('active');
},
};
document.addEventListener("DOMContentLoaded", () => {
document.addEventListener('DOMContentLoaded', () => {
TabContainer.initTabGroups();
});