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

   1
   2
   3 window.ImageManager = new Vue({
   4
   5     el: '#image-manager',
   6
   7     data: {
   8         images: [],
   9         hasMore: false,
  10         page: 0,
  11         cClickTime: 0,
  12         selectedImage: false,
  13         dependantPages: false,
  14         deleteForm: {}
  15     },
  16
  17     created: function () {
  18         // Get initial images
  19         this.fetchData(this.page);
  20     },
  21
  22     ready: function () {
  23         // Create dropzone
  24         this.setupDropZone();
  25     },
  26
  27     methods: {
  28         fetchData: function () {
  29             var _this = this;
  30             this.$http.get('/images/all/' + _this.page, function (data) {
  31                 _this.images = _this.images.concat(data.images);
  32                 _this.hasMore = data.hasMore;
  33                 _this.page++;
  34             });
  35         },
  36
  37         setupDropZone: function () {
  38             var _this = this;
  39             var dropZone = new Dropzone(_this.$$.dropZone, {
  40                 url: '/upload/image',
  41                 init: function () {
  42                     var dz = this;
  43                     this.on("sending", function (file, xhr, data) {
  44                         data.append("_token", document.querySelector('meta[name=token]').getAttribute('content'));
  45                     });
  46                     this.on("success", function (file, data) {
  47                         _this.images.unshift(data);
  48                         $(file.previewElement).fadeOut(400, function () {
  49                             dz.removeFile(file);
  50                         });
  51                     });
  52                 }
  53             });
  54         },
  55
  56         imageClick: function (image) {
  57             var dblClickTime = 380;
  58             var cTime = (new Date()).getTime();
  59             var timeDiff = cTime - this.cClickTime;
  60             if (this.cClickTime !== 0 && timeDiff < dblClickTime && this.selectedImage === image) {
  61                 // DoubleClick
  62                 if (this.callback) {
  63                     this.callback(image);
  64                 }
  65                 this.hide();
  66             } else {
  67                 this.selectedImage = (this.selectedImage === image) ? false : image;
  68                 this.dependantPages = false;
  69             }
  70             this.cClickTime = cTime;
  71         },
  72
  73         selectButtonClick: function () {
  74             if (this.callback) {
  75                 this.callback(this.selectedImage);
  76             }
  77             this.hide();
  78         },
  79
  80         show: function (callback) {
  81             this.callback = callback;
  82             this.$$.overlay.style.display = 'block';
  83         },
  84
  85         overlayClick: function (e) {
  86             if (e.target.className === 'overlay') {
  87                 this.hide();
  88             }
  89         },
  90
  91         hide: function () {
  92             this.$$.overlay.style.display = 'none';
  93         },
  94
  95         saveImageDetails: function (e) {
  96             e.preventDefault();
  97             var _this = this;
  98             var form = $(_this.$$.imageForm);
  99             $.ajax('/images/update/' + _this.selectedImage.id, {
 100                 method: 'PUT',
 101                 data: form.serialize()
 102             }).done(function () {
 103                 form.showSuccess('Image name updated');
 104             }).fail(function (jqXHR) {
 105                 form.showFailure(jqXHR.responseJSON);
 106             })
 107         },
 108
 109         deleteImage: function (e) {
 110             e.preventDefault();
 111             var _this = this;
 112             _this.deleteForm.force = _this.dependantPages !== false;
 113             $.ajax('/images/' + _this.selectedImage.id, {
 114                 method: 'DELETE',
 115                 data: _this.deleteForm
 116             }).done(function () {
 117                 _this.images.splice(_this.images.indexOf(_this.selectedImage), 1);
 118                 _this.selectedImage = false;
 119                 $(_this.$$.imageTitle).showSuccess('Image Deleted');
 120             }).fail(function(jqXHR, textStatus) {
 121                 // Pages failure
 122                 if(jqXHR.status === 400) {
 123                     _this.dependantPages = jqXHR.responseJSON;
 124                 }
 125             });
 126         }
 127
 128     }
 129
 130 });