OpenSourceArk/mkdocs-material
1
0
Fork 0
mirror of https://github.com/squidfunk/mkdocs-material.git synced 2024-06-14 11:52:32 +03: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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
material/assets/javascripts/application-de6db8382f.js → material/assets/javascripts/application-16f434a21a.js
View File

File diff suppressed because one or more lines are too long

2
material/base.html
View File

@ -105,7 +105,7 @@
{% endblock %}
</div>
{% block scripts %}
<script src="{{ base_url }}/assets/javascripts/application-de6db8382f.js"></script>
<script src="{{ base_url }}/assets/javascripts/application-16f434a21a.js"></script>
<script>var config={url:{base:"{{ base_url }}"}},app=new Application(config);app.initialize()</script>
{% for path in extra_javascript %}
<script src="{{ path }}"></script>

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)
}