mirror of
https://github.com/BookStackApp/BookStack.git
synced 2024-10-01 05:36:00 +00:00
Converted existing custom slideup/down implementations
This commit is contained in:
parent
2b929f5d95
commit
7634a84334
@ -1,3 +1,4 @@
|
|||||||
|
import {slideUp, slideDown} from "../services/animations";
|
||||||
|
|
||||||
class ChapterToggle {
|
class ChapterToggle {
|
||||||
|
|
||||||
@ -9,56 +10,14 @@ class ChapterToggle {
|
|||||||
|
|
||||||
open() {
|
open() {
|
||||||
const 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';
|
slideDown(list, 240);
|
||||||
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);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
close() {
|
close() {
|
||||||
const list = this.elem.parentNode.querySelector('.inset-list');
|
const list = this.elem.parentNode.querySelector('.inset-list');
|
||||||
|
|
||||||
list.style.display = 'block';
|
|
||||||
this.elem.classList.remove('open');
|
this.elem.classList.remove('open');
|
||||||
list.style.maxHeight = list.getBoundingClientRect().height + 'px';
|
slideUp(list, 240);
|
||||||
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);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
click(event) {
|
click(event) {
|
||||||
|
@ -1,3 +1,4 @@
|
|||||||
|
import {slideUp, slideDown} from "../services/animations";
|
||||||
|
|
||||||
class ExpandToggle {
|
class ExpandToggle {
|
||||||
|
|
||||||
@ -14,46 +15,11 @@ class ExpandToggle {
|
|||||||
}
|
}
|
||||||
|
|
||||||
open(elemToToggle) {
|
open(elemToToggle) {
|
||||||
elemToToggle.style.display = 'block';
|
slideDown(elemToToggle, 200);
|
||||||
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);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
close(elemToToggle) {
|
close(elemToToggle) {
|
||||||
elemToToggle.style.display = 'block';
|
slideUp(elemToToggle, 200);
|
||||||
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);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
click(event) {
|
click(event) {
|
||||||
|
Loading…
Reference in New Issue
Block a user