SAAS-1165 - implement simple one-item drag and drop for podcast episodes table; still needs work

airtime_mvc/public/css/dashboard.css

@@ -731,7 +731,7 @@ th.library_checkbox {
 
 /* This is so dragged items show up above the layout */
 
-#library_display .ui-draggable-dragging {
+#library_content .ui-draggable-dragging {
     z-index: 9999;
     position: fixed !important;
 }

airtime_mvc/public/js/airtime/library/events/library_showbuilder.js

@@ -109,46 +109,6 @@ var AIRTIME = (function(AIRTIME) {
             sortable = "#show_builder_table";
         } else {
             sortable = ".active-tab .spl_sortable";
-            //$('#library_display tr[class*="lib-"]')
-            //    .draggable(
-            //    {
-            //        helper: function () {
-            //
-            //            var $el = $(this), selected = mod
-            //                    .getChosenAudioFilesLength(), container, message,
-            //                width = $(this).width(), height = 55;
-            //
-            //            // dragging an element that has an unselected
-            //            // checkbox.
-            //            if (mod.isChosenItem($el) === false) {
-            //                selected++;
-            //            }
-            //
-            //            if (selected === 1) {
-            //                message = $.i18n._("Adding 1 Item");
-            //            } else {
-            //                message = sprintf($.i18n._("Adding %s Items"), selected);
-            //            }
-            //
-            //            container = $('<div class="helper"/>').append(
-            //                "<li/>").find("li").addClass(
-            //                "ui-state-default").append("<div/>")
-            //                .find("div").addClass(
-            //                "list-item-container").append(
-            //                message).end().width(width)
-            //                .height(height).end();
-            //
-            //            return container;
-            //        },
-            //        create: function(event, ui) {
-            //            $(this).draggable("option", "cursorAt", {
-            //                left: Math.floor(this.clientWidth / 2)
-            //            });
-            //        },
-            //        cursor: 'move',
-            //        distance: 25, // min-distance for dragging
-            //        connectToSortable: '.active-tab .spl_sortable'
-            //    });
         }
 
         $('#library_display tr[class*="lib-"]')

airtime_mvc/public/js/airtime/library/library.js

@@ -1264,6 +1264,10 @@ var AIRTIME = (function(AIRTIME) {
         oTable.fnDraw();
     };
 
+    mod.getCurrentTable = function () {
+        return oTable;
+    };
+
     mod.openPodcastEpisodeDialog = function () {
         var episode = mod.podcastEpisodeTableWidget.getSelectedRows()[0];
         $("body").append("<div id='podcast_episode_dialog'></div>");

airtime_mvc/public/js/airtime/library/podcast.js

@@ -420,6 +420,7 @@ var AIRTIME = (function (AIRTIME) {
                 dt.fnClearTable();
                 dt.fnAddData(JSON.parse(json));
                 dt.fnDraw();
+            }).done(function () {
                 dt.unblock();
             });
         };
@@ -597,13 +598,38 @@ var AIRTIME = (function (AIRTIME) {
         params = $.extend(true, params,
             {
                 oColVis: {
-                    sAlign: 'right',
                     aiExclude: [0, 1],
-                    buttonText: $.i18n._("Columns"),
-                    iOverlayFade: 0,
                     oColReorder: {
                         iFixedColumns: 1  // Checkbox
                     }
+                },
+                fnCreatedRow: function(nRow, aData, iDataIndex) {
+                    var self = this;
+                    $(nRow).draggable({
+                        helper: function () {
+                            var $row = $(this);
+                            $row.data("aData", self._datatable.fnGetData($(nRow).index()).file);
+                            self.selectRow(this, self._datatable.fnGetData($row.index()), self.SELECTION_MODE.SINGLE, $row.index());
+                            var selected = self.getSelectedRows().length, container,
+                                width = self._$wrapperDOMNode.closest(".dataTables_wrapper").outerWidth(), message;
+
+                            message = sprintf($.i18n._("Adding %s Item%s"), selected, selected > 1 ? "s" : "");
+                            container = $('<div/>').attr('id', 'draggingContainer').append('<tr/>')
+                                .find("tr").append('<td/>').find("td")
+                                .attr("colspan", 100).width(width).css("max-width", "none")
+                                .addClass("ui-state-highlight").append(message).end().end();
+
+                            return container;
+                        },
+                        tolerance: 'pointer',
+                        cursor: 'move',
+                        cursorAt: {
+                            top: 20,
+                            left: Math.floor(self._datatable.outerWidth() / 2)
+                        },
+                        distance: 25, // min-distance for dragging
+                        connectToSortable: $("#show_builder_table, .active-tab .spl_sortable")
+                    });
                 }
             }
         );

airtime_mvc/public/js/airtime/showbuilder/builder.js

@@ -1024,13 +1024,16 @@ var AIRTIME = (function(AIRTIME){
             fnReceive = function(event, ui) {
                 var aItems = [];
 
+                if (AIRTIME.library.getCurrentTable() == AIRTIME.library.libraryDataTable) {
                     AIRTIME.library.addToChosen(ui.item);
-
                     aItems = AIRTIME.library.getSelectedData();
                     origTrs = aItems;
                     html = ui.helper.html();
-
                     AIRTIME.library.removeFromChosen(ui.item);
+                } else if (AIRTIME.library.getCurrentTable() == AIRTIME.library.podcastEpisodeDataTable) {
+                    origTrs = [$(ui.item).data("aData")];
+                    html = ui.helper.html();
+                }
             };
 
             fnUpdate = function(event, ui) {

airtime_mvc/public/js/airtime/widgets/table.js

@@ -85,6 +85,10 @@ var AIRTIME = (function(AIRTIME) {
             options[key] = dataTablesOptions[key];
         }
 
+        if (options.fnCreatedRow) {
+            options.fnCreatedRow = options.fnCreatedRow.bind(this);
+        }
+
         self._datatable = self._$wrapperDOMNode.dataTable(options);
         // self._datatable.fnDraw(); //Load the AJAX data now that our event handlers have been bound.
         self._setupEventHandlers(bItemSelection);