From 8990c31a5f1e5396aa881d0e1d22bae91da7f0c1 Mon Sep 17 00:00:00 2001 From: Andy Heathershaw Date: Wed, 5 Oct 2016 05:35:14 +0100 Subject: [PATCH] Finished off refactoring the edit photo operations in the album editor --- public/themes/base/js/app.js | 127 +++++++++++++++++- .../themes/base/admin/show_album.blade.php | 125 ++--------------- routes/web.php | 2 +- 3 files changed, 134 insertions(+), 120 deletions(-) diff --git a/public/themes/base/js/app.js b/public/themes/base/js/app.js index 5ea9bb9..217c5d5 100644 --- a/public/themes/base/js/app.js +++ b/public/themes/base/js/app.js @@ -130,7 +130,7 @@ function EditPhotosViewModel(album_id, language, urls) { } } }); - + return false; } @@ -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'); diff --git a/resources/views/themes/base/admin/show_album.blade.php b/resources/views/themes/base/admin/show_album.blade.php index b133b2e..b85b448 100644 --- a/resources/views/themes/base/admin/show_album.blade.php +++ b/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(function() { - var parent = $(this).parents('.photo'); - var photo_id = $(parent).data('photo-id'); - - flipPhoto(photo_id, true, true, parent); - $(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; - }); + $('a.flip-photo-both').click(editViewModel.flipBoth); + $('a.flip-photo-horizontal').click(editViewModel.flipHorizontal); + $('a.flip-photo-vertical').click(editViewModel.flipVertical); + $('a.regenerate-thumbnails').click(editViewModel.regenerateThumbnails); + $('a.rotate-photo-left').click(editViewModel.rotateLeft); + $('a.rotate-photo-right').click(editViewModel.rotateRight); {{-- Photo uploads using AJAX --}} if (window.FormData) diff --git a/routes/web.php b/routes/web.php index 5d36175..77b10b6 100644 --- a/routes/web.php +++ b/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');