CC-6066 - initial work on add/remove content dialog; some selection fixes

This commit is contained in:
Duncan Sommerville 2015-08-21 14:19:28 -04:00
parent f7733757f6
commit 812dca9409
13 changed files with 86 additions and 33 deletions

View File

@ -73,15 +73,15 @@ j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
<button id="add_media_btn" class="btn btn-small dashboard-btn">Upload</button> <button id="add_media_btn" class="btn btn-small dashboard-btn">Upload</button>
</a> </a>
</div> </div>
<div class="media_type_selector" selection_id="1"> <div class="media_type_selector" data-selection-id="1">
<a href="/showbuilder#"><i class='icon-home icon-white'></i><?php echo _("Dashboard") ?></a></div> <a href="/showbuilder#"><i class='icon-home icon-white'></i><?php echo _("Dashboard") ?></a></div>
<div class="media_type_selector dashboard_sub_nav" selection_id="1"> <div class="media_type_selector dashboard_sub_nav" data-selection-id="1">
<a href="/showbuilder#files"><i class='icon-file icon-white'></i><?php echo _("Files") ?></a></div> <a href="/showbuilder#files"><i class='icon-file icon-white'></i><?php echo _("Files") ?></a></div>
<div class="media_type_selector dashboard_sub_nav" selection_id="2"> <div class="media_type_selector dashboard_sub_nav" data-selection-id="2">
<a href="/showbuilder#playlists"><i class='icon-list icon-white'></i><?php echo _("Playlists") ?></a></div> <a href="/showbuilder#playlists"><i class='icon-list icon-white'></i><?php echo _("Playlists") ?></a></div>
<div class="media_type_selector dashboard_sub_nav" selection_id="3"> <div class="media_type_selector dashboard_sub_nav" data-selection-id="3">
<a href="/showbuilder#smart-blocks"><i class='icon-time icon-white'></i><?php echo _("Smart Blocks") ?></a></div> <a href="/showbuilder#smart-blocks"><i class='icon-time icon-white'></i><?php echo _("Smart Blocks") ?></a></div>
<div class="media_type_selector dashboard_sub_nav" selection_id="4"> <div class="media_type_selector dashboard_sub_nav" data-selection-id="4">
<a href="/showbuilder#webstreams"><i class='icon-random icon-white'></i><?php echo _("Webstreams") ?></a></div> <a href="/showbuilder#webstreams"><i class='icon-random icon-white'></i><?php echo _("Webstreams") ?></a></div>
<hr style="margin-left: 5px; margin-right: 5px"> <hr style="margin-left: 5px; margin-right: 5px">
<div id="nav"> <div id="nav">

View File

@ -1,6 +1,32 @@
<div> <div>
<!-- jQuery UI changes the styling on the outermost div; use a blank div so as not to break the .wrapper styling--> <!-- jQuery UI changes the styling on the outermost div; use a blank div so as not to break the .wrapper styling-->
<div class="wrapper"> <div class="wrapper">
<div>
<div class="media_type_selector dashboard_sub_nav" data-selection-id="1">
<a href="#files">
<i class='icon-file icon-white'></i>
<span class="selector-name hidden"><?php echo _("Files") ?></span>
</a>
</div>
<div class="media_type_selector dashboard_sub_nav" data-selection-id="2">
<a href="#playlists">
<i class='icon-list icon-white'></i>
<span class="selector-name hidden"><?php echo _("Playlists") ?></span>
</a>
</div>
<div class="media_type_selector dashboard_sub_nav" data-selection-id="3">
<a href="#smart-blocks">
<i class='icon-time icon-white'></i>
<span class="selector-name hidden"><?php echo _("Smart Blocks") ?></span>
</a>
</div>
<div class="media_type_selector dashboard_sub_nav" data-selection-id="4">
<a href="#webstreams">
<i class='icon-random icon-white'></i>
<span class="selector-name hidden"><?php echo _("Webstreams") ?></span>
</a>
</div>
</div>
<?php echo $this->csrf ?> <?php echo $this->csrf ?>
<div id="library_content" class="lib-content tabs content-pane wide-panel"> <div id="library_content" class="lib-content tabs content-pane wide-panel">

View File

@ -1,10 +1,3 @@
<!--<form action="/rest/media" method="post" id="upload_form" class="dropzone dz-clickable" --><?php //if ($this->quotaLimitReached) { ?><!-- class="hidden" --><?php //} ?>
<!-- --><?php //echo $this->csrf ?>
<!-- <div class="dz-message">-->
<!-- --><?php //echo _("Drop files here or click to upload") ?>
<!-- </div>-->
<!--</form>-->
<?php echo $this->csrf ?> <?php echo $this->csrf ?>
<div id="library_content" class="lib-content tabs content-pane wide-panel"> <div id="library_content" class="lib-content tabs content-pane wide-panel">

