support drag to change waiting task order when display order is set default

app/index.html

@@ -21,6 +21,7 @@
     <link rel="stylesheet" href="../bower_components/awesome-bootstrap-checkbox/awesome-bootstrap-checkbox.css"/>
     <link rel="stylesheet" href="../bower_components/angular/angular-csp.css"/>
     <link rel="stylesheet" href="../bower_components/angular-busy/dist/angular-busy.min.css"/>
+    <link rel="stylesheet" href="../bower_components/angular-dragula/dist/dragula.min.css"/>
     <!-- endbuild -->
     <!-- build:css css/aria-ng.min.css -->
     <link rel="stylesheet" href="styles/aria-ng.css">
@@ -252,6 +253,7 @@
 <script src="../bower_components/angular-base64/angular-base64.min.js"></script>
 <script src="../bower_components/angular-local-storage/dist/angular-local-storage.min.js"></script>
 <script src="../bower_components/angular-busy/dist/angular-busy.min.js"></script>
+<script src="../bower_components/angular-dragula/dist/angular-dragula.min.js"></script>
 <script src="../bower_components/angular-bootstrap-slider/slider.js"></script>
 <script src="../bower_components/ngSweetAlert/SweetAlert.js"></script>
 <!-- endbuild -->

app/scripts/controllers/list.js

@@ -1,12 +1,17 @@
 (function () {
     'use strict';
 
-    angular.module('ariaNg').controller('DownloadListController', ['$rootScope', '$scope', '$window', '$location', '$interval', 'ariaNgCommonService', 'ariaNgSettingService', 'ariaNgTaskService', function ($rootScope, $scope, $window, $location, $interval, ariaNgCommonService, ariaNgSettingService, ariaNgTaskService) {
+    angular.module('ariaNg').controller('DownloadListController', ['$rootScope', '$scope', '$window', '$location', '$route', '$interval', 'dragulaService', 'ariaNgCommonService', 'ariaNgSettingService', 'ariaNgTaskService', function ($rootScope, $scope, $window, $location, $route, $interval, dragulaService, ariaNgCommonService, ariaNgSettingService, ariaNgTaskService) {
         var location = $location.path().substring(1);
         var downloadTaskRefreshPromise = null;
+        var pauseDownloadTaskRefresh = false;
         var needRequestWholeInfo = true;
 
         var refreshDownloadTask = function () {
+            if (pauseDownloadTaskRefresh) {
+                return;
+            }
+
             return ariaNgTaskService.getTaskList(location, needRequestWholeInfo, function (result) {
                 if (!ariaNgCommonService.extendArray(result, $rootScope.taskContext.list, 'gid')) {
                     if (needRequestWholeInfo) {
@@ -42,12 +47,37 @@
             return ariaNgSettingService.getDisplayOrder();
         };
 
+        $scope.isSupportDragTask = function () {
+            var displayOrder = ariaNgCommonService.parseOrderType(ariaNgSettingService.getDisplayOrder());
+
+            return location == 'waiting' && displayOrder.type == 'default';
+        };
+
         if (ariaNgSettingService.getDownloadTaskRefreshInterval() > 0) {
             downloadTaskRefreshPromise = $interval(function () {
                 refreshDownloadTask();
             }, ariaNgSettingService.getDownloadTaskRefreshInterval());
         }
 
+        dragulaService.options($scope, 'task-list', {
+            revertOnSpill: true,
+            moves: function (el, container, handle) {
+                return $scope.isSupportDragTask();
+            }
+        });
+
+        $scope.$on('task-list.drop-model', function (el, target, source) {
+            var element = angular.element(target);
+            var gid = element.attr('data-gid');
+            var index = element.index();
+
+            pauseDownloadTaskRefresh = true;
+
+            ariaNgTaskService.changeTaskPosition(gid, index, function (result) {
+                pauseDownloadTaskRefresh = false;
+            });
+        });
+
         $scope.$on('$destroy', function () {
             if (downloadTaskRefreshPromise) {
                 $interval.cancel(downloadTaskRefreshPromise);

app/scripts/core/app.js

@@ -15,6 +15,7 @@
         'LocalStorageModule',
         'cgBusy',
         'ui.bootstrap-slider',
-        'oitozero.ngSweetAlert'
+        'oitozero.ngSweetAlert',
+        angularDragula(angular)
     ]);
 })();

app/scripts/services/aria2RpcService.js

@@ -234,9 +234,12 @@
 
                 return invoke('tellStopped', requestContext);
             },
-            // changePosition: function (context) {
+            changePosition: function (context) {
-            //     return invoke('changePosition', context);
+                return invoke('changePosition', {
-            // },
+                    params: [context.gid, context.pos, context.how],
+                    callback: context.callback
+                });
+            },
             // changeUri: function (context) {
             //     return invoke('changeUri', context);
             // },

app/scripts/services/ariaNgTaskService.js

@@ -169,6 +169,14 @@
                     callback: callback
                 });
             },
+            changeTaskPosition: function (gid, position, callback) {
+                return aria2RpcService.changePosition({
+                    gid: gid,
+                    pos: position,
+                    how: 'POS_SET',
+                    callback: callback
+                })
+            },
             processDownloadTasks: function (tasks) {
                 if (!angular.isArray(tasks)) {
                     return;

app/styles/aria-ng.css

@@ -408,6 +408,13 @@ td {
     border-color: #208fe5;
 }
 
+/* angular-dragula extend */
+.gu-mirror {
+    cursor: grabbing;
+    cursor: -moz-grabbing;
+    cursor: -webkit-grabbing;
+}
+
 /* task-table */
 .task-table {
     margin-left: 15px;
@@ -429,6 +436,13 @@ td {
     cursor: pointer;
 }
 
+.task-table > .task-table-body.draggable {
+    cursor: move;
+    cursor: grab;
+    cursor: -moz-grab;
+    cursor: -webkit-grab;
+}
+
 .task-table > .task-table-body > div.row {
     padding-top: 8px;
     padding-bottom: 8px;

app/views/list.html

@@ -32,7 +32,7 @@
                 </div>
             </div>
         </div>
-        <div class="task-table-body">
+        <div class="task-table-body" ng-class="{'draggable': isSupportDragTask()}" dragula="'task-list'" dragula-model="taskContext.list">
             <div class="row" ng-repeat="task in taskContext.list | filter: filterByTaskName | taskOrderBy: getOrderType()" data-gid="{{task.gid}}">
                 <div class="col-sm-8">
                     <div class="checkbox checkbox-primary" ng-class="{'checkbox-hide': !taskContext.selected[task.gid]}">

bower.json

@@ -46,6 +46,7 @@
     "angular-base64": "^2.0.5",
     "angular-local-storage": "^0.2.7",
     "angular-busy": "^4.1.3",
+    "angular-dragula": "^1.2.7",
     "angular-bootstrap-slider": "^0.1.28",
     "ngSweetAlert": "https://github.com/oitozero/ngSweetAlert.git#8df6c30b0996f09cb4cf5e90a41115a6c09fa852"
   }