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