update game filters
This commit is contained in:
Luke Pulverenti
parent
8a8ca495fd
commit
93ef685322
8 changed files with 440 additions and 511 deletions
|
|
@ -1,4 +1,77 @@
|
|||
define(['paperdialoghelper', 'events', 'paper-checkbox'], function (paperDialogHelper, events) {
|
||||
define(['paperdialoghelper', 'events', 'paper-checkbox', 'jqmcollapsible', 'css!components/filterdialog/style', 'paper-radio-button', 'paper-radio-group'], function (paperDialogHelper, events) {
|
||||
|
||||
function renderOptions(context, selector, cssClass, items) {
|
||||
|
||||
var elem = context.querySelector(selector);
|
||||
|
||||
if (items.length) {
|
||||
|
||||
elem.classList.remove('hide');
|
||||
|
||||
} else {
|
||||
elem.classList.add('hide');
|
||||
}
|
||||
|
||||
var html = '';
|
||||
|
||||
// style="margin: -.2em -.8em;"
|
||||
html += '<div class="paperCheckboxList">';
|
||||
|
||||
var index = 0;
|
||||
var idPrefix = 'chk' + selector.substring(1);
|
||||
|
||||
html += items.map(function (filter) {
|
||||
|
||||
var itemHtml = '';
|
||||
|
||||
var id = idPrefix + index;
|
||||
//itemHtml += '<div class="checkboxContainer">';
|
||||
//itemHtml += '<input id="' + id + '" type="checkbox" data-filter="' + filter + '" data-role="none" class="' + cssClass + '" />';
|
||||
//itemHtml += '<label for="' + id + '">' + filter + '</label>';
|
||||
//itemHtml += '</div>';
|
||||
|
||||
itemHtml += '<paper-checkbox id="' + id + '" data-filter="' + filter + '" class="' + cssClass + '">' + filter + '</paper-checkbox>';
|
||||
|
||||
index++;
|
||||
|
||||
return itemHtml;
|
||||
|
||||
}).join('');
|
||||
|
||||
html += '</div>';
|
||||
|
||||
elem.querySelector('.filterOptions').innerHTML = html;
|
||||
}
|
||||
|
||||
function renderFilters(context, result) {
|
||||
|
||||
// If there's a huge number of these they will be really show to render
|
||||
if (result.Tags) {
|
||||
result.Tags.length = Math.min(result.Tags.length, 50);
|
||||
}
|
||||
|
||||
renderOptions(context, '.genreFilters', 'chkGenreFilter', result.Genres);
|
||||
renderOptions(context, '.officialRatingFilters', 'chkOfficialRatingFilter', result.OfficialRatings);
|
||||
renderOptions(context, '.tagFilters', 'chkTagFilter', result.Tags);
|
||||
renderOptions(context, '.yearFilters', 'chkYearFilter', result.Years);
|
||||
|
||||
}
|
||||
|
||||
function loadDynamicFilters(context, userId, itemQuery) {
|
||||
|
||||
return ApiClient.getJSON(ApiClient.getUrl('Items/Filters', {
|
||||
|
||||
UserId: userId,
|
||||
ParentId: itemQuery.ParentId,
|
||||
IncludeItemTypes: itemQuery.IncludeItemTypes
|
||||
|
||||
|
||||
})).then(function (result) {
|
||||
|
||||
renderFilters(context, result);
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
function updateFilterControls(context, options) {
|
||||
|
||||
|
|
@ -20,6 +93,20 @@
|
|||
|
||||
});
|
||||
}
|
||||
|
||||
$('.chkVideoTypeFilter', context).each(function () {
|
||||
|
||||
var filters = "," + (query.VideoTypes || "");
|
||||
var filterName = this.getAttribute('data-filter');
|
||||
|
||||
this.checked = filters.indexOf(',' + filterName) != -1;
|
||||
});
|
||||
|
||||
$('.chk3DFilter', context).checked(query.Is3D == true);
|
||||
$('.chkHDFilter', context).checked(query.IsHD == true);
|
||||
$('.chkSDFilter', context).checked(query.IsHD == false);
|
||||
|
||||
context.querySelector('.playersRadioGroup').selected = query.MinPlayers == null ? 'all' : query.MinPlayers;
|
||||
}
|
||||
|
||||
function triggerChange(instance) {
|
||||
|
|
@ -27,6 +114,19 @@
|
|||
events.trigger(instance, 'filterchange');
|
||||
}
|
||||
|
||||
function parentWithClass(elem, className) {
|
||||
|
||||
while (!elem.classList || !elem.classList.contains(className)) {
|
||||
elem = elem.parentNode;
|
||||
|
||||
if (!elem) {
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
return elem;
|
||||
}
|
||||
|
||||
function bindEvents(instance, context, options) {
|
||||
|
||||
var query = options.query;
|
||||
|
|
@ -71,6 +171,133 @@
|
|||
triggerChange(instance);
|
||||
});
|
||||
}
|
||||
|
||||
$('.chkVideoTypeFilter', context).on('change', function () {
|
||||
|
||||
var filterName = this.getAttribute('data-filter');
|
||||
var filters = query.VideoTypes || "";
|
||||
|
||||
filters = (',' + filters).replace(',' + filterName, '').substring(1);
|
||||
|
||||
if (this.checked) {
|
||||
filters = filters ? (filters + ',' + filterName) : filterName;
|
||||
}
|
||||
|
||||
query.StartIndex = 0;
|
||||
query.VideoTypes = filters;
|
||||
|
||||
triggerChange(instance);
|
||||
});
|
||||
|
||||
$('.chk3DFilter', context).on('change', function () {
|
||||
|
||||
query.StartIndex = 0;
|
||||
query.Is3D = this.checked ? true : null;
|
||||
|
||||
triggerChange(instance);
|
||||
});
|
||||
|
||||
$('.chkHDFilter', context).on('change', function () {
|
||||
|
||||
query.StartIndex = 0;
|
||||
query.IsHD = this.checked ? true : null;
|
||||
triggerChange(instance);
|
||||
});
|
||||
|
||||
$('.chkSDFilter', context).on('change', function () {
|
||||
|
||||
query.StartIndex = 0;
|
||||
query.IsHD = this.checked ? false : null;
|
||||
|
||||
triggerChange(instance);
|
||||
});
|
||||
|
||||
context.querySelector('.playersRadioGroup').addEventListener('iron-select', function(e) {
|
||||
|
||||
query.StartIndex = 0;
|
||||
var val = e.target.selected;
|
||||
query.MinPlayers = val == "all" ? null : val;
|
||||
triggerChange(instance);
|
||||
});
|
||||
|
||||
context.addEventListener('change', function(e) {
|
||||
|
||||
var chkGenreFilter = parentWithClass(e.target, 'chkGenreFilter');
|
||||
if (chkGenreFilter) {
|
||||
var filterName = chkGenreFilter.getAttribute('data-filter');
|
||||
var filters = query.Genres || "";
|
||||
var delimiter = '|';
|
||||
|
||||
filters = (delimiter + filters).replace(delimiter + filterName, '').substring(1);
|
||||
|
||||
if (chkGenreFilter.checked) {
|
||||
filters = filters ? (filters + delimiter + filterName) : filterName;
|
||||
}
|
||||
|
||||
query.StartIndex = 0;
|
||||
query.Genres = filters;
|
||||
|
||||
triggerChange(instance);
|
||||
return;
|
||||
}
|
||||
|
||||
var chkTagFilter = parentWithClass(e.target, 'chkTagFilter');
|
||||
if (chkTagFilter) {
|
||||
var filterName = chkTagFilter.getAttribute('data-filter');
|
||||
var filters = query.Tags || "";
|
||||
var delimiter = '|';
|
||||
|
||||
filters = (delimiter + filters).replace(delimiter + filterName, '').substring(1);
|
||||
|
||||
if (chkTagFilter.checked) {
|
||||
filters = filters ? (filters + delimiter + filterName) : filterName;
|
||||
}
|
||||
|
||||
query.StartIndex = 0;
|
||||
query.Tags = filters;
|
||||
|
||||
triggerChange(instance);
|
||||
return;
|
||||
}
|
||||
|
||||
var chkYearFilter = parentWithClass(e.target, 'chkYearFilter');
|
||||
if (chkYearFilter) {
|
||||
var filterName = chkYearFilter.getAttribute('data-filter');
|
||||
var filters = query.Years || "";
|
||||
var delimiter = ',';
|
||||
|
||||
filters = (delimiter + filters).replace(delimiter + filterName, '').substring(1);
|
||||
|
||||
if (chkYearFilter.checked) {
|
||||
filters = filters ? (filters + delimiter + filterName) : filterName;
|
||||
}
|
||||
|
||||
query.StartIndex = 0;
|
||||
query.Years = filters;
|
||||
|
||||
triggerChange(instance);
|
||||
return;
|
||||
}
|
||||
|
||||
var chkOfficialRatingFilter = parentWithClass(e.target, 'chkOfficialRatingFilter');
|
||||
if (chkOfficialRatingFilter) {
|
||||
var filterName = chkOfficialRatingFilter.getAttribute('data-filter');
|
||||
var filters = query.OfficialRatings || "";
|
||||
var delimiter = '|';
|
||||
|
||||
filters = (delimiter + filters).replace(delimiter + filterName, '').substring(1);
|
||||
|
||||
if (chkOfficialRatingFilter.checked) {
|
||||
filters = filters ? (filters + delimiter + filterName) : filterName;
|
||||
}
|
||||
|
||||
query.StartIndex = 0;
|
||||
query.OfficialRatings = filters;
|
||||
|
||||
triggerChange(instance);
|
||||
return;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function setVisibility(context, options) {
|
||||
|
|
@ -79,6 +306,20 @@
|
|||
hideByClass(context, 'nolivetvchannels');
|
||||
}
|
||||
|
||||
if (enableDynamicFilters(options.mode)) {
|
||||
context.querySelector('.genreFilters').classList.remove('hide');
|
||||
context.querySelector('.officialRatingFilters').classList.remove('hide');
|
||||
context.querySelector('.tagFilters').classList.remove('hide');
|
||||
context.querySelector('.yearFilters').classList.remove('hide');
|
||||
}
|
||||
|
||||
if (options.mode == 'movies') {
|
||||
context.querySelector('.videoTypeFilters').classList.remove('hide');
|
||||
}
|
||||
|
||||
if (options.mode == 'games') {
|
||||
context.querySelector('.players').classList.remove('hide');
|
||||
}
|
||||
}
|
||||
|
||||
function hideByClass(context, className) {
|
||||
|
|
@ -90,6 +331,10 @@
|
|||
}
|
||||
}
|
||||
|
||||
function enableDynamicFilters(mode) {
|
||||
return mode == 'movies' || mode == 'games';
|
||||
}
|
||||
|
||||
return function (options) {
|
||||
|
||||
var self = this;
|
||||
|
|
@ -115,21 +360,31 @@
|
|||
dlg.classList.add('background-theme-a');
|
||||
|
||||
dlg.classList.add('formDialog');
|
||||
dlg.classList.add('filterDialog');
|
||||
|
||||
var html = '';
|
||||
|
||||
html += Globalize.translateDocument(template);
|
||||
|
||||
dlg.innerHTML = html;
|
||||
|
||||
setVisibility(dlg, options);
|
||||
document.body.appendChild(dlg);
|
||||
|
||||
// needed for jqm collapsibles
|
||||
$(dlg.querySelector('.filterDialogContent')).trigger('create');
|
||||
|
||||
paperDialogHelper.open(dlg);
|
||||
|
||||
dlg.addEventListener('iron-overlay-closed', resolve);
|
||||
|
||||
updateFilterControls(dlg, options);
|
||||
bindEvents(self, dlg, options);
|
||||
|
||||
if (enableDynamicFilters(options.mode)) {
|
||||
dlg.classList.add('dynamicFilterDialog');
|
||||
loadDynamicFilters(dlg, Dashboard.getCurrentUserId(), options.query);
|
||||
}
|
||||
}
|
||||
|
||||
xhr.send();
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<div style="margin: 0;padding:1.5em 2em;">
|
||||
<h2 style="margin-bottom: .5em;">
|
||||
<div style="margin: 0;padding:1.5em 2em;" class="filterDialogContent">
|
||||
<h2 style="margin-bottom: .25em;">
|
||||
${HeaderFilters}
|
||||
</h2>
|
||||
<div class="paperCheckboxList">
|
||||
|
|
@ -10,4 +10,65 @@
|
|||
<paper-checkbox class="chkStandardFilter chkLikes" data-filter="Likes">${OptionLikes}</paper-checkbox>
|
||||
<paper-checkbox class="chkStandardFilter chkDislikes" data-filter="Dislikes">${OptionDislikes}</paper-checkbox>
|
||||
</div>
|
||||
|
||||
<div class="players hide" style="margin-top:1.5em;">
|
||||
<h2 style="margin-bottom: .25em;">
|
||||
${HeaderNumberOfPlayers}
|
||||
</h2>
|
||||
<paper-radio-group class="playersRadioGroup" selected="all">
|
||||
<paper-radio-button class="radioPlayers" name="all">${OptionAnyNumberOfPlayers}</paper-radio-button>
|
||||
<paper-radio-button class="radioPlayers" name="2">${Option2Player}</paper-radio-button>
|
||||
<paper-radio-button class="radioPlayers" name="3">${Option3Player}</paper-radio-button>
|
||||
<paper-radio-button class="radioPlayers" name="4">${Option4Player}</paper-radio-button>
|
||||
</paper-radio-group>
|
||||
</div>
|
||||
|
||||
<div data-role="collapsible" data-collapsed="true" data-mini="true" class="genreFilters hide" style="margin-top:2em;">
|
||||
<h2>${HeaderGenres}</h2>
|
||||
|
||||
<div class="filterOptions">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div data-role="collapsible" data-collapsed="true" data-mini="true" class="officialRatingFilters hide">
|
||||
<h2>${HeaderParentalRatings}</h2>
|
||||
|
||||
<div class="filterOptions">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div data-role="collapsible" data-collapsed="true" data-mini="true" class="tagFilters hide">
|
||||
<h2>${HeaderTags}</h2>
|
||||
|
||||
<div class="filterOptions">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div data-role="collapsible" data-collapsed="true" data-mini="true" class="tagFilters hide">
|
||||
<h2>${HeaderTags}</h2>
|
||||
|
||||
<div class="filterOptions">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div data-role="collapsible" data-collapsed="true" data-mini="true" class="videoTypeFilters hide">
|
||||
<h2>${HeaderVideoTypes}</h2>
|
||||
|
||||
<div class="paperCheckboxList">
|
||||
<paper-checkbox class="chkVideoTypeFilter chkBluray" data-filter="Bluray">${OptionBluray}</paper-checkbox>
|
||||
<paper-checkbox class="chkVideoTypeFilter chkDvd" data-filter="Dvd">${OptionDvd}</paper-checkbox>
|
||||
<paper-checkbox class="chkVideoTypeFilter chkIso" data-filter="Iso">${OptionIso}</paper-checkbox>
|
||||
|
||||
<paper-checkbox class="chkHDFilter IsHD">${OptionIsHD}</paper-checkbox>
|
||||
<paper-checkbox class="chkSDFilter IsHD">${OptionIsSD}</paper-checkbox>
|
||||
<paper-checkbox class="chk3DFilter chk3D">${Option3D}</paper-checkbox>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div data-role="collapsible" data-collapsed="true" data-mini="true" class="yearFilters hide">
|
||||
<h2>${HeaderYears}</h2>
|
||||
|
||||
<div class="filterOptions">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
30
dashboard-ui/components/filterdialog/style.css
Normal file
30
dashboard-ui/components/filterdialog/style.css
Normal file
|
|
@ -0,0 +1,30 @@
|
|||
.dynamicFilterDialog {
|
||||
position: fixed !important;
|
||||
top: 5% !important;
|
||||
bottom: 5% !important;
|
||||
margin: 0 !important;
|
||||
border-radius: 0 !important;
|
||||
max-height: none !important;
|
||||
max-width: none !important;
|
||||
min-width: 200px;
|
||||
}
|
||||
|
||||
@media all and (min-height: 300px) {
|
||||
|
||||
.dynamicFilterDialog {
|
||||
top: 10% !important;
|
||||
bottom: 10% !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media all and (min-width: 300px) {
|
||||
|
||||
.dynamicFilterDialog {
|
||||
min-width: 240px;
|
||||
}
|
||||
}
|
||||
|
||||
.filterDialog paper-radio-button {
|
||||
display: block;
|
||||
padding-left: 0;
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue