Make embedded image cropper

This commit is contained in:
taehoon 2019-02-08 21:59:33 -05:00
parent 546ba9eba9
commit b24db12e1c
5 changed files with 50 additions and 69 deletions

View file

@ -1,5 +1,4 @@
import Cropper from 'cropperjs' import Cropper from 'cropperjs'
import Modal from '../modal/modal.vue'
import 'cropperjs/dist/cropper.css' import 'cropperjs/dist/cropper.css'
const ImageCropper = { const ImageCropper = {
@ -8,6 +7,10 @@ const ImageCropper = {
type: [String, window.Element], type: [String, window.Element],
required: true required: true
}, },
submitHandler: {
type: Function,
required: true
},
cropperOptions: { cropperOptions: {
type: Object, type: Object,
default () { default () {
@ -25,10 +28,10 @@ const ImageCropper = {
type: String, type: String,
default: 'image/png, image/gif, image/jpeg, image/bmp, image/x-icon' default: 'image/png, image/gif, image/jpeg, image/bmp, image/x-icon'
}, },
title: { saveButtonLabel: {
type: String type: String
}, },
saveButtonLabel: { cancelButtonLabel: {
type: String type: String
} }
}, },
@ -36,18 +39,17 @@ const ImageCropper = {
return { return {
cropper: undefined, cropper: undefined,
dataUrl: undefined, dataUrl: undefined,
filename: undefined filename: undefined,
submitting: false,
submitError: null
} }
}, },
components: {
Modal
},
computed: { computed: {
modalTitle () { saveText () {
return this.title || this.$t('image_cropper.crop_picture')
},
modalSaveButtonLabel () {
return this.saveButtonLabel || this.$t('image_cropper.save') return this.saveButtonLabel || this.$t('image_cropper.save')
},
cancelText () {
return this.cancelButtonLabel || this.$t('image_cropper.cancel')
} }
}, },
methods: { methods: {
@ -57,10 +59,15 @@ const ImageCropper = {
} }
this.$refs.input.value = '' this.$refs.input.value = ''
this.dataUrl = undefined this.dataUrl = undefined
this.$emit('close')
}, },
submit () { submit () {
this.$emit('submit', this.cropper, this.filename) this.submitting = true
this.destroy() this.avatarUploadError = null
this.submitHandler(this.cropper, this.filename)
.then(() => this.destroy())
.catch(err => this.submitError = err)
.finally(() => this.submitting = false)
}, },
pickImage () { pickImage () {
this.$refs.input.click() this.$refs.input.click()
@ -77,11 +84,15 @@ const ImageCropper = {
let reader = new window.FileReader() let reader = new window.FileReader()
reader.onload = (e) => { reader.onload = (e) => {
this.dataUrl = e.target.result this.dataUrl = e.target.result
this.$emit('open')
} }
reader.readAsDataURL(fileInput.files[0]) reader.readAsDataURL(fileInput.files[0])
this.filename = fileInput.files[0].name || 'unknown' this.filename = fileInput.files[0].name || 'unknown'
this.$emit('changed', fileInput.files[0], reader) this.$emit('changed', fileInput.files[0], reader)
} }
},
clearError () {
this.submitError = null
} }
}, },
mounted () { mounted () {

View file

@ -1,15 +1,19 @@
<template> <template>
<div class="image-cropper"> <div class="image-cropper">
<modal :show="dataUrl" :title="modalTitle" @close="destroy"> <div v-if="dataUrl">
<div class="modal-body">
<div class="image-cropper-image-container"> <div class="image-cropper-image-container">
<img ref="img" :src="dataUrl" alt="" @load.stop="createCropper" /> <img ref="img" :src="dataUrl" alt="" @load.stop="createCropper" />
</div> </div>
<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>
<div class="alert error" v-if="submitError">
Error: {{ submitError }}
<i class="button-icon icon-cancel" @click="clearError"></i>
</div> </div>
<div class="modal-footer">
<button class="btn image-cropper-btn" type="button" @click="submit" v-text="modalSaveButtonLabel"></button>
</div> </div>
</modal>
<input ref="input" type="file" class="image-cropper-img-input" :accept="mimes"> <input ref="input" type="file" class="image-cropper-img-input" :accept="mimes">
</div> </div>
</template> </template>
@ -31,9 +35,8 @@
} }
} }
&-btn { &-buttons-wrapper {
display: block; margin-top: 15px;
width: 100%;
} }
} }
</style> </style>

