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 %} {% endblock %}
</div> </div>
{% block scripts %} {% 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> <script>var config={url:{base:"{{ base_url }}"}},app=new Application(config);app.initialize()</script>
{% for path in extra_javascript %} {% for path in extra_javascript %}
<script src="{{ path }}"></script> <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 * 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() { update() {
const current = this.el_.getBoundingClientRect().height const current = this.el_.getBoundingClientRect().height
@ -48,34 +52,34 @@ export default class Collapse {
if (current) { if (current) {
this.el_.style.maxHeight = `${current}px` this.el_.style.maxHeight = `${current}px`
requestAnimationFrame(() => { requestAnimationFrame(() => {
this.el_.dataset.mdState = "animate" this.el_.setAttribute("data-md-state", "animate")
this.el_.style.maxHeight = "0px" this.el_.style.maxHeight = "0px"
}) })
/* Collapsed, so expand */ /* Collapsed, so expand */
} else { } else {
this.el_.dataset.mdState = "expand" this.el_.setAttribute("data-md-state", "expand")
this.el_.style.maxHeight = "" this.el_.style.maxHeight = ""
/* Read height and unset pseudo-toggled state */ /* Read height and unset pseudo-toggled state */
const height = this.el_.getBoundingClientRect().height const height = this.el_.getBoundingClientRect().height
this.el_.dataset.mdState = "" this.el_.removeAttribute("data-md-state")
/* Set initial state and animate */ /* Set initial state and animate */
this.el_.style.maxHeight = "0px" this.el_.style.maxHeight = "0px"
requestAnimationFrame(() => { requestAnimationFrame(() => {
this.el_.dataset.mdState = "animate" this.el_.setAttribute("data-md-state", "animate")
this.el_.style.maxHeight = `${height}px` this.el_.style.maxHeight = `${height}px`
}) })
} }
/* Remove state on end of transition */ /* Remove state on end of transition */
const end = ev => { const end = ev => {
ev.target.dataset.mdState = "" ev.target.removeAttribute("data-md-state")
ev.target.style.maxHeight = "" ev.target.style.maxHeight = ""
/* Only fire once, so directly remove event listener */ /* 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) this.el_.addEventListener("transitionend", end, false)
} }