Skip to content

Commit d6afc95

Browse files
authored
Hide navbar entries that are still in animation (#646)
1 parent 2d974d6 commit d6afc95

File tree

2 files changed

+33
-5
lines changed

2 files changed

+33
-5
lines changed

.pre-commit-config.yaml

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,3 @@
1-
default_language_version:
2-
python: python3.12
31
repos:
42
- repo: https://github.com/myint/autoflake
53
rev: v2.3.1

myhpi/static/js/navbar.js

Lines changed: 33 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,20 @@
1717
* @returns True if it is collapsed, false otherwise.
1818
*/
1919
const isCollapsed = (navItemContainer) => {
20-
return !navItemContainer.classList.contains("show")
20+
return (
21+
!navItemContainer.classList.contains("show") &&
22+
!isCollapsing(navItemContainer)
23+
)
24+
}
25+
26+
/**
27+
* Returns whether the given navItemContainer is currently collapsing.
28+
*
29+
* @param {Node} navItemContainer Container to check.
30+
* @returns True if it is collapsing, false otherwise.
31+
*/
32+
const isCollapsing = (navItemContainer) => {
33+
return navItemContainer.classList.contains("collapsing")
2134
}
2235

2336
/**
@@ -66,7 +79,7 @@ const collapseChildren = (navItemContainer) => {
6679
* Collapses all navItemContainers on the same navbar level as the given navItemContainer, except for the given one.
6780
*
6881
* The level containers are not determined by the DOM, but the wagtail page tree encoded in the node ids, data-attributes, etc.
69-
* Thus we can arrange the containers to our liking, not necessarily in a tree layout, while still collapsing the containers
82+
* Thus, we can arrange the containers to our liking, not necessarily in a tree layout, while still collapsing the containers
7083
* on the same wagtail page tree level.
7184
*
7285
* @param {Node} navItemContainer Container on whose level the other containers should be collapsed.
@@ -79,7 +92,24 @@ const collapseOthersOnSameLevel = (navItemContainer) => {
7992
navContainersOnSameLevel.forEach((navContainerOnSameLevel) => {
8093
if (navContainerOnSameLevel === navItemContainer) return
8194
if (isCollapsed(navContainerOnSameLevel)) return
82-
bootstrap.Collapse.getOrCreateInstance(navContainerOnSameLevel).hide()
95+
// When opening two navItems in quick succession, the first might not yet be expanded, but in the process of expanding. Bootstrap calls this state "collapsing".
96+
// Hiding a collapsing item has no effect; the first navItem would stay expanded after finishing. Both navItems would be expanded.
97+
// So we wait for the collapsing to finish before hiding the item properly.
98+
if (isCollapsing(navContainerOnSameLevel)) {
99+
navContainerOnSameLevel.addEventListener(
100+
"transitionend",
101+
(event) => {
102+
if (!isCollapsed(event.target)) {
103+
bootstrap.Collapse.getOrCreateInstance(
104+
navContainerOnSameLevel,
105+
).hide()
106+
}
107+
},
108+
{ once: true },
109+
)
110+
} else {
111+
bootstrap.Collapse.getOrCreateInstance(navContainerOnSameLevel).hide()
112+
}
83113
})
84114
}
85115

0 commit comments

Comments
 (0)