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

   1
   2 (function() {
   3
   4     var ImageManager = new Vue({
   5
   6         el: '#image-manager',
   7
   8         data: {
   9             images: [],
  10             hasMore: false,
  11             page: 0,
  12             cClickTime: 0
  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                 $.getJSON('/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) {
  59                     // DoubleClick
  60                     if(this.callback) {
  61                         this.callback(image);
  62                     }
  63                     this.hide();
  64                 } else {
  65                     // Single Click
  66                 }
  67                 this.cClickTime = cTime;
  68             },
  69
  70             show: function(callback) {
  71                 this.callback = callback;
  72                 this.$$.overlay.style.display = 'block';
  73             },
  74
  75             hide: function() {
  76               this.$$.overlay.style.display = 'none';
  77             }
  78
  79         }
  80
  81     });
  82
  83     window.ImageManager = ImageManager;
  84
  85
  86 })();