jrangel/local-content-pro
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Changes to backend and tabs UI

Browse Source
This commit is contained in:
Jeremy Rangel
2025-01-03 16:33:20 -08:00
parent b79a4ece03
commit 63e181109c
15 changed files with 118 additions and 83 deletions
Download Patch File Download Diff File Expand all files Collapse all files

73
assets/js/lcp-ui.js
View File

@ -1,3 +1,5 @@
/* ACCORDION */
document.addEventListener('DOMContentLoaded', function () {
// Find all elements with the class "lcp-accordion"
var accordions = document.querySelectorAll('.lcp-accordion');
@ -31,31 +33,64 @@ document.addEventListener('DOMContentLoaded', function () {
});
/* TABS */
document.addEventListener('DOMContentLoaded', function () {
const tabs = document.querySelectorAll('.tab-link');
const panes = document.querySelectorAll('.tab-pane');
const tabContainer = document.querySelector('.lcp-tab-container'); // The parent container
tabs.forEach(tab => {
tab.addEventListener('click', function (event) {
event.preventDefault();
// Only enable the hash functionality if the container has the class '.lcp-support-hash'
if (tabContainer && tabContainer.classList.contains('lcp-support-hash')) {
// Function to set the active tab based on the hash in the URL
function setActiveTabFromHash() {
const hash = window.location.hash; // Get the current URL hash
if (hash) {
const targetTab = document.querySelector(`.tab-link[data-tab="${hash.substring(1)}"]`); // Remove '#' from hash
const targetPane = document.getElementById(hash.substring(1));
// Remove active class from all tabs and panes
tabs.forEach(link => link.classList.remove('active'));
panes.forEach(pane => pane.classList.remove('active'));
// If both tab and pane exist, make them active
if (targetTab && targetPane) {
tabs.forEach(link => link.classList.remove('active'));
panes.forEach(pane => pane.classList.remove('active'));
// Add active class to the clicked tab
tab.classList.add('active');
// Get the target pane
const targetPaneId = tab.dataset.tab;
const targetPane = document.getElementById(targetPaneId);
// Check if targetPane exists before trying to manipulate it
if (targetPane) {
targetPane.classList.add('active');
} else {
console.error(`Tab pane with ID '${targetPaneId}' not found.`);
targetTab.classList.add('active');
targetPane.classList.add('active');
} else {
console.error(`Tab or pane with ID '${hash}' not found.`);
}
}
}
// Set the active tab from the hash when the page loads
setActiveTabFromHash();
}
// Handle tab clicks
tabs.forEach(tab => {
tab.addEventListener('click', function (event) {
event.preventDefault();
// Remove active class from all tabs and panes
tabs.forEach(link => link.classList.remove('active'));
panes.forEach(pane => pane.classList.remove('active'));
// Add active class to the clicked tab
tab.classList.add('active');
// Get the target pane and update URL hash
const targetPaneId = tab.dataset.tab;
const targetPane = document.getElementById(targetPaneId);
// Check if targetPane exists before trying to manipulate it
if (targetPane) {
targetPane.classList.add('active');
if (tabContainer && tabContainer.classList.contains('lcp-support-hash')){
window.location.hash = targetPaneId; // Update the URL hash
}
} else {
console.error(`Tab pane with ID '${targetPaneId}' not found.`);
}
});
});
});
});

2
assets/js/lcp.js
View File

@ -89,7 +89,7 @@ document.addEventListener('DOMContentLoaded', function () {
}
// Add debounced scroll event listener
window.addEventListener('scroll', debounce(handleScroll, 20)); // 200ms debounce
window.addEventListener('scroll', debounce(handleScroll, 0)); // 200ms debounce
});