in progress : reorder image

templates/backOffice/default/assets/js/image-upload.js

@@ -4,11 +4,11 @@ $(function($){
 
     Dropzone.autoDiscover = false;
 
-    
-
     // Remove image on click
     $.imageUploadManager.initImageDropZone = function() {
+
         $.imageUploadManager.onClickDeleteImage();
+        $.imageUploadManager.sortImage();
 
         var imageDropzone = new Dropzone("#images-dropzone", {
             dictDefaultMessage : $('.btn-browse').html(),
@@ -65,6 +65,7 @@ $(function($){
                     data
                 );
                 $.imageUploadManager.onClickDeleteImage();
+                $.imageUploadManager.sortImage();
             });
     };
 
@@ -95,8 +96,63 @@ $(function($){
                 $(".image-manager .message").html(
                     data
                 );
+
+                /* refresh position */
+                $( "#js-sort-image").children('li').each(function(position, element) {
+                    $(element).find('.js-sorted-position').html(position + 1);
+                });
             });
             return false;
         });
     };
+
+    $.imageUploadManager.sortImage = function() {
+        $( "#js-sort-image" ).sortable({
+            placeholder: "ui-sortable-placeholder col-sm-6 col-md-3",
+            change: function( event, ui ) {
+                /* refresh position */
+                var pickedElement = ui.item;
+                var position = 0;
+                $( "#js-sort-image").children('li').each(function(k, element) {
+                    if($(element).data('sort-id') == pickedElement.data('sort-id')) {
+                        return true;
+                    }
+                    position++;
+                    if($(element).is('.ui-sortable-placeholder')) {
+                        pickedElement.find('.js-sorted-position').html(position);
+                    } else {
+                        $(element).find('.js-sorted-position').html(position);
+                    }
+                });
+            },
+            stop: function( event, ui ) {
+                event.preventDefault();
+
+                /* update */
+                var newPosition = ui.item.find('.js-sorted-position').html();
+                var imageId = ui.item.data('sort-id');
+
+                $.ajax({
+                    type: "POST",
+                    url: imageReorder,
+                    data: {
+                        image_id: imageId,
+                        position: newPosition
+                    },
+                    statusCode: {
+                        404: function() {
+                            $(".image-manager .message").html(
+                                imageReorderErrorMessage
+                            );
+                        }
+                    }
+                }).done(function(data) {
+                    $(".image-manager .message").html(
+                        data
+                    );
+                });
+            }
+        });
+        $( "#js-sort-image" ).disableSelection();
+    };
 });