From 02d96d7bd0b34cbe8c00452132ef5415171c95a1 Mon Sep 17 00:00:00 2001 From: Duncan Sommerville Date: Thu, 6 Aug 2015 19:16:04 -0400 Subject: [PATCH] SAAS-991 - initial playlist editor redesign --- .../controllers/LibraryController.php | 4 +- .../controllers/NewPlaylistController.php | 2 + airtime_mvc/application/forms/EditAudioMD.php | 2 +- .../views/scripts/playlist/_playlist.phtml | 102 ++++++++---------- .../views/scripts/playlist/_smart-block.phtml | 4 - .../views/scripts/webstream/_webstream.phtml | 20 ++-- airtime_mvc/public/css/_showbuilder.css | 61 +++++++++-- .../public/js/airtime/library/_library.js | 19 ++-- airtime_mvc/public/js/airtime/library/_spl.js | 93 ++++++++-------- .../library/events/_library_showbuilder.js | 28 ++--- 10 files changed, 190 insertions(+), 145 deletions(-) diff --git a/airtime_mvc/application/controllers/LibraryController.php b/airtime_mvc/application/controllers/LibraryController.php index d46764684..b7d2cf3d5 100644 --- a/airtime_mvc/application/controllers/LibraryController.php +++ b/airtime_mvc/application/controllers/LibraryController.php @@ -459,7 +459,9 @@ class LibraryController extends Zend_Controller_Action } $this->view->form = $form; - $this->view->dialog = $this->view->render('library/edit-file-md.phtml'); + $this->view->id = $file_id; + $this->view->type = "md"; + $this->view->html = $this->view->render('library/edit-file-md.phtml'); } public function getFileMetadataAction() diff --git a/airtime_mvc/application/controllers/NewPlaylistController.php b/airtime_mvc/application/controllers/NewPlaylistController.php index f26a5d9c0..9ed608666 100644 --- a/airtime_mvc/application/controllers/NewPlaylistController.php +++ b/airtime_mvc/application/controllers/NewPlaylistController.php @@ -90,6 +90,7 @@ class NewPlaylistController extends Zend_Controller_Action $this->view->form = $form; $this->view->obj = $obj; + $this->view->type = "sb"; $this->view->id = $obj->getId(); if ($isJson) { @@ -99,6 +100,7 @@ class NewPlaylistController extends Zend_Controller_Action } } else { $this->view->obj = $obj; + $this->view->type = "pl"; $this->view->id = $obj->getId(); if ($isJson) { return $this->view->html = $this->view->render($viewPath); diff --git a/airtime_mvc/application/forms/EditAudioMD.php b/airtime_mvc/application/forms/EditAudioMD.php index 62c27b018..7fe13b39d 100644 --- a/airtime_mvc/application/forms/EditAudioMD.php +++ b/airtime_mvc/application/forms/EditAudioMD.php @@ -171,7 +171,7 @@ class Application_Form_EditAudioMD extends Zend_Form // Add the submit button $this->addElement('button', 'editmdsave', array( 'ignore' => true, - 'class' => 'btn btn-small', + 'class' => 'btn btn-small md-save', 'label' => _('Save'), 'decorators' => array( 'ViewHelper' diff --git a/airtime_mvc/application/views/scripts/playlist/_playlist.phtml b/airtime_mvc/application/views/scripts/playlist/_playlist.phtml index 80727b4df..086cf1c17 100644 --- a/airtime_mvc/application/views/scripts/playlist/_playlist.phtml +++ b/airtime_mvc/application/views/scripts/playlist/_playlist.phtml @@ -4,73 +4,65 @@ if (isset($this->obj)) { $count = count($contents); } ?> - -
-obj)) : ?> -
- -
-
- -
-
- -
-
- -
-
- "> - - -
- -
obj)) : ?> - - - -
-

- escape($this->obj->getName()); ?> -

-

length; ?>

-
- +
+ + + +
+

+ escape($this->obj->getName()); ?> +

+

length; ?>

+
+ -
-
-
- - form; ?> - +
+ obj)) : ?> +
+ +
+
+ +
+
+ +
+
+ "> + + +
+ +
-
-
-
    - contents = $contents; - echo $this->render('playlist/update.phtml') ?> -
