Fix eye button hover and modal back button behavior
- Keep details panel showing sector info when hovering eye button - Don't reset details when mouse moves from chart to eye button - Close modals first when pressing browser back button Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
parent
58082e02f4
commit
23b32fab31
26
app.js
26
app.js
@ -65,6 +65,25 @@ function navigateForward() {
|
|||||||
|
|
||||||
// Listen for browser back/forward via popstate
|
// Listen for browser back/forward via popstate
|
||||||
window.addEventListener('popstate', function(e) {
|
window.addEventListener('popstate', function(e) {
|
||||||
|
// If a modal is open, close it and push state back to prevent navigation
|
||||||
|
const rowDetailModal = document.getElementById('row-detail-modal');
|
||||||
|
const transactionModal = document.getElementById('transaction-modal');
|
||||||
|
|
||||||
|
if (rowDetailModal && rowDetailModal.style.display !== 'none') {
|
||||||
|
closeRowDetailModal();
|
||||||
|
// Push state back to cancel the back navigation
|
||||||
|
history.pushState(e.state, '');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (transactionModal && transactionModal.style.display !== 'none') {
|
||||||
|
closeTransactionModal();
|
||||||
|
// Push state back to cancel the back navigation
|
||||||
|
history.pushState(e.state, '');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// No modal open - handle drill-down navigation
|
||||||
if (e.state && e.state.drillDown !== undefined) {
|
if (e.state && e.state.drillDown !== undefined) {
|
||||||
const stateIndex = e.state.drillDown;
|
const stateIndex = e.state.drillDown;
|
||||||
if (stateIndex >= 0 && stateIndex < drillDownHistory.length) {
|
if (stateIndex >= 0 && stateIndex < drillDownHistory.length) {
|
||||||
@ -1468,6 +1487,7 @@ function setupHoverEvents(sunburstData, contextName = null) {
|
|||||||
// Track when mouse is over the button
|
// Track when mouse is over the button
|
||||||
chartEyeBtn.addEventListener('mouseenter', () => {
|
chartEyeBtn.addEventListener('mouseenter', () => {
|
||||||
isOverEyeButton = true;
|
isOverEyeButton = true;
|
||||||
|
isInsideSection = true; // Keep details panel showing sector info
|
||||||
if (hideButtonTimeout) {
|
if (hideButtonTimeout) {
|
||||||
clearTimeout(hideButtonTimeout);
|
clearTimeout(hideButtonTimeout);
|
||||||
hideButtonTimeout = null;
|
hideButtonTimeout = null;
|
||||||
@ -1817,7 +1837,11 @@ function setupHoverEvents(sunburstData, contextName = null) {
|
|||||||
});
|
});
|
||||||
|
|
||||||
// Also reset when mouse leaves the chart container entirely
|
// Also reset when mouse leaves the chart container entirely
|
||||||
chartDom.addEventListener('mouseleave', function() {
|
chartDom.addEventListener('mouseleave', function(e) {
|
||||||
|
// Don't reset if moving to the eye button
|
||||||
|
if (e.relatedTarget === chartEyeBtn || (e.relatedTarget && chartEyeBtn.contains(e.relatedTarget))) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
isInsideSection = false;
|
isInsideSection = false;
|
||||||
showDefaultView();
|
showDefaultView();
|
||||||
});
|
});
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user