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

update web-animations.html

This commit is contained in:
Luke Pulverenti 2016-05-17 01:45:06 -04:00
parent f2e329c22d
commit 30db5a009c
6 changed files with 21 additions and 25 deletions

View file

@ -8,4 +8,7 @@ Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
--> -->
<script src="../web-animations-js/web-animations-next-lite.min.js"></script> <!--<script src="../web-animations-js/web-animations-next-lite.min.js"></script>-->
<script>
require(['webAnimations']);
</script>

View file

@ -373,7 +373,7 @@ define(['browser'], function (browser) {
currentUrls = []; currentUrls = [];
} }
if (enableAnimation() && !browser.animate) { if (enableAnimation() && !document.documentElement.animate) {
require(['webAnimations']); require(['webAnimations']);
} }

View file

@ -4,6 +4,8 @@
vertical-align: middle; vertical-align: middle;
width: auto; width: auto;
margin: 0; margin: 0;
padding-top: 0;
padding-bottom: 0;
} }
.btnNotificationsInner { .btnNotificationsInner {

View file

@ -5,7 +5,8 @@
} }
[is=paper-icon-button-light] iron-icon, [is=paper-icon-button-light] img { [is=paper-icon-button-light] iron-icon, [is=paper-icon-button-light] img {
width: 100%; /* Don't specify both dimensions or it may not get sized properly */
/*width: 100%;*/
height: 100%; height: 100%;
} }

View file

@ -15,14 +15,14 @@
function fadeInRight(elem) { function fadeInRight(elem) {
var pct = browserInfo.mobile ? '2%' : '1%'; var pct = browserInfo.mobile ? '2%' : '0.5%';
var keyframes = [ var keyframes = [
{ opacity: '0', transform: 'translate3d(' + pct + ', 0, 0)', offset: 0 }, { opacity: '0', transform: 'translate3d(' + pct + ', 0, 0)', offset: 0 },
{ opacity: '1', transform: 'none', offset: 1 }]; { opacity: '1', transform: 'none', offset: 1 }];
elem.animate(keyframes, { elem.animate(keyframes, {
duration: 300, duration: 160,
iterations: 1, iterations: 1,
easing: 'ease-out' easing: 'ease-out'
}); });
@ -40,21 +40,12 @@
return; return;
} }
elem.animate(keyframes, { elem.animate(keyframes, {
duration: 160, duration: 120,
iterations: 1, iterations: 1,
easing: 'ease-out' easing: 'ease-out'
}); });
} }
function animateTabOnShow(newPanel, animateTabs, index) {
if (animateTabs && animateTabs.indexOf(index) != -1 && /*browserInfo.animate &&*/ newPanel.animate) {
setTimeout(function () {
fadeInRight(newPanel);
}, 160);
}
}
var libraryBrowser = (function (window, document, screen) { var libraryBrowser = (function (window, document, screen) {
// Regular Expressions for parsing tags and attributes // Regular Expressions for parsing tags and attributes
@ -301,11 +292,13 @@
var index = parseInt(link.getAttribute('data-index')); var index = parseInt(link.getAttribute('data-index'));
var newPanel = panels[index]; var newPanel = panels[index];
animateTabOnShow(newPanel, animateTabs, index);
// If toCenter is called syncronously within the click event, it sometimes ends up canceling it // If toCenter is called syncronously within the click event, it sometimes ends up canceling it
setTimeout(function () { setTimeout(function () {
if (animateTabs && animateTabs.indexOf(index) != -1 && /*browserInfo.animate &&*/ newPanel.animate) {
fadeInRight(newPanel);
}
tabs.dispatchEvent(new CustomEvent("tabchange", { tabs.dispatchEvent(new CustomEvent("tabchange", {
detail: { detail: {
selectedTabIndex: index selectedTabIndex: index
@ -315,7 +308,7 @@
newPanel.classList.add('is-active'); newPanel.classList.add('is-active');
//scrollHelper.toCenter(tabs, link, true); //scrollHelper.toCenter(tabs, link, true);
}, 160); }, 120);
} }
}); });

View file

@ -157,17 +157,21 @@
case 0: case 0:
break; break;
case 1: case 1:
document.body.classList.add('autoScrollY');
depends.push('scripts/livetvguide'); depends.push('scripts/livetvguide');
break; break;
case 2: case 2:
document.body.classList.remove('autoScrollY');
depends.push('scripts/livetvchannels'); depends.push('scripts/livetvchannels');
depends.push('paper-icon-item'); depends.push('paper-icon-item');
depends.push('paper-item-body'); depends.push('paper-item-body');
break; break;
case 3: case 3:
document.body.classList.remove('autoScrollY');
depends.push('scripts/livetvrecordings'); depends.push('scripts/livetvrecordings');
break; break;
case 4: case 4:
document.body.classList.remove('autoScrollY');
depends.push('scripts/livetvseriestimers'); depends.push('scripts/livetvseriestimers');
break; break;
default: default:
@ -210,13 +214,6 @@
loadTab(view, parseInt(e.detail.selectedTabIndex)); loadTab(view, parseInt(e.detail.selectedTabIndex));
}); });
view.addEventListener('viewshow', function (e) {
// Needed on the guide tab
// Ideally this should be moved to the guide tab on show/hide
document.body.classList.add('autoScrollY');
});
view.addEventListener('viewbeforehide', function (e) { view.addEventListener('viewbeforehide', function (e) {
document.body.classList.remove('autoScrollY'); document.body.classList.remove('autoScrollY');