X-Git-Url: http://source.bookstackapp.com/bookstack/blobdiff_plain/07b889547d28e68e5fc8f923c166bd607da17ad7..refs/pull/1576/head:/resources/assets/js/components/expand-toggle.js diff --git a/resources/assets/js/components/expand-toggle.js b/resources/assets/js/components/expand-toggle.js index a6a389818..cce1b215c 100644 --- a/resources/assets/js/components/expand-toggle.js +++ b/resources/assets/js/components/expand-toggle.js @@ -1,3 +1,4 @@ +import {slideUp, slideDown} from "../services/animations"; class ExpandToggle { @@ -14,46 +15,11 @@ class ExpandToggle { } open(elemToToggle) { - elemToToggle.style.display = 'block'; - elemToToggle.style.height = ''; - let height = elemToToggle.getBoundingClientRect().height; - elemToToggle.style.height = '0px'; - elemToToggle.style.overflow = 'hidden'; - elemToToggle.style.transition = 'height ease-in-out 240ms'; - - let transitionEndBound = onTransitionEnd.bind(this); - function onTransitionEnd() { - elemToToggle.style.overflow = ''; - elemToToggle.style.height = ''; - elemToToggle.style.transition = ''; - elemToToggle.removeEventListener('transitionend', transitionEndBound); - } - - setTimeout(() => { - elemToToggle.style.height = `${height}px`; - elemToToggle.addEventListener('transitionend', transitionEndBound) - }, 1); + slideDown(elemToToggle, 200); } close(elemToToggle) { - elemToToggle.style.display = 'block'; - elemToToggle.style.height = elemToToggle.getBoundingClientRect().height + 'px'; - elemToToggle.style.overflow = 'hidden'; - elemToToggle.style.transition = 'all ease-in-out 240ms'; - - let transitionEndBound = onTransitionEnd.bind(this); - function onTransitionEnd() { - elemToToggle.style.overflow = ''; - elemToToggle.style.height = ''; - elemToToggle.style.transition = ''; - elemToToggle.style.display = 'none'; - elemToToggle.removeEventListener('transitionend', transitionEndBound); - } - - setTimeout(() => { - elemToToggle.style.height = `0px`; - elemToToggle.addEventListener('transitionend', transitionEndBound) - }, 1); + slideUp(elemToToggle, 200); } click(event) {