milas/jellyfish-web
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

plugin catalog list with collapsibles

Browse source
This commit is contained in:
Techywarrior 2013-04-11 17:58:30 -07:00
parent 62ee9f124c
commit 7c98e1dd8f
2 changed files with 58 additions and 31 deletions
Download patch file Download diff file Expand all files Collapse all files

24
dashboard-ui/plugincatalog.html
View file

@ -15,16 +15,26 @@
</div>
<div style="display: inline-block; margin: .75em 0;">
<fieldset data-role="controlgroup" data-type="horizontal" id="pluginTabs">
<a href="#" data-role="button" data-mini="true" class="ui-btn-active" rel="Server">MB Server</a>
<a href="#" data-role="button" data-mini="true" rel="MBTheater">MB Theatre</a>
<a href="#" data-role="button" data-mini="true" rel="MBClassic">MB Classic</a>
</fieldset>
<button data-mini="true" data-icon="filter" data-inline="true" onclick="$('#filterPanel', $.mobile.activePage).panel( 'toggle' );">Filter</button>
</div>
<button data-mini="true" data-icon="filter" data-inline="true" onclick="$('#filterPanel', $.mobile.activePage).panel( 'toggle' );">Filter</button>
<div id="noPlugins" class="hide"><div style="text-align:center;margin: 10px;">No available plugins</div></div>
<div data-role="collapsible" id="pluginServerCollapsible" class="hide">
<h3>MB Server</h3>
<div id="pluginServerTiles"></div>
</div>
<div data-role="collapsible" id="pluginTheatreCollapsible" class="hide">
<h3>MB Theatre</h3>
<div id="pluginTheatreTiles"></div>
</div>
<div data-role="collapsible" id="pluginClassicCollapsible" class="hide">
<h3>MB Classic</h3>
<div id="pluginClassicTiles"></div>
</div>
<div id="pluginTiles"></div>
</div>
</div>

65
dashboard-ui/scripts/plugincatalogpage.js
View file

@ -2,7 +2,7 @@
// The base query options
var query = {
TargetSystems: 'Server'
TargetSystems: 'Server,MBTheater,MBClassic'
};
function reloadList(page) {
@ -21,24 +21,28 @@
function populateList(page, availablePlugins, installedPlugins) {
Dashboard.showLoadingMsg();
availablePlugins = availablePlugins.filter(function (p) {
return p.type == "UserInstalled";
}).sort(function (a, b) {
return a.name > b.name ? 1 : -1;
});
var html = "";
var serverhtml = '';
var theatrehtml = '';
var classichtml = "";
for (var i = 0, length = availablePlugins.length; i < length; i++) {
var html = '';
var plugin = availablePlugins[i];
html += "<div class='posterViewItem'><a href='addPlugin.html?name=" + encodeURIComponent(plugin.name) + "'>";
if (plugin.thumbImage) {
html += "<img src='" + plugin.thumbImage + "' />";
html += "<img src='" + plugin.thumbImage + "' style='max-width:185px;' />";
} else {
html += "<img style='background:#444444;' src='css/images/items/list/collection.png' />";
html += "<img style='background:#444444;max-width:185px;' src='css/images/items/list/collection.png' />";
}
if (plugin.isPremium) {
@ -69,31 +73,52 @@
html += "</a></div>";
if (plugin.targetSystem == "Server") {
serverhtml += html;
}else if (plugin.targetSystem == "MBTheater") {
theatrehtml += html;
}else if (plugin.targetSystem == "MBClassic") {
classichtml += html;
}
}
if (!availablePlugins.length) {
html = '<div style="text-align:center;margin: 10px;">No available plugins</div>';
$("#noPlugins", page).hide();
}
$('#pluginTiles', page).html(html);
$('#pluginServerTiles', page).html(serverhtml);
$('#pluginTheatreTiles', page).html(theatrehtml);
$('#pluginClassicTiles', page).html(classichtml);
if (serverhtml) {
$('#pluginServerCollapsible', page).show();
}else {
$('#pluginServerCollapsible', page).hide();
}
if (theatrehtml) {
$('#pluginTheatreCollapsible', page).show();
}else {
$('#pluginTheatreCollapsible', page).hide();
}
if (classichtml) {
$('#pluginClassicCollapsible', page).show();
}else {
$('#pluginClassicCollapsible', page).hide();
}
Dashboard.hideLoadingMsg();
}
function selectTab(elem, page) {
$("#pluginTabs a").removeClass("ui-btn-active");
$(elem).addClass("ui-btn-active");
query.TargetSystems = $(elem).attr("rel");
reloadList(page);
}
$(document).on('pageinit', "#pluginCatalogPage", function () {
var page = this;
reloadList(page);
$('.chkPremiumFilter', page).on('change', function () {
if (this.checked) {
@ -104,18 +129,10 @@
reloadList(page);
});
$('#pluginTabs a', page).each(function () {
$(this).on('click', function () {
selectTab(this, page);
});
});
}).on('pageshow', "#pluginCatalogPage", function () {
var page = this;
selectTab($("#pluginTabs a.ui-btn-active"), page);
// Reset form values using the last used query
$('.chkPremiumFilter', page).each(function () {