1
0
Fork 0
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:
Luke Pulverenti 2016-10-14 12:22:04 -04:00
parent fbc040dc9c
commit 90d30a0229
73 changed files with 1986 additions and 713 deletions

View file

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