mirrors/jellyfin-web
1
0
Fork 0
mirror of https://github.com/jellyfin/jellyfin-web synced 2025-03-30 19:56:21 +00:00
Code Activity

Add forced reflow of emby-collapse back and request animation frame

Browse source
This commit is contained in:
MrTimscampi 2020-07-26 18:26:24 +02:00
parent 4a80a5ee2c
commit 54166af4d1
1 changed files with 38 additions and 30 deletions
Download patch file Download diff file Expand all files Collapse all files

68
src/elements/emby-collapse/emby-collapse.js
View file

@ -7,43 +7,51 @@ import 'emby-button';
const EmbyButtonPrototype = Object.create(HTMLDivElement.prototype); const EmbyButtonPrototype = Object.create(HTMLDivElement.prototype);
function slideDownToShow(button, elem) { function slideDownToShow(button, elem) {
requestAnimationFrame(() => {
elem.classList.remove('hide'); elem.classList.remove('hide');
elem.classList.add('expanded'); elem.classList.add('expanded');
elem.style.height = 'auto';
var height = elem.offsetHeight + 'px';
elem.style.height = height;
setTimeout(function () {
if (elem.classList.contains('expanded')) {
elem.classList.remove('hide');
} else {
elem.classList.add('hide');
}
elem.style.height = 'auto'; elem.style.height = 'auto';
}, 300); var height = elem.offsetHeight + 'px';
elem.style.height = '0';
// trigger reflow
// TODO: Find a better way to do this
const newHeight = elem.offsetHeight; /* eslint-disable-line no-unused-vars */
elem.style.height = height;
const icon = button.querySelector('.material-icons'); setTimeout(function () {
icon.classList.add('emby-collapse-expandIconExpanded'); if (elem.classList.contains('expanded')) {
elem.classList.remove('hide');
} else {
elem.classList.add('hide');
}
elem.style.height = 'auto';
}, 300);
const icon = button.querySelector('.material-icons');
icon.classList.add('emby-collapse-expandIconExpanded');
});
} }
function slideUpToHide(button, elem) { function slideUpToHide(button, elem) {
requestAnimationFrame(() => {
elem.style.height = elem.offsetHeight + 'px';
// trigger reflow
// TODO: Find a better way to do this
const newHeight = elem.offsetHeight; /* eslint-disable-line no-unused-vars */
elem.classList.remove('expanded');
elem.style.height = '0';
elem.style.height = elem.offsetHeight + 'px'; setTimeout(function () {
if (elem.classList.contains('expanded')) {
elem.classList.remove('hide');
} else {
elem.classList.add('hide');
}
}, 300);
elem.classList.remove('expanded'); const icon = button.querySelector('.material-icons');
elem.style.height = '0'; icon.classList.remove('emby-collapse-expandIconExpanded');
});
setTimeout(function () {
if (elem.classList.contains('expanded')) {
elem.classList.remove('hide');
} else {
elem.classList.add('hide');
}
}, 300);
const icon = button.querySelector('.material-icons');
icon.classList.remove('emby-collapse-expandIconExpanded');
} }
function onButtonClick(e) { function onButtonClick(e) {