github-mirror/BookStack
2
0
Fork 0
mirror of https://github.com/BookStackApp/BookStack.git synced 2025-05-29 20:06:18 +08:00
Code Issues Actions 9 Packages Projects Releases Wiki Activity

Added custom user avatars

Browse Source
This commit is contained in:
Dan Brown
2015-12-09 22:30:55 +00:00
parent db3acabc66
commit 8f7c642f32
16 changed files with 230 additions and 68 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
resources/assets/js/components/image-manager.vue
View File

@ -80,15 +80,6 @@
imageType: {
type: String,
required: true
},
resizeWidth: {
type: String
},
resizeHeight: {
type: String
},
resizeCrop: {
type: Boolean
}
},
@ -137,21 +128,7 @@
},
returnCallback: function (image) {
var _this = this;
var isResized = _this.resizeWidth && _this.resizeHeight;
if (!isResized) {
_this.callback(image);
return;
}
var cropped = _this.resizeCrop ? 'true' : 'false';
var requestString = '/images/thumb/' + image.id + '/' + _this.resizeWidth + '/' + _this.resizeHeight + '/' + cropped;
_this.$http.get(requestString, function(data) {
image.thumbs.custom = data.url;
_this.callback(image);
});
this.callback(image);
},
imageClick: function (image) {

74
resources/assets/js/components/image-picker.vue
View File

@ -7,31 +7,89 @@
</div>
<button class="button" type="button" @click="showImageManager">Select Image</button>
<br>
<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>
<input type="hidden" :name="name" :id="name" v-model="image">
<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', 'name', 'imageClass', 'defaultImage'],
data: function() {
return {
image: this.currentImage
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.image = image.thumbs.custom || image.url;
_this.updateImageFromModel(image);
});
},
reset: function() {
this.image = '';
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);
});
}
}
};