${MessageNoCollectionsAvailable}
+ +' + Globalize.translate('MessageNoCollectionsAvailable') + '
'; + } + + var itemsContainer = tabContent.querySelector('.itemsContainer'); + itemsContainer.innerHTML = html; + imageLoader.lazyChildren(itemsContainer); + + libraryBrowser.saveQueryValues(getSavedQueryKey(page), query); + + Dashboard.hideLoadingMsg(); + }); + } + + function updateFilterControls(tabContent) { + + var query = getQuery(tabContent); + self.alphaPicker.value(query.NameStartsWithOrGreater); + } + + function initPage(tabContent) { + + var alphaPickerElement = tabContent.querySelector('.alphaPicker'); + alphaPickerElement.addEventListener('alphavaluechanged', function (e) { + var newValue = e.detail.value; + var query = getQuery(tabContent); + query.NameStartsWithOrGreater = newValue; + query.StartIndex = 0; + reloadItems(tabContent); }); - $('.btnPreviousPage', page).on('click', function () { - query.StartIndex -= query.Limit; - reloadItems(page); + self.alphaPicker = new alphaPicker({ + element: alphaPickerElement, + valueChangeEvent: 'click' }); - $('.btnChangeLayout', page).on('layoutchange', function (e, layout) { - getPageData().view = layout; - LibraryBrowser.saveViewSetting(getSavedQueryKey(), layout); - reloadItems(page); - }); - - // On callback make sure to set StartIndex = 0 - $('.btnSort', page).on('click', function () { - LibraryBrowser.showSortMenu({ + tabContent.querySelector('.btnSort').addEventListener('click', function (e) { + libraryBrowser.showSortMenu({ items: [{ name: Globalize.translate('OptionNameSort'), id: 'SortName' @@ -172,67 +225,57 @@ id: 'PremiereDate,SortName' }], callback: function () { - reloadItems(page); + getQuery(tabContent).StartIndex = 0; + reloadItems(tabContent); }, - query: query + query: getQuery(tabContent), + button: e.target }); }); - LibraryBrowser.saveQueryValues(getSavedQueryKey(), query); - - Dashboard.hideLoadingMsg(); - }); - } - - function initPage(tabContent) { - - // The button is created dynamically - $('.btnNewCollection', tabContent).on('click', function () { - - require(['collectionEditor'], function (collectionEditor) { - - var serverId = ApiClient.serverInfo().Id; - new collectionEditor().show({ - items: [], - serverId: serverId - }); + tabContent.querySelector('.btnSelectView').addEventListener('click', function (e) { + libraryBrowser.showLayoutMenu(e.target, self.getCurrentViewStyle(), 'List,Poster,PosterCard,Thumb,ThumbCard'.split(',')); }); - }); - } - pageIdOn('pageinit', 'boxsetsPage', function () { + tabContent.querySelector('.btnSelectView').addEventListener('layoutchange', function (e) { - var page = this; + var viewStyle = e.detail.viewStyle; - var content = page; + getPageData(tabContent).view = viewStyle; + libraryBrowser.saveViewSetting(getSavedQueryKey(tabContent), viewStyle); + getQuery(tabContent).StartIndex = 0; + reloadItems(tabContent); + }); - initPage(content); + // The button is created dynamically + tabContent.querySelector('.btnNewCollection').addEventListener('click', function () { - }); - pageIdOn('pagebeforeshow', 'boxsetsPage', function () { + require(['collectionEditor'], function (collectionEditor) { - var page = this; + var serverId = ApiClient.serverInfo().Id; + new collectionEditor().show({ + items: [], + serverId: serverId + }); - var content = page; + }); + }); + } - reloadItems(content); - - }); - - return function (view, params, tabContent) { - - var self = this; - - self.initTab = function () { - - initPage(tabContent); + self.getCurrentViewStyle = function () { + return getPageData(tabContent).view; }; + initPage(tabContent); + self.renderTab = function () { reloadItems(tabContent); + updateFilterControls(tabContent); + }; + + self.destroy = function () { }; }; - }); \ No newline at end of file diff --git a/dashboard-ui/scripts/musicalbums.js b/dashboard-ui/scripts/musicalbums.js index 06aee81694..f2cc4fa8d9 100644 --- a/dashboard-ui/scripts/musicalbums.js +++ b/dashboard-ui/scripts/musicalbums.js @@ -1,10 +1,12 @@ -define(['jQuery', 'alphaPicker'], function ($, alphaPicker) { +define(['events', 'libraryBrowser', 'imageLoader', 'alphaPicker'], function (events, libraryBrowser, imageLoader, alphaPicker) { return function (view, params, tabContent) { var self = this; + var pageSize = libraryBrowser.getDefaultPageSize(); var data = {}; + function getPageData(context) { var key = getSavedQueryKey(context); var pageData = data[key]; @@ -16,17 +18,17 @@ SortOrder: "Ascending", IncludeItemTypes: "MusicAlbum", Recursive: true, - Fields: "PrimaryImageAspectRatio,SortName,SyncInfo", - StartIndex: 0, + Fields: "PrimaryImageAspectRatio,MediaSourceCount,SortName,SyncInfo", ImageTypeLimit: 1, EnableImageTypes: "Primary,Backdrop,Banner,Thumb", - Limit: LibraryBrowser.getDefaultPageSize() + StartIndex: 0, + Limit: pageSize }, - view: LibraryBrowser.getSavedView(key) || LibraryBrowser.getDefaultItemsView('Poster', 'Poster') + view: libraryBrowser.getSavedView(key) || libraryBrowser.getDefaultItemsView('Poster', 'Poster') }; - pageData.query.ParentId = LibraryMenu.getTopParentId(); - LibraryBrowser.loadSavedQueryValues(key, pageData.query); + pageData.query.ParentId = params.topParentId; + libraryBrowser.loadSavedQueryValues(key, pageData.query); } return pageData; } @@ -39,7 +41,7 @@ function getSavedQueryKey(context) { if (!context.savedQueryKey) { - context.savedQueryKey = LibraryBrowser.getSavedQueryKey('albums'); + context.savedQueryKey = libraryBrowser.getSavedQueryKey('musicalbums'); } return context.savedQueryKey; } @@ -55,40 +57,33 @@ // Scroll back up so they can see the results from the beginning window.scrollTo(0, 0); - var html = ''; - var view = getPageData(page).view; + updateFilterControls(page); + var pagingHtml = LibraryBrowser.getQueryPagingHtml({ startIndex: query.StartIndex, limit: query.Limit, totalRecordCount: result.TotalRecordCount, showLimit: false, - sortButton: true, - addLayoutButton: true, - currentLayout: view, updatePageSizeSetting: false, - layouts: 'List,Poster,PosterCard,Timeline', - filterButton: true + addLayoutButton: false, + sortButton: false, + filterButton: false }); - page.querySelector('.listTopPaging').innerHTML = pagingHtml; + var html; + var viewStyle = self.getCurrentViewStyle(); - updateFilterControls(page); + if (viewStyle == "List") { - if (view == "Poster") { - html = LibraryBrowser.getPosterViewHtml({ + html = libraryBrowser.getListViewHtml({ items: result.Items, - shape: "square", context: 'music', - showTitle: true, - showParentTitle: true, - lazy: true, - centerText: true, - overlayPlayButton: true + sortBy: query.SortBy }); } - else if (view == "PosterCard") { + else if (viewStyle == "PosterCard") { - html = LibraryBrowser.getPosterViewHtml({ + html = libraryBrowser.getPosterViewHtml({ items: result.Items, shape: "square", context: 'music', @@ -99,63 +94,107 @@ cardLayout: true }); } - else if (view == "List") { + else { - html = LibraryBrowser.getListViewHtml({ - items: result.Items, - context: 'music', - sortBy: query.SortBy - }); - } - else if (view == "Timeline") { - html = LibraryBrowser.getPosterViewHtml({ + // Poster + html = libraryBrowser.getPosterViewHtml({ items: result.Items, shape: "square", context: 'music', showTitle: true, showParentTitle: true, - timeline: true, - lazy: true + lazy: true, + centerText: true, + overlayPlayButton: true }); } - var elem = page.querySelector('#items'); - elem.innerHTML = html + pagingHtml; - ImageLoader.lazyChildren(elem); + var i, length; + var elems = tabContent.querySelectorAll('.paging'); + for (i = 0, length = elems.length; i < length; i++) { + elems[i].innerHTML = pagingHtml; + } - $('.btnNextPage', page).on('click', function () { + function onNextPageClick() { query.StartIndex += query.Limit; - reloadItems(page); - }); + reloadItems(tabContent); + } - $('.btnPreviousPage', page).on('click', function () { + function onPreviousPageClick() { query.StartIndex -= query.Limit; - reloadItems(page); + reloadItems(tabContent); + } + + elems = tabContent.querySelectorAll('.btnNextPage'); + for (i = 0, length = elems.length; i < length; i++) { + elems[i].addEventListener('click', onNextPageClick); + } + + elems = tabContent.querySelectorAll('.btnPreviousPage'); + for (i = 0, length = elems.length; i < length; i++) { + elems[i].addEventListener('click', onPreviousPageClick); + } + + var itemsContainer = tabContent.querySelector('.itemsContainer'); + itemsContainer.innerHTML = html; + imageLoader.lazyChildren(itemsContainer); + + libraryBrowser.saveQueryValues(getSavedQueryKey(page), query); + + Dashboard.hideLoadingMsg(); + }); + } + + self.showFilterMenu = function () { + + require(['components/filterdialog/filterdialog'], function (filterDialogFactory) { + + var filterDialog = new filterDialogFactory({ + query: getQuery(tabContent), + mode: 'albums' }); - $('.btnFilter', page).on('click', function () { - showFilterMenu(page); + Events.on(filterDialog, 'filterchange', function () { + getQuery(tabContent).StartIndex = 0; + reloadItems(tabContent); }); - $('.btnChangeLayout', page).on('layoutchange', function (e, layout) { + filterDialog.show(); + }); + } - if (layout == 'Timeline') { - getQuery(page).SortBy = 'ProductionYear,PremiereDate,SortName'; - getQuery(page).SortOrder = 'Descending'; - } + function updateFilterControls(tabContent) { - getPageData(page).view = layout; - LibraryBrowser.saveViewSetting(getSavedQueryKey(page), layout); - reloadItems(page); - }); + var query = getQuery(tabContent); + self.alphaPicker.value(query.NameStartsWithOrGreater); + } - // On callback make sure to set StartIndex = 0 - $('.btnSort', page).on('click', function () { - LibraryBrowser.showSortMenu({ - items: [{ - name: Globalize.translate('OptionNameSort'), - id: 'SortName' - }, + function initPage(tabContent) { + + var alphaPickerElement = tabContent.querySelector('.alphaPicker'); + alphaPickerElement.addEventListener('alphavaluechanged', function (e) { + var newValue = e.detail.value; + var query = getQuery(tabContent); + query.NameStartsWithOrGreater = newValue; + query.StartIndex = 0; + reloadItems(tabContent); + }); + + self.alphaPicker = new alphaPicker({ + element: alphaPickerElement, + valueChangeEvent: 'click' + }); + + tabContent.querySelector('.btnFilter').addEventListener('click', function () { + self.showFilterMenu(); + }); + + tabContent.querySelector('.btnSort').addEventListener('click', function (e) { + libraryBrowser.showSortMenu({ + items: [{ + name: Globalize.translate('OptionNameSort'), + id: 'SortName' + }, { name: Globalize.translate('OptionAlbumArtist'), id: 'AlbumArtist,SortName' @@ -176,59 +215,44 @@ name: Globalize.translate('OptionReleaseDate'), id: 'ProductionYear,PremiereDate,SortName' }], - callback: function () { - reloadItems(page); - }, - query: query - }); + callback: function () { + getQuery(tabContent).StartIndex = 0; + reloadItems(tabContent); + }, + query: getQuery(tabContent), + button: e.target }); + }); - LibraryBrowser.saveQueryValues(getSavedQueryKey(page), query); - Dashboard.hideLoadingMsg(); + tabContent.querySelector('.btnSelectView').addEventListener('click', function (e) { + + libraryBrowser.showLayoutMenu(e.target, self.getCurrentViewStyle(), 'List,Poster,PosterCard'.split(',')); + }); + + tabContent.querySelector('.btnSelectView').addEventListener('layoutchange', function (e) { + + var viewStyle = e.detail.viewStyle; + + getPageData(tabContent).view = viewStyle; + libraryBrowser.saveViewSetting(getSavedQueryKey(tabContent), viewStyle); + getQuery(tabContent).StartIndex = 0; + reloadItems(tabContent); }); } - function showFilterMenu(page) { + self.getCurrentViewStyle = function () { + return getPageData(tabContent).view; + }; - require(['components/filterdialog/filterdialog'], function (filterDialogFactory) { - - var filterDialog = new filterDialogFactory({ - query: getQuery(page), - mode: 'albums' - }); - - Events.on(filterDialog, 'filterchange', function () { - reloadItems(page); - }); - - filterDialog.show(); - }); - } - - function updateFilterControls(page) { - - var query = getQuery(page); - - self.alphaPicker.value(query.NameStartsWithOrGreater); - } - - var alphaPickerElement = tabContent.querySelector('.alphaPicker'); - alphaPickerElement.addEventListener('alphavaluechanged', function (e) { - var newValue = e.detail.value; - var query = getQuery(tabContent); - query.NameStartsWithOrGreater = newValue; - query.StartIndex = 0; - reloadItems(tabContent); - }); - - self.alphaPicker = new alphaPicker({ - element: alphaPickerElement, - valueChangeEvent: 'click' - }); + initPage(tabContent); self.renderTab = function () { reloadItems(tabContent); + updateFilterControls(tabContent); + }; + + self.destroy = function () { }; }; }); \ No newline at end of file diff --git a/dashboard-ui/scripts/musicgenres.js b/dashboard-ui/scripts/musicgenres.js index 741c0e7182..39e9d2ea4e 100644 --- a/dashboard-ui/scripts/musicgenres.js +++ b/dashboard-ui/scripts/musicgenres.js @@ -1,136 +1,140 @@ -define(['jQuery'], function ($) { - - return function (view, params, tabContent) { - +define([], function () { + + return function (view, params, tabContent) { + var self = this; - - var data = {}; - function getPageData() { - var key = getSavedQueryKey(); - var pageData = data[key]; - - if (!pageData) { - pageData = data[key] = { - query: { - SortBy: "SortName", - SortOrder: "Ascending", - IncludeItemTypes: "Audio,MusicVideo", - Recursive: true, - Fields: "DateCreated,SyncInfo,ItemCounts", - StartIndex: 0, - Limit: LibraryBrowser.getDefaultPageSize() - }, - view: LibraryBrowser.getSavedView(key) || LibraryBrowser.getDefaultItemsView('Thumb', 'Thumb') - }; - - pageData.query.ParentId = LibraryMenu.getTopParentId(); - LibraryBrowser.loadSavedQueryValues(key, pageData.query); - } - return pageData; + + var data = {}; + function getPageData() { + var key = getSavedQueryKey(); + var pageData = data[key]; + + if (!pageData) { + pageData = data[key] = { + query: { + SortBy: "SortName", + SortOrder: "Ascending", + IncludeItemTypes: "Audio,MusicVideo", + Recursive: true, + Fields: "DateCreated,SyncInfo,ItemCounts", + StartIndex: 0 + }, + view: LibraryBrowser.getSavedView(key) || LibraryBrowser.getDefaultItemsView('Thumb', 'Thumb') + }; + + pageData.query.ParentId = params.topParentId; + LibraryBrowser.loadSavedQueryValues(key, pageData.query); + } + return pageData; + } + + function getQuery() { + + return getPageData().query; + } + + function getSavedQueryKey() { + + return LibraryBrowser.getSavedQueryKey('genres'); + } + + function reloadItems(context) { + + Dashboard.showLoadingMsg(); + var query = getQuery(); + + ApiClient.getMusicGenres(Dashboard.getCurrentUserId(), query).then(function (result) { + + var html = ''; + + var viewStyle = self.getCurrentViewStyle(); + + if (viewStyle == "Thumb") { + html = LibraryBrowser.getPosterViewHtml({ + items: result.Items, + shape: "backdrop", + preferThumb: true, + context: 'music', + showItemCounts: true, + centerText: true, + lazy: true, + overlayPlayButton: true + }); + } + else if (viewStyle == "ThumbCard") { + + html = LibraryBrowser.getPosterViewHtml({ + items: result.Items, + shape: "backdrop", + preferThumb: true, + context: 'music', + showItemCounts: true, + cardLayout: true, + showTitle: true, + lazy: true + }); + } + else if (viewStyle == "PosterCard") { + html = LibraryBrowser.getPosterViewHtml({ + items: result.Items, + shape: "portrait", + context: 'music', + showItemCounts: true, + lazy: true, + cardLayout: true, + showTitle: true + }); + } + else if (viewStyle == "Poster") { + html = LibraryBrowser.getPosterViewHtml({ + items: result.Items, + shape: "portrait", + context: 'music', + centerText: true, + showItemCounts: true, + lazy: true, + overlayPlayButton: true + }); + } + + var elem = context.querySelector('#items'); + elem.innerHTML = html; + ImageLoader.lazyChildren(elem); + + LibraryBrowser.saveQueryValues(getSavedQueryKey(), query); + + Dashboard.hideLoadingMsg(); + }); } - - function getQuery() { - - return getPageData().query; - } - - function getSavedQueryKey() { - - return LibraryBrowser.getSavedQueryKey('genres'); - } - - function reloadItems(context) { - - Dashboard.showLoadingMsg(); - - var query = getQuery(); - - ApiClient.getMusicGenres(Dashboard.getCurrentUserId(), query).then(function (result) { - - // Scroll back up so they can see the results from the beginning - window.scrollTo(0, 0); - - var html = ''; - - var view = getPageData().view; - - $('.listTopPaging', context).html(LibraryBrowser.getQueryPagingHtml({ - startIndex: query.StartIndex, - limit: query.Limit, - totalRecordCount: result.TotalRecordCount, - showLimit: false, - updatePageSizeSetting: false, - addLayoutButton: true, - currentLayout: view - - })); - - if (view == "Thumb") { - html = LibraryBrowser.getPosterViewHtml({ - items: result.Items, - shape: "backdrop", - preferThumb: true, - showItemCounts: true, - context: 'music', - lazy: true, - centerText: true, - overlayPlayButton: true - }); - } - else if (view == "ThumbCard") { - - html = LibraryBrowser.getPosterViewHtml({ - items: result.Items, - shape: "backdrop", - preferThumb: true, - context: 'music', - showItemCounts: true, - cardLayout: true, - lazy: true, - showTitle: true - }); - } - else if (view == "Poster") { - html = LibraryBrowser.getPosterViewHtml({ - items: result.Items, - shape: "portrait", - context: 'music', - centerText: true, - showItemCounts: true, - lazy: true - }); - } - - var elem = context.querySelector('#items'); - elem.innerHTML = html; - ImageLoader.lazyChildren(elem); - - $('.btnNextPage', context).on('click', function () { - query.StartIndex += query.Limit; - reloadItems(context); - }); - - $('.btnPreviousPage', context).on('click', function () { - query.StartIndex -= query.Limit; - reloadItems(context); - }); - - $('.btnChangeLayout', context).on('layoutchange', function (e, layout) { - getPageData().view = layout; - LibraryBrowser.saveViewSetting(getSavedQueryKey(), layout); - reloadItems(context); - }); - - LibraryBrowser.saveQueryValues(getSavedQueryKey(), query); - - Dashboard.hideLoadingMsg(); - }); - } - - self.renderTab = function () { - - reloadItems(tabContent); - }; - }; - + self.getViewStyles = function () { + return 'Poster,PosterCard,Thumb,ThumbCard'.split(','); + }; + + self.getCurrentViewStyle = function () { + return getPageData(tabContent).view; + }; + + self.setCurrentViewStyle = function (viewStyle) { + getPageData(tabContent).view = viewStyle; + LibraryBrowser.saveViewSetting(getSavedQueryKey(tabContent), viewStyle); + reloadItems(tabContent); + }; + + self.enableViewSelection = true; + + self.renderTab = function () { + + reloadItems(tabContent); + }; + + tabContent.querySelector('.btnSelectView').addEventListener('click', function (e) { + + LibraryBrowser.showLayoutMenu(e.target, self.getCurrentViewStyle(), self.getViewStyles()); + }); + + tabContent.querySelector('.btnSelectView').addEventListener('layoutchange', function (e) { + + self.setCurrentViewStyle(e.detail.viewStyle); + }); + }; }); \ No newline at end of file diff --git a/dashboard-ui/scripts/musicrecommended.js b/dashboard-ui/scripts/musicrecommended.js index 94f22e4a94..33a8f6a754 100644 --- a/dashboard-ui/scripts/musicrecommended.js +++ b/dashboard-ui/scripts/musicrecommended.js @@ -1,4 +1,4 @@ -define(['jQuery', 'libraryBrowser', 'scrollStyles'], function ($, libraryBrowser) { +define(['libraryBrowser', 'scrollStyles'], function (libraryBrowser) { function itemsPerRow() { @@ -71,12 +71,12 @@ ApiClient.getItems(Dashboard.getCurrentUserId(), options).then(function (result) { - var elem; + var elem = page.querySelector('#recentlyPlayed'); if (result.Items.length) { - elem = $('#recentlyPlayed', page).show()[0]; + elem.classList.remove('hide'); } else { - elem = $('#recentlyPlayed', page).hide()[0]; + elem.classList.add('hide'); } var itemsContainer = elem.querySelector('.itemsContainer'); @@ -117,12 +117,12 @@ ApiClient.getItems(Dashboard.getCurrentUserId(), options).then(function (result) { - var elem; + var elem = page.querySelector('#topPlayed'); if (result.Items.length) { - elem = $('#topPlayed', page).show()[0]; + elem.classList.remove('hide'); } else { - elem = $('#topPlayed', page).hide()[0]; + elem.classList.add('hide'); } var itemsContainer = elem.querySelector('.itemsContainer'); @@ -160,12 +160,12 @@ ApiClient.getItems(Dashboard.getCurrentUserId(), options).then(function (result) { - var elem; + var elem = page.querySelector('#playlists'); if (result.Items.length) { - elem = $('#playlists', page).show()[0]; + elem.classList.remove('hide'); } else { - elem = $('#playlists', page).hide()[0]; + elem.classList.add('hide'); } var itemsContainer = elem.querySelector('.itemsContainer'); @@ -252,13 +252,13 @@ var tabContent = view.querySelector('.pageTabContent[data-index=\'' + 0 + '\']'); var containers = tabContent.querySelectorAll('.itemsContainer'); - if (enableScrollX()) { - $(containers).addClass('hiddenScrollX'); - } else { - $(containers).removeClass('hiddenScrollX'); - } - for (var i = 0, length = containers.length; i < length; i++) { + if (enableScrollX()) { + containers[i].classList.add('hiddenScrollX'); + } else { + containers[i].classList.remove('hiddenScrollX'); + } + LibraryBrowser.createCardMenus(containers[i]); } };