Added image name editing & deleting

[bookstack] / resources / assets / js / image-manager.js

diff --git a/resources/assets/js/image-manager.js b/resources/assets/js/image-manager.js
index 27deed51ee11a1ee2ad266875900b2b12f7782cc..4f8695ff80ed4711b18ba6f5902997437bfa9965 100644 (file)
--- a/resources/assets/js/image-manager.js
+++ b/resources/assets/js/image-manager.js
@@ -1,4 +1,30 @@
 
+jQuery.fn.showSuccess = function(message) {
+    var elem = $(this);
+    var success = $('<div class="text-pos" style="display:none;"><i class="zmdi zmdi-check-circle"></i>'+message+'</div>');
+    elem.after(success);
+    success.slideDown(400, function() {
+        setTimeout(function() {success.slideUp(400, function() {
+            success.remove();
+        })}, 2000);
+    });
+};
+
+jQuery.fn.showFailure = function(messageMap) {
+    var elem = $(this);
+    $.each(messageMap, function(key, messages) {
+        var input = elem.find('[name="'+key+'"]').last();
+        var fail = $('<div class="text-neg" style="display:none;"><i class="zmdi zmdi-alert-circle"></i>'+messages.join("\n")+'</div>');
+        input.after(fail);
+        fail.slideDown(400, function() {
+            setTimeout(function() {fail.slideUp(400, function() {
+                fail.remove();
+            })}, 2000);
+        });
+    });
+
+};
+
 (function() {
 
     var ImageManager = new Vue({
@@ -56,7 +82,7 @@
                 var dblClickTime = 380;
                 var cTime = (new Date()).getTime();
                 var timeDiff = cTime - this.cClickTime;
-                if(this.cClickTime !== 0 && timeDiff < dblClickTime) {
+                if(this.cClickTime !== 0 && timeDiff < dblClickTime && this.selectedImage === image) {
                     // DoubleClick
                     if(this.callback) {
                         this.callback(image);
@@ -68,6 +94,13 @@
                 this.cClickTime = cTime;
             },
 
+            selectButtonClick: function() {
+                if(this.callback) {
+                    this.callback(this.selectedImage);
+                }
+                this.hide();
+            },
+
             show: function(callback) {
                 this.callback = callback;
                 this.$$.overlay.style.display = 'block';
@@ -81,6 +114,34 @@
 
             hide: function() {
               this.$$.overlay.style.display = 'none';
+            },
+
+            saveImageDetails: function(e) {
+                e.preventDefault();
+                var _this = this;
+                var form = $(_this.$$.imageForm);
+                $.ajax('/images/update/' + _this.selectedImage.id, {
+                    method: 'PUT',
+                    data: form.serialize()
+                }).done(function() {
+                    form.showSuccess('Image name updated');
+                }).fail(function(jqXHR) {
+                    form.showFailure(jqXHR.responseJSON);
+                })
+            },
+
+            deleteImage: function(e) {
+                e.preventDefault();
+                var _this = this;
+                var form = $(_this.$$.imageDeleteForm);
+                $.ajax('/images/' + _this.selectedImage.id, {
+                    method: 'DELETE',
+                    data: form.serialize()
+                }).done(function() {
+                    _this.images.splice(_this.images.indexOf(_this.selectedImage), 1);
+                    _this.selectedImage = false;
+                    $(_this.$$.imageTitle).showSuccess('Image Deleted');
+                })
             }
 
         }