BookStack Code Mirror - bookstack/blob - resources/assets/js/image-manager.js

   1
   2 jQuery.fn.showSuccess = function(message) {
   3     var elem = $(this);
   4     var success = $('<div class="text-pos" style="display:none;"><i class="zmdi zmdi-check-circle"></i>'+message+'</div>');
   5     elem.after(success);
   6     success.slideDown(400, function() {
   7         setTimeout(function() {success.slideUp(400, function() {
   8             success.remove();
   9         })}, 2000);
  10     });
  11 };
  12
  13 jQuery.fn.showFailure = function(messageMap) {
  14     var elem = $(this);
  15     $.each(messageMap, function(key, messages) {
  16         var input = elem.find('[name="'+key+'"]').last();
  17         var fail = $('<div class="text-neg" style="display:none;"><i class="zmdi zmdi-alert-circle"></i>'+messages.join("\n")+'</div>');
  18         input.after(fail);
  19         fail.slideDown(400, function() {
  20             setTimeout(function() {fail.slideUp(400, function() {
  21                 fail.remove();
  22             })}, 2000);
  23         });
  24     });
  25
  26 };
  27
  28 (function() {
  29
  30     var ImageManager = new Vue({
  31
  32         el: '#image-manager',
  33
  34         data: {
  35             images: [],
  36             hasMore: false,
  37             page: 0,
  38             cClickTime: 0,
  39             selectedImage: false
  40         },
  41
  42         created: function() {
  43             // Get initial images
  44             this.fetchData(this.page);
  45         },
  46
  47         ready: function() {
  48             // Create dropzone
  49             this.setupDropZone();
  50         },
  51
  52         methods: {
  53             fetchData: function() {
  54                 var _this = this;
  55                 $.getJSON('/images/all/' + _this.page, function(data) {
  56                     _this.images = _this.images.concat(data.images);
  57                     _this.hasMore = data.hasMore;
  58                     _this.page++;
  59                 });
  60             },
  61
  62             setupDropZone: function() {
  63                 var _this = this;
  64                 var dropZone = new Dropzone(_this.$$.dropZone, {
  65                     url: '/upload/image',
  66                     init: function() {
  67                         var dz = this;
  68                         this.on("sending", function(file, xhr, data) {
  69                             data.append("_token", document.querySelector('meta[name=token]').getAttribute('content'));
  70                         });
  71                         this.on("success", function(file, data) {
  72                             _this.images.unshift(data);
  73                             $(file.previewElement).fadeOut(400, function() {
  74                                 dz.removeFile(file);
  75                             });
  76                         });
  77                     }
  78                 });
  79             },
  80
  81             imageClick: function(image) {
  82                 var dblClickTime = 380;
  83                 var cTime = (new Date()).getTime();
  84                 var timeDiff = cTime - this.cClickTime;
  85                 if(this.cClickTime !== 0 && timeDiff < dblClickTime && this.selectedImage === image) {
  86                     // DoubleClick
  87                     if(this.callback) {
  88                         this.callback(image);
  89                     }
  90                     this.hide();
  91                 } else {
  92                     this.selectedImage = (this.selectedImage===image) ? false : image;
  93                 }
  94                 this.cClickTime = cTime;
  95             },
  96
  97             selectButtonClick: function() {
  98                 if(this.callback) {
  99                     this.callback(this.selectedImage);
 100                 }
 101                 this.hide();
 102             },
 103
 104             show: function(callback) {
 105                 this.callback = callback;
 106                 this.$$.overlay.style.display = 'block';
 107             },
 108
 109             overlayClick: function(e) {
 110               if(e.target.className==='overlay') {
 111                   this.hide();
 112               }
 113             },
 114
 115             hide: function() {
 116               this.$$.overlay.style.display = 'none';
 117             },
 118
 119             saveImageDetails: function(e) {
 120                 e.preventDefault();
 121                 var _this = this;
 122                 var form = $(_this.$$.imageForm);
 123                 $.ajax('/images/update/' + _this.selectedImage.id, {
 124                     method: 'PUT',
 125                     data: form.serialize()
 126                 }).done(function() {
 127                     form.showSuccess('Image name updated');
 128                 }).fail(function(jqXHR) {
 129                     form.showFailure(jqXHR.responseJSON);
 130                 })
 131             },
 132
 133             deleteImage: function(e) {
 134                 e.preventDefault();
 135                 var _this = this;
 136                 var form = $(_this.$$.imageDeleteForm);
 137                 $.ajax('/images/' + _this.selectedImage.id, {
 138                     method: 'DELETE',
 139                     data: form.serialize()
 140                 }).done(function() {
 141                     _this.images.splice(_this.images.indexOf(_this.selectedImage), 1);
 142                     _this.selectedImage = false;
 143                     $(_this.$$.imageTitle).showSuccess('Image Deleted');
 144                 })
 145             }
 146
 147         }
 148
 149     });
 150
 151     window.ImageManager = ImageManager;
 152
 153
 154 })();