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