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             selectedImage: false
  14         },
  15
  16         created: function() {
  17             // Get initial images
  18             this.fetchData(this.page);
  19         },
  20
  21         ready: function() {
  22             // Create dropzone
  23             this.setupDropZone();
  24         },
  25
  26         methods: {
  27             fetchData: function() {
  28                 var _this = this;
  29                 $.getJSON('/images/all/' + _this.page, function(data) {
  30                     _this.images = _this.images.concat(data.images);
  31                     _this.hasMore = data.hasMore;
  32                     _this.page++;
  33                 });
  34             },
  35
  36             setupDropZone: function() {
  37                 var _this = this;
  38                 var dropZone = new Dropzone(_this.$$.dropZone, {
  39                     url: '/upload/image',
  40                     init: function() {
  41                         var dz = this;
  42                         this.on("sending", function(file, xhr, data) {
  43                             data.append("_token", document.querySelector('meta[name=token]').getAttribute('content'));
  44                         });
  45                         this.on("success", function(file, data) {
  46                             _this.images.unshift(data);
  47                             $(file.previewElement).fadeOut(400, function() {
  48                                 dz.removeFile(file);
  49                             });
  50                         });
  51                     }
  52                 });
  53             },
  54
  55             imageClick: function(image) {
  56                 var dblClickTime = 380;
  57                 var cTime = (new Date()).getTime();
  58                 var timeDiff = cTime - this.cClickTime;
  59                 if(this.cClickTime !== 0 && timeDiff < dblClickTime) {
  60                     // DoubleClick
  61                     if(this.callback) {
  62                         this.callback(image);
  63                     }
  64                     this.hide();
  65                 } else {
  66                     this.selectedImage = (this.selectedImage===image) ? false : image;
  67                 }
  68                 this.cClickTime = cTime;
  69             },
  70
  71             show: function(callback) {
  72                 this.callback = callback;
  73                 this.$$.overlay.style.display = 'block';
  74             },
  75
  76             overlayClick: function(e) {
  77               if(e.target.className==='overlay') {
  78                   this.hide();
  79               }
  80             },
  81
  82             hide: function() {
  83               this.$$.overlay.style.display = 'none';
  84             }
  85
  86         }
  87
  88     });
  89
  90     window.ImageManager = ImageManager;
  91
  92
  93 })();