Make embedded image cropper
This commit is contained in:
taehoon
parent
546ba9eba9
commit
b24db12e1c
|
|
@ -1,5 +1,4 @@
|
|||
import Cropper from 'cropperjs'
|
||||
import Modal from '../modal/modal.vue'
|
||||
import 'cropperjs/dist/cropper.css'
|
||||
|
||||
const ImageCropper = {
|
||||
|
|
@ -8,6 +7,10 @@ const ImageCropper = {
|
|||
type: [String, window.Element],
|
||||
required: true
|
||||
},
|
||||
submitHandler: {
|
||||
type: Function,
|
||||
required: true
|
||||
},
|
||||
cropperOptions: {
|
||||
type: Object,
|
||||
default () {
|
||||
|
|
@ -25,10 +28,10 @@ const ImageCropper = {
|
|||
type: String,
|
||||
default: 'image/png, image/gif, image/jpeg, image/bmp, image/x-icon'
|
||||
},
|
||||
title: {
|
||||
saveButtonLabel: {
|
||||
type: String
|
||||
},
|
||||
saveButtonLabel: {
|
||||
cancelButtonLabel: {
|
||||
type: String
|
||||
}
|
||||
},
|
||||
|
|
@ -36,18 +39,17 @@ const ImageCropper = {
|
|||
return {
|
||||
cropper: undefined,
|
||||
dataUrl: undefined,
|
||||
filename: undefined
|
||||
filename: undefined,
|
||||
submitting: false,
|
||||
submitError: null
|
||||
}
|
||||
},
|
||||
components: {
|
||||
Modal
|
||||
},
|
||||
computed: {
|
||||
modalTitle () {
|
||||
return this.title || this.$t('image_cropper.crop_picture')
|
||||
},
|
||||
modalSaveButtonLabel () {
|
||||
saveText () {
|
||||
return this.saveButtonLabel || this.$t('image_cropper.save')
|
||||
},
|
||||
cancelText () {
|
||||
return this.cancelButtonLabel || this.$t('image_cropper.cancel')
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
|
@ -57,10 +59,15 @@ const ImageCropper = {
|
|||
}
|
||||
this.$refs.input.value = ''
|
||||
this.dataUrl = undefined
|
||||
this.$emit('close')
|
||||
},
|
||||
submit () {
|
||||
this.$emit('submit', this.cropper, this.filename)
|
||||
this.destroy()
|
||||
this.submitting = true
|
||||
this.avatarUploadError = null
|
||||
this.submitHandler(this.cropper, this.filename)
|
||||
.then(() => this.destroy())
|
||||
.catch(err => this.submitError = err)
|
||||
.finally(() => this.submitting = false)
|
||||
},
|
||||
pickImage () {
|
||||
this.$refs.input.click()
|
||||
|
|
@ -77,11 +84,15 @@ const ImageCropper = {
|
|||
let reader = new window.FileReader()
|
||||
reader.onload = (e) => {
|
||||
this.dataUrl = e.target.result
|
||||
this.$emit('open')
|
||||
}
|
||||
reader.readAsDataURL(fileInput.files[0])
|
||||
this.filename = fileInput.files[0].name || 'unknown'
|
||||
this.$emit('changed', fileInput.files[0], reader)
|
||||
}
|
||||
},
|
||||
clearError () {
|
||||
this.submitError = null
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
|
|
|
|||
|
|
@ -1,15 +1,19 @@
|
|||
<template>
|
||||
<div class="image-cropper">
|
||||
<modal :show="dataUrl" :title="modalTitle" @close="destroy">
|
||||
<div class="modal-body">
|
||||
<div class="image-cropper-image-container">
|
||||
<img ref="img" :src="dataUrl" alt="" @load.stop="createCropper" />
|
||||
</div>
|
||||
<div v-if="dataUrl">
|
||||
<div class="image-cropper-image-container">
|
||||
<img ref="img" :src="dataUrl" alt="" @load.stop="createCropper" />
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button class="btn image-cropper-btn" type="button" @click="submit" v-text="modalSaveButtonLabel"></button>
|
||||
<div class="image-cropper-buttons-wrapper">
|
||||
<button class="btn" type="button" :disabled="submitting" @click="submit" v-text="saveText"></button>
|
||||
<button class="btn" type="button" :disabled="submitting" @click="destroy" v-text="cancelText"></button>
|
||||
<i class="icon-spin4 animate-spin" v-if="submitting"></i>
|
||||
</div>
|
||||
</modal>
|
||||
<div class="alert error" v-if="submitError">
|
||||
Error: {{ submitError }}
|
||||
<i class="button-icon icon-cancel" @click="clearError"></i>
|
||||
</div>
|
||||
</div>
|
||||
<input ref="input" type="file" class="image-cropper-img-input" :accept="mimes">
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -31,9 +35,8 @@
|
|||
}
|
||||
}
|
||||
|
||||
&-btn {
|
||||
display: block;
|
||||
width: 100%;
|
||||
&-buttons-wrapper {
|
||||
margin-top: 15px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -21,13 +21,12 @@ const UserSettings = {
|
|||
followImportError: false,
|
||||
followsImported: false,
|
||||
enableFollowsExport: true,
|
||||
avatarUploading: false,
|
||||
pickAvatarBtnVisible: true,
|
||||
bannerUploading: false,
|
||||
backgroundUploading: false,
|
||||
followListUploading: false,
|
||||
bannerPreview: null,
|
||||
backgroundPreview: null,
|
||||
avatarUploadError: null,
|
||||
bannerUploadError: null,
|
||||
backgroundUploadError: null,
|
||||
deletingAccount: false,
|
||||
|
|
@ -120,15 +119,13 @@ const UserSettings = {
|
|||
},
|
||||
submitAvatar (cropper) {
|
||||
const img = cropper.getCroppedCanvas({ minWidth: 150, minHeight: 150 }).toDataURL('image/jpeg')
|
||||
this.avatarUploading = true
|
||||
this.$store.state.api.backendInteractor.updateAvatar({ params: { img } }).then((user) => {
|
||||
return this.$store.state.api.backendInteractor.updateAvatar({ params: { img } }).then((user) => {
|
||||
if (!user.error) {
|
||||
this.$store.commit('addNewUsers', [user])
|
||||
this.$store.commit('setCurrentUser', user)
|
||||
} else {
|
||||
this.avatarUploadError = this.$t('upload.error.base') + user.error
|
||||
throw this.$t('upload.error.base') + user.error
|
||||
}
|
||||
this.avatarUploading = false
|
||||
})
|
||||
},
|
||||
clearUploadError (slot) {
|
||||
|
|
|
|||
|
|
@ -47,20 +47,11 @@
|
|||
<div class="setting-item">
|
||||
<h2>{{$t('settings.avatar')}}</h2>
|
||||
<p class="visibility-notice">{{$t('settings.avatar_size_instruction')}}</p>
|
||||
<div class="avatar-upload-wrapper">
|
||||
<div class="avatar-upload">
|
||||
<img :src="user.profile_image_url_original" class="avatar" />
|
||||
<div class="avatar-upload-loading-wrapper" v-if="avatarUploading">
|
||||
<i class="icon-spin4 animate-spin"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<button class="btn" type="button" id="pick-avatar" :disabled="avatarUploading">{{$t('settings.set_new_avatar')}}</button>
|
||||
<div class="alert error" v-if="avatarUploadError">
|
||||
Error: {{ avatarUploadError }}
|
||||
<i class="button-icon icon-cancel" @click="clearUploadError('avatar')"></i>
|
||||
</div>
|
||||
<image-cropper trigger="#pick-avatar" :title="$t('settings.crop_your_new_avatar')" :saveButtonLabel="$t('settings.set_new_avatar')" @submit="submitAvatar" />
|
||||
<p>{{$t('settings.current_avatar')}}</p>
|
||||
<img :src="user.profile_image_url_original" class="current-avatar"></img>
|
||||
<p>{{$t('settings.set_new_avatar')}}</p>
|
||||
<button class="btn" type="button" id="pick-avatar" v-show="pickAvatarBtnVisible">{{$t('settings.upload_a_photo')}}</button>
|
||||
<image-cropper trigger="#pick-avatar" :submitHandler="submitAvatar" @open="pickAvatarBtnVisible=false" @close="pickAvatarBtnVisible=true" />
|
||||
</div>
|
||||
<div class="setting-item">
|
||||
<h2>{{$t('settings.profile_banner')}}</h2>
|
||||
|
|
@ -196,29 +187,7 @@
|
|||
max-width: 100%;
|
||||
}
|
||||
|
||||
.avatar-upload {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.avatar-upload-loading-wrapper {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background: rgba(0,0,0,.3);
|
||||
|
||||
i {
|
||||
font-size: 50px;
|
||||
color: #FFF;
|
||||
}
|
||||
}
|
||||
|
||||
.avatar {
|
||||
.current-avatar {
|
||||
display: block;
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
|
|
|
|||
|
|
@ -23,7 +23,8 @@
|
|||
},
|
||||
"image_cropper": {
|
||||
"crop_picture": "Crop picture",
|
||||
"save": "Save"
|
||||
"save": "Save",
|
||||
"cancel": "Cancel"
|
||||
},
|
||||
"login": {
|
||||
"login": "Log in",
|
||||
|
|
@ -116,7 +117,6 @@
|
|||
"collapse_subject": "Collapse posts with subjects",
|
||||
"composing": "Composing",
|
||||
"confirm_new_password": "Confirm new password",
|
||||
"crop_your_new_avatar": "Crop your new avatar",
|
||||
"current_avatar": "Your current avatar",
|
||||
"current_password": "Current password",
|
||||
"current_profile_banner": "Your current profile banner",
|
||||
|
|
@ -211,6 +211,7 @@
|
|||
"theme_help_v2_1": "You can also override certain component's colors and opacity by toggling the checkbox, use \"Clear all\" button to clear all overrides.",
|
||||
"theme_help_v2_2": "Icons underneath some entries are background/text contrast indicators, hover over for detailed info. Please keep in mind that when using transparency contrast indicators show the worst possible case.",
|
||||
"tooltipRadius": "Tooltips/alerts",
|
||||
"upload_a_photo": "Upload a photo",
|
||||
"user_settings": "User Settings",
|
||||
"values": {
|
||||
"false": "no",
|
||||
|
|
|
|||
Loading…
Reference in New Issue