Add Hide All / Show All button for indicators

- Add visibility-toggle button next to Clear All button
- Button toggles between 'Hide All' and 'Show All' text
- Hides/shows all indicators with single click
- Uses event delegation to handle button clicks in container
This commit is contained in:
DiTus
2026-02-26 20:38:26 +01:00
parent 5059a7a8b6
commit 659571cbc5

View File

@ -119,6 +119,9 @@ export function renderIndicatorPanel() {
const favoriteIds = new Set(userPresets.favorites || []); const favoriteIds = new Set(userPresets.favorites || []);
const allVisible = activeIndicators.length > 0 ? activeIndicators.every(ind => ind.visible !== false) : false;
const visibilityBtnText = allVisible ? 'Hide All' : 'Show All';
container.innerHTML = ` container.innerHTML = `
<div class="indicator-panel"> <div class="indicator-panel">
<!-- Search Bar --> <!-- Search Bar -->
@ -162,6 +165,7 @@ export function renderIndicatorPanel() {
<div class="indicator-section active"> <div class="indicator-section active">
<div class="section-title"> <div class="section-title">
${activeIndicators.length} Active ${activeIndicators.length} Active
${activeIndicators.length > 0 ? `<button class="visibility-toggle">${visibilityBtnText}</button>` : ''}
${activeIndicators.length > 0 ? `<button class="clear-all">Clear All</button>` : ''} ${activeIndicators.length > 0 ? `<button class="clear-all">Clear All</button>` : ''}
</div> </div>
${activeIndicators.slice().reverse().map(ind => renderActiveIndicator(ind)).join('')} ${activeIndicators.slice().reverse().map(ind => renderActiveIndicator(ind)).join('')}
@ -392,6 +396,15 @@ function setupEventListeners() {
return; return;
} }
// Visibility toggle (Hide All / Show All) button
const visibilityToggleBtn = e.target.closest('.visibility-toggle');
if (visibilityToggleBtn) {
if (window.toggleAllIndicatorsVisibility) {
window.toggleAllIndicatorsVisibility();
}
return;
}
// Expand/collapse button // Expand/collapse button
const expandBtn = e.target.closest('.indicator-btn.expand'); const expandBtn = e.target.closest('.indicator-btn.expand');
if (expandBtn) { if (expandBtn) {
@ -481,6 +494,17 @@ window.clearAllIndicators = function() {
drawIndicatorsOnChart(); drawIndicatorsOnChart();
} }
window.toggleAllIndicatorsVisibility = function() {
const allVisible = activeIndicators.every(ind => ind.visible !== false);
activeIndicators.forEach(ind => {
ind.visible = !allVisible;
});
drawIndicatorsOnChart();
renderIndicatorPanel();
}
function removeIndicatorById(id) { function removeIndicatorById(id) {
const idx = activeIndicators.findIndex(a => a.id === id); const idx = activeIndicators.findIndex(a => a.id === id);
if (idx < 0) return; if (idx < 0) return;