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

   1 const dropzone = require('./components/dropzone');
   2
   3 let page = 0;
   4 let previousClickTime = 0;
   5 let previousClickImage = 0;
   6 let dataLoaded = false;
   7 let callback = false;
   8 let baseUrl = '';
   9
  10 let preSearchImages = [];
  11 let preSearchHasMore = false;
  12
  13 const data = {
  14     images: [],
  15
  16     imageType: false,
  17     uploadedTo: false,
  18
  19     selectedImage: false,
  20     dependantPages: false,
  21     showing: false,
  22     view: 'all',
  23     hasMore: false,
  24     searching: false,
  25     searchTerm: '',
  26
  27     imageUpdateSuccess: false,
  28     imageDeleteSuccess: false,
  29 };
  30
  31 const methods = {
  32
  33     show(providedCallback) {
  34         callback = providedCallback;
  35         this.showing = true;
  36         this.$el.children[0].components.overlay.show();
  37
  38         // Get initial images if they have not yet been loaded in.
  39         if (dataLoaded) return;
  40         this.fetchData();
  41         dataLoaded = true;
  42     },
  43
  44     hide() {
  45         this.showing = false;
  46         this.selectedImage = false;
  47         this.$refs.dropzone.onClose();
  48         this.$el.children[0].components.overlay.hide();
  49     },
  50
  51     fetchData() {
  52         let url = baseUrl + page;
  53         let query = {};
  54         if (this.uploadedTo !== false) query.page_id = this.uploadedTo;
  55         if (this.searching) query.term = this.searchTerm;
  56
  57         this.$http.get(url, {params: query}).then(response => {
  58             this.images = this.images.concat(response.data.images);
  59             this.hasMore = response.data.hasMore;
  60             page++;
  61         });
  62     },
  63
  64     setView(viewName) {
  65         this.cancelSearch();
  66         this.images = [];
  67         this.hasMore = false;
  68         page = 0;
  69         this.view = viewName;
  70         baseUrl = window.baseUrl(`/images/${this.imageType}/${viewName}/`);
  71         this.fetchData();
  72     },
  73
  74     searchImages() {
  75         if (this.searchTerm === '') return this.cancelSearch();
  76
  77         // Cache current settings for later
  78         if (!this.searching) {
  79             preSearchImages = this.images;
  80             preSearchHasMore = this.hasMore;
  81         }
  82
  83         this.searching = true;
  84         this.images = [];
  85         this.hasMore = false;
  86         page = 0;
  87         baseUrl = window.baseUrl(`/images/${this.imageType}/search/`);
  88         this.fetchData();
  89     },
  90
  91     cancelSearch() {
  92         this.searching = false;
  93         this.searchTerm = '';
  94         this.images = preSearchImages;
  95         this.hasMore = preSearchHasMore;
  96     },
  97
  98     imageSelect(image) {
  99         let dblClickTime = 300;
 100         let currentTime = Date.now();
 101         let timeDiff = currentTime - previousClickTime;
 102         let isDblClick = timeDiff < dblClickTime && image.id === previousClickImage;
 103
 104         if (isDblClick) {
 105             this.callbackAndHide(image);
 106         } else {
 107             this.selectedImage = image;
 108             this.dependantPages = false;
 109         }
 110
 111         previousClickTime = currentTime;
 112         previousClickImage = image.id;
 113     },
 114
 115     callbackAndHide(imageResult) {
 116         if (callback) callback(imageResult);
 117         this.hide();
 118     },
 119
 120     saveImageDetails() {
 121         let url = window.baseUrl(`/images/update/${this.selectedImage.id}`);
 122         this.$http.put(url, this.selectedImage).then(response => {
 123             this.$events.emit('success', trans('components.image_update_success'));
 124         }).catch(error => {
 125             if (error.response.status === 422) {
 126                 let errors = error.response.data;
 127                 let message = '';
 128                 Object.keys(errors).forEach((key) => {
 129                     message += errors[key].join('\n');
 130                 });
 131                 this.$events.emit('error', message);
 132             }
 133         });
 134     },
 135
 136     deleteImage() {
 137         let force = this.dependantPages !== false;
 138         let url = window.baseUrl('/images/' + this.selectedImage.id);
 139         if (force) url += '?force=true';
 140         this.$http.delete(url).then(response => {
 141             this.images.splice(this.images.indexOf(this.selectedImage), 1);
 142             this.selectedImage = false;
 143             this.$events.emit('success', trans('components.image_delete_success'));
 144         }).catch(error=> {
 145             if (error.response.status === 400) {
 146                 this.dependantPages = error.response.data;
 147             }
 148         });
 149     },
 150
 151     getDate(stringDate) {
 152         return new Date(stringDate);
 153     },
 154
 155     uploadSuccess(event) {
 156         this.images.unshift(event.data);
 157         this.$events.emit('success', trans('components.image_upload_success'));
 158     },
 159 };
 160
 161 const computed = {
 162     uploadUrl() {
 163         return window.baseUrl(`/images/${this.imageType}/upload`);
 164     }
 165 };
 166
 167 function mounted() {
 168     window.ImageManager = this;
 169     this.imageType = this.$el.getAttribute('image-type');
 170     this.uploadedTo = this.$el.getAttribute('uploaded-to');
 171     baseUrl = window.baseUrl('/images/' + this.imageType + '/all/')
 172 }
 173
 174 module.exports = {
 175     mounted,
 176     methods,
 177     data,
 178     computed,
 179     components: {dropzone},
 180 };