Sortable images on media multiple

Database/Migrations/2015_12_19_143643_add_sortable.php

@@ -0,0 +1,31 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+
+class AddSortable extends Migration
+{
+    /**
+     * Run the migrations.
+     *
+     * @return void
+     */
+    public function up()
+    {
+        Schema::table('media__imageables', function (Blueprint $table) {
+            $table->integer('order')->nullable()->after('zone');
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     *
+     * @return void
+     */
+    public function down()
+    {
+        Schema::table('media__imageables', function (Blueprint $table) {
+            $table->dropColumn('order');
+        });
+    }
+}

Http/Controllers/Api/MediaController.php

@@ -105,4 +105,22 @@ public function unlinkMedia(Request $request)
 
         return Response::json(['error' => false, 'message' => 'The link has been removed.']);
     }
+
+    /**
+     * Sort the record in the media__imageables table for the given array
+     * @param Request $request
+     */
+    public function sortMedia(Request $request)
+    {
+        $imageableIdArray = $request->get('sortable');
+
+        $order = 1;
+
+        foreach ($imageableIdArray as $id) {
+            $updated = DB::table('media__imageables')->whereId($id)->update(['order' => $order]);
+            $order++;
+        }
+
+        return Response::json(['error' => false, 'message' => 'The items have been reorder.']);
+    }
 }

Http/apiRoutes.php

@@ -4,3 +4,4 @@
 post('media/link', ['uses' => 'MediaController@linkMedia', 'as' => 'api.media.link']);
 post('media/unlink', ['uses' => 'MediaController@unlinkMedia', 'as' => 'api.media.unlink']);
 get('media/all', ['uses' => 'MediaController@all', 'as' => 'api.media.all', ]);
+post('media/sort', ['uses' => 'MediaController@sortMedia', 'as' => 'api.media.sort']);

Resources/views/admin/fields/file-link-multiple.blade.php

@@ -1,3 +1,4 @@
+<script src="{{ Module::asset('dashboard:vendor/jquery-ui/jquery-ui.min.js') }}"></script>
 <script>
     $fileCount = $('.jsFileCount');
 </script>
@@ -14,6 +15,7 @@
         border: 1px solid #eee;
         padding: 3px;
         border-radius: 3px;
+        cursor: grab;
     }
     .jsThumbnailImageWrapper i.removeIcon {
         position: absolute;
@@ -25,6 +27,12 @@
         border-radius: 20px;
         height: 25px;
     }
+
+    figure.ui-state-highlight {
+        border: none;
+        width:100px;
+        height: 0;
+    }
 </style>
 <script>
     if (typeof window.openMediaWindow === 'undefined') {
@@ -48,7 +56,7 @@
                     'zone': window.mediaZone
                 },
                 success: function (data) {
-                    var html = '<figure><img src="' + data.result.path + '" alt=""/>' +
+                    var html = '<figure data-id="' + data.result.imageableId + '"><img src="' + data.result.path + '" alt=""/>' +
                             '<a class="jsRemoveLink" href="#" data-id="' + data.result.imageableId + '">' +
                             '<i class="fa fa-times-circle removeIcon"></i>' +
                             '</a></figure>';
@@ -74,7 +82,7 @@
         <?php $zoneVar = "{$zone}Files"  ?>
         <?php if (isset($$zoneVar)): ?>
             <?php foreach ($$zoneVar as $file): ?>
-                <figure>
+                <figure data-id="{{ $file->pivot->id }}">
                     <img src="{{ Imagy::getThumbnail($file->path, (isset($thumbnail) ? $thumbnail : 'mediumThumb')) }}" alt="{{ $file->alt_attribute }}"/>
                     <a class="jsRemoveLink" href="#" data-id="{{ $file->pivot->id }}">
                         <i class="fa fa-times-circle removeIcon"></i>
@@ -89,7 +97,7 @@
         $('.jsThumbnailImageWrapper').on('click', '.jsRemoveLink', function (e) {
             e.preventDefault();
             var imageableId = $(this).data('id'),
-                pictureWrapper = $(this).parent();
+                    pictureWrapper = $(this).parent();
             $.ajax({
                 type: 'POST',
                 url: '{{ route('api.media.unlink') }}',
@@ -110,5 +118,28 @@
                 }
             });
         });
+
+        $(".jsThumbnailImageWrapper").sortable({
+            placeholder: 'ui-state-highlight',
+            cursor:'move',
+            helper: 'clone',
+            containment: 'parent',
+            forcePlaceholderSize: false,
+            forceHelperSize: true,
+            update:function(event, ui) {
+                var dataSortable = $(this).sortable('toArray', {attribute: 'data-id'});
+                $.ajax({
+                    global: false, /* leave it to false */
+                    type: 'POST',
+                    url: '{{ route('api.media.sort') }}',
+                    data: {
+                        'entityClass': '{{ $entityClass }}',
+                        'zone': '{{ $zone }}',
+                        'sortable': dataSortable,
+                        '_token': '{{ csrf_token() }}'
+                    }
+                });
+            }
+        });
     });
 </script>

Resources/views/admin/fields/file-link.blade.php

@@ -41,10 +41,10 @@
                     'zone': window.mediaZone
                 },
                 success: function (data) {
-                    var html = '<img src="' + data.result.path + '" alt=""/>' +
+                    var html = '<figure data-id="'+ data.result.imageableId +'"><img src="' + data.result.path + '" alt=""/>' +
                             '<a class="jsRemoveSimpleLink" href="#" data-id="' + data.result.imageableId + '">' +
                             '<i class="fa fa-times-circle removeIcon"></i>' +
-                            '</a>';
+                            '</a></figure>';
                     window.zoneWrapper.append(html).fadeIn('slow', function() {
                         toggleButton($(this));
                     });

Support/Traits/MediaRelation.php

@@ -8,6 +8,6 @@ trait MediaRelation
      */
     public function files()
     {
-        return $this->morphToMany('Modules\Media\Entities\File', 'imageable', 'media__imageables')->withPivot('zone', 'id')->withTimestamps();
+        return $this->morphToMany('Modules\Media\Entities\File', 'imageable', 'media__imageables')->withPivot('zone', 'id')->withTimestamps()->orderBy('order');
     }
 }