function AnalyseAlbumViewModel() { var self = this; self.imagesFailed = ko.observableArray(); self.imagesToAnalyse = ko.observableArray(); self.numberSuccessful = ko.observable(0); self.numberFailed = ko.observable(0); self.numberTotal = ko.computed(function () { return self.imagesToAnalyse().length; }); self.failedPercentage = ko.computed(function () { return ((self.numberFailed() / self.numberTotal()) * 100).toFixed(2) + '%'; }); self.successfulPercentage = ko.computed(function () { return ((self.numberSuccessful() / self.numberTotal()) * 100).toFixed(2) + '%'; }); self.isCompleted = ko.computed(function () { return self.numberTotal() > 0 && (self.numberSuccessful() + self.numberFailed() >= self.numberTotal()); }); // When an image is added to the array, automatically issue it for analysis self.imagesToAnalyse.subscribe(function (changes) { // changes[0].value is an instance of AnalyseImageViewModel var item = changes[0].value; $.ajax( item.url(), { dataType: 'json', error: function (xhr, textStatus, errorThrown) { self.numberFailed(self.numberFailed() + 1); 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(self.numberSuccessful() + 1); item.isSuccessful(true); item.isPending(false); } else { self.numberFailed(self.numberFailed() + 1); self.imagesFailed.push({ 'name': item.name(), 'reason': data.message }); item.isSuccessful(false); item.isPending(false); } } } ); }, null, 'arrayChange'); } function AnalyseImageViewModel(image_info) { var self = this; self.isPending = ko.observable(true); self.isSuccessful = ko.observable(false); self.name = ko.observable(image_info.name); self.photoID = ko.observable(image_info.photo_id); self.url = ko.observable(image_info.url); self.iconClass = ko.computed(function () { var string = 'fa fa-fw '; if (!self.isPending()) { string += (self.isSuccessful() ? 'check text-success' : 'times text-danger') } return string; }); } /** * 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) { var self = this; self.albums = ko.observableArray(); self.bulkModifyMethod = ko.observable(); self.photoIDs = ko.observableArray(); /* Called when the Apply button on the "bulk apply selected actions" form is clicked */ self.bulkModifySelected = function() { var bulk_form = $('form#bulk-modify-form'); if (self.bulkModifyMethod() == 'change_album') { // Prompt for the new album to move to self.promptForNewAlbum(function(dialog) { var album_id = $('select', dialog).val(); $('input[name="new-album-id"]', form).val(album_id); bulk_form.submit(); }); return false; } else if (self.bulkModifyMethod() == 'delete') { // Prompt for a confirmation - are you sure?! bootbox.dialog({ message: language.delete_bulk_confirm_message.replace(':number', self.photoIDs().length), title: language.delete_bulk_confirm_title.replace(':number', self.photoIDs().length), buttons: { cancel: { label: language.action_cancel, className: "btn-default" }, confirm: { label: language.action_delete, className: "btn-danger", callback: function() { bulk_form.submit(); } } } }); return false; } // All other methods submit the form as normal return true; }; self.changeAlbum = function() { 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$/, '/' + photo_id), { 'new_album_id': album_id }, function() { window.location.reload(); }); }); return false; }; 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, buttons: { cancel: { label: language.action_cancel, className: "btn-default" }, 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(); }); } } } }); 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(); var select = $('') .attr('name', 'album_id') .addClass('form-control'); for (var i = 0; i < albums.length; i++) { var 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: $('
').html(language.change_album_message).prop('outerHTML') + select.prop('outerHTML'), title: language.change_album_title, buttons: { cancel: { label: language.action_cancel, className: 'btn-default' }, confirm: { label: language.action_continue, className: 'btn-success', callback: function() { callback_on_selected(this); } } } }); }; 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'); var photo_id = $(parent).data('photo-id'); // Save the photo ID self.photoIDs.removeAll(); self.photoIDs.push(photo_id); // Hide the dropdown $(link_item).dropdown('toggle'); }; } function SlideShowViewModel(required_timeout_ms) { var self = this; self.current = ko.observable(); self.currentIndex = ko.observable(0); self.images = ko.observableArray(); self.interval = null; self.isRunning = ko.observable(false); self.isPaused = ko.observable(false); self.changeCurrentImage = function(photo_id) { for (var i = 0; i < self.images().length; i++) { var this_image = self.images()[i]; if (this_image.id == photo_id) { self.current(this_image); self.currentIndex(i); window.clearInterval(self.interval); self.interval = window.setInterval(self.rotateNextImage, required_timeout_ms); return; } } }; self.continueSlideshow = function() { self.isPaused(false); self.interval = window.setInterval(self.rotateNextImage, required_timeout_ms); }; self.pauseSlideshow = function() { self.isPaused(true); window.clearInterval(self.interval); }; self.rotateNextImage = function() { var next_index = self.currentIndex() + 1; if (next_index >= self.images().length) { next_index = 0; } self.current(self.images()[next_index]); self.currentIndex(next_index); }; self.startSlideshow = function() { if (self.images().length <= 0) { return; } self.interval = window.setInterval(self.rotateNextImage, required_timeout_ms); self.current(self.images()[0]); self.isRunning(true); }; } function StorageLocationsViewModel() { var self = this; self.selectedLocation = ko.observable(true); } /** * 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 language Array containing language strings * @param urls Array containing URLs * @constructor */ function UploadPhotosViewModel(album_id, language, urls) { var self = this; self.currentStatus = ko.observable(''); self.imagesFailed = ko.observable(0); self.imagesUploaded = ko.observable(0); self.imagesTotal = ko.observable(0); self.isBulkUploadInProgress = ko.observable(false); self.isUploadInProgress = ko.observable(false); self.statusMessages = ko.observableArray(); self.failedPercentage = ko.computed(function () { return ((self.imagesFailed() / self.imagesTotal()) * 100).toFixed(2) + '%'; }); // This method is called when an image is uploaded - regardless if it fails or not self.onUploadCompleted = function () { self.currentStatus(language.upload_status .replace(':current', (self.imagesUploaded() + self.imagesFailed())) .replace(':total', self.imagesTotal())); if ((self.imagesFailed() + self.imagesUploaded()) >= self.imagesTotal()) { self.isUploadInProgress(false); if (self.imagesFailed() == 0 && self.imagesUploaded() > 0) { window.location = urls.analyse; } } }; // This method is called when an uploaded image fails self.onUploadFailed = function (data, file_name) { self.imagesFailed(self.imagesFailed() + 1); self.statusMessages.push({ 'message_class': 'text-danger', 'message_text': language.image_failed.replace(':file_name', file_name) }); self.onUploadCompleted(); }; // This method is called when an uploaded image succeeds self.onUploadSuccessful = function (data, file_name) { if (data.is_successful) { self.imagesUploaded(self.imagesUploaded() + 1); // 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) });*/ self.onUploadCompleted(); } else { self.onUploadFailed(data, file_name); } }; self.startUpload = function (number_images) { self.currentStatus(''); self.statusMessages.removeAll(); self.imagesUploaded(0); self.imagesFailed(0); self.imagesTotal(number_images); self.isUploadInProgress(true); }; self.successfulPercentage = ko.computed(function () { return ((self.imagesUploaded() / self.imagesTotal()) * 100).toFixed(2) + '%'; }); self.uploadFile = function uploadImageFile(formObject, imageFile) { var formData = new FormData(); formData.append('album_id', album_id); 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') } ); viewModel.isUploadInProgress(true); }; }