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

   1
   2 <template>
   3     <div class="image-picker">
   4         <div>
   5             <img v-if="image && image !== 'none'" :src="image" :class="imageClass" alt="Image Preview">
   6             <img v-if="image === '' && defaultImage" :src="defaultImage" :class="imageClass" alt="Image Preview">
   7         </div>
   8         <button class="button" type="button" @click="showImageManager">Select Image</button>
   9         <br>
  10         <button class="text-button" @click="reset" type="button">Reset</button> <span v-show="showRemove" class="sep">|</span> <button v-show="showRemove" class="text-button neg" @click="remove" type="button">Remove</button>
  11         <input type="hidden" :name="name" :id="name" v-model="value">
  12     </div>
  13 </template>
  14
  15 <script>
  16     module.exports = {
  17         props: {
  18             currentImage: {
  19                 required: true,
  20                 type: String
  21             },
  22             currentId: {
  23                 required: false,
  24                 default: 'false',
  25                 type: String
  26             },
  27             name: {
  28                 required: true,
  29                 type: String
  30             },
  31             defaultImage: {
  32                 required: true,
  33                 type: String
  34             },
  35             imageClass: {
  36                 required: true,
  37                 type: String
  38             },
  39             resizeWidth: {
  40                 type: String
  41             },
  42             resizeHeight: {
  43                 type: String
  44             },
  45             resizeCrop: {
  46                 type: Boolean
  47             },
  48             showRemove: {
  49                 type: Boolean,
  50                 default: 'true'
  51             }
  52         },
  53         data: function() {
  54             return {
  55                 image: this.currentImage,
  56                 value: false
  57             }
  58         },
  59         compiled: function() {
  60             this.value = this.currentId === 'false' ? this.currentImage : this.currentId;
  61         },
  62         methods: {
  63             setCurrentValue: function(imageModel, imageUrl) {
  64                 this.image = imageUrl;
  65                 this.value = this.currentId === 'false' ?  imageUrl : imageModel.id;
  66             },
  67             showImageManager: function(e) {
  68                 ImageManager.show((image) => {
  69                     this.updateImageFromModel(image);
  70                 });
  71             },
  72             reset: function() {
  73                 this.setCurrentValue({id: 0}, this.defaultImage);
  74             },
  75             remove: function() {
  76                 this.image = 'none';
  77                 this.value = 'none';
  78             },
  79             updateImageFromModel: function(model) {
  80                 var isResized = this.resizeWidth && this.resizeHeight;
  81
  82                 if (!isResized) {
  83                     this.setCurrentValue(model, model.url);
  84                     return;
  85                 }
  86
  87                 var cropped = this.resizeCrop ? 'true' : 'false';
  88                 var requestString = '/images/thumb/' + model.id + '/' + this.resizeWidth + '/' + this.resizeHeight + '/' + cropped;
  89                 this.$http.get(requestString).then((response) => {
  90                     this.setCurrentValue(model, response.data.url);
  91                 });
  92             }
  93         }
  94     };
  95 </script>