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>
</a>
</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>
<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>
<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>
<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>
<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>
<hr style="margin-left: 5px; margin-right: 5px">
<div id="nav">

View File

@ -1,6 +1,32 @@
<div>
<!-- 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>
<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 ?>
<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 ?>
<div id="library_content" class="lib-content tabs content-pane wide-panel">

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@ -199,7 +199,7 @@ var AIRTIME = (function(AIRTIME) {
};
mod.checkNewButton = function() {
var selected = $(".media_type_selector.selected").attr("selection_id"),
var selected = $(".media_type_selector.selected").attr("data-selection-id"),
check = false;
if (selected != 1) {
@ -386,7 +386,7 @@ var AIRTIME = (function(AIRTIME) {
openTabObjectIds.each(function(i, el) {
var v = parseInt($(el).val());
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() {
//Set up the datatables string translation table with different strings depending on
//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;
//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} );
// 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;
aoData.push( { name: "type", value: type} );
@ -836,7 +836,7 @@ var AIRTIME = (function(AIRTIME) {
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(),
// Get the ID of the selected row
$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(),
// Get the ID of the selected row
$rowId = $tr.attr("id");
@ -894,6 +894,9 @@ var AIRTIME = (function(AIRTIME) {
mod.selectItem($tr);
} else if (ev.ctrlKey) {
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.
AIRTIME.library.ctxMenu = $.contextMenu({
selector: '#library_display tr.lib-audio:has(td)',
selector: "#library_display tr[class*='lib']:has(td)",
//trigger: "left",
trigger: "custom",

View File

@ -444,14 +444,14 @@ var AIRTIME = (function(AIRTIME){
}
$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),
pane = $(".editor_pane_wrapper:last"),
name = json.type == "md" ? // file
pane.append(json.html).find("#track_title").val() + $.i18n._(" - Metadata Editor")
: pane.append(json.html).find(".playlist_name_display").text(),
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>" +
"<span href='#' class='lib_pl_close icon-remove'></span>" +
"</a>" +
@ -521,13 +521,13 @@ var AIRTIME = (function(AIRTIME){
function closeTab(id) {
var curr = $(".active-tab"),
pane = id ? $(".pl-content[tab-id='" + id + "']") : curr,
tab = id ? $(".nav.nav-tabs [tab-id='" + id + "']") : $(".nav.nav-tabs .active"),
pane = id ? $(".pl-content[data-tab-id='" + id + "']") : curr,
tab = id ? $(".nav.nav-tabs [data-tab-id='" + id + "']") : $(".nav.nav-tabs .active"),
toPane = pane.next().length > 0 ? pane.next() : pane.prev(),
toTab = tab.next().length > 0 ? tab.next() : tab.prev(),
objId = pane.find(".obj_id").val(),
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)
tab.remove();
@ -906,8 +906,8 @@ var AIRTIME = (function(AIRTIME){
});
$pl.find("#webstream_cancel, #cancel_button").on("click", function() {
var tabId = $pl.attr("tab-id");
$("li[tab-id=" + tabId + "] .lib_pl_close").click();
var tabId = $pl.attr("data-tab-id");
$("li[data-tab-id=" + tabId + "] .lib_pl_close").click();
});
$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
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));
//$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) {
var dialog = $(json.dialog),
viewport = findViewportDimensions(),
@ -160,6 +183,7 @@ function buildScheduleDialog (json, instance_id) {
AIRTIME.showbuilder.builderDataTable();
dialog.dialog('open');
highlightMediaTypeSelector(dialog);
}
function buildContentDialog (json){

View File

@ -853,6 +853,11 @@ var AIRTIME = (function(AIRTIME){
} else if (ev.ctrlKey) {
$tr.removeClass(SB_SELECTED_CLASS);
$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);