]> BookStack Code Mirror - bookstack/blob - resources/assets/js/components/image-picker.vue
a52cd36616cb221bbf377d723570a2cf4071fd3a
[bookstack] / 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 class="sep">|</span> <button class="text-button neg" v-on:click="remove" type="button">Remove</button>
11         <input type="hidden" :name="name" :id="name" v-model="image">
12     </div>
13 </template>
14
15 <script>
16     module.exports = {
17         props: ['currentImage', 'name', 'imageClass', 'defaultImage'],
18         data: function() {
19             return {
20                 image: this.currentImage
21             }
22         },
23         methods: {
24             showImageManager: function(e) {
25                 var _this = this;
26                 ImageManager.show(function(image) {
27                     _this.image = image.url;
28                 });
29             },
30             reset: function() {
31                 this.image = '';
32             },
33             remove: function() {
34                 this.image = 'none';
35             }
36         }
37     };
38 </script>