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

   1
   2 class ImagePicker {
   3
   4     constructor(elem) {
   5         this.elem = elem;
   6         this.imageElem = elem.querySelector('img');
   7         this.input = elem.querySelector('input');
   8
   9         this.isUsingIds = elem.getAttribute('data-current-id') !== '';
  10         this.isResizing = elem.getAttribute('data-resize-height') && elem.getAttribute('data-resize-width');
  11         this.isResizeCropping = elem.getAttribute('data-resize-crop') !== '';
  12
  13         let selectButton = elem.querySelector('button[data-action="show-image-manager"]');
  14         selectButton.addEventListener('click', this.selectImage.bind(this));
  15
  16         let resetButton = elem.querySelector('button[data-action="reset-image"]');
  17         resetButton.addEventListener('click', this.reset.bind(this));
  18
  19         let removeButton = elem.querySelector('button[data-action="remove-image"]');
  20         if (removeButton) {
  21             removeButton.addEventListener('click', this.removeImage.bind(this));
  22         }
  23     }
  24
  25     selectImage() {
  26         window.ImageManager.show(image => {
  27             if (!this.isResizing) {
  28                 this.setImage(image);
  29                 return;
  30             }
  31
  32             let requestString = '/images/thumb/' + image.id + '/' + this.elem.getAttribute('data-resize-width') + '/' + this.elem.getAttribute('data-resize-height') + '/' + (this.isResizeCropping ? 'true' : 'false');
  33
  34             window.$http.get(window.baseUrl(requestString)).then(resp => {
  35                 image.url = resp.data.url;
  36                 this.setImage(image);
  37             });
  38         });
  39     }
  40
  41     reset() {
  42         this.setImage({id: 0, url: this.elem.getAttribute('data-default-image')});
  43     }
  44
  45     setImage(image) {
  46         this.imageElem.src = image.url;
  47         this.input.value = this.isUsingIds ? image.id : image.url;
  48         this.imageElem.classList.remove('none');
  49     }
  50
  51     removeImage() {
  52         this.imageElem.src = this.elem.getAttribute('data-default-image');
  53         this.imageElem.classList.add('none');
  54         this.input.value = 'none';
  55     }
  56
  57 }
  58
  59 export default ImagePicker;