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'" v-attr="src: image, class: imageClass" alt="Image Preview">
   6         </div>
   7         <button class="button" type="button" v-on="click: showImageManager">Select Image</button>
   8         <br>
   9         <button class="text-button" v-on="click: reset" type="button">Reset</button> <span class="sep">|</span> <button class="text-button neg" v-on="click: remove" type="button">Remove</button>
  10         <input type="hidden" v-attr="name: name, id: name" v-model="image">
  11     </div>
  12 </template>
  13
  14 <script>
  15     module.exports = {
  16         props: ['currentImage', 'name', 'imageClass'],
  17         data: function() {
  18             return {
  19                 image: this.currentImage
  20             }
  21         },
  22         methods: {
  23             showImageManager: function(e) {
  24                 var _this = this;
  25                 ImageManager.show(function(image) {
  26                     _this.image = image.url;
  27                 });
  28             },
  29             reset: function() {
  30                 this.image = '';
  31             },
  32             remove: function() {
  33                 this.image = 'none';
  34             }
  35         }
  36     }
  37 </script>