View file

@ -21,13 +21,12 @@ const UserSettings = {
followImportError: false, followImportError: false,
followsImported: false, followsImported: false,
enableFollowsExport: true, enableFollowsExport: true,
avatarUploading: false, pickAvatarBtnVisible: true,
bannerUploading: false, bannerUploading: false,
backgroundUploading: false, backgroundUploading: false,
followListUploading: false, followListUploading: false,
bannerPreview: null, bannerPreview: null,
backgroundPreview: null, backgroundPreview: null,
avatarUploadError: null,
bannerUploadError: null, bannerUploadError: null,
backgroundUploadError: null, backgroundUploadError: null,
deletingAccount: false, deletingAccount: false,
@ -120,15 +119,13 @@ const UserSettings = {
}, },
submitAvatar (cropper) { submitAvatar (cropper) {
const img = cropper.getCroppedCanvas({ minWidth: 150, minHeight: 150 }).toDataURL('image/jpeg') const img = cropper.getCroppedCanvas({ minWidth: 150, minHeight: 150 }).toDataURL('image/jpeg')
this.avatarUploading = true return this.$store.state.api.backendInteractor.updateAvatar({ params: { img } }).then((user) => {
this.$store.state.api.backendInteractor.updateAvatar({ params: { img } }).then((user) => {
if (!user.error) { if (!user.error) {
this.$store.commit('addNewUsers', [user]) this.$store.commit('addNewUsers', [user])
this.$store.commit('setCurrentUser', user) this.$store.commit('setCurrentUser', user)
} else { } else {
this.avatarUploadError = this.$t('upload.error.base') + user.error throw this.$t('upload.error.base') + user.error
} }
this.avatarUploading = false
}) })
}, },
clearUploadError (slot) { clearUploadError (slot) {

View file

@ -47,20 +47,11 @@
<div class="setting-item"> <div class="setting-item">
<h2>{{$t('settings.avatar')}}</h2> <h2>{{$t('settings.avatar')}}</h2>
<p class="visibility-notice">{{$t('settings.avatar_size_instruction')}}</p> <p class="visibility-notice">{{$t('settings.avatar_size_instruction')}}</p>
<div class="avatar-upload-wrapper"> <p>{{$t('settings.current_avatar')}}</p>
<div class="avatar-upload"> <img :src="user.profile_image_url_original" class="current-avatar"></img>
<img :src="user.profile_image_url_original" class="avatar" /> <p>{{$t('settings.set_new_avatar')}}</p>
<div class="avatar-upload-loading-wrapper" v-if="avatarUploading"> <button class="btn" type="button" id="pick-avatar" v-show="pickAvatarBtnVisible">{{$t('settings.upload_a_photo')}}</button>
<i class="icon-spin4 animate-spin"></i> <image-cropper trigger="#pick-avatar" :submitHandler="submitAvatar" @open="pickAvatarBtnVisible=false" @close="pickAvatarBtnVisible=true" />
</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" />
</div> </div>
<div class="setting-item"> <div class="setting-item">
<h2>{{$t('settings.profile_banner')}}</h2> <h2>{{$t('settings.profile_banner')}}</h2>
@ -196,29 +187,7 @@
max-width: 100%; max-width: 100%;
} }
.avatar-upload { .current-avatar {
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 {
display: block; display: block;
width: 150px; width: 150px;
height: 150px; height: 150px;

View file

@ -23,7 +23,8 @@
}, },
"image_cropper": { "image_cropper": {
"crop_picture": "Crop picture", "crop_picture": "Crop picture",
"save": "Save" "save": "Save",
"cancel": "Cancel"
}, },
"login": { "login": {
"login": "Log in", "login": "Log in",
@ -116,7 +117,6 @@
"collapse_subject": "Collapse posts with subjects", "collapse_subject": "Collapse posts with subjects",
"composing": "Composing", "composing": "Composing",
"confirm_new_password": "Confirm new password", "confirm_new_password": "Confirm new password",
"crop_your_new_avatar": "Crop your new avatar",
"current_avatar": "Your current avatar", "current_avatar": "Your current avatar",
"current_password": "Current password", "current_password": "Current password",
"current_profile_banner": "Your current profile banner", "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_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.", "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", "tooltipRadius": "Tooltips/alerts",
"upload_a_photo": "Upload a photo",
"user_settings": "User Settings", "user_settings": "User Settings",
"values": { "values": {
"false": "no", "false": "no",