github-mirror/BookStack
2
0
Fork 0
mirror of https://github.com/BookStackApp/BookStack.git synced 2025-01-19 19:22:44 +08:00
Code Issues Actions 1 Packages Projects Releases Wiki 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
No known key found for this signature in database
GPG Key ID: 46D9F943C24A2EF9
2 changed files with 6 additions and 81 deletions
Show Stats 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) {

40
resources/assets/js/components/expand-toggle.js
View File

@ -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) {