blue-twilight/resources/assets/js/albums.js

610 lines
21 KiB
JavaScript

/**
* This model is used by admin/analyse_album.blade.php, to analyse all images.
* @constructor
*/
function AnalyseAlbumViewModel() {
this.el = '#analyse-album';
this.data = {
imagesFailed: [],
imagesToAnalyse: [],
imagesInProgress: [],
imagesRecentlyCompleted: [],
numberSuccessful: 0,
numberFailed: 0
};
this.computed = {
failedPercentage: function () {
var result = 0;
if (this.numberTotal > 0)
{
result = (this.numberFailed / this.numberTotal) * 100;
}
return result.toFixed(2) + '%';
},
isCompleted: function () {
return this.numberTotal > 0 && (this.numberSuccessful + this.numberFailed >= this.numberTotal);
},
latestCompletedImages: function() {
var startIndex = this.imagesRecentlyCompleted.length - 3 < 0
? 0
: this.imagesRecentlyCompleted.length - 3;
var endIndex = startIndex + 3;
return this.imagesRecentlyCompleted.slice(startIndex, endIndex);
},
numberTotal: function () {
return this.imagesToAnalyse.length;
},
successfulPercentage: function () {
var result = 0;
if (this.numberTotal > 0)
{
result = (this.numberSuccessful / this.numberTotal) * 100;
}
return result.toFixed(2) + '%';
}
};
this.methods = {
// This method is called when an image is added to the array, automatically issue it for analysis
// item is an instance of AnalyseImageViewModel
analyseImage: function (item) {
var self = this;
this.imagesToAnalyse.push(item);
$.ajax(
item.url,
{
beforeSend: function() {
self.imagesInProgress.push(item);
},
dataType: 'json',
error: function (xhr, textStatus, errorThrown) {
self.numberFailed++;
self.imagesFailed.push({
'name': item.name,
'reason': textStatus
});
item.isSuccessful = false;
item.isPending = false;
},
method: 'POST',
success: function (data) {
if (data.is_successful) {
self.numberSuccessful++;
item.isSuccessful = true;
item.isPending = false;
// Push into our "recently completed" array
self.imagesRecentlyCompleted.push(item);
var indexToRemove = self.imagesInProgress.indexOf(item);
if (indexToRemove > -1)
{
self.imagesInProgress.splice(indexToRemove, 1);
}
// Remove it again after a few seconds
/*window.setTimeout(function() {
var indexToRemove = self.imagesRecentlyCompleted.indexOf(item);
if (indexToRemove > -1) {
self.imagesRecentlyCompleted.splice(indexToRemove, 1);
}
}, 2000);*/
}
else {
self.numberFailed++;
self.imagesFailed.push({
'name': item.name,
'reason': data.message
});
item.isSuccessful = false;
item.isPending = false;
}
}
}
);
}
};
}
/**
* This model is used by admin/analyse_album.blade.php, as a sub-model of AnalyseAlbumViewModel.
* @param image_info Array of information about the image
* @constructor
*/
function AnalyseImageViewModel(image_info) {
this.isPending = true;
this.isSuccessful = false;
this.name = image_info.name;
this.photoID = image_info.photo_id;
this.url = image_info.url;
}
/**
* This model is used by admin/show_album.blade.php to handle photo changes.
* @param album_id ID of the album the photos are in
* @param language Array containing language strings
* @param urls Array containing URLs
* @constructor
*/
function EditPhotosViewModel(album_id, language, urls) {
this.el = '#photos-tab';
this.data = {
albums: [],
bulkModifyMethod: '',
isSubmitting: false,
photoIDs: [],
photoIDsAvailable: [],
selectAllInAlbum: 0
};
// When a photo is un-selected, remove the "select all in album" flag as the user has overridden the selection
/*self.photoIDs.subscribe(function (changes)
{
if (changes[0].status !== 'deleted')
{
return;
}
self.selectAllInAlbum(0);
}, null, 'arrayChange');*/
this.methods = {
// Called when the Apply button on the "bulk apply selected actions" form is clicked
bulkModifySelected: function (e) {
if (this.isSubmitting) {
return true;
}
var bulk_form = $(e.target).closest('form');
if (this.bulkModifyMethod === 'change_album') {
// Prompt for the new album to move to
this.promptForNewAlbum(function (dialog) {
var album_id = $('select', dialog).val();
$('input[name="new-album-id"]', bulk_form).val(album_id);
self.isSubmitting = true;
$('button[name="bulk-apply"]', bulk_form).click();
_bt_showLoadingModal();
});
return false;
}
else if (this.bulkModifyMethod === 'delete') {
// Prompt for a confirmation - are you sure?!
bootbox.dialog({
message: language.delete_bulk_confirm_message,
title: language.delete_bulk_confirm_title,
buttons: {
cancel: {
label: language.action_cancel,
className: "btn-secondary"
},
confirm: {
label: language.action_delete,
className: "btn-danger",
callback: function () {
self.isSubmitting = true;
$('button[name="bulk-apply"]', bulk_form).click();
//_bt_showLoadingModal();
}
}
}
});
return false;
}
// All other methods submit the form as normal
return true;
},
changeAlbum: function (e) {
this.selectPhotoSingle(e.target);
var photo_id = this.photoIDs[0];
this.photoIDs = [];
this.promptForNewAlbum(function (dialog) {
var album_id = $('select', dialog).val();
$.post(urls.move_photo.replace(/\/0$/, '/' + photo_id), {'new_album_id': album_id}, function () {
window.location.reload();
});
//_bt_showLoadingModal();
});
e.preventDefault();
return false;
},
deletePhoto: function (e) {
var self = this;
this.selectPhotoSingle(e.target);
var photo_id = self.photoIDs[0];
this.photoIDs = [];
bootbox.dialog({
message: language.delete_confirm_message,
title: language.delete_confirm_title,
buttons: {
cancel: {
label: language.action_cancel,
className: "btn-secondary"
},
confirm: {
label: language.action_delete,
className: "btn-danger",
callback: function () {
var url = urls.delete_photo;
url = url.replace(/\/0$/, '/' + photo_id);
$('.loading', parent).show();
$.post(url, {'_method': 'DELETE'}, function (data) {
window.location.reload();
});
}
}
}
});
e.preventDefault();
return false;
},
flip: function (horizontal, vertical, parent) {
var url = urls.flip_photo;
url = url.replace('/0/', '/' + this.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();
});
this.photoIDs = [];
},
flipBoth: function (e) {
this.selectPhotoSingle(e.target);
this.flip(true, true, $(e.target).closest('.photo'));
e.preventDefault();
return false;
},
flipHorizontal: function (e) {
this.selectPhotoSingle(e.target);
this.flip(true, false, $(e.target).closest('.photo'));
e.preventDefault();
return false;
},
flipVertical: function (e) {
this.selectPhotoSingle(e.target);
this.flip(false, true, $(e.target).closest('.photo'));
e.preventDefault();
return false;
},
isPhotoSelected: function(photoID) {
if (this.photoIDs.indexOf(photoID) > -1)
{
return 'checked';
}
return '';
},
promptForNewAlbum: function (callback_on_selected) {
var albums = this.albums;
var select = $('<select/>')
.attr('name', 'album_id')
.addClass('form-control');
for (var i = 0; i < albums.length; i++) {
var option = $('<option/>')
.attr('value', albums[i].id)
.html(albums[i].name)
.appendTo(select);
// Pre-select the current album
if (album_id === albums[i].id) {
option.attr('selected', 'selected');
}
}
bootbox.dialog({
message: $('<p/>').html(language.change_album_message).prop('outerHTML') + select.prop('outerHTML'),
title: language.change_album_title,
buttons: {
cancel: {
label: language.action_cancel,
className: 'btn-secondary'
},
confirm: {
label: language.action_continue,
className: 'btn-success',
callback: function () {
callback_on_selected(this);
}
}
}
});
},
regenerateThumbnails: function (e) {
this.selectPhotoSingle(e.target);
var parent = $(e.target).closest('.photo');
var url = urls.regenerate_thumbnails;
url = url.replace(/\/0$/, '/' + this.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();
});
this.photoIDs = [];
e.preventDefault();
return false;
},
rotate: function (angle, parent) {
var url = urls.rotate_photo;
url = url.replace('/0/', '/' + this.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();
});
this.photoIDs = [];
},
rotateLeft: function (e) {
this.selectPhotoSingle(e.target);
this.rotate(90, $(e.target).closest('.photo'));
e.preventDefault();
return false;
},
rotateRight: function(e)
{
this.selectPhotoSingle(e.target);
this.rotate(270, $(e.target).closest('.photo'));
e.preventDefault();
return false;
},
selectAll: function() {
var self = this;
bootbox.dialog({
title: language.select_all_choice_title,
message: language.select_all_choice_message,
buttons: {
select_all: {
label: language.select_all_choice_all_action,
className: 'btn-secondary',
callback: function()
{
self.selectAllInAlbum = 1;
for (i = 0; i < self.photoIDsAvailable.length; i++)
{
self.photoIDs.push(self.photoIDsAvailable[i]);
}
}
},
select_visible: {
label: language.select_all_choice_visible_action,
className: 'btn-primary',
callback: function()
{
self.selectAllInAlbum = 0;
for (i = 0; i < self.photoIDsAvailable.length; i++)
{
self.photoIDs.push(self.photoIDsAvailable[i]);
}
}
}
}
});
return false;
},
selectNone: function() {
this.photoIDs = [];
this.selectAllInAlbum = 0;
return false;
},
selectPhotoSingle: function (link_item) {
// Get the photo ID from the clicked link
var parent = $(link_item).closest('.photo');
var photo_id = $(parent).data('photo-id');
// Save the photo ID
this.photoIDs = [];
this.photoIDs.push(photo_id);
// Hide the dropdown
$(link_item).dropdown('toggle');
}
}
}
/**
* This model is used by admin/show_album.blade.php to handle photo uploads.
* @param album_id ID of the album the photos are being uploaded to
* @param queue_token Unique token of the upload queue to save the photos to
* @param language Array containing language strings
* @param urls Array containing URLs
* @constructor
*/
function UploadPhotosViewModel(album_id, queue_token, language, urls) {
this.el = '#upload-tab';
this.data = {
currentStatus: '',
imagesFailed: 0,
imagesTotal: 0,
imagesUploaded: 0,
isBulkUploadInProgress: false,
isUploadInProgress: false,
statusMessages: []
};
this.computed = {
failedPercentage: function () {
var result = 0;
if (this.imagesTotal > 0)
{
result = (this.imagesFailed / this.imagesTotal) * 100;
}
return result.toFixed(2) + '%';
},
successfulPercentage: function () {
var result = 0;
if (this.imagesTotal > 0)
{
result = (this.imagesUploaded / this.imagesTotal) * 100;
}
return result.toFixed(2) + '%';
}
};
this.methods = {
// This method is called when an image is uploaded - regardless if it fails or not
onUploadCompleted: function () {
this.currentStatus = language.upload_status
.replace(':current', (this.imagesUploaded + this.imagesFailed))
.replace(':total', this.imagesTotal);
if ((this.imagesFailed + this.imagesUploaded) >= this.imagesTotal) {
this.isUploadInProgress = false;
if (this.imagesFailed === 0 && this.imagesUploaded > 0) {
window.location = urls.analyse;
}
}
},
// This method is called when an uploaded image fails
onUploadFailed: function (data, file_name) {
this.imagesFailed++;
this.statusMessages.push({
'message_class': 'text-danger',
'message_text': language.image_failed.replace(':file_name', file_name)
});
this.onUploadCompleted();
},
// This method is called when an uploaded image succeeds
onUploadSuccessful: function (data, file_name) {
if (data.is_successful) {
this.imagesUploaded++;
// Don't add to statusMessages() array so user only sees errors
/*self.statusMessages.push({
'message_class': 'text-success',
'message_text': language.image_uploaded.replace(':file_name', file_name)
});*/
this.onUploadCompleted();
}
else {
this.onUploadFailed(data, file_name);
}
},
uploadFile: function uploadImageFile(formObject, imageFile) {
var self = this;
var formData = new FormData();
formData.append('album_id', album_id);
formData.append('queue_token', queue_token);
formData.append('photo[]', imageFile, imageFile.name);
$.ajax(
{
contentType: false,
data: formData,
error: function (data) {
self.onUploadFailed(data, imageFile.name);
},
method: $(formObject).attr('method'),
processData: false,
success: function (data) {
self.onUploadSuccessful(data, imageFile.name);
},
url: $(formObject).attr('action')
}
);
this.isUploadInProgress = true;
this.currentStatus = language.upload_status
.replace(':current', 0)
.replace(':total', this.imagesTotal);
},
uploadIndividualFiles: function(event) {
var fileSelect = $('input[type=file]', event.target);
// Get the selected files
var files = fileSelect[0].files;
// Reset statistics
this.currentStatus = '';
this.statusMessages = [];
this.imagesUploaded = 0;
this.imagesFailed = 0;
this.imagesTotal = files.length;
this.isUploadInProgress = true;
// Loop through each of the selected files and upload them individually
for (var i = 0; i < files.length; i++)
{
var file = files[i];
// We're only interested in image files
if (!file.type.match('image.*'))
{
alert(language.not_an_image_file.replace(':file_name', file.name));
this.onUploadFailed(null, file.name);
continue;
}
// Upload the file
this.uploadFile(event.target, file);
}
// Prevent standard form upload
event.preventDefault();
return false;
}
};
}