View File

@ -433,7 +433,7 @@ li.ui-state-default {
left: 4px; left: 4px;
} }
[tab-type='md'] > .editor_pane_wrapper { [data-tab-type='md'] > .editor_pane_wrapper {
overflow-x: hidden; /* Show the y-direction scrollbar (magic!) */ overflow-x: hidden; /* Show the y-direction scrollbar (magic!) */
} }

View File

@ -856,7 +856,7 @@ input[type="submit"].btn.btn-mini {
} }
.icon-random { .icon-random {
background-position: -216px -120px; background-position: -216px -120px;
width: 16px; /*width: 16px;*/
} }
.icon-comment { .icon-comment {
background-position: -240px -120px; background-position: -240px -120px;

View File

@ -1186,6 +1186,8 @@ button.ui-button.::-moz-focus-inner {
overflow: auto; overflow: auto;
zoom: 1; zoom: 1;
box-shadow: none;
} }
.ui-dialog .ui-dialog-buttonpane { .ui-dialog .ui-dialog-buttonpane {
text-align: left; text-align: left;

View File

@ -1836,7 +1836,7 @@ button, input {
font-weight: bold; font-weight: bold;
} }
.user-list-wrapper .ui-widget-header:first-child .dataTables_filter { .user-list-wrapper .ui-widget-header:first-child .dataTables_filter {
margin:0; /*margin:0;*/
} }
.user-management h2 { .user-management h2 {
font-size: 1.7em; font-size: 1.7em;

View File

@ -23,9 +23,9 @@ $(document).ready(function() {
if (ifr) { if (ifr) {
LC_API.on_chat_state_changed = function(data) { LC_API.on_chat_state_changed = function(data) {
if (data.state == 'offline') { if (data.state == 'offline') {
$('.wrapper').css('padding-bottom', 10); $('body > .wrapper').css('padding-bottom', 10);
} else { } else {
$('.wrapper').css('padding-bottom', 40); $('body > .wrapper').css('padding-bottom', 40);
} }
}; };
clearInterval(lcLoadListener); clearInterval(lcLoadListener);

View File

@ -306,7 +306,7 @@ var AIRTIME = (function(AIRTIME) {
return; return;
} }
var selection = $(".media_type_selector.selected").attr("selection_id"); var selection = $(".media_type_selector.selected").attr("data-selection-id");
if (selection == 2) { if (selection == 2) {
AIRTIME.playlist.fnNew(); AIRTIME.playlist.fnNew();

View File

@ -199,7 +199,7 @@ var AIRTIME = (function(AIRTIME) {
}; };
mod.checkNewButton = function() { mod.checkNewButton = function() {
var selected = $(".media_type_selector.selected").attr("selection_id"), var selected = $(".media_type_selector.selected").attr("data-selection-id"),
check = false; check = false;
if (selected != 1) { if (selected != 1) {
@ -386,7 +386,7 @@ var AIRTIME = (function(AIRTIME) {
openTabObjectIds.each(function(i, el) { openTabObjectIds.each(function(i, el) {
var v = parseInt($(el).val()); var v = parseInt($(el).val());
if ($.inArray(v, mediaIds) > -1) { if ($.inArray(v, mediaIds) > -1) {
AIRTIME.playlist.closeTab($(el).closest(".pl-content").attr("tab-id")); AIRTIME.playlist.closeTab($(el).closest(".pl-content").attr("data-tab-id"));
} }
}); });
@ -524,7 +524,7 @@ var AIRTIME = (function(AIRTIME) {
function getLibraryDatatableStrings() { function getLibraryDatatableStrings() {
//Set up the datatables string translation table with different strings depending on //Set up the datatables string translation table with different strings depending on
//whether you're viewing files, playlists, smart blocks, etc. //whether you're viewing files, playlists, smart blocks, etc.
var type = parseInt($(".media_type_selector.selected").attr("selection_id")); var type = parseInt($(".media_type_selector.selected").attr("data-selection-id"));
type = (type === undefined) ? 1 : type; type = (type === undefined) ? 1 : type;
//FIXME: The code that calls this function doesn't work as intended because you can't //FIXME: The code that calls this function doesn't work as intended because you can't
@ -681,7 +681,7 @@ var AIRTIME = (function(AIRTIME) {
aoData.push( { name: "advSearch", value: advSearchValid} ); aoData.push( { name: "advSearch", value: advSearchValid} );
// push whether to search files/playlists or all. // push whether to search files/playlists or all.
type = $(".media_type_selector.selected").attr("selection_id"); type = $(".media_type_selector.selected").attr("data-selection-id");
type = (type === undefined) ? 1 : type; type = (type === undefined) ? 1 : type;
aoData.push( { name: "type", value: type} ); aoData.push( { name: "type", value: type} );
@ -836,7 +836,7 @@ var AIRTIME = (function(AIRTIME) {
AIRTIME.library.dblClickAdd(data, data.ftype); AIRTIME.library.dblClickAdd(data, data.ftype);
}); });
$libTable.find("tbody").on("mousedown", "tr.lib-audio > td.library_checkbox", function(ev) { $libTable.find("tbody").on("mousedown", "tr[class*='lib'] > td.library_checkbox", function(ev) {
var $tr = $(this).parent(), var $tr = $(this).parent(),
// Get the ID of the selected row // Get the ID of the selected row
$rowId = $tr.attr("id"); $rowId = $tr.attr("id");
@ -865,7 +865,7 @@ var AIRTIME = (function(AIRTIME) {
} }
}); });
$libTable.find("tbody").on("mousedown", "tr.lib-audio > td:not(.library_checkbox)", function(ev) { $libTable.find("tbody").on("mousedown", "tr[class*='lib'] > td:not(.library_checkbox)", function(ev) {
var $tr = $(this).parent(), var $tr = $(this).parent(),
// Get the ID of the selected row // Get the ID of the selected row
$rowId = $tr.attr("id"); $rowId = $tr.attr("id");
@ -894,6 +894,9 @@ var AIRTIME = (function(AIRTIME) {
mod.selectItem($tr); mod.selectItem($tr);
} else if (ev.ctrlKey) { } else if (ev.ctrlKey) {
mod.deselectItem($tr); mod.deselectItem($tr);
} else if (ev.which === 3 /* Right click */) {
mod.selectNone();
mod.selectItem($tr);
} }
}); });
@ -932,7 +935,7 @@ var AIRTIME = (function(AIRTIME) {
// begin context menu initialization. // begin context menu initialization.
AIRTIME.library.ctxMenu = $.contextMenu({ AIRTIME.library.ctxMenu = $.contextMenu({
selector: '#library_display tr.lib-audio:has(td)', selector: "#library_display tr[class*='lib']:has(td)",
//trigger: "left", //trigger: "left",
trigger: "custom", trigger: "custom",

View File

@ -444,14 +444,14 @@ var AIRTIME = (function(AIRTIME){
} }
$tabCount++; $tabCount++;
var wrapper = "<div tab-type='" + json.type + "' tab-id='" + $tabCount + "' id='pl-tab-content-" + $tabCount + "' class='side_playlist pl-content'><div class='editor_pane_wrapper'></div></div>", var wrapper = "<div data-tab-type='" + json.type + "' data-tab-id='" + $tabCount + "' id='pl-tab-content-" + $tabCount + "' class='side_playlist pl-content'><div class='editor_pane_wrapper'></div></div>",
t = $("#show_builder").append(wrapper).find("#pl-tab-content-" + $tabCount), t = $("#show_builder").append(wrapper).find("#pl-tab-content-" + $tabCount),
pane = $(".editor_pane_wrapper:last"), pane = $(".editor_pane_wrapper:last"),
name = json.type == "md" ? // file name = json.type == "md" ? // file
pane.append(json.html).find("#track_title").val() + $.i18n._(" - Metadata Editor") pane.append(json.html).find("#track_title").val() + $.i18n._(" - Metadata Editor")
: pane.append(json.html).find(".playlist_name_display").text(), : pane.append(json.html).find(".playlist_name_display").text(),
tab = tab =
"<li tab-id='" + $tabCount + "' tab-type='" + json.type + "' id='pl-tab-" + $tabCount + "' role='presentation' class='active'>" + "<li data-tab-id='" + $tabCount + "' data-tab-type='" + json.type + "' id='pl-tab-" + $tabCount + "' role='presentation' class='active'>" +
"<a href='#'><span class='tab-name'></span>" + "<a href='#'><span class='tab-name'></span>" +
"<span href='#' class='lib_pl_close icon-remove'></span>" + "<span href='#' class='lib_pl_close icon-remove'></span>" +
"</a>" + "</a>" +
@ -521,13 +521,13 @@ var AIRTIME = (function(AIRTIME){
function closeTab(id) { function closeTab(id) {
var curr = $(".active-tab"), var curr = $(".active-tab"),
pane = id ? $(".pl-content[tab-id='" + id + "']") : curr, pane = id ? $(".pl-content[data-tab-id='" + id + "']") : curr,
tab = id ? $(".nav.nav-tabs [tab-id='" + id + "']") : $(".nav.nav-tabs .active"), tab = id ? $(".nav.nav-tabs [data-tab-id='" + id + "']") : $(".nav.nav-tabs .active"),
toPane = pane.next().length > 0 ? pane.next() : pane.prev(), toPane = pane.next().length > 0 ? pane.next() : pane.prev(),
toTab = tab.next().length > 0 ? tab.next() : tab.prev(), toTab = tab.next().length > 0 ? tab.next() : tab.prev(),
objId = pane.find(".obj_id").val(), objId = pane.find(".obj_id").val(),
pl = id ? pane : $pl; pl = id ? pane : $pl;
delete $openTabs[tab.attr("tab-type") + objId]; // Remove the closed tab from our open tabs array delete $openTabs[tab.attr("data-tab-type") + objId]; // Remove the closed tab from our open tabs array
// Remove the relevant DOM elements (the tab and the tab content) // Remove the relevant DOM elements (the tab and the tab content)
tab.remove(); tab.remove();
@ -906,8 +906,8 @@ var AIRTIME = (function(AIRTIME){
}); });
$pl.find("#webstream_cancel, #cancel_button").on("click", function() { $pl.find("#webstream_cancel, #cancel_button").on("click", function() {
var tabId = $pl.attr("tab-id"); var tabId = $pl.attr("data-tab-id");
$("li[tab-id=" + tabId + "] .lib_pl_close").click(); $("li[data-tab-id=" + tabId + "] .lib_pl_close").click();
}); });
$lib.on("click", "#pl_edit", function() { $lib.on("click", "#pl_edit", function() {
@ -932,7 +932,7 @@ var AIRTIME = (function(AIRTIME){
$(this).unbind("click"); // Prevent repeated clicks in quick succession from closing multiple tabs $(this).unbind("click"); // Prevent repeated clicks in quick succession from closing multiple tabs
var tabId = $(this).closest("li").attr("tab-id"); var tabId = $(this).closest("li").attr("data-tab-id");
//AIRTIME.showbuilder.switchTab($("#pl-tab-content-" + tabId), $("#pl-tab-" + tabId)); //AIRTIME.showbuilder.switchTab($("#pl-tab-content-" + tabId), $("#pl-tab-" + tabId));
//$pl.hide(); //$pl.hide();

View File

@ -120,6 +120,29 @@ function findViewportDimensions() {
}; };
} }
function highlightMediaTypeSelector(dialog)
{
if (location.hash === "") {
dialog.find("a[href$='#files']").parent().addClass("selected");
}
dialog.find("a[href$='"+location.hash+"']").parent().addClass("selected");
// Slightly hacky way of triggering the click event when it's outside of the anchor text
dialog.find(".media_type_selector").on("click", function() {
// Need get(0) here so we don't create a stack overflow by recurring the click on the parent
$(this).find("a").get(0).click();
});
$(window).on('hashchange', function() {
AIRTIME.library.selectNone();
dialog.find(".media_type_selector").each(function () {
$(this).removeClass("selected");
});
dialog.find("a[href$='"+location.hash+"']").parent().addClass("selected");
oTable.fnDraw();
});
}
function buildScheduleDialog (json, instance_id) { function buildScheduleDialog (json, instance_id) {
var dialog = $(json.dialog), var dialog = $(json.dialog),
viewport = findViewportDimensions(), viewport = findViewportDimensions(),
@ -160,6 +183,7 @@ function buildScheduleDialog (json, instance_id) {
AIRTIME.showbuilder.builderDataTable(); AIRTIME.showbuilder.builderDataTable();
dialog.dialog('open'); dialog.dialog('open');
highlightMediaTypeSelector(dialog);
} }
function buildContentDialog (json){ function buildContentDialog (json){

View File

@ -853,6 +853,11 @@ var AIRTIME = (function(AIRTIME){
} else if (ev.ctrlKey) { } else if (ev.ctrlKey) {
$tr.removeClass(SB_SELECTED_CLASS); $tr.removeClass(SB_SELECTED_CLASS);
$tr.find(".sb-checkbox > input").prop('checked', false); $tr.find(".sb-checkbox > input").prop('checked', false);
} else if (ev.which === 3 /* Right click */) {
mod.selectNone();
$tr.addClass(SB_SELECTED_CLASS);
$tr.find(".sb-checkbox > input").prop('checked', true);
mod.checkToolBarIcons();
} }
selectedRows = $("." + SB_SELECTED_CLASS); selectedRows = $("." + SB_SELECTED_CLASS);