webapp/bookstack
1
0
Fork 0
mirror of https://github.com/BookStackApp/BookStack.git synced 2025-07-28 17:02:04 +03:00
Code Activity

Converted existing custom slideup/down implementations

Browse Source
This commit is contained in:
Dan Brown
2019-06-07 16:00:34 +01:00
parent 2b929f5d95
commit 7634a84334
2 changed files with 6 additions and 81 deletions
Download Patch File Download Diff File Expand all files Collapse all files

47
resources/assets/js/components/chapter-toggle.js
View File

@ -1,3 +1,4 @@
import {slideUp, slideDown} from "../services/animations";
class ChapterToggle {
@ -9,56 +10,14 @@ class ChapterToggle {
open() {
const list = this.elem.parentNode.querySelector('.inset-list');
this.elem.classList.add('open');
list.style.display = 'block';
list.style.maxHeight = '';
const maxHeight = list.getBoundingClientRect().height + 10;
list.style.maxHeight = '0px';
list.style.overflow = 'hidden';
list.style.transition = 'max-height ease-in-out 240ms';
let transitionEndBound = onTransitionEnd.bind(this);
function onTransitionEnd() {
list.style.overflow = '';
list.style.maxHeight = '';
list.style.transition = '';
list.style.display = `block`;
list.removeEventListener('transitionend', transitionEndBound);
}
setTimeout(() => {
requestAnimationFrame(() => {
list.style.maxHeight = `${maxHeight}px`;
list.addEventListener('transitionend', transitionEndBound)
});
}, 1);
slideDown(list, 240);
}
close() {
const list = this.elem.parentNode.querySelector('.inset-list');
list.style.display = 'block';
this.elem.classList.remove('open');
list.style.maxHeight = list.getBoundingClientRect().height + 'px';
list.style.overflow = 'hidden';
list.style.transition = 'max-height ease-in-out 240ms';
const transitionEndBound = onTransitionEnd.bind(this);
function onTransitionEnd() {
list.style.overflow = '';
list.style.maxHeight = '';
list.style.transition = '';
list.style.display = 'none';
list.removeEventListener('transitionend', transitionEndBound);
}
setTimeout(() => {
requestAnimationFrame(() => {
list.style.maxHeight = `0px`;
list.addEventListener('transitionend', transitionEndBound)
});
}, 1);
slideUp(list, 240);
}
click(event) {