Infra-Mirrors/BookStack
1
0
Fork 0
mirror of https://github.com/BookStackApp/BookStack.git synced 2024-07-17 00:32:36 +00:00
Code Issues Packages Projects Releases Wiki Activity

Tried to make chapter toggles a little smoother in FF

Browse Source
This commit is contained in:
Dan Brown 2018-09-22 16:36:35 +01:00
parent 07bc0612c0
commit 0931ff38e9
No known key found for this signature in database
GPG Key ID: 46D9F943C24A2EF9
2 changed files with 21 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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.addEventListener('transitionend', transitionEndBound) list.style.maxHeight = `${maxHeight}px`;
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.addEventListener('transitionend', transitionEndBound) list.style.maxHeight = `0px`;
list.addEventListener('transitionend', transitionEndBound)
});
}, 1); }, 1);
} }

2
resources/assets/sass/_lists.scss
View File

@ -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;
} }
} }