diff --git a/dashboard-ui/scripts/episodes.js b/dashboard-ui/scripts/episodes.js
index 61323d2f3c..2239c885b3 100644
--- a/dashboard-ui/scripts/episodes.js
+++ b/dashboard-ui/scripts/episodes.js
@@ -202,12 +202,13 @@
});
});
- tabContent.querySelector('.btnSelectView').addEventListener('click', function (e) {
+ var btnSelectView = tabContent.querySelector('.btnSelectView');
+ btnSelectView.addEventListener('click', function (e) {
libraryBrowser.showLayoutMenu(e.target, self.getCurrentViewStyle(), 'List,Poster,PosterCard'.split(','));
});
- tabContent.querySelector('.btnSelectView').addEventListener('layoutchange', function (e) {
+ btnSelectView.addEventListener('layoutchange', function (e) {
var viewStyle = e.detail.viewStyle;
getPageData(tabContent).view = viewStyle;
diff --git a/dashboard-ui/scripts/moviecollections.js b/dashboard-ui/scripts/moviecollections.js
index 564bcdaaf7..0fd9189f53 100644
--- a/dashboard-ui/scripts/moviecollections.js
+++ b/dashboard-ui/scripts/moviecollections.js
@@ -233,12 +233,13 @@
});
});
- tabContent.querySelector('.btnSelectView').addEventListener('click', function (e) {
+ var btnSelectView = tabContent.querySelector('.btnSelectView');
+ btnSelectView.addEventListener('click', function (e) {
libraryBrowser.showLayoutMenu(e.target, self.getCurrentViewStyle(), 'List,Poster,PosterCard,Thumb,ThumbCard'.split(','));
});
- tabContent.querySelector('.btnSelectView').addEventListener('layoutchange', function (e) {
+ btnSelectView.addEventListener('layoutchange', function (e) {
var viewStyle = e.detail.viewStyle;
diff --git a/dashboard-ui/scripts/moviegenres.js b/dashboard-ui/scripts/moviegenres.js
index 7ffaa97b6f..727c1300a1 100644
--- a/dashboard-ui/scripts/moviegenres.js
+++ b/dashboard-ui/scripts/moviegenres.js
@@ -127,12 +127,13 @@
reloadItems(tabContent);
};
- tabContent.querySelector('.btnSelectView').addEventListener('click', function (e) {
+ var btnSelectView = tabContent.querySelector('.btnSelectView');
+ btnSelectView.addEventListener('click', function (e) {
LibraryBrowser.showLayoutMenu(e.target, self.getCurrentViewStyle(), self.getViewStyles());
});
- tabContent.querySelector('.btnSelectView').addEventListener('layoutchange', function (e) {
+ btnSelectView.addEventListener('layoutchange', function (e) {
self.setCurrentViewStyle(e.detail.viewStyle);
});
diff --git a/dashboard-ui/scripts/movies.js b/dashboard-ui/scripts/movies.js
index ff76d20391..5c8a8a8d36 100644
--- a/dashboard-ui/scripts/movies.js
+++ b/dashboard-ui/scripts/movies.js
@@ -283,12 +283,13 @@
});
});
- tabContent.querySelector('.btnSelectView').addEventListener('click', function (e) {
+ var btnSelectView = tabContent.querySelector('.btnSelectView');
+ btnSelectView.addEventListener('click', function (e) {
libraryBrowser.showLayoutMenu(e.target, self.getCurrentViewStyle(), 'Banner,List,Poster,PosterCard,Thumb,ThumbCard'.split(','));
});
- tabContent.querySelector('.btnSelectView').addEventListener('layoutchange', function (e) {
+ btnSelectView.addEventListener('layoutchange', function (e) {
var viewStyle = e.detail.viewStyle;
diff --git a/dashboard-ui/scripts/musicalbums.js b/dashboard-ui/scripts/musicalbums.js
index 5f27d51b7f..e5ba98be3d 100644
--- a/dashboard-ui/scripts/musicalbums.js
+++ b/dashboard-ui/scripts/musicalbums.js
@@ -224,12 +224,13 @@
});
});
- tabContent.querySelector('.btnSelectView').addEventListener('click', function (e) {
+ var btnSelectView = tabContent.querySelector('.btnSelectView');
+ btnSelectView.addEventListener('click', function (e) {
libraryBrowser.showLayoutMenu(e.target, self.getCurrentViewStyle(), 'List,Poster,PosterCard'.split(','));
});
- tabContent.querySelector('.btnSelectView').addEventListener('layoutchange', function (e) {
+ btnSelectView.addEventListener('layoutchange', function (e) {
var viewStyle = e.detail.viewStyle;
diff --git a/dashboard-ui/scripts/musicartists.js b/dashboard-ui/scripts/musicartists.js
index 2912deff68..7f9d5cdb46 100644
--- a/dashboard-ui/scripts/musicartists.js
+++ b/dashboard-ui/scripts/musicartists.js
@@ -1,10 +1,11 @@
-define(['jQuery', 'alphaPicker'], function ($, alphaPicker) {
+define(['events', 'libraryBrowser', 'imageLoader', 'alphaPicker'], function (events, libraryBrowser, imageLoader, alphaPicker) {
return function (view, params, tabContent) {
var self = this;
var data = {};
+
function getPageData(context) {
var key = getSavedQueryKey(context);
var pageData = data[key];
@@ -21,11 +22,11 @@
EnableImageTypes: "Primary,Backdrop,Banner,Thumb",
Limit: LibraryBrowser.getDefaultPageSize()
},
- 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;
}
@@ -58,25 +59,23 @@
// Scroll back up so they can see the results from the beginning
window.scrollTo(0, 0);
- var view = getPageData(page).view;
+ updateFilterControls(page);
- var html = '';
var pagingHtml = LibraryBrowser.getQueryPagingHtml({
startIndex: query.StartIndex,
limit: query.Limit,
totalRecordCount: result.TotalRecordCount,
showLimit: false,
updatePageSizeSetting: false,
- addLayoutButton: true,
- currentLayout: view,
- filterButton: true
+ addLayoutButton: false,
+ sortButton: false,
+ filterButton: false
});
- page.querySelector('.listTopPaging').innerHTML = pagingHtml;
+ var html;
+ var viewStyle = self.getCurrentViewStyle();
- updateFilterControls(page);
-
- if (view == "List") {
+ if (viewStyle == "List") {
html = LibraryBrowser.getListViewHtml({
items: result.Items,
@@ -84,19 +83,7 @@
sortBy: query.SortBy
});
}
- else if (view == "Poster") {
- html = LibraryBrowser.getPosterViewHtml({
- items: result.Items,
- shape: "square",
- context: 'music',
- showTitle: true,
- coverImage: true,
- lazy: true,
- centerText: true,
- overlayPlayButton: true
- });
- }
- else if (view == "PosterCard") {
+ else if (viewStyle == "PosterCard") {
html = LibraryBrowser.getPosterViewHtml({
items: result.Items,
@@ -109,47 +96,69 @@
showSongCount: true
});
}
+ else {
- var elem = page.querySelector('#items');
- elem.innerHTML = html + pagingHtml;
- ImageLoader.lazyChildren(elem);
+ // Poster
+ html = LibraryBrowser.getPosterViewHtml({
+ items: result.Items,
+ shape: "square",
+ context: 'music',
+ showTitle: true,
+ coverImage: true,
+ lazy: true,
+ centerText: true,
+ overlayPlayButton: true
+ });
+ }
- $('.btnNextPage', page).on('click', function () {
+ var i, length;
+ var elems = tabContent.querySelectorAll('.paging');
+ for (i = 0, length = elems.length; i < length; i++) {
+ elems[i].innerHTML = pagingHtml;
+ }
+
+ 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);
+ }
- $('.btnChangeLayout', page).on('layoutchange', function (e, layout) {
- getPageData(page).view = layout;
- LibraryBrowser.saveViewSetting(getSavedQueryKey(page), layout);
- reloadItems(page);
- });
+ elems = tabContent.querySelectorAll('.btnNextPage');
+ for (i = 0, length = elems.length; i < length; i++) {
+ elems[i].addEventListener('click', onNextPageClick);
+ }
- $('.btnFilter', page).on('click', function () {
- showFilterMenu(page);
- });
+ 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);
- LibraryBrowser.saveQueryValues(getSavedQueryKey(page), query);
Dashboard.hideLoadingMsg();
});
}
- function showFilterMenu(page) {
+ self.showFilterMenu = function () {
require(['components/filterdialog/filterdialog'], function (filterDialogFactory) {
var filterDialog = new filterDialogFactory({
- query: getQuery(page),
+ query: getQuery(tabContent),
mode: self.mode
});
Events.on(filterDialog, 'filterchange', function () {
- reloadItems(page);
+ getQuery(tabContent).StartIndex = 0;
+ reloadItems(tabContent);
});
filterDialog.show();
@@ -159,27 +168,59 @@
function updateFilterControls(tabContent) {
var query = getQuery(tabContent);
-
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);
- });
+ function initPage(tabContent) {
- self.alphaPicker = new alphaPicker({
- element: alphaPickerElement,
- valueChangeEvent: 'click'
- });
+ 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();
+ });
+
+ var btnSelectView = tabContent.querySelector('.btnSelectView');
+ btnSelectView.addEventListener('click', function (e) {
+
+ libraryBrowser.showLayoutMenu(e.target, self.getCurrentViewStyle(), 'List,Poster,PosterCard'.split(','));
+ });
+
+ 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);
+ });
+ }
+
+ 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/musicgenres.js b/dashboard-ui/scripts/musicgenres.js
index 39e9d2ea4e..8df0469357 100644
--- a/dashboard-ui/scripts/musicgenres.js
+++ b/dashboard-ui/scripts/musicgenres.js
@@ -127,12 +127,13 @@
reloadItems(tabContent);
};
- tabContent.querySelector('.btnSelectView').addEventListener('click', function (e) {
+ var btnSelectView = tabContent.querySelector('.btnSelectView');
+ btnSelectView.addEventListener('click', function (e) {
LibraryBrowser.showLayoutMenu(e.target, self.getCurrentViewStyle(), self.getViewStyles());
});
- tabContent.querySelector('.btnSelectView').addEventListener('layoutchange', function (e) {
+ btnSelectView.addEventListener('layoutchange', function (e) {
self.setCurrentViewStyle(e.detail.viewStyle);
});
diff --git a/dashboard-ui/scripts/songs.js b/dashboard-ui/scripts/songs.js
index d838064b35..f2ab6b4dc8 100644
--- a/dashboard-ui/scripts/songs.js
+++ b/dashboard-ui/scripts/songs.js
@@ -1,13 +1,11 @@
-define(['jQuery'], function ($) {
-
+define(['events', 'libraryBrowser', 'imageLoader', 'alphaPicker'], function (events, libraryBrowser, imageLoader, alphaPicker) {
return function (view, params, tabContent) {
var self = this;
- var defaultSortBy = "Album,SortName";
-
var data = {};
+
function getPageData(context) {
var key = getSavedQueryKey(context);
var pageData = data[key];
@@ -15,7 +13,7 @@
if (!pageData) {
pageData = data[key] = {
query: {
- SortBy: defaultSortBy,
+ SortBy: "Album,SortName",
SortOrder: "Ascending",
IncludeItemTypes: "Audio",
Recursive: true,
@@ -27,8 +25,8 @@
}
};
- pageData.query.ParentId = LibraryMenu.getTopParentId();
- LibraryBrowser.loadSavedQueryValues(key, pageData.query);
+ pageData.query.ParentId = params.topParentId;
+ libraryBrowser.loadSavedQueryValues(key, pageData.query);
}
return pageData;
}
@@ -41,66 +39,128 @@
function getSavedQueryKey(context) {
if (!context.savedQueryKey) {
- context.savedQueryKey = LibraryBrowser.getSavedQueryKey('songs');
+ context.savedQueryKey = libraryBrowser.getSavedQueryKey('songs');
}
return context.savedQueryKey;
}
- function reloadItems(context) {
+ function reloadItems(page) {
Dashboard.showLoadingMsg();
- var query = getQuery(context);
+ var query = getQuery(page);
+
ApiClient.getItems(Dashboard.getCurrentUserId(), query).then(function (result) {
// Scroll back up so they can see the results from the beginning
window.scrollTo(0, 0);
- var html = '';
+ updateFilterControls(page);
+
var pagingHtml = LibraryBrowser.getQueryPagingHtml({
startIndex: query.StartIndex,
limit: query.Limit,
totalRecordCount: result.TotalRecordCount,
showLimit: false,
- sortButton: true,
updatePageSizeSetting: false,
- filterButton: true
+ addLayoutButton: false,
+ sortButton: false,
+ filterButton: false
});
- context.querySelector('.listTopPaging').innerHTML = pagingHtml;
-
- html += LibraryBrowser.getListViewHtml({
+ var html = LibraryBrowser.getListViewHtml({
items: result.Items,
showIndex: true,
defaultAction: 'play',
smallIcon: true
});
- var elem = context.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', context).on('click', function () {
+ function onNextPageClick() {
query.StartIndex += query.Limit;
- reloadItems(context);
- });
+ reloadItems(tabContent);
+ }
- $('.btnPreviousPage', context).on('click', function () {
+ function onPreviousPageClick() {
query.StartIndex -= query.Limit;
- reloadItems(context);
+ 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: 'songs'
});
- $('.btnFilter', context).on('click', function () {
- showFilterMenu(context);
+ Events.on(filterDialog, 'filterchange', function () {
+ getQuery(tabContent).StartIndex = 0;
+ reloadItems(tabContent);
});
- // On callback make sure to set StartIndex = 0
- $('.btnSort', context).on('click', function () {
- LibraryBrowser.showSortMenu({
- items: [{
- name: Globalize.translate('OptionTrackName'),
- id: 'Name'
- },
+ filterDialog.show();
+ });
+ }
+
+ 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);
+ });
+
+ 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('OptionTrackName'),
+ id: 'Name'
+ },
{
name: Globalize.translate('OptionAlbum'),
id: 'Album,SortName'
@@ -133,39 +193,29 @@
name: Globalize.translate('OptionRuntime'),
id: 'Runtime,AlbumArtist,Album,SortName'
}],
- callback: function () {
- reloadItems(context);
- },
- query: query
- });
+ callback: function () {
+ getQuery(tabContent).StartIndex = 0;
+ reloadItems(tabContent);
+ },
+ query: getQuery(tabContent),
+ button: e.target
});
-
- LibraryBrowser.saveQueryValues(getSavedQueryKey(context), query);
-
- Dashboard.hideLoadingMsg();
});
}
- function showFilterMenu(context) {
+ self.getCurrentViewStyle = function () {
+ return getPageData(tabContent).view;
+ };
- require(['components/filterdialog/filterdialog'], function (filterDialogFactory) {
+ initPage(tabContent);
- var filterDialog = new filterDialogFactory({
- query: getQuery(context),
- mode: 'songs'
- });
-
- Events.on(filterDialog, 'filterchange', function () {
- reloadItems(context);
- });
-
- filterDialog.show();
- });
- }
-
self.renderTab = function () {
+ self.renderTab = function () {
reloadItems(tabContent);
+ updateFilterControls(tabContent);
+ };
+
+ self.destroy = function () {
};
};
-
});
\ No newline at end of file
diff --git a/dashboard-ui/scripts/tvgenres.js b/dashboard-ui/scripts/tvgenres.js
index b43286d097..396adf9e71 100644
--- a/dashboard-ui/scripts/tvgenres.js
+++ b/dashboard-ui/scripts/tvgenres.js
@@ -127,12 +127,13 @@
reloadItems(tabContent);
};
- tabContent.querySelector('.btnSelectView').addEventListener('click', function (e) {
+ var btnSelectView = tabContent.querySelector('.btnSelectView');
+ btnSelectView.addEventListener('click', function (e) {
LibraryBrowser.showLayoutMenu(e.target, self.getCurrentViewStyle(), self.getViewStyles());
});
- tabContent.querySelector('.btnSelectView').addEventListener('layoutchange', function (e) {
+ btnSelectView.addEventListener('layoutchange', function (e) {
self.setCurrentViewStyle(e.detail.viewStyle);
});
diff --git a/dashboard-ui/scripts/tvshows.js b/dashboard-ui/scripts/tvshows.js
index ae170ad40d..73c98b6f03 100644
--- a/dashboard-ui/scripts/tvshows.js
+++ b/dashboard-ui/scripts/tvshows.js
@@ -263,12 +263,13 @@
});
});
- tabContent.querySelector('.btnSelectView').addEventListener('click', function (e) {
+ var btnSelectView = tabContent.querySelector('.btnSelectView');
+ btnSelectView.addEventListener('click', function (e) {
libraryBrowser.showLayoutMenu(e.target, self.getCurrentViewStyle(), 'Banner,List,Poster,PosterCard,Thumb,ThumbCard'.split(','));
});
- tabContent.querySelector('.btnSelectView').addEventListener('layoutchange', function (e) {
+ btnSelectView.addEventListener('layoutchange', function (e) {
var viewStyle = e.detail.viewStyle;