Finished off refactoring the edit photo operations in the album editor

public/themes/base/js/app.js

@@ -142,9 +142,12 @@ function EditPhotosViewModel(album_id, language, urls) {
     {
         self.selectPhotoSingle(this);
 
+        var photo_id = self.photoIDs()[0];
+        self.photoIDs.removeAll();
+
         self.promptForNewAlbum(function(dialog) {
             var album_id = $('select', dialog).val();
-            $.post(urls.move_photo.replace(/\/0$/, '/' + self.photoIDs()[0]), { 'new_album_id': album_id }, function()
+            $.post(urls.move_photo.replace(/\/0$/, '/' + photo_id), { 'new_album_id': album_id }, function()
             {
                 window.location.reload();
             });
@@ -156,6 +159,9 @@ function EditPhotosViewModel(album_id, language, urls) {
     self.delete = function() {
         self.selectPhotoSingle(this);
 
+        var photo_id = self.photoIDs()[0];
+        self.photoIDs.removeAll();
+
         bootbox.dialog({
             message: language.delete_confirm_message,
             title: language.delete_confirm_title,
@@ -169,7 +175,7 @@ function EditPhotosViewModel(album_id, language, urls) {
                     className: "btn-danger",
                     callback: function() {
                         var url = urls.delete_photo;
-                        url = url.replace(/\/0$/, '/' + self.photoIDs()[0]);
+                        url = url.replace(/\/0$/, '/' + photo_id);
 
                         $('.loading', parent).show();
 
@@ -185,6 +191,63 @@ function EditPhotosViewModel(album_id, language, urls) {
         return false;
     };
 
+    self.flip = function(horizontal, vertical, parent)
+    {
+        var url = urls.flip_photo;
+        url = url.replace('/0/', '/' + self.photoIDs()[0] + '/');
+
+        if (horizontal)
+        {
+            url = url.replace(/\/-1\//, '/1/');
+        }
+        else
+        {
+            url = url.replace(/\/-1\//, '/0/');
+        }
+
+        if (vertical)
+        {
+            url = url.replace(/\/-2$/, '/1');
+        }
+        else
+        {
+            url = url.replace(/\/-2$/, '/0');
+        }
+
+        $('.loading', parent).show();
+        $.post(url, function()
+        {
+            var image = $('img.photo-thumbnail', parent);
+            var originalUrl = image.data('original-src');
+            image.attr('src', originalUrl + "&_=" + new Date().getTime());
+
+            $('.loading', parent).hide();
+        });
+
+        self.photoIDs.removeAll();
+    };
+
+    self.flipBoth = function() {
+        self.selectPhotoSingle(this);
+        self.flip(true, true, $(this).parents('.photo'));
+
+        return false;
+    };
+
+    self.flipHorizontal = function() {
+        self.selectPhotoSingle(this);
+        self.flip(true, false, $(this).parents('.photo'));
+
+        return false;
+    };
+
+    self.flipVertical = function() {
+        self.selectPhotoSingle(this);
+        self.flip(false, true, $(this).parents('.photo'));
+
+        return false;
+    };
+
     self.promptForNewAlbum = function(callback_on_selected)
     {
         var albums = self.albums();
@@ -229,6 +292,64 @@ function EditPhotosViewModel(album_id, language, urls) {
         });
     };
 
+    self.regenerateThumbnails = function()
+    {
+        self.selectPhotoSingle(this);
+        var parent = $(this).parents('.photo');
+
+        var url = urls.regenerate_thumbnails;
+        url = url.replace(/\/0$/, '/' + self.photoIDs()[0]);
+
+        $('.loading', parent).show();
+        $.post(url, function()
+        {
+            var image = $('img.photo-thumbnail', parent);
+            var originalUrl = image.data('original-src');
+            image.attr('src', originalUrl + "&_=" + new Date().getTime());
+
+            $('.loading', parent).hide();
+        });
+
+        self.photoIDs.removeAll();
+        return false;
+    };
+
+    self.rotate = function(angle, parent)
+    {
+        var url = urls.rotate_photo;
+        url = url.replace('/0/', '/' + self.photoIDs()[0] + '/');
+        url = url.replace(/\/1$/, '/' + angle);
+
+        $('.loading', parent).show();
+        $.post(url, function()
+        {
+            var image = $('img.photo-thumbnail', parent);
+            var originalUrl = image.data('original-src');
+            image.attr('src', originalUrl + "&_=" + new Date().getTime());
+
+            $('.loading', parent).hide();
+            self.photoIDs.removeAll();
+        });
+
+        self.photoIDs.removeAll();
+    };
+
+    self.rotateLeft = function()
+    {
+        self.selectPhotoSingle(this);
+        self.rotate(90, $(this).parents('.photo'));
+
+        return false;
+    };
+
+    self.rotateRight = function()
+    {
+        self.selectPhotoSingle(this);
+        self.rotate(270, $(this).parents('.photo'));
+
+        return false;
+    };
+
     self.selectPhotoSingle = function (link_item) {
         // Get the photo ID from the clicked link
         var parent = $(link_item).parents('.photo');

resources/views/themes/base/admin/show_album.blade.php

@@ -186,7 +186,10 @@
     var urls = [];
     urls.analyse = '{{ route('albums.analyse', ['id' => $album->id]) }}';
     urls.delete_photo = '{{ route('photos.destroy', ['id' => 0]) }}';
+    urls.flip_photo = '{{ route('photos.flip', ['id' => 0, 'horizontal' => -1, 'vertical' => -2]) }}';
     urls.move_photo = '{{ route('photos.move', ['photoId' => 0]) }}';
+    urls.regenerate_thumbnails = '{{ route('photos.regenerateThumbnails', ['photoId' => 0]) }}';
+    urls.rotate_photo = '{{ route('photos.rotate', ['id' => 0, 'angle' => 1]) }}';
 
     var viewModel = new UploadPhotosViewModel('{{ $album->id }}', language, urls);
     var editViewModel = new EditPhotosViewModel('{{ $album->id }}', language, urls);
@@ -199,73 +202,6 @@
         });
     @endforeach
 
-    function flipPhoto(photo_id, horizontal, vertical, parent)
-    {
-        var url = '{{ route('photos.flip', ['id' => 0, 'horizontal' => -1, 'vertical' => -2]) }}';
-        url = url.replace('/0/', '/' + photo_id + '/');
-
-        if (horizontal)
-        {
-            url = url.replace(/\/-1\//, '/1/');
-        }
-        else
-        {
-            url = url.replace(/\/-1\//, '/0/');
-        }
-
-        if (vertical)
-        {
-            url = url.replace(/\/-2$/, '/1');
-        }
-        else
-        {
-            url = url.replace(/\/-2$/, '/0');
-        }
-
-        $('.loading', parent).show();
-        $.post(url, function()
-        {
-            var image = $('img.photo-thumbnail', parent);
-            var originalUrl = image.data('original-src');
-            image.attr('src', originalUrl + "&_=" + new Date().getTime());
-
-            $('.loading', parent).hide();
-        });
-    }
-
-    function regenerateThumbnails(photo_id, parent)
-    {
-        var url = '{{ route('photos.regenerateThumbnails', ['id' => 0]) }}';
-        url = url.replace(/\/0$/, '/' + photo_id);
-
-        $('.loading', parent).show();
-        $.post(url, function()
-        {
-            var image = $('img.photo-thumbnail', parent);
-            var originalUrl = image.data('original-src');
-            image.attr('src', originalUrl + "&_=" + new Date().getTime());
-
-            $('.loading', parent).hide();
-        });
-    }
-
-    function rotatePhoto(photo_id, angle, parent)
-    {
-        var url = '{{ route('photos.rotate', ['id' => 0, 'angle' => 1]) }}';
-        url = url.replace('/0/', '/' + photo_id + '/');
-        url = url.replace(/\/1$/, '/' + angle);
-
-        $('.loading', parent).show();
-        $.post(url, function()
-        {
-            var image = $('img.photo-thumbnail', parent);
-            var originalUrl = image.data('original-src');
-            image.attr('src', originalUrl + "&_=" + new Date().getTime());
-
-            $('.loading', parent).hide();
-        });
-    }
-
     $(document).ready(function() {
         $('#upload-button').click(function() {
             $('.nav-tabs a[href="#upload-tab"]').tab('show');
@@ -274,55 +210,12 @@
         {{-- Photo editing tasks - the buttons beneath the photos in partials/single_photo_admin --}}
         $('a.change-album').click(editViewModel.changeAlbum);
         $('a.delete-photo').click(editViewModel.delete);
-
+        $('a.flip-photo-both').click(editViewModel.flipBoth);
-        $('a.flip-photo-both').click(function() {
+        $('a.flip-photo-horizontal').click(editViewModel.flipHorizontal);
-            var parent = $(this).parents('.photo');
+        $('a.flip-photo-vertical').click(editViewModel.flipVertical);
-            var photo_id = $(parent).data('photo-id');
+        $('a.regenerate-thumbnails').click(editViewModel.regenerateThumbnails);
-
+        $('a.rotate-photo-left').click(editViewModel.rotateLeft);
-            flipPhoto(photo_id, true, true, parent);
+        $('a.rotate-photo-right').click(editViewModel.rotateRight);
-            $(this).dropdown('toggle');
-            return false;
-        });
-        $('a.flip-photo-horizontal').click(function() {
-            var parent = $(this).parents('.photo');
-            var photo_id = $(parent).data('photo-id');
-
-            flipPhoto(photo_id, true, false, parent);
-            $(this).dropdown('toggle');
-            return false;
-        });
-        $('a.flip-photo-vertical').click(function() {
-            var parent = $(this).parents('.photo');
-            var photo_id = $(parent).data('photo-id');
-
-            flipPhoto(photo_id, false, true, parent);
-            $(this).dropdown('toggle');
-            return false;
-        });
-        $('a.regenerate-thumbnails').click(function() {
-            var parent = $(this).parents('.photo');
-            var photo_id = $(parent).data('photo-id');
-
-            regenerateThumbnails(photo_id, parent);
-            $(this).dropdown('toggle');
-            return false;
-        });
-        $('a.rotate-photo-left').click(function() {
-            var parent = $(this).parents('.photo');
-            var photo_id = $(parent).data('photo-id');
-
-            rotatePhoto(photo_id, 90, parent);
-            $(this).dropdown('toggle');
-            return false;
-        });
-        $('a.rotate-photo-right').click(function() {
-            var parent = $(this).parents('.photo');
-            var photo_id = $(parent).data('photo-id');
-
-            rotatePhoto(photo_id, 270, parent);
-            $(this).dropdown('toggle');
-            return false;
-        });
 
         {{-- Photo uploads using AJAX --}}
         if (window.FormData)

routes/web.php

@@ -29,7 +29,7 @@ Route::group(['prefix' => 'admin'], function () {
     Route::post('photos/analyse/{id}', 'Admin\PhotoController@analyse')->name('photos.analyse');
     Route::post('photos/flip/{photoId}/{horizontal}/{vertical}', 'Admin\PhotoController@flip')->name('photos.flip');
     Route::post('photos/move/{photoId}', 'Admin\PhotoController@move')->name('photos.move');
-    Route::post('photos/regenerate-thumbnails/{id}', 'Admin\PhotoController@regenerateThumbnails')->name('photos.regenerateThumbnails');
+    Route::post('photos/regenerate-thumbnails/{photoId}', 'Admin\PhotoController@regenerateThumbnails')->name('photos.regenerateThumbnails');
     Route::post('photos/rotate/{photoId}/{angle}', 'Admin\PhotoController@rotate')->name('photos.rotate');
     Route::post('photos/store-bulk', 'Admin\PhotoController@storeBulk')->name('photos.storeBulk');
     Route::put('photos/update-bulk/{albumId}', 'Admin\PhotoController@updateBulk')->name('photos.updateBulk');