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

update live tv filters

Browse source
This commit is contained in:
Luke Pulverenti 2016-02-14 21:51:05 -05:00
parent 71cc832d1c
commit 6fb474ce5f
6 changed files with 134 additions and 121 deletions
Download patch file Download diff file Expand all files Collapse all files

101
dashboard-ui/components/filterdialog/filterdialog.js
View file

@ -1,15 +1,25 @@
define(['paperdialoghelper', 'events', 'paper-checkbox'], function (paperDialogHelper, events) {
function updateFilterControls(context, query) {
function updateFilterControls(context, options) {
$('.chkStandardFilter', context).each(function () {
var query = options.query;
var filters = "," + (query.Filters || "");
var filterName = this.getAttribute('data-filter');
if (options.mode == 'livetvchannels') {
this.checked = filters.indexOf(',' + filterName) != -1;
$('.chkFavorite', context).checked(query.IsFavorite == true);
$('.chkLikes', context).checked(query.IsLiked == true);
$('.chkDislikes', context).checked(query.IsDisliked == true);
});
} else {
$('.chkStandardFilter', context).each(function () {
var filters = "," + (query.Filters || "");
var filterName = this.getAttribute('data-filter');
this.checked = filters.indexOf(',' + filterName) != -1;
});
}
}
function triggerChange(instance) {
@ -17,23 +27,67 @@
events.trigger(instance, 'filterchange');
}
function bindEvents(instance, context, query) {
$('.chkStandardFilter', context).on('change', function () {
function bindEvents(instance, context, options) {
var filterName = this.getAttribute('data-filter');
var filters = query.Filters || "";
var query = options.query;
filters = (',' + filters).replace(',' + filterName, '').substring(1);
if (options.mode == 'livetvchannels') {
if (this.checked) {
filters = filters ? (filters + ',' + filterName) : filterName;
}
$('.chkFavorite', context).on('change', function () {
query.StartIndex = 0;
query.IsFavorite = this.checked ? true : null;
triggerChange(instance);
});
query.StartIndex = 0;
query.Filters = filters;
triggerChange(instance);
});
$('.chkLikes', context).on('change', function () {
query.StartIndex = 0;
query.IsLiked = this.checked ? true : null;
triggerChange(instance);
});
$('.chkDislikes', context).on('change', function () {
query.StartIndex = 0;
query.IsDisliked = this.checked ? true : null;
triggerChange(instance);
});
} else {
$('.chkStandardFilter', context).on('change', function () {
var filterName = this.getAttribute('data-filter');
var filters = query.Filters || "";
filters = (',' + filters).replace(',' + filterName, '').substring(1);
if (this.checked) {
filters = filters ? (filters + ',' + filterName) : filterName;
}
query.StartIndex = 0;
query.Filters = filters;
triggerChange(instance);
});
}
}
function setVisibility(context, options) {
if (options.mode == 'livetvchannels') {
hideByClass(context, 'nolivetvchannels');
}
}
function hideByClass(context, className) {
var elems = context.querySelectorAll('.' + className);
for (var i = 0, length = elems.length; i < length; i++) {
elems[i].classList.add('hide');
}
}
return function (options) {
@ -57,8 +111,8 @@
exitAnimationDuration: 200
});
dlg.classList.add('ui-body-b');
dlg.classList.add('background-theme-b');
dlg.classList.add('ui-body-a');
dlg.classList.add('background-theme-a');
dlg.classList.add('formDialog');
@ -67,14 +121,15 @@
html += Globalize.translateDocument(template);
dlg.innerHTML = html;
setVisibility(dlg, options);
document.body.appendChild(dlg);
paperDialogHelper.open(dlg);
dlg.addEventListener('iron-overlay-closed', resolve);
updateFilterControls(dlg, options.query);
bindEvents(self, dlg, options.query);
updateFilterControls(dlg, options);
bindEvents(self, dlg, options);
}
xhr.send();

17
dashboard-ui/components/filterdialog/filterdialog.template.html
View file

@ -1,14 +1,13 @@
<div style="margin: 0;padding:1.5em 2em;">
<h1>
<h2 style="margin-bottom: .5em;">
${HeaderFilters}
</h1>
</h2>
<div class="paperCheckboxList">
<paper-checkbox class="chkStandardFilter" data-filter="IsPlayed">${OptionPlayed}</paper-checkbox>
<paper-checkbox class="chkStandardFilter" data-filter="IsUnPlayed">${OptionUnplayed}</paper-checkbox>
<paper-checkbox class="chkStandardFilter" data-filter="IsResumable">${OptionResumable}</paper-checkbox>
<paper-checkbox class="chkStandardFilter" data-filter="IsFavorite">${OptionFavorite}</paper-checkbox>
<paper-checkbox class="chkStandardFilter" data-filter="Likes">${OptionLikes}</paper-checkbox>
<paper-checkbox class="chkStandardFilter" data-filter="Dislikes">${OptionDislikes}</paper-checkbox>
<paper-checkbox class="chkStandardFilter nolivetvchannels" data-filter="IsPlayed">${OptionPlayed}</paper-checkbox>
<paper-checkbox class="chkStandardFilter nolivetvchannels" data-filter="IsUnPlayed">${OptionUnplayed}</paper-checkbox>
<paper-checkbox class="chkStandardFilter nolivetvchannels" data-filter="IsResumable">${OptionResumable}</paper-checkbox>
<paper-checkbox class="chkStandardFilter chkFavorite" data-filter="IsFavorite">${OptionFavorite}</paper-checkbox>
<paper-checkbox class="chkStandardFilter chkLikes" data-filter="Likes">${OptionLikes}</paper-checkbox>
<paper-checkbox class="chkStandardFilter chkDislikes" data-filter="Dislikes">${OptionDislikes}</paper-checkbox>
</div>
</div>

46
dashboard-ui/livetv.html
View file

@ -4,7 +4,7 @@
<title>Emby</title>
</head>
<body>
<div id="liveTvSuggestedPage" data-dom-cache="true" data-role="page" class="page libraryPage liveTvPage pageWithAbsoluteTabs" data-contextname="${HeaderLiveTv}" data-backdroptype="series,movie" data-require="jqmpanel,scripts/livetvsuggested,livetvcss,scripts/livetvcomponents,paper-tabs,neon-animated-pages,paper-checkbox">
<div id="liveTvSuggestedPage" data-dom-cache="true" data-role="page" class="page libraryPage liveTvPage pageWithAbsoluteTabs" data-contextname="${HeaderLiveTv}" data-backdroptype="series,movie" data-require="scripts/livetvsuggested,livetvcss,scripts/livetvcomponents,paper-tabs,neon-animated-pages,paper-checkbox">
<div class="libraryViewNav libraryViewNavWithMinHeight">
<paper-tabs hidescrollbuttons noink>
@ -34,31 +34,31 @@
<div class="activeProgramItems itemsContainer noautoinit"></div>
<br />
</div>
<div id="upcomingPrograms" class="homePageSection" style="margin-top:1em;">
<div id="upcomingPrograms" class="homePageSection" style="margin-top: 1em;">
<h1 class="listHeader">${HeaderUpcomingPrograms}</h1>
<div class="upcomingProgramItems itemsContainer noautoinit"></div>
<br />
</div>
<div id="upcomingTvMovies" class="homePageSection" style="margin-top:1em;">
<div id="upcomingTvMovies" class="homePageSection" style="margin-top: 1em;">
<div>
<h1 class="listHeader" style="display:inline-block;vertical-align:middle;">${HeaderUpcomingMovies}</h1>
<a href="livetvitems.html?type=movies" class="clearLink" style="margin-left:1em;vertical-align:middle;"><paper-button raised class="more mini noIcon">${ButtonMoreItems}</paper-button></a>
<h1 class="listHeader" style="display: inline-block; vertical-align: middle;">${HeaderUpcomingMovies}</h1>
<a href="livetvitems.html?type=movies" class="clearLink" style="margin-left: 1em; vertical-align: middle;"><paper-button raised class="more mini noIcon">${ButtonMoreItems}</paper-button></a>
</div>
<div class="upcomingTvMovieItems itemsContainer noautoinit"></div>
<br />
</div>
<div id="upcomingSports" class="homePageSection" style="margin-top:1em;">
<div id="upcomingSports" class="homePageSection" style="margin-top: 1em;">
<div>
<h1 class="listHeader" style="display:inline-block;vertical-align:middle;">${HeaderUpcomingSports}</h1>
<a href="livetvitems.html?type=sports" class="clearLink" style="margin-left:1em;vertical-align:middle;"><paper-button raised class="more mini noIcon">${ButtonMoreItems}</paper-button></a>
<h1 class="listHeader" style="display: inline-block; vertical-align: middle;">${HeaderUpcomingSports}</h1>
<a href="livetvitems.html?type=sports" class="clearLink" style="margin-left: 1em; vertical-align: middle;"><paper-button raised class="more mini noIcon">${ButtonMoreItems}</paper-button></a>
</div>
<div class="upcomingSportsItems itemsContainer noautoinit"></div>
<br />
</div>
<div id="upcomingKids" class="homePageSection" style="margin-top:1em;">
<div id="upcomingKids" class="homePageSection" style="margin-top: 1em;">
<div>
<h1 class="listHeader" style="display:inline-block;vertical-align:middle;">${HeaderUpcomingForKids}</h1>
<a href="livetvitems.html?type=kids" class="clearLink" style="margin-left:1em;vertical-align:middle;"><paper-button raised class="more mini noIcon">${ButtonMoreItems}</paper-button></a>
<h1 class="listHeader" style="display: inline-block; vertical-align: middle;">${HeaderUpcomingForKids}</h1>
<a href="livetvitems.html?type=kids" class="clearLink" style="margin-left: 1em; vertical-align: middle;"><paper-button raised class="more mini noIcon">${ButtonMoreItems}</paper-button></a>
</div>
<div class="upcomingKidsItems itemsContainer noautoinit"></div>
<br />
@ -66,7 +66,7 @@
</div>
</neon-animatable>
<neon-animatable>
<div class="pageTabContent guideTabContent" style="width:auto;" data-index="1">
<div class="pageTabContent guideTabContent" style="width: auto;" data-index="1">
</div>
</neon-animatable>
<neon-animatable>
@ -75,7 +75,7 @@
<div class="listTopPaging">
</div>
</div>
<div id="items" class="itemsContainer" style="max-width:800px;margin: 0 auto;"></div>
<div id="items" class="itemsContainer" style="max-width: 800px; margin: 0 auto;"></div>
</div>
</neon-animatable>
<neon-animatable>
@ -87,14 +87,16 @@
</div>
<div id="latestRecordings" class="homePageSection hide">
<div>
<h1 class="listHeader" style="display:inline-block;vertical-align:middle;">${HeaderLatestRecordings}</h1>
<h1 class="listHeader" style="display: inline-block; vertical-align: middle;">${HeaderLatestRecordings}</h1>
<paper-button raised class="submit mini categorySyncButton" data-category="Latest"><iron-icon icon="sync"></iron-icon><span>${ButtonSync}</span></paper-button>
</div>
<div class="recordingItems itemsContainer"></div>
<br />
</div>
<div id="recordingGroups" style="display: none;" class="homePageSection">
<h1 class="listHeader"><a href="livetvrecordinglist.html">${HeaderAllRecordings}<img src="css/images/rightarrow.png" class="headerArrowImage" /></a></h1>
<h1 class="listHeader">
<a href="livetvrecordinglist.html">${HeaderAllRecordings}<img src="css/images/rightarrow.png" class="headerArrowImage" /></a>
</h1>
<div id="recordingGroupItems"></div>
</div>
</div>
@ -114,20 +116,6 @@
</neon-animated-pages>
</div>
<div data-role="panel" class="viewPanel channelViewPanel hide" data-theme="b" data-position="right" data-display="overlay" data-position-fixed="true">
<div class="ui-panel-inner">
<form>
<div>
<h1>${HeaderFilters}</h1>
<div class="paperCheckboxList">
<paper-checkbox class="chkStandardFilter chkFavorite" data-filter="IsFavorite">${OptionFavorite}</paper-checkbox>
<paper-checkbox class="chkStandardFilter chkLikes" data-filter="Likes">${OptionLikes}</paper-checkbox>
<paper-checkbox class="chkStandardFilter chkDislikes" data-filter="Dislikes">${OptionDislikes}</paper-checkbox>
</div>
</div>
</form>
</div>
</div>
<div data-role="content">
</div>
</div>

6
dashboard-ui/scripts/librarybrowser.js
View file

@ -2910,7 +2910,7 @@
var option = options.items[i];
html += '<paper-radio-button class="menuSortBy block" data-id="' + option.id + '" name="' + option.id.replace(',', '_') + '">' + option.name + '</paper-radio-button>';
html += '<paper-radio-button class="menuSortBy" style="display:block;" data-id="' + option.id + '" name="' + option.id.replace(',', '_') + '">' + option.name + '</paper-radio-button>';
}
html += '</paper-radio-group>';
@ -2918,8 +2918,8 @@
html += Globalize.translate('HeaderSortOrder');
html += '</h2>';
html += '<paper-radio-group class="groupSortOrder" selected="' + (options.query.SortOrder || 'Ascending') + '">';
html += '<paper-radio-button name="Ascending" class="menuSortOrder block">' + Globalize.translate('OptionAscending') + '</paper-radio-button>';
html += '<paper-radio-button name="Descending" class="menuSortOrder block">' + Globalize.translate('OptionDescending') + '</paper-radio-button>';
html += '<paper-radio-button name="Ascending" style="display:block;" class="menuSortOrder block">' + Globalize.translate('OptionAscending') + '</paper-radio-button>';
html += '<paper-radio-button name="Descending" style="display:block;" class="menuSortOrder block">' + Globalize.translate('OptionDescending') + '</paper-radio-button>';
html += '</paper-radio-group>';
html += '</div>';

84
dashboard-ui/scripts/livetvchannels.js
View file

@ -38,7 +38,7 @@
});
}
function renderChannels(page, viewPanel, result) {
function renderChannels(page, result) {
var query = getQuery();
@ -46,16 +46,11 @@
startIndex: query.StartIndex,
limit: query.Limit,
totalRecordCount: result.TotalRecordCount,
viewButton: true,
showLimit: false,
viewPanelClass: 'channelViewPanel',
updatePageSizeSetting: false,
viewIcon: 'filter-list'
filterButton: true
}));
updateFilterControls(viewPanel);
var html = getChannelsHtml(result.Items);
var elem = page.querySelector('#items');
@ -64,18 +59,39 @@
$('.btnNextPage', page).on('click', function () {
query.StartIndex += query.Limit;
reloadItems(page, viewPanel);
reloadItems(page);
});
$('.btnPreviousPage', page).on('click', function () {
query.StartIndex -= query.Limit;
reloadItems(page, viewPanel);
reloadItems(page);
});
$('.btnFilter', page).on('click', function () {
showFilterMenu(page);
});
LibraryBrowser.saveQueryValues(getSavedQueryKey(), query);
}
function reloadItems(page, viewPanel) {
function showFilterMenu(page) {
require(['components/filterdialog/filterdialog'], function (filterDialogFactory) {
var filterDialog = new filterDialogFactory({
query: getQuery(),
mode: 'livetvchannels'
});
Events.on(filterDialog, 'filterchange', function () {
reloadItems(page);
});
filterDialog.show();
});
}
function reloadItems(page) {
Dashboard.showLoadingMsg();
@ -85,7 +101,7 @@
ApiClient.getLiveTvChannels(query).then(function (result) {
renderChannels(page, viewPanel, result);
renderChannels(page, result);
Dashboard.hideLoadingMsg();
@ -93,54 +109,10 @@
});
}
function updateFilterControls(page) {
var query = getQuery();
$('.chkFavorite', page).checked(query.IsFavorite == true);
$('.chkLikes', page).checked(query.IsLiked == true);
$('.chkDislikes', page).checked(query.IsDisliked == true);
}
window.LiveTvPage.initChannelsTab = function (page, tabContent) {
var viewPanel = page.querySelector('.channelViewPanel');
$('.chkFavorite', viewPanel).on('change', function () {
var query = getQuery();
query.StartIndex = 0;
query.IsFavorite = this.checked ? true : null;
reloadItems(tabContent, viewPanel);
});
$('.chkLikes', viewPanel).on('change', function () {
var query = getQuery();
query.StartIndex = 0;
query.IsLiked = this.checked ? true : null;
reloadItems(tabContent, viewPanel);
});
$('.chkDislikes', viewPanel).on('change', function () {
var query = getQuery();
query.StartIndex = 0;
query.IsDisliked = this.checked ? true : null;
reloadItems(tabContent, viewPanel);
});
};
window.LiveTvPage.renderChannelsTab = function (page, tabContent) {
var viewPanel = page.querySelector('.channelViewPanel');
if (LibraryBrowser.needsRefresh(tabContent)) {
reloadItems(tabContent, viewPanel);
updateFilterControls(viewPanel);
reloadItems(tabContent);
}
};

1
dashboard-ui/scripts/livetvsuggested.js
View file

@ -162,7 +162,6 @@
depends.push('paper-icon-item');
depends.push('paper-item-body');
renderMethod = 'renderChannelsTab';
initMethod = 'initChannelsTab';
break;
case 3:
depends.push('scripts/livetvrecordings');