#3033 Change order of ad images

addons/default/visiosoft/advs-module/resources/css/new-create.css

@@ -64,3 +64,7 @@
 .input-group-addon input[type=checkbox] {
     margin-top: 0;
 }
+
+.ads-box-image:hover {
+    cursor: move;
+}

addons/default/visiosoft/advs-module/resources/js/new-create.js

@@ -267,7 +267,8 @@ $(document).ready(function () {
     $('#configurationForm').submit(function (e) {
         e.preventDefault();
         crudAjax($(this).serialize(), '/advs/configuration/ajax/create', 'POST', function (callback) {
-            $('.configuration-table').append(`<tr id="configuration-${callback.id}">
+            $('.configuration-table').append(`
+                <tr id="configuration-${callback.id}">
                     <td>${callback.option_name}</td>
                     <td>${callback.stock}</td>
                     <td>${callback.currency_price}</td>
@@ -280,7 +281,8 @@ $(document).ready(function () {
                         </svg>
                         </a>
                     </td>
-                                    </tr>`);
+                </tr>
+            `);
             $('#configurationForm').trigger("reset");
         })
     });
@@ -293,4 +295,33 @@ $(document).ready(function () {
         })
     });
 
+    // Add classified image sorting
+    function getIdsOfImages() {
+        var values = [];
+        $('.imageList .ads-box-image').each(function (index) {
+            values.push($(this).attr("data-id"));
+        });
+
+        $('[name=files]').val(values.join(','));
+    }
+
+    // Listen for the event.
+    document.querySelector('#mediaSelectedWrapper').addEventListener('dropzone.changed', function (e) {
+        setTimeout(function () {
+            const imageList = $('.imageList');
+            imageList.unbind();
+
+            imageList.sortable({
+                update: function(event, ui) {
+                    getIdsOfImages();
+                }
+            });
+        }, 500)
+    }, false);
+
+    $( ".imageList" ).sortable({
+        update: function(event, ui) {
+            getIdsOfImages();
+        }
+    });
 });

addons/default/visiosoft/advs-module/resources/views/new-ad/new-create.twig

@@ -8,6 +8,7 @@
     <style>
         {{ asset_inline("visiosoft.module.advs::css/new-create.css") }}
         {{ asset_inline("visiosoft.module.advs::css/new-create-new.scss") }}
+        {{ asset_inline("visiosoft.theme.base::css/jquery-ui.min.css") }}
     </style>
 {% endblock %}
 
@@ -344,5 +345,6 @@
     {{ asset_add("scripts.js", "visiosoft.module.advs::js/new-create.js") }}
     {{ asset_add("scripts.js", "streams::js/form/form.js") }}
     {{ asset_add("scripts.js", "streams::js/form/translations.js") }}
+    {{ asset_add("scripts.js", "visiosoft.theme.base::js/vendor/jquery-ui.min.js") }}
 
 {% endblock %}

addons/default/visiosoft/media-field_type/resources/js/upload.js

@@ -1,11 +1,13 @@
+// Add dropzone change event
+const event = new Event('dropzone.changed');
+
 // Disabling autoDiscover, otherwise Dropzone will try to attach twice.
 Dropzone.autoDiscover = false;
 $("div#myDrop").dropzone({url: "/file/post"});
 
 var doc_input = $('input[name="doc_files"]');
 
-
+const getUploaded = () => $('input[name="files"]').val().split(',').map(Number);
-var uploaded = $('input[name="files"]').val().split(',').map(Number);
 
 if (doc_input.length) {
     var docsUploaded = doc_input.val().split(',').map(Number);
@@ -72,6 +74,7 @@ $(function () {
         var response = JSON.parse(file.xhr.response);
         var mimeType = response.mime_type.split('/')
         if (mimeType[0] === 'image') {
+            let uploaded = getUploaded();
             uploaded.push(response.id);
 
             $('.media-selected-wrapper').load(
@@ -84,9 +87,11 @@ $(function () {
             file.previewElement.querySelector('[data-dz-uploadprogress]').setAttribute('class', 'progress progress-success');
 
             setTimeout(function () {
-
                 addAppendByData(uploaded[0])
                 file.previewElement.remove();
+
+                // Dispatch the event.
+                document.querySelector('#mediaSelectedWrapper').dispatchEvent(event);
             }, 500);
         } else {
             if (doc_input.length) {
@@ -126,6 +131,7 @@ function addAppendByData(data_id) {
 function deleteImage(e, id) {
     e.preventDefault()
 
+    let uploaded = getUploaded();
     var key_item = $.inArray(id, uploaded);
     uploaded.splice(key_item, 1);
     $('input[name="files"]').val(uploaded.join(','))
@@ -163,6 +169,8 @@ function rotateImage(e, id) {
 function setMain(e, id) {
     e.preventDefault()
 
+    let uploaded = getUploaded();
+
     $('.main-image').remove();
     var key_item = $.inArray(id, uploaded);
     uploaded.splice(key_item, 1);

addons/default/visiosoft/media-field_type/resources/views/input.twig

@@ -14,7 +14,7 @@
 <input type="hidden" name="{{ field_type.input_name }}"
        value="{{ field_type.ids|join(',') }}" {{ html_attributes(field_type.attributes) }} {{ field_type.disabled ? 'disabled' }} {{ field_type.readonly ? 'readonly' }}>
 
-<div class="selected media-selected-wrapper">
+<div class="selected media-selected-wrapper" id="mediaSelectedWrapper">
     {{ field_type.value_table|raw }}
 </div>