mirror of
https://github.com/jellyfin/jellyfin-web
synced 2025-03-30 19:56:21 +00:00
update recording dialogs
This commit is contained in:
parent
fbc040dc9c
commit
90d30a0229
73 changed files with 1986 additions and 713 deletions
|
@ -3,19 +3,6 @@
|
|||
|
||||
var globalOnOpenCallback;
|
||||
|
||||
function enableAnimation() {
|
||||
|
||||
if (browser.animate) {
|
||||
return true;
|
||||
}
|
||||
|
||||
if (browser.edge) {
|
||||
return true;
|
||||
}
|
||||
|
||||
return false;
|
||||
}
|
||||
|
||||
function removeCenterFocus(dlg) {
|
||||
|
||||
if (layoutManager.tv) {
|
||||
|
@ -207,60 +194,6 @@
|
|||
}
|
||||
}
|
||||
|
||||
function scaleUp(elem, onFinish) {
|
||||
|
||||
var keyframes = [
|
||||
{ transform: 'scale(0)', offset: 0 },
|
||||
{ transform: 'none', offset: 1 }];
|
||||
var timing = elem.animationConfig.entry.timing;
|
||||
elem.animate(keyframes, timing).onfinish = onFinish;
|
||||
}
|
||||
|
||||
function slideUp(elem, onFinish) {
|
||||
|
||||
var keyframes = [
|
||||
{ transform: 'translate3d(0,30%,0)', opacity: 0, offset: 0 },
|
||||
{ transform: 'none', opacity: 1, offset: 1 }];
|
||||
var timing = elem.animationConfig.entry.timing;
|
||||
elem.animate(keyframes, timing).onfinish = onFinish;
|
||||
}
|
||||
|
||||
function fadeIn(elem, onFinish) {
|
||||
|
||||
var keyframes = [
|
||||
{ opacity: '0', offset: 0 },
|
||||
{ opacity: '1', offset: 1 }];
|
||||
var timing = elem.animationConfig.entry.timing;
|
||||
elem.animate(keyframes, timing).onfinish = onFinish;
|
||||
}
|
||||
|
||||
function scaleDown(elem) {
|
||||
|
||||
var keyframes = [
|
||||
{ transform: 'none', opacity: 1, offset: 0 },
|
||||
{ transform: 'scale(0)', opacity: 0, offset: 1 }];
|
||||
var timing = elem.animationConfig.exit.timing;
|
||||
return elem.animate(keyframes, timing);
|
||||
}
|
||||
|
||||
function fadeOut(elem) {
|
||||
|
||||
var keyframes = [
|
||||
{ opacity: '1', offset: 0 },
|
||||
{ opacity: '0', offset: 1 }];
|
||||
var timing = elem.animationConfig.exit.timing;
|
||||
return elem.animate(keyframes, timing);
|
||||
}
|
||||
|
||||
function slideDown(elem, onFinish) {
|
||||
|
||||
var keyframes = [
|
||||
{ transform: 'none', opacity: 1, offset: 0 },
|
||||
{ transform: 'translate3d(0,30%,0)', opacity: 0, offset: 1 }];
|
||||
var timing = elem.animationConfig.entry.timing;
|
||||
return elem.animate(keyframes, timing);
|
||||
}
|
||||
|
||||
function closeDialog(dlg) {
|
||||
|
||||
if (!dlg.classList.contains('hide')) {
|
||||
|
@ -274,34 +207,13 @@
|
|||
focusManager.popScope(dlg);
|
||||
|
||||
dlg.classList.add('hide');
|
||||
if (dlg.close) {
|
||||
dlg.close();
|
||||
} else {
|
||||
dlg.dispatchEvent(new CustomEvent('close', {
|
||||
bubbles: false,
|
||||
cancelable: false
|
||||
}));
|
||||
}
|
||||
dlg.dispatchEvent(new CustomEvent('close', {
|
||||
bubbles: false,
|
||||
cancelable: false
|
||||
}));
|
||||
};
|
||||
if (!dlg.animationConfig) {
|
||||
onAnimationFinish();
|
||||
return;
|
||||
}
|
||||
|
||||
var animation;
|
||||
|
||||
if (dlg.animationConfig.exit.name === 'fadeout') {
|
||||
animation = fadeOut(dlg);
|
||||
} else if (dlg.animationConfig.exit.name === 'scaledown') {
|
||||
animation = scaleDown(dlg);
|
||||
} else if (dlg.animationConfig.exit.name === 'slidedown') {
|
||||
animation = slideDown(dlg);
|
||||
} else {
|
||||
onAnimationFinish();
|
||||
return;
|
||||
}
|
||||
|
||||
animation.onfinish = onAnimationFinish;
|
||||
animateDialogClose(dlg, onAnimationFinish);
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -314,17 +226,27 @@
|
|||
}
|
||||
};
|
||||
|
||||
if (!dlg.animationConfig) {
|
||||
onAnimationFinish();
|
||||
return;
|
||||
}
|
||||
if (dlg.animationConfig.entry.name === 'fadein') {
|
||||
fadeIn(dlg, onAnimationFinish);
|
||||
} else if (dlg.animationConfig.entry.name === 'scaleup') {
|
||||
scaleUp(dlg, onAnimationFinish);
|
||||
} else if (dlg.animationConfig.entry.name === 'slideup') {
|
||||
slideUp(dlg, onAnimationFinish);
|
||||
setTimeout(onAnimationFinish, dlg.animationConfig.entry.timing.duration);
|
||||
}
|
||||
|
||||
function animateDialogClose(dlg, onAnimationFinish) {
|
||||
|
||||
switch (dlg.animationConfig.exit.name) {
|
||||
|
||||
case 'fadeout':
|
||||
dlg.style.animation = 'fadeout ' + dlg.animationConfig.exit.timing.duration + 'ms ease-out normal both';
|
||||
break;
|
||||
case 'scaledown':
|
||||
dlg.style.animation = 'scaledown ' + dlg.animationConfig.exit.timing.duration + 'ms ease-out normal both';
|
||||
break;
|
||||
case 'slidedown':
|
||||
dlg.style.animation = 'slidedown ' + dlg.animationConfig.exit.timing.duration + 'ms ease-out normal both';
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
|
||||
setTimeout(onAnimationFinish, dlg.animationConfig.exit.timing.duration);
|
||||
}
|
||||
|
||||
function shouldLockDocumentScroll(options) {
|
||||
|
@ -411,7 +333,6 @@
|
|||
// scale up
|
||||
'entry': {
|
||||
name: entryAnimation,
|
||||
node: dlg,
|
||||
timing: {
|
||||
duration: entryAnimationDuration,
|
||||
easing: 'ease-out'
|
||||
|
@ -420,7 +341,6 @@
|
|||
// fade out
|
||||
'exit': {
|
||||
name: exitAnimation,
|
||||
node: dlg,
|
||||
timing: {
|
||||
duration: exitAnimationDuration,
|
||||
easing: 'ease-out',
|
||||
|
@ -429,11 +349,6 @@
|
|||
}
|
||||
};
|
||||
|
||||
// too buggy in IE, not even worth it
|
||||
if (!enableAnimation()) {
|
||||
dlg.animationConfig = null;
|
||||
}
|
||||
|
||||
dlg.classList.add('dialog');
|
||||
|
||||
if (options.scrollX) {
|
||||
|
@ -460,6 +375,21 @@
|
|||
dlg.classList.add('dialog-' + options.size);
|
||||
}
|
||||
|
||||
switch (dlg.animationConfig.entry.name) {
|
||||
|
||||
case 'fadein':
|
||||
dlg.style.animation = 'fadein ' + entryAnimationDuration + 'ms ease-out normal';
|
||||
break;
|
||||
case 'scaleup':
|
||||
dlg.style.animation = 'scaleup ' + entryAnimationDuration + 'ms ease-out normal both';
|
||||
break;
|
||||
case 'slideup':
|
||||
dlg.style.animation = 'slideup ' + entryAnimationDuration + 'ms ease-out normal';
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
|
||||
return dlg;
|
||||
}
|
||||
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue