starred/mkdocs-material
1
0
Fork 0
mirror of https://github.com/squidfunk/mkdocs-material.git synced 2026-07-29 09:12:35 -04:00
Code Issues Packages Projects Releases Wiki Activity

Fixed IE bug leading to non-expanding navigation

Browse Source
This commit is contained in:
squidfunk
2017-01-13 00:09:16 +01:00
parent 0a08b2b1cd
commit f850641437
3 changed files with 12 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
src/assets/javascripts/components/Material/Nav/Collapse.js
View File

@@ -40,6 +40,10 @@ export default class Collapse {
/**
* Animate expand and collapse smoothly
*
* Internet Explorer 11 is very slow at recognizing changes on the dataset
* which results in the menu not expanding or collapsing properly. THerefore,
* for reasons of compatibility, the attribute accessors are used.
*/
update() {
const current = this.el_.getBoundingClientRect().height
@@ -48,34 +52,34 @@ export default class Collapse {
if (current) {
this.el_.style.maxHeight = `${current}px`
requestAnimationFrame(() => {
this.el_.dataset.mdState = "animate"
this.el_.setAttribute("data-md-state", "animate")
this.el_.style.maxHeight = "0px"
})
/* Collapsed, so expand */
} else {
this.el_.dataset.mdState = "expand"
this.el_.setAttribute("data-md-state", "expand")
this.el_.style.maxHeight = ""
/* Read height and unset pseudo-toggled state */
const height = this.el_.getBoundingClientRect().height
this.el_.dataset.mdState = ""
this.el_.removeAttribute("data-md-state")
/* Set initial state and animate */
this.el_.style.maxHeight = "0px"
requestAnimationFrame(() => {
this.el_.dataset.mdState = "animate"
this.el_.setAttribute("data-md-state", "animate")
this.el_.style.maxHeight = `${height}px`
})
}
/* Remove state on end of transition */
const end = ev => {
ev.target.dataset.mdState = ""
ev.target.removeAttribute("data-md-state")
ev.target.style.maxHeight = ""
/* Only fire once, so directly remove event listener */
ev.target.removeEventListener("transitionend", end, false)
ev.target.removeEventListener("transitionend", end)
}
this.el_.addEventListener("transitionend", end, false)
}