+ form; ?> + +
+
- + \ No newline at end of file diff --git a/airtime_mvc/application/views/scripts/playlist/_smart-block.phtml b/airtime_mvc/application/views/scripts/playlist/_smart-block.phtml index 8ba1c9399..63aa24155 100644 --- a/airtime_mvc/application/views/scripts/playlist/_smart-block.phtml +++ b/airtime_mvc/application/views/scripts/playlist/_smart-block.phtml @@ -4,7 +4,6 @@ if (isset($this->obj)) { $count = count($contents); } ?> -
obj)) : ?>
@@ -13,9 +12,6 @@ if (isset($this->obj)) {
-
- -
"> diff --git a/airtime_mvc/application/views/scripts/webstream/_webstream.phtml b/airtime_mvc/application/views/scripts/webstream/_webstream.phtml index 03e0baa74..61c66872d 100644 --- a/airtime_mvc/application/views/scripts/webstream/_webstream.phtml +++ b/airtime_mvc/application/views/scripts/webstream/_webstream.phtml @@ -1,4 +1,3 @@ -
obj)) : ?> @@ -25,17 +24,14 @@

obj->getDefaultLength(); ?>

-
- -
-
-
- -
- -
-
- +
+
+
+ +
+ +
+
diff --git a/airtime_mvc/public/css/_showbuilder.css b/airtime_mvc/public/css/_showbuilder.css index 75dadebfa..e7e9a0efd 100644 --- a/airtime_mvc/public/css/_showbuilder.css +++ b/airtime_mvc/public/css/_showbuilder.css @@ -395,8 +395,16 @@ div.ColVis_collectionBackground { cursor: default; } +.nav-tabs .close-round { + margin: 1px 0 0 10px; +} + /* Media editors */ +textarea { + resize: none; +} + /* File Metadata Editor */ #edit-md-dialog { @@ -434,20 +442,59 @@ div.ColVis_collectionBackground { /* Playlist/Block/Webstream Editors */ +.inner_playlist_wrapper { + flex: 1 100%; +} + .side_playlist { - /*margin-top: 34px;*/ + position: relative; width: 100%; /* Override because we're using flexbox */ - overflow-x: hidden; - overflow-y: auto; - - position: relative; + overflow: hidden; flex: 1; } +.side_playlist h3 { + color: #efefef; + font-size: 20px; +} + +.side_playlist .playlist_title h3 a:hover { + background-color: transparent; +} + +.side_playlist label, .side_playlist h4, .side_playlist span { + color: #efefef; + font-size: 14px; + font-weight: normal; +} + .editor_pane_wrapper { - padding: 4px; + display: -webkit-box; + display: -moz-box; + display: -ms-flexbox; + display: -webkit-flex; + display: flex; + -webkit-flex-flow: column; + flex-flow: column; + position: absolute; + right: 4px; + bottom: 4px; + top: 4px; + left: 4px; +} + +.spl-no-margin { + margin: 0; + padding-bottom: 4px; +} + +.spl_sortable { + position: relative; + overflow: auto; + flex: 1 100%; + padding: 0; } .spl_sortable .list-item-container { @@ -530,6 +577,7 @@ div.ColVis_collectionBackground { padding: 0; } +/* Hacky stuff here */ #show_builder .dataTables_scrolling { top: 69px; } @@ -542,6 +590,7 @@ div.ColVis_collectionBackground { margin: 0; padding: 5px; } +/* ~~~~~~~~~~~~~~~~ */ .datatable tr, .datatable td { border: none !important; diff --git a/airtime_mvc/public/js/airtime/library/_library.js b/airtime_mvc/public/js/airtime/library/_library.js index 51b1f3906..94f26f6d3 100644 --- a/airtime_mvc/public/js/airtime/library/_library.js +++ b/airtime_mvc/public/js/airtime/library/_library.js @@ -182,7 +182,7 @@ var AIRTIME = (function(AIRTIME) { var selected = mod.getChosenItemsLength(), check = false; - if (selected === 1) { + if (selected >= 1) { check = true; } @@ -364,11 +364,12 @@ var AIRTIME = (function(AIRTIME) { var openTabObjectIds = $(".obj_id"), mediaIds = []; for (var i in aMedia) { - mediaIds.push(aMedia[i].id); + mediaIds.push(aMedia[i].id.toString()); } + openTabObjectIds.each(function(i, el) { var v = $(el).val(); - if ($.inArray(v, mediaIds)) { + if ($.inArray(v, mediaIds) > -1) { AIRTIME.playlist.fnOpenPlaylist({id: v}); AIRTIME.playlist.closeTab(); } @@ -805,10 +806,12 @@ var AIRTIME = (function(AIRTIME) { if ($previouslySelected.prevAll("#" + $rowId).length !== 0) { $previouslySelected.prevUntil($tr).each(function (i, el) { mod.selectItem($(el)); + mod.checkItem($(el)); }); } else { $previouslySelected.nextUntil($tr).each(function (i, el) { mod.selectItem($(el)); + mod.checkItem($(el)); }); } } @@ -1211,11 +1214,11 @@ var validationTypes = { }; $(document).ready(function() { - $('#editmdsave').live("click", function() { + $('.active-tab .md-save').live("click", function() { var file_id = $('#file_id').val(), - data = $("#edit-md-dialog form").serializeArray(); + data = $(".active-tab #edit-md-dialog form").serializeArray(); $.post(baseUrl+'library/edit-file-md', {format: "json", id: file_id, data: data}, function() { - $("#edit-md-dialog").dialog().remove(); + //$("#edit-md-dialog").dialog().remove(); // don't redraw the library table if we are on calendar page // we would be on calendar if viewing recorded file metadata @@ -1227,10 +1230,6 @@ $(document).ready(function() { AIRTIME.playlist.closeTab(); }); - $('#editmdcancel').live("click", function() { - $("#edit-md-dialog").dialog().remove(); - }); - $('#edit-md-dialog').live("keyup", function(event) { if (event.keyCode === 13) { $('#editmdsave').click(); diff --git a/airtime_mvc/public/js/airtime/library/_spl.js b/airtime_mvc/public/js/airtime/library/_spl.js index c321140ca..a0fc5d132 100644 --- a/airtime_mvc/public/js/airtime/library/_spl.js +++ b/airtime_mvc/public/js/airtime/library/_spl.js @@ -363,7 +363,7 @@ var AIRTIME = (function(AIRTIME){ nameElement.text(nameElement.text().replace("\n", "")); var name = $pl.find("#playlist_name_display").text(); - $(".nav.nav-tabs .active a").text(name); + $(".nav.nav-tabs .active a > span.tab-name").text(name); } function redrawLib() { @@ -435,67 +435,65 @@ var AIRTIME = (function(AIRTIME){ /* * Should all be moved to builder.js eventually */ - function openFileMdEditor(json) { - var tabId = $openTabs[json.id]; - if ($openTabs[json.id] !== undefined) { - AIRTIME.showbuilder.switchTab($(".pl-tab-content-" + tabId), $("#pl-tab-" + tabId)); - return; + function buildNewTab(json) { + var tabId = $openTabs[json.type + json.id]; + if (tabId !== undefined) { + AIRTIME.showbuilder.switchTab($("#pl-tab-content-" + tabId), $("#pl-tab-" + tabId)); + return undefined; } $tabCount++; - var wrapper = "
", - t = $("#show_builder").append(wrapper).find(".pl-tab-content-" + $tabCount), + var wrapper = "
", + t = $("#show_builder").append(wrapper).find("#pl-tab-content-" + $tabCount), pane = $(".editor_pane_wrapper:last"), - name = pane.append(json.dialog).find("#track_title").val() + $.i18n._(" - Metadata Editor"), - tab = "", + 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 = + "", tabs = $(".nav.nav-tabs"); if (json.id) { - $openTabs[json.id] = $tabCount; + $openTabs[json.type + json.id] = $tabCount; } $(".nav.nav-tabs li").removeClass("active"); tabs.append(tab); - var newTab = $("#pl-tab-" + $tabCount); + tabs.find("#pl-tab-" + $tabCount + " span.tab-name").text(name); - newTab.on("click", function() { - AIRTIME.showbuilder.switchTab(t, newTab); + var newTab = $("#pl-tab-" + $tabCount); + AIRTIME.showbuilder.switchTab(t, newTab); + + return {wrapper: pane, tab: newTab, pane: t}; + } + + function openFileMdEditor(json) { + var newTab = buildNewTab(json); + if (newTab === undefined) { + return; + } + newTab.tab.on("click", function() { + AIRTIME.showbuilder.switchTab(newTab.pane, newTab.tab); }); - pane.find("#editmdcancel").on("click", function() { + newTab.wrapper.find(".md-cancel").on("click", function() { closeTab(); }); - AIRTIME.showbuilder.switchTab(t, newTab); } function openPlaylist(json) { - var tabId = $openTabs[json.id]; - if ($openTabs[json.id] !== undefined) { - AIRTIME.showbuilder.switchTab($(".pl-tab-content-" + tabId), $("#pl-tab-" + tabId)); + var newTab = buildNewTab(json); + if (newTab === undefined) { return; } - $tabCount++; - - var wrapper = "
", - t = $("#show_builder").append(wrapper).find(".pl-tab-content-" + $tabCount), - pane = $(".editor_pane_wrapper:last"), - name = pane.append(json.html).find("#playlist_name_display").text(), - tab = "", - tabs = $(".nav.nav-tabs"); - - if (json.id) { - $openTabs[json.id] = $tabCount; - } - - $(".nav.nav-tabs li").removeClass("active"); - tabs.append(tab); - var newTab = $("#pl-tab-" + $tabCount); - - newTab.on("click", function() { - AIRTIME.showbuilder.switchTab(t, newTab); + newTab.tab.on("click", function() { + AIRTIME.showbuilder.switchTab(newTab.pane, newTab.tab); $.post(baseUrl+'new-playlist/edit', - {format: "json", id: t.find(".obj_id").val(), type: t.find(".obj_type").val()}); + {format: "json", id: newTab.pane.find(".obj_id").val(), type: newTab.pane.find(".obj_type").val()}); }); - AIRTIME.showbuilder.switchTab(t, newTab); AIRTIME.playlist.init(); // functions in smart_blockbuilder.js @@ -516,10 +514,14 @@ var AIRTIME = (function(AIRTIME){ } function closeTab() { - delete $openTabs[$(".active-tab").find(".obj_id").val()]; - $(".nav.nav-tabs .active").remove(); + var pane = $(".active-tab"), + tab = $(".nav.nav-tabs .active"), + toPane = pane.next().length > 0 ? pane.next() : pane.prev(), + toTab = tab.next().length > 0 ? tab.next() : tab.prev(); + delete $openTabs[tab.attr("tab-type") + pane.find(".obj_id").val()]; + tab.remove(); $pl.remove(); - AIRTIME.showbuilder.switchTab($("#show_builder .outer-datatable-wrapper"), $("#timeline-tab")); + AIRTIME.showbuilder.switchTab(toPane, toTab); } mod.closeTab = function() { @@ -901,7 +903,10 @@ var AIRTIME = (function(AIRTIME){ }); }); - $pl.on("click", "#lib_pl_close", function() { + $(".lib_pl_close").unbind().click(function() { + var tabId = $(this).closest("li").attr("tab-id"); + AIRTIME.showbuilder.switchTab($("#pl-tab-content-" + tabId), $("#pl-tab-" + tabId)); + $pl.hide(); // We need to update the text on the add button AIRTIME.library.checkAddButton(); diff --git a/airtime_mvc/public/js/airtime/library/events/_library_showbuilder.js b/airtime_mvc/public/js/airtime/library/events/_library_showbuilder.js index 62c3afd97..7d3bffbe8 100644 --- a/airtime_mvc/public/js/airtime/library/events/_library_showbuilder.js +++ b/airtime_mvc/public/js/airtime/library/events/_library_showbuilder.js @@ -303,19 +303,23 @@ var AIRTIME = (function(AIRTIME) { return; } - var data = $(".lib-selected:first").data("aData"); + var selected = $(".lib-selected"); - if (data.ftype === "audioclip") { - $.get(baseUrl + "library/edit-file-md/id/" + data.id, {format: "json"}, function(json){ - AIRTIME.playlist.fileMdEdit(json); - //buildEditMetadataDialog(json); - }); - } else if (data.ftype === "playlist" || data.ftype === "block") { - AIRTIME.playlist.fnEdit(data.id, data.ftype, baseUrl+'new-playlist/edit'); - AIRTIME.playlist.validatePlaylistElements(); - } else if (data.ftype === "stream") { - AIRTIME.playlist.fnEdit(data.id, data.ftype, baseUrl + 'new-webstream/edit'); - } + selected.each(function(i, el) { + var data = $(el).data("aData"); + + if (data.ftype === "audioclip") { + $.get(baseUrl + "library/edit-file-md/id/" + data.id, {format: "json"}, function(json){ + AIRTIME.playlist.fileMdEdit(json); + //buildEditMetadataDialog(json); + }); + } else if (data.ftype === "playlist" || data.ftype === "block") { + AIRTIME.playlist.fnEdit(data.id, data.ftype, baseUrl+'new-playlist/edit'); + AIRTIME.playlist.validatePlaylistElements(); + } else if (data.ftype === "stream") { + AIRTIME.playlist.fnEdit(data.id, data.ftype, baseUrl + 'new-webstream/edit'); + } + }); }); mod.createToolbarDropDown();