Finished off refactoring the edit photo operations in the album editor

This commit is contained in:
Andy Heathershaw 2016-10-05 05:35:14 +01:00
parent 0e569562a4
commit 8990c31a5f
3 changed files with 134 additions and 120 deletions

View File

@ -130,7 +130,7 @@ function EditPhotosViewModel(album_id, language, urls) {
} }
} }
}); });
return false; return false;
} }
@ -142,9 +142,12 @@ function EditPhotosViewModel(album_id, language, urls) {
{ {
self.selectPhotoSingle(this); self.selectPhotoSingle(this);
var photo_id = self.photoIDs()[0];
self.photoIDs.removeAll();
self.promptForNewAlbum(function(dialog) { self.promptForNewAlbum(function(dialog) {
var album_id = $('select', dialog).val(); 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(); window.location.reload();
}); });
@ -156,6 +159,9 @@ function EditPhotosViewModel(album_id, language, urls) {
self.delete = function() { self.delete = function() {
self.selectPhotoSingle(this); self.selectPhotoSingle(this);
var photo_id = self.photoIDs()[0];
self.photoIDs.removeAll();
bootbox.dialog({ bootbox.dialog({
message: language.delete_confirm_message, message: language.delete_confirm_message,
title: language.delete_confirm_title, title: language.delete_confirm_title,
@ -169,7 +175,7 @@ function EditPhotosViewModel(album_id, language, urls) {
className: "btn-danger", className: "btn-danger",
callback: function() { callback: function() {
var url = urls.delete_photo; var url = urls.delete_photo;
url = url.replace(/\/0$/, '/' + self.photoIDs()[0]); url = url.replace(/\/0$/, '/' + photo_id);
$('.loading', parent).show(); $('.loading', parent).show();
@ -185,6 +191,63 @@ function EditPhotosViewModel(album_id, language, urls) {
return false; 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) self.promptForNewAlbum = function(callback_on_selected)
{ {
var albums = self.albums(); 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) { self.selectPhotoSingle = function (link_item) {
// Get the photo ID from the clicked link // Get the photo ID from the clicked link
var parent = $(link_item).parents('.photo'); var parent = $(link_item).parents('.photo');

View File

@ -186,7 +186,10 @@
var urls = []; var urls = [];
urls.analyse = '{{ route('albums.analyse', ['id' => $album->id]) }}'; urls.analyse = '{{ route('albums.analyse', ['id' => $album->id]) }}';
urls.delete_photo = '{{ route('photos.destroy', ['id' => 0]) }}'; 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.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 viewModel = new UploadPhotosViewModel('{{ $album->id }}', language, urls);
var editViewModel = new EditPhotosViewModel('{{ $album->id }}', language, urls); var editViewModel = new EditPhotosViewModel('{{ $album->id }}', language, urls);
@ -199,73 +202,6 @@
}); });
@endforeach @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() { $(document).ready(function() {
$('#upload-button').click(function() { $('#upload-button').click(function() {
$('.nav-tabs a[href="#upload-tab"]').tab('show'); $('.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 --}} {{-- Photo editing tasks - the buttons beneath the photos in partials/single_photo_admin --}}
$('a.change-album').click(editViewModel.changeAlbum); $('a.change-album').click(editViewModel.changeAlbum);
$('a.delete-photo').click(editViewModel.delete); $('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 --}} {{-- Photo uploads using AJAX --}}
if (window.FormData) if (window.FormData)

View File

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