mirror of
https://github.com/BookStackApp/BookStack.git
synced 2024-08-27 04:32:14 +00:00
Tried to make chapter toggles a little smoother in FF
This commit is contained in:
parent
07bc0612c0
commit
0931ff38e9
@ -8,52 +8,56 @@ class ChapterToggle {
|
|||||||
}
|
}
|
||||||
|
|
||||||
open() {
|
open() {
|
||||||
let list = this.elem.parentNode.querySelector('.inset-list');
|
const list = this.elem.parentNode.querySelector('.inset-list');
|
||||||
|
|
||||||
this.elem.classList.add('open');
|
this.elem.classList.add('open');
|
||||||
list.style.display = 'block';
|
list.style.display = 'block';
|
||||||
list.style.height = '';
|
list.style.maxHeight = '';
|
||||||
let height = list.getBoundingClientRect().height;
|
const maxHeight = list.getBoundingClientRect().height + 10;
|
||||||
list.style.height = '0px';
|
list.style.maxHeight = '0px';
|
||||||
list.style.overflow = 'hidden';
|
list.style.overflow = 'hidden';
|
||||||
list.style.transition = 'height ease-in-out 240ms';
|
list.style.transition = 'max-height ease-in-out 240ms';
|
||||||
|
|
||||||
let transitionEndBound = onTransitionEnd.bind(this);
|
let transitionEndBound = onTransitionEnd.bind(this);
|
||||||
function onTransitionEnd() {
|
function onTransitionEnd() {
|
||||||
list.style.overflow = '';
|
list.style.overflow = '';
|
||||||
list.style.height = '';
|
list.style.maxHeight = '';
|
||||||
list.style.transition = '';
|
list.style.transition = '';
|
||||||
list.style.display = `block`;
|
list.style.display = `block`;
|
||||||
list.removeEventListener('transitionend', transitionEndBound);
|
list.removeEventListener('transitionend', transitionEndBound);
|
||||||
}
|
}
|
||||||
|
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
list.style.height = `${height}px`;
|
requestAnimationFrame(() => {
|
||||||
|
list.style.maxHeight = `${maxHeight}px`;
|
||||||
list.addEventListener('transitionend', transitionEndBound)
|
list.addEventListener('transitionend', transitionEndBound)
|
||||||
|
});
|
||||||
}, 1);
|
}, 1);
|
||||||
}
|
}
|
||||||
|
|
||||||
close() {
|
close() {
|
||||||
let list = this.elem.parentNode.querySelector('.inset-list');
|
const list = this.elem.parentNode.querySelector('.inset-list');
|
||||||
|
|
||||||
this.elem.classList.remove('open');
|
|
||||||
list.style.display = 'block';
|
list.style.display = 'block';
|
||||||
list.style.height = list.getBoundingClientRect().height + 'px';
|
this.elem.classList.remove('open');
|
||||||
|
list.style.maxHeight = list.getBoundingClientRect().height + 'px';
|
||||||
list.style.overflow = 'hidden';
|
list.style.overflow = 'hidden';
|
||||||
list.style.transition = 'height ease-in-out 240ms';
|
list.style.transition = 'max-height ease-in-out 240ms';
|
||||||
|
|
||||||
let transitionEndBound = onTransitionEnd.bind(this);
|
const transitionEndBound = onTransitionEnd.bind(this);
|
||||||
function onTransitionEnd() {
|
function onTransitionEnd() {
|
||||||
list.style.overflow = '';
|
list.style.overflow = '';
|
||||||
list.style.height = '';
|
list.style.maxHeight = '';
|
||||||
list.style.transition = '';
|
list.style.transition = '';
|
||||||
list.style.display = 'none';
|
list.style.display = 'none';
|
||||||
list.removeEventListener('transitionend', transitionEndBound);
|
list.removeEventListener('transitionend', transitionEndBound);
|
||||||
}
|
}
|
||||||
|
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
list.style.height = `0px`;
|
requestAnimationFrame(() => {
|
||||||
|
list.style.maxHeight = `0px`;
|
||||||
list.addEventListener('transitionend', transitionEndBound)
|
list.addEventListener('transitionend', transitionEndBound)
|
||||||
|
});
|
||||||
}, 1);
|
}, 1);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -178,7 +178,7 @@
|
|||||||
display: none;
|
display: none;
|
||||||
padding-left: 0;
|
padding-left: 0;
|
||||||
}
|
}
|
||||||
.sub-menu.open {
|
[chapter-toggle].open + .sub-menu {
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user