mirror of
https://github.com/jellyfin/jellyfin-web
synced 2025-03-30 19:56:21 +00:00
rework nav drawer
This commit is contained in:
Luke Pulverenti
parent
52f247c51a
commit
ff8014a721
66 changed files with 5861 additions and 6234 deletions
|
|
@ -1,5 +1,7 @@
|
|||
define(['imageLoader', 'jQuery', 'paper-icon-button', 'paper-button', 'emby-icons'], function (imageLoader, $) {
|
||||
|
||||
var mainDrawerPanel = document.querySelector('.mainDrawerPanel');
|
||||
|
||||
function renderHeader() {
|
||||
|
||||
var html = '';
|
||||
|
|
@ -43,10 +45,9 @@
|
|||
|
||||
var viewMenuBar = document.createElement('div');
|
||||
viewMenuBar.classList.add('viewMenuBar');
|
||||
viewMenuBar.classList.add('ui-body-b');
|
||||
viewMenuBar.innerHTML = html;
|
||||
|
||||
document.body.appendChild(viewMenuBar);
|
||||
document.querySelector('.skinHeader').appendChild(viewMenuBar);
|
||||
|
||||
imageLoader.lazyChildren(document.querySelector('.viewMenuBar'));
|
||||
|
||||
|
|
@ -216,18 +217,15 @@
|
|||
return LibraryBrowser.getHref(item, context);
|
||||
}
|
||||
|
||||
var requiresDrawerRefresh = true;
|
||||
var requiresDashboardDrawerRefresh = true;
|
||||
var requiresUserRefresh = true;
|
||||
var lastOpenTime = new Date().getTime();
|
||||
|
||||
function toggleMainDrawer() {
|
||||
|
||||
var drawerPanel = document.querySelector('.mainDrawerPanel');
|
||||
if (drawerPanel.selected == 'drawer') {
|
||||
closeMainDrawer(drawerPanel);
|
||||
if (mainDrawerPanel.selected == 'drawer') {
|
||||
closeMainDrawer(mainDrawerPanel);
|
||||
} else {
|
||||
openMainDrawer(drawerPanel);
|
||||
openMainDrawer(mainDrawerPanel);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -243,38 +241,6 @@
|
|||
if (browserInfo.mobile) {
|
||||
document.body.classList.add('bodyWithPopupOpen');
|
||||
}
|
||||
|
||||
var pageElem = $.mobile.activePage;
|
||||
|
||||
if (requiresDrawerRefresh || requiresDashboardDrawerRefresh) {
|
||||
|
||||
ConnectionManager.user(window.ApiClient).then(function (user) {
|
||||
|
||||
var drawer = document.querySelector('.mainDrawerPanel .mainDrawer');
|
||||
|
||||
if (requiresDrawerRefresh) {
|
||||
ensureDrawerStructure(drawer);
|
||||
|
||||
refreshUserInfoInDrawer(user, drawer);
|
||||
refreshLibraryInfoInDrawer(user, drawer);
|
||||
refreshBottomUserInfoInDrawer(user, drawer);
|
||||
|
||||
document.dispatchEvent(new CustomEvent("libraryMenuCreated", {}));
|
||||
updateLibraryMenu(user.localUser);
|
||||
}
|
||||
|
||||
if (requiresDrawerRefresh || requiresDashboardDrawerRefresh) {
|
||||
refreshDashboardInfoInDrawer(pageElem, user, drawer);
|
||||
requiresDashboardDrawerRefresh = false;
|
||||
}
|
||||
|
||||
requiresDrawerRefresh = false;
|
||||
});
|
||||
}
|
||||
|
||||
updateLibraryNavLinks(pageElem);
|
||||
|
||||
document.querySelector('.mainDrawerPanel #drawer').classList.add('verticalScrollingDrawer');
|
||||
}
|
||||
function closeMainDrawer(drawerPanel) {
|
||||
|
||||
|
|
@ -287,101 +253,47 @@
|
|||
|
||||
if (drawer.selected != 'drawer') {
|
||||
document.body.classList.remove('bodyWithPopupOpen');
|
||||
document.querySelector('.mainDrawerPanel #drawer').classList.remove('verticalScrollingDrawer');
|
||||
} else {
|
||||
onMainDrawerOpened();
|
||||
}
|
||||
}
|
||||
|
||||
function ensureDrawerStructure(drawer) {
|
||||
|
||||
if (drawer.querySelector('.mainDrawerContent')) {
|
||||
return;
|
||||
}
|
||||
|
||||
var html = '<div class="mainDrawerContent">';
|
||||
|
||||
html += '<div class="userheader">';
|
||||
html += '</div>';
|
||||
html += '<div class="libraryDrawerContent">';
|
||||
html += '</div>';
|
||||
html += '<div class="dashboardDrawerContent">';
|
||||
html += '</div>';
|
||||
html += '<div class="userFooter">';
|
||||
html += '</div>';
|
||||
|
||||
html += '</div>';
|
||||
|
||||
drawer.innerHTML = html;
|
||||
}
|
||||
|
||||
function refreshUserInfoInDrawer(user, drawer) {
|
||||
|
||||
var html = '';
|
||||
|
||||
var homeHref = window.ApiClient ? 'home.html' : 'selectserver.html?showuser=1';
|
||||
|
||||
html += '<div style="margin-top:5px;"></div>';
|
||||
|
||||
html += '<a class="lnkMediaFolder sidebarLink" href="' + homeHref + '" onclick="return LibraryMenu.onLinkClicked(event, this);">';
|
||||
html += '<div style="background-image:url(\'css/images/mblogoicon.png\');width:' + 28 + 'px;height:' + 28 + 'px;background-size:contain;background-repeat:no-repeat;background-position:center center;border-radius:1000px;vertical-align:middle;margin:0 1.6em 0 1.5em;display:inline-block;"></div>';
|
||||
html += Globalize.translate('ButtonHome');
|
||||
html += '</a>';
|
||||
|
||||
html += '<a class="sidebarLink lnkMediaFolder" data-itemid="remote" href="nowplaying.html" onclick="return LibraryMenu.onLinkClicked(event, this);"><iron-icon icon="tablet-android" class="sidebarLinkIcon" style="color:#673AB7;"></iron-icon><span class="sidebarLinkText">' + Globalize.translate('ButtonRemote') + '</span></a>';
|
||||
|
||||
var userHeader = drawer.querySelector('.userheader');
|
||||
|
||||
userHeader.innerHTML = html;
|
||||
|
||||
require(['imageLoader'], function (imageLoader) {
|
||||
imageLoader.fillImages(userHeader.getElementsByClassName('lazy'));
|
||||
});
|
||||
}
|
||||
|
||||
function refreshLibraryInfoInDrawer(user, drawer) {
|
||||
|
||||
var html = '';
|
||||
|
||||
var homeHref = window.ApiClient ? 'home.html' : 'selectserver.html?showuser=1';
|
||||
|
||||
html += '<a class="lnkMediaFolder sidebarLink" href="' + homeHref + '" onclick="return LibraryMenu.onLinkClicked(event, this);">';
|
||||
html += '<div style="background-image:url(\'css/images/mblogoicon.png\');width:' + 28 + 'px;height:' + 28 + 'px;background-size:contain;background-repeat:no-repeat;background-position:center center;border-radius:1000px;vertical-align:middle;margin:0 1.6em 0 1.5em;display:inline-block;"></div>';
|
||||
html += Globalize.translate('ButtonHome');
|
||||
html += '</a>';
|
||||
|
||||
html += '<a class="sidebarLink lnkMediaFolder" data-itemid="remote" href="nowplaying.html" onclick="return LibraryMenu.onLinkClicked(event, this);"><iron-icon icon="tablet-android" class="sidebarLinkIcon"></iron-icon><span class="sidebarLinkText">' + Globalize.translate('ButtonRemote') + '</span></a>';
|
||||
|
||||
html += '<div class="sidebarDivider"></div>';
|
||||
|
||||
html += '<div class="libraryMenuOptions">';
|
||||
html += '</div>';
|
||||
|
||||
drawer.querySelector('.libraryDrawerContent').innerHTML = html;
|
||||
}
|
||||
var localUser = user.localUser;
|
||||
if (localUser && localUser.Policy.IsAdministrator) {
|
||||
|
||||
function refreshDashboardInfoInDrawer(page, user, drawer) {
|
||||
html += '<div class="adminMenuOptions">';
|
||||
html += '<div class="sidebarDivider"></div>';
|
||||
|
||||
var html = '';
|
||||
html += '<div class="sidebarHeader">';
|
||||
html += Globalize.translate('HeaderAdmin');
|
||||
html += '</div>';
|
||||
|
||||
html += '<div class="sidebarDivider"></div>';
|
||||
html += '<a class="sidebarLink lnkMediaFolder lnkManageServer" data-itemid="dashboard" href="#"><iron-icon icon="dashboard" class="sidebarLinkIcon"></iron-icon><span class="sidebarLinkText">' + Globalize.translate('ButtonManageServer') + '</span></a>';
|
||||
html += '<a class="sidebarLink lnkMediaFolder editorViewMenu" data-itemid="editor" onclick="return LibraryMenu.onLinkClicked(event, this);" href="edititemmetadata.html"><iron-icon icon="mode-edit" class="sidebarLinkIcon"></iron-icon><span class="sidebarLinkText">' + Globalize.translate('ButtonMetadataManager') + '</span></a>';
|
||||
|
||||
html += Dashboard.getToolsMenuHtml(page);
|
||||
|
||||
html = html.split('href=').join('onclick="return LibraryMenu.onLinkClicked(event, this);" href=');
|
||||
|
||||
drawer.querySelector('.dashboardDrawerContent').innerHTML = html;
|
||||
}
|
||||
|
||||
function refreshBottomUserInfoInDrawer(user, drawer) {
|
||||
|
||||
var html = '';
|
||||
|
||||
html += '<div class="adminMenuOptions">';
|
||||
html += '<div class="sidebarDivider"></div>';
|
||||
|
||||
html += '<div class="sidebarHeader">';
|
||||
html += Globalize.translate('HeaderAdmin');
|
||||
html += '</div>';
|
||||
|
||||
html += '<a class="sidebarLink lnkMediaFolder lnkManageServer" data-itemid="dashboard" href="#"><iron-icon icon="dashboard" class="sidebarLinkIcon"></iron-icon><span class="sidebarLinkText">' + Globalize.translate('ButtonManageServer') + '</span></a>';
|
||||
html += '<a class="sidebarLink lnkMediaFolder editorViewMenu" data-itemid="editor" onclick="return LibraryMenu.onLinkClicked(event, this);" href="edititemmetadata.html"><iron-icon icon="mode-edit" class="sidebarLinkIcon"></iron-icon><span class="sidebarLinkText">' + Globalize.translate('ButtonMetadataManager') + '</span></a>';
|
||||
|
||||
if (!browserInfo.mobile) {
|
||||
html += '<a class="sidebarLink lnkMediaFolder" data-itemid="reports" onclick="return LibraryMenu.onLinkClicked(event, this);" href="reports.html"><iron-icon icon="insert-chart" class="sidebarLinkIcon"></iron-icon><span class="sidebarLinkText">' + Globalize.translate('ButtonReports') + '</span></a>';
|
||||
if (!browserInfo.mobile) {
|
||||
html += '<a class="sidebarLink lnkMediaFolder" data-itemid="reports" onclick="return LibraryMenu.onLinkClicked(event, this);" href="reports.html"><iron-icon icon="insert-chart" class="sidebarLinkIcon"></iron-icon><span class="sidebarLinkText">' + Globalize.translate('ButtonReports') + '</span></a>';
|
||||
}
|
||||
html += '</div>';
|
||||
}
|
||||
html += '</div>';
|
||||
|
||||
html += '<div class="userMenuOptions">';
|
||||
|
||||
|
|
@ -403,9 +315,101 @@
|
|||
|
||||
html += '</div>';
|
||||
|
||||
drawer.querySelector('.userFooter').innerHTML = html;
|
||||
var drawer = mainDrawerPanel.querySelector('.mainDrawer');
|
||||
|
||||
drawer.querySelector('.lnkManageServer').addEventListener('click', onManageServerClicked);
|
||||
drawer.innerHTML = html;
|
||||
|
||||
var lnkManageServer = drawer.querySelector('.lnkManageServer');
|
||||
if (lnkManageServer) {
|
||||
lnkManageServer.addEventListener('click', onManageServerClicked);
|
||||
}
|
||||
|
||||
require(['imageLoader'], function (imageLoader) {
|
||||
imageLoader.fillImages(mainDrawerPanel.getElementsByClassName('lazy'));
|
||||
});
|
||||
}
|
||||
|
||||
function refreshDashboardInfoInDrawer(page, user) {
|
||||
|
||||
if (!mainDrawerPanel.querySelector('.adminDrawerLogo')) {
|
||||
createDashboardMenu(page);
|
||||
} else {
|
||||
updateDashboardMenuSelectedItem();
|
||||
}
|
||||
}
|
||||
|
||||
function parentWithTag(elem, tagName) {
|
||||
|
||||
while (elem.tagName != tagName) {
|
||||
elem = elem.parentNode;
|
||||
|
||||
if (!elem) {
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
return elem;
|
||||
}
|
||||
|
||||
function updateDashboardMenuSelectedItem() {
|
||||
|
||||
var links = mainDrawerPanel.querySelectorAll('.sidebarLink');
|
||||
|
||||
for (var i = 0, length = links.length; i < length; i++) {
|
||||
var link = links[i];
|
||||
|
||||
var selected = false;
|
||||
|
||||
var pageIds = link.getAttribute('data-pageids');
|
||||
if (pageIds) {
|
||||
selected = pageIds.split(',').indexOf($.mobile.activePage.id) != -1
|
||||
}
|
||||
|
||||
if (selected) {
|
||||
link.classList.add('selectedSidebarLink');
|
||||
|
||||
var collapsible = parentWithTag(link, 'EMBY-COLLAPSIBLE');
|
||||
if (collapsible) {
|
||||
collapsible.expanded = true;
|
||||
}
|
||||
|
||||
var title = collapsible.title || '';
|
||||
title += '<span class="title-separator">–</span>';
|
||||
title += (link.innerText || link.textContent).trim();
|
||||
|
||||
Dashboard.setPageTitle(title);
|
||||
|
||||
} else {
|
||||
link.classList.remove('selectedSidebarLink');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function createDashboardMenu() {
|
||||
require(['emby-collapsible'], function () {
|
||||
var html = '';
|
||||
|
||||
//html += '<div class="userHeader">';
|
||||
//html += '<div class="userHeaderActionMenu">';
|
||||
//html += '<div>';
|
||||
//html += localUser.Name;
|
||||
//html += '</div>';
|
||||
//html += '<paper-icon-button icon="expand-more"></paper-icon-button>';
|
||||
//html += '</div>';
|
||||
//html += '</div>';
|
||||
|
||||
html += '<a class="adminDrawerLogo clearLink" href="dashboard.html">'
|
||||
html += '<img src="css/images/logo.png" />';
|
||||
html += '</a>'
|
||||
|
||||
html += Dashboard.getToolsMenuHtml();
|
||||
|
||||
html = html.split('href=').join('onclick="return LibraryMenu.onLinkClicked(event, this);" href=');
|
||||
|
||||
mainDrawerPanel.querySelector('.mainDrawer').innerHTML = html;
|
||||
|
||||
updateDashboardMenuSelectedItem();
|
||||
});
|
||||
}
|
||||
|
||||
function onSidebarLinkClick() {
|
||||
|
|
@ -473,7 +477,6 @@
|
|||
|
||||
if (!user) {
|
||||
|
||||
showBySelector('.adminMenuOptions', false);
|
||||
showBySelector('.lnkMySync', false);
|
||||
showBySelector('.userMenuOptions', false);
|
||||
return;
|
||||
|
|
@ -560,12 +563,6 @@
|
|||
}
|
||||
});
|
||||
|
||||
if (user.Policy.IsAdministrator) {
|
||||
showBySelector('.adminMenuOptions', true);
|
||||
} else {
|
||||
showBySelector('.adminMenuOptions', false);
|
||||
}
|
||||
|
||||
if (user.Policy.EnableSync) {
|
||||
showBySelector('.lnkMySync', true);
|
||||
} else {
|
||||
|
|
@ -573,8 +570,6 @@
|
|||
}
|
||||
}
|
||||
|
||||
var requiresLibraryMenuRefresh = false;
|
||||
|
||||
function onManageServerClicked() {
|
||||
|
||||
closeMainDrawer();
|
||||
|
|
@ -654,7 +649,19 @@
|
|||
},
|
||||
|
||||
setTitle: function (title) {
|
||||
document.querySelector('.libraryMenuButtonText').innerHTML = title;
|
||||
|
||||
var html = '<span>' + title + '</span>';
|
||||
|
||||
var page = $.mobile.activePage;
|
||||
if (page) {
|
||||
var helpUrl = page.getAttribute('data-helpurl');
|
||||
|
||||
if (helpUrl) {
|
||||
html += '<a href="' + helpUrl + '" target="_blank" class="clearLink" style="margin-left:1em;" title="' + Globalize.translate('ButtonHelp') + '"><paper-icon-button icon="info"></paper-icon-button></a>';
|
||||
}
|
||||
}
|
||||
|
||||
document.querySelector('.libraryMenuButtonText').innerHTML = html;
|
||||
},
|
||||
|
||||
setBackButtonVisible: function (visible) {
|
||||
|
|
@ -798,7 +805,7 @@
|
|||
|
||||
if (msg.Data.Id == Dashboard.getCurrentUserId()) {
|
||||
|
||||
requiresLibraryMenuRefresh = true;
|
||||
// refresh library menu
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -833,22 +840,29 @@
|
|||
}
|
||||
});
|
||||
|
||||
pageClassOn('pagebeforeshow', 'page', function () {
|
||||
|
||||
var page = this;
|
||||
|
||||
if (page.classList.contains('type-interior')) {
|
||||
requiresDashboardDrawerRefresh = true;
|
||||
}
|
||||
|
||||
buildViewMenuBar(page);
|
||||
updateTabLinks(page);
|
||||
});
|
||||
|
||||
pageClassOn('pageshow', 'page', function (e) {
|
||||
|
||||
var page = this;
|
||||
|
||||
var isDashboardPage = page.classList.contains('type-interior');
|
||||
|
||||
if (isDashboardPage) {
|
||||
refreshDashboardInfoInDrawer(page);
|
||||
mainDrawerPanel.forceNarrow = false;
|
||||
} else {
|
||||
|
||||
if (mainDrawerPanel.classList.contains('adminDrawerPanel')) {
|
||||
refreshLibraryDrawer();
|
||||
}
|
||||
|
||||
mainDrawerPanel.forceNarrow = true;
|
||||
}
|
||||
|
||||
setDrawerClass(page);
|
||||
|
||||
buildViewMenuBar(page);
|
||||
updateTabLinks(page);
|
||||
|
||||
if (!e.detail.isRestored) {
|
||||
// Scroll back up so in case vertical scroll was messed with
|
||||
window.scrollTo(0, 0);
|
||||
|
|
@ -857,15 +871,13 @@
|
|||
updateTitle(page);
|
||||
updateBackButton(page);
|
||||
|
||||
var isLibraryPage = page.classList.contains('libraryPage');
|
||||
|
||||
if (isLibraryPage) {
|
||||
if (page.classList.contains('libraryPage')) {
|
||||
|
||||
document.body.classList.add('libraryDocument');
|
||||
document.body.classList.remove('dashboardDocument');
|
||||
document.body.classList.remove('hideMainDrawer');
|
||||
}
|
||||
else if (page.classList.contains('type-interior')) {
|
||||
else if (isDashboardPage) {
|
||||
|
||||
document.body.classList.remove('libraryDocument');
|
||||
document.body.classList.add('dashboardDocument');
|
||||
|
|
@ -877,6 +889,8 @@
|
|||
document.body.classList.remove('dashboardDocument');
|
||||
document.body.classList.add('hideMainDrawer');
|
||||
}
|
||||
|
||||
updateLibraryNavLinks(page);
|
||||
});
|
||||
|
||||
function updateTitle(page) {
|
||||
|
|
@ -890,12 +904,6 @@
|
|||
}
|
||||
}
|
||||
|
||||
if (!title) {
|
||||
if (page.classList.contains('type-interior')) {
|
||||
title = Globalize.translate('ButtonHome');
|
||||
}
|
||||
}
|
||||
|
||||
if (title) {
|
||||
LibraryMenu.setTitle(title);
|
||||
}
|
||||
|
|
@ -946,7 +954,6 @@
|
|||
|
||||
function initializeApiClient(apiClient) {
|
||||
|
||||
requiresLibraryMenuRefresh = true;
|
||||
Events.off(apiClient, 'websocketmessage', onWebSocketMessage);
|
||||
|
||||
Events.on(apiClient, 'websocketmessage', onWebSocketMessage);
|
||||
|
|
@ -956,15 +963,41 @@
|
|||
initializeApiClient(window.ApiClient);
|
||||
}
|
||||
|
||||
function setDrawerClass() {
|
||||
function setDrawerClass(page) {
|
||||
|
||||
var drawer = document.querySelector('.mainDrawerPanel #drawer');
|
||||
if (drawer) {
|
||||
drawer.classList.add('darkDrawer');
|
||||
var admin = false;
|
||||
|
||||
if (!page) {
|
||||
if (window.$ && window.$.mobile) {
|
||||
page = $.mobile.activePage;
|
||||
}
|
||||
}
|
||||
|
||||
if (page && page.classList.contains('type-interior')) {
|
||||
admin = true;
|
||||
}
|
||||
|
||||
if (admin) {
|
||||
mainDrawerPanel.classList.add('adminDrawerPanel');
|
||||
mainDrawerPanel.classList.remove('darkDrawerPanel');
|
||||
} else {
|
||||
mainDrawerPanel.classList.add('darkDrawerPanel');
|
||||
mainDrawerPanel.classList.remove('adminDrawerPanel');
|
||||
}
|
||||
}
|
||||
|
||||
var mainDrawerPanel = document.querySelector('.mainDrawerPanel');
|
||||
function refreshLibraryDrawer(user) {
|
||||
|
||||
var promise = user ? Promise.resolve(user) : ConnectionManager.user(window.ApiClient);
|
||||
|
||||
promise.then(function (user) {
|
||||
refreshLibraryInfoInDrawer(user);
|
||||
|
||||
document.dispatchEvent(new CustomEvent("libraryMenuCreated", {}));
|
||||
updateLibraryMenu(user.localUser);
|
||||
});
|
||||
}
|
||||
|
||||
mainDrawerPanel.addEventListener('iron-select', onMainDrawerSelect);
|
||||
|
||||
renderHeader();
|
||||
|
|
@ -974,14 +1007,15 @@
|
|||
});
|
||||
|
||||
Events.on(ConnectionManager, 'localusersignedin', function (e, user) {
|
||||
requiresLibraryMenuRefresh = true;
|
||||
requiresDrawerRefresh = true;
|
||||
setDrawerClass();
|
||||
ConnectionManager.user(ConnectionManager.getApiClient(user.ServerId)).then(updateUserInHeader);
|
||||
ConnectionManager.user(ConnectionManager.getApiClient(user.ServerId)).then(function (user) {
|
||||
refreshLibraryDrawer(user);
|
||||
updateUserInHeader(user);
|
||||
});
|
||||
});
|
||||
|
||||
Events.on(ConnectionManager, 'localusersignedout', function () {
|
||||
requiresLibraryMenuRefresh = true;
|
||||
requiresDrawerRefresh = true;
|
||||
updateUserInHeader();
|
||||
});
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue