cotugno/jellyfin-web
2
Fork 0
mirror of https://github.com/jellyfin/jellyfin-web.git synced 2024-11-17 19:08:18 -07:00
Code Issues Packages Projects Releases Wiki Activity

rework transitions

Browse Source
This commit is contained in:
Luke Pulverenti 2016-05-23 23:06:51 -04:00
parent 5d1cf10d82
commit 5a13f0c6dd
6 changed files with 69 additions and 58 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
dashboard-ui/bower_components/emby-webcomponents/.bower.json vendored
View File

@ -16,12 +16,12 @@
},
"devDependencies": {},
"ignore": [],
"version": "1.3.73",
"_release": "1.3.73",
"version": "1.3.74",
"_release": "1.3.74",
"_resolution": {
"type": "version",
"tag": "1.3.73",
"commit": "0727aaabe8c649aa53cd732507f11a295a581ac3"
"tag": "1.3.74",
"commit": "cb08b23d4989aaab3ee4b4ba5069eee6a96e04ad"
},
"_source": "https://github.com/MediaBrowser/emby-webcomponents.git",
"_target": "^1.2.0",

5
dashboard-ui/bower_components/emby-webcomponents/browserdeviceprofile.js vendored
View File

@ -151,6 +151,11 @@ define(['browser'], function (browser) {
function getMaxBitrate() {
// 10mbps
if (browser.xboxOne) {
return 10000000;
}
var userAgent = navigator.userAgent.toLowerCase();
if (browser.tizen) {

9
dashboard-ui/bower_components/emby-webcomponents/emby-select/emby-select.js vendored
View File

@ -101,13 +101,20 @@
EmbySelectPrototype.createdCallback = function () {
var parent = this.parentNode;
if (!parent.classList.contains('selectContainer')) {
var div = this.ownerDocument.createElement('div');
div.classList.add('selectContainer');
parent.replaceChild(div, this);
div.appendChild(this);
}
if (!this.id) {
this.id = 'select' + new Date().getTime();
}
this.addEventListener('mousedown', onMouseDown);
this.addEventListener('keydown', onKeyDown);
this.addEventListener('focus', onFocus);
this.addEventListener('keydown', onBlur);
this.addEventListener('blur', onBlur);
};
EmbySelectPrototype.attachedCallback = function () {

6
dashboard-ui/bower_components/emby-webcomponents/viewmanager/viewcontainer-lite.js vendored
View File

@ -116,7 +116,8 @@ define(['browser'], function (browser) {
var timings = {
duration: 450,
iterations: 1,
easing: 'ease-out'
easing: 'ease-out',
fill: 'both'
}
var animations = [];
@ -155,7 +156,8 @@ define(['browser'], function (browser) {
var timings = {
duration: 200,
iterations: 1,
easing: 'ease-out'
easing: 'ease-out',
fill: 'both'
}
var animations = [];

95
dashboard-ui/components/viewcontainer-lite.js
View File

@ -1,8 +1,9 @@
define(['browser'], function (browser) {
var allPages = document.querySelectorAll('.mainAnimatedPage');
var mainAnimatedPages = document.querySelector('.mainAnimatedPages');
var allPages = [];
var currentUrls = [];
var pageContainerCount = allPages.length;
var pageContainerCount = 3;
var selectedPageIndex = -1;
function enableAnimation() {
@ -26,7 +27,7 @@ define(['browser'], function (browser) {
cancelActiveAnimations();
var selected = getSelectedIndex(allPages);
var selected = selectedPageIndex;
var previousAnimatable = selected == -1 ? null : allPages[selected];
var pageIndex = selected + 1;
@ -60,35 +61,48 @@ define(['browser'], function (browser) {
require(dependencies, function () {
var animatable = allPages[pageIndex];
var currentPage = animatable.querySelector('.page-view');
var currentPage = allPages[pageIndex];
if (currentPage) {
triggerDestroy(currentPage);
}
var view;
var view = newView;
if (typeof (newView) == 'string') {
animatable.innerHTML = newView;
view = animatable.querySelector('.page-view');
if (typeof (view) == 'string') {
view = document.createElement('div');
view.innerHTML = newView;
}
if (currentPage) {
if (newViewInfo.hasScript) {
// TODO: figure this out without jQuery
view = $(view).appendTo(mainAnimatedPages)[0];
mainAnimatedPages.removeChild(currentPage);
} else {
mainAnimatedPages.replaceChild(view, currentPage);
}
} else {
if (newViewInfo.hasScript) {
// TODO: figure this out without jQuery
animatable.innerHTML = '';
$(newView).appendTo(animatable);
view = $(view).appendTo(mainAnimatedPages)[0];
} else {
if (currentPage) {
animatable.replaceChild(newView, currentPage);
} else {
animatable.appendChild(newView);
}
mainAnimatedPages.appendChild(view);
}
enhanceNewView(dependencies, newView);
view = newView;
}
if (typeof (newView) != 'string') {
enhanceNewView(dependencies, view);
}
if (options.type) {
view.setAttribute('data-type', options.type);
}
var animatable = view;
view.classList.add('mainAnimatedPage');
allPages[pageIndex] = view;
if (onBeforeChange) {
onBeforeChange(view, false, options);
}
@ -155,20 +169,13 @@ define(['browser'], function (browser) {
function normalizeNewView(options) {
if (options.view.indexOf('data-role="page"') == -1) {
var html = '<div class="page-view" data-type="' + (options.type || '') + '">';
html += options.view;
html += '</div>';
return html;
return options.view;
}
var hasScript = options.view.indexOf('<script') != -1;
var elem = parseHtml(options.view, hasScript);
elem.classList.add('page-view');
elem.setAttribute('data-type', options.type || '');
return {
elem: elem,
elem: parseHtml(options.view, hasScript),
hasScript: hasScript
};
}
@ -203,12 +210,6 @@ define(['browser'], function (browser) {
}
}
return nullAnimation(newAnimatedPage, oldAnimatedPage, transition, isBack);
}
function nullAnimation(newAnimatedPage, oldAnimatedPage, transition, isBack) {
newAnimatedPage.classList.remove('hide');
return Promise.resolve();
}
@ -236,8 +237,6 @@ define(['browser'], function (browser) {
], timings));
}
newAnimatedPage.classList.remove('hide');
var start = isBack ? '-100%' : '100%';
animations.push(newAnimatedPage.animate([
@ -275,8 +274,6 @@ define(['browser'], function (browser) {
], timings));
}
newAnimatedPage.classList.remove('hide');
animations.push(newAnimatedPage.animate([
{ opacity: 0, offset: 0 },
@ -313,19 +310,15 @@ define(['browser'], function (browser) {
onBeforeChange = fn;
}
function getSelectedIndex(allPages) {
return selectedPageIndex;
}
function tryRestoreView(options) {
var url = options.url;
var index = currentUrls.indexOf(url);
if (index != -1) {
var page = allPages[index];
var view = page.querySelector(".page-view");
var animatable = allPages[index];
var view = animatable;
if (view) {
@ -335,8 +328,7 @@ define(['browser'], function (browser) {
cancelActiveAnimations();
var animatable = allPages[index];
var selected = getSelectedIndex(allPages);
var selected = selectedPageIndex;
var previousAnimatable = selected == -1 ? null : allPages[selected];
if (onBeforeChange) {
@ -345,6 +337,8 @@ define(['browser'], function (browser) {
beforeAnimate(allPages, index, selected);
animatable.classList.remove('hide');
return animate(animatable, previousAnimatable, options.transition, options.isBack).then(function () {
selectedPageIndex = index;
@ -361,7 +355,6 @@ define(['browser'], function (browser) {
$.mobile = $.mobile || {};
$.mobile.activePage = view;
}
return view;
});
}
@ -376,13 +369,19 @@ define(['browser'], function (browser) {
function reset() {
allPages = [];
currentUrls = [];
mainAnimatedPages.innerHTML = '';
selectedPageIndex = -1;
}
if (enableAnimation() && !document.documentElement.animate) {
require(['webAnimations']);
}
reset();
mainAnimatedPages.classList.remove('hide');
return {
loadView: loadView,
tryRestoreView: tryRestoreView,

4
dashboard-ui/index.html
View File

@ -12,9 +12,7 @@
<div class="mainDrawerPanelContent" main>
<div class="pageBackground"></div>
<div class="skinHeader"></div>
<div class="mainAnimatedPages skinBody">
<div class="mainAnimatedPage hide"></div><div class="mainAnimatedPage hide"></div><div class="mainAnimatedPage hide"></div>
</div>
<div class="mainAnimatedPages skinBody"></div>
</div>
</paper-drawer-panel>
</div>