Added sortable capabilities for PageMedia

themes/grav/app/pages/page/media.js

@@ -3,6 +3,7 @@ import request from '../../utils/request';
 import FilesField, { UriToMarkdown } from '../../forms/fields/files';
 import { config, translations } from 'grav-config';
 import { Instance as Editor } from '../../forms/fields/editor';
+import Sortable from 'sortablejs';
 
 const previewTemplate = `
     <div class="dz-preview dz-file-preview">
@@ -42,6 +43,31 @@ export default class PageMedia extends FilesField {
         if (typeof this.options.attachDragDrop === 'undefined' || this.options.attachDragDrop) {
             this.attachDragDrop();
         }
+
+        this.sortable = new Sortable(this.container.get(0), {
+            animation: 150,
+            // forceFallback: true,
+            setData: (dataTransfer, target) => {
+                target = $(target);
+                let uri = encodeURI(target.find('.dz-filename').text());
+                let shortcode = UriToMarkdown(uri);
+                this.dropzone.disable();
+                target.addClass('hide-backface');
+                dataTransfer.effectAllowed = 'copy';
+                dataTransfer.setData('text', shortcode);
+            },
+            onSort: () => {
+                const field = $(`[name="${this.container.data('dropzone-field')}"]`);
+                let names = [];
+                this.container.find('[data-dz-name]').each((index, file) => {
+                    file = $(file);
+                    const name = file.text().trim();
+                    names.push(name);
+                });
+
+                field.val(names.join(','));
+            }
+        });
     }
 
     fetchMedia() {
@@ -76,11 +102,17 @@ export default class PageMedia extends FilesField {
 
     onDropzoneComplete(file) {
         super.onDropzoneComplete(file);
+        this.sortable.options.onSort();
 
         // accepted
         $('.dz-preview').prop('draggable', 'true');
     }
 
+    onDropzoneRemovedFile(file, ...extra) {
+        super.onDropzoneRemovedFile(file, ...extra);
+        this.sortable.options.onSort();
+    }
+
     attachDragDrop() {
         this.container.delegate('[data-dz-insert]', 'click', (e) => {
             let target = $(e.currentTarget).parent('.dz-preview').find('.dz-filename');

themes/grav/templates/forms/fields/pagemedia/pagemedia.html.twig

@@ -13,8 +13,9 @@
              data-media-url="{{ base_url }}/media/{{ admin.route|trim('/') }}.json"
              data-media-local="{{ base_url_relative_frontend|rtrim('/') }}/{{ admin.route|trim('/') }}"
              data-media-path="{{ url(context.relativePagePath) }}"
-             data-dropzone-options="{{ dropzoneSettings|json_encode|e('html_attr') }}"></div>
-        <span>{{ value|join("\n") }}</span>
+             data-dropzone-options="{{ dropzoneSettings|json_encode|e('html_attr') }}"
+             data-dropzone-field="{{ (scope ~ field.name)|fieldName }}"></div>
+        <input type="hidden" name="{{ (scope ~ field.name)|fieldName }}" value="{{ value|e }}" />
     </div>
 </div>
 {% else %}