Reorder Working Set with Drag and Drop

src/document/DocumentManager.js

@@ -299,6 +299,24 @@ define(function (require, exports, module) {
     }
 
 
+    /**
+     * Changes the position of the file from oldIndex to NewIndex and at the same time the file
+     * in newIndex to oldIndex. Returns the newIndex
+     * @param {!number} index - old file index
+     * @param {!number} index - new file index
+     */
+    function switchFilesIndex(oldIndex, newIndex) {
+        var length = _workingSet.length - 1;
+        var aux;
+
+        if (oldIndex >= 0 && oldIndex <= length && newIndex >= 0 && newIndex <= length) {
+            aux = _workingSet[oldIndex];
+            _workingSet[oldIndex] = _workingSet[newIndex];
+            _workingSet[newIndex] = aux;
+        }
+    }
+
+
     /**
      * Indicate that changes to currentDocument are temporary for now, and should not update the MRU
      * ordering of the working set. Useful for next/previous keyboard navigation (until Ctrl is released)
@@ -1121,6 +1139,7 @@ define(function (require, exports, module) {
     exports.addListToWorkingSet = addListToWorkingSet;
     exports.removeFromWorkingSet = removeFromWorkingSet;
     exports.getNextPrevFile = getNextPrevFile;
+    exports.switchFilesIndex = switchFilesIndex;
     exports.beginDocumentNavigation = beginDocumentNavigation;
     exports.finalizeDocumentNavigation = finalizeDocumentNavigation;
     exports.closeFullEditor = closeFullEditor;
@@ -1130,7 +1149,7 @@ define(function (require, exports, module) {
 
     // Setup preferences
     _prefs = PreferencesManager.getPreferenceStorage(PREFERENCES_CLIENT_ID);
-    $(exports).bind("currentDocumentChange workingSetAdd workingSetAddList workingSetRemove workingSetRemoveList fileNameChange", _savePreferences);
+    $(exports).bind("currentDocumentChange workingSetAdd workingSetAddList workingSetRemove workingSetRemoveList fileNameChange workingSetReorder", _savePreferences);
 
     // Performance measurements
     PerfUtils.createPerfMeasurement("DOCUMENT_MANAGER_GET_DOCUMENT_FOR_PATH", "DocumentManager.getDocumentForPath()");

src/project/WorkingSetView.js

@@ -23,7 +23,7 @@
 
 
 /*jslint vars: true, plusplus: true, devel: true, nomen: true, indent: 4, maxerr: 50 */
-/*global define, $  */
+/*global define, $, window  */
 
 /**
  * WorkingSetView generates the UI for the list of the files user is editing based on the model provided by EditorManager.
@@ -37,6 +37,7 @@ define(function (require, exports, module) {
     var DocumentManager       = require("document/DocumentManager"),
         CommandManager        = require("command/CommandManager"),
         Commands              = require("command/Commands"),
+        Menus                 = require("command/Menus"),
         EditorManager         = require("editor/EditorManager"),
         FileViewController    = require("project/FileViewController"),
         NativeFileSystem      = require("file/NativeFileSystem").NativeFileSystem,
@@ -151,6 +152,102 @@ define(function (require, exports, module) {
         return (docIfOpen && docIfOpen.isDirty);
     }
 
+    /** 
+     * Starts the drag and drop working set view reorder.
+     * @private
+     * @param {!Event} event - jQuery event
+     */
+    function _reorderListItem(event) {
+        var $listItem     = $(event.currentTarget),
+            $prevListItem = $listItem.prev(),
+            $nextListItem = $listItem.next(),
+            selected      = $listItem.hasClass("selected"),
+            prevSelected  = $prevListItem.hasClass("selected"),
+            nextSelected  = $nextListItem.hasClass("selected"),
+            index         = DocumentManager.findInWorkingSet($listItem.data(_FILE_KEY).fullPath),
+            height        = $listItem.height(),
+            startPageY    = event.pageY,
+            moved         = false;
+
+        $listItem.css("position", "relative").css("z-index", 1);
+
+        $(window.document).on("mousemove.workingSet", function (e) {
+            var top = e.pageY - startPageY;
+
+            // Drag if the item is not the first and moving it up or
+            // if the item is not the last and moving down
+            if (($prevListItem.length && top < 0) || ($nextListItem.length && top > 0)) {
+                // Reorder the list once the item is halfway to the new position
+                if (Math.abs(top) > height / 2) {
+                    if (top < 0) {
+                        // If moving up, place the previows item after the moving item
+                        $prevListItem.insertAfter($listItem);
+                        startPageY -= height;
+                        top = top + height;
+                        DocumentManager.switchFilesIndex(index, --index);
+                    } else {
+                        // If moving down, place the next item before the moving item
+                        $nextListItem.insertBefore($listItem);
+                        startPageY += height;
+                        top = top - height;
+                        DocumentManager.switchFilesIndex(index, ++index);
+                    }
+
+                    if (!selected) {
+                        // Remove the shadows as it will appear and they should not
+                        ViewUtils.removeScrollerShadow($openFilesContainer[0], null);
+                    }
+
+                    // Update the previows and next items
+                    $prevListItem = $listItem.prev();
+                    $nextListItem = $listItem.next();
+                }
+            } else {
+                // Set the top to 0 as the event probably didnt fired at the exact start/end of the list 
+                top = 0;
+            }
+
+            // Once the movement is greater than 2 pixels, it is assumed that the user wantes to reorder files and not open
+            if (!moved && Math.abs(top) > 2) {
+                // Hides the selection to optimize the movement
+                $openFilesContainer.find(".sidebar-selection").css("display", "none");
+                $openFilesContainer.find(".sidebar-selection-triangle").css("display", "none");
+                // Hide the close icon
+                $listItem.find(".file-status-icon").css("display", "none");
+                // Close all menus
+                Menus.closeAll();
+                moved = true;
+            }
+
+            // Move the item
+            $listItem.css("top", top + "px");
+        });
+
+        $(window.document).on("mouseup.workingSet", function (e) {
+            // Removes the styles, placing the item in the chocen place
+            $listItem.removeAttr("style");
+            $(window.document).off("mousemove.workingSet mouseup.workingSet");
+
+            if (!moved) {
+                // If file wasnt moved, open the file
+                FileViewController.openAndSelectDocument($listItem.data(_FILE_KEY).fullPath, FileViewController.WORKING_SET_VIEW);
+            } else {
+                // Restore the file selection
+                _fireSelectionChanged();
+                // Display the status icon again
+                $listItem.find(".file-status-icon").css("display", "block");
+
+                if (!selected) {
+                    // Add the scroller shadow in the case they were removed
+                    ViewUtils.addScrollerShadow($openFilesContainer[0], null, true);
+                }
+            }
+
+            // Dispatch event
+            $(DocumentManager).triggerHandler("workingSetReorder");
+        });
+    }
+
     /** 
      * Builds the UI for a new list item and inserts in into the end of the list
      * @private
@@ -175,7 +272,12 @@ define(function (require, exports, module) {
         _updateListItemSelection($newItem, curDoc);
 
         $newItem.mousedown(function (e) {
-            FileViewController.openAndSelectDocument(file.fullPath, FileViewController.WORKING_SET_VIEW);
+            // Try to reorder only with the right click and just open the file in other cases
+            if (e.which === 1) {
+                _reorderListItem(e);
+            } else {
+                FileViewController.openAndSelectDocument(file.fullPath, FileViewController.WORKING_SET_VIEW);
+            }
             e.preventDefault();
         });