This repository has been archived on 2022-11-26. You can view files and clone it, but cannot push or open issues or pull requests.
IcyNet.eu/views/user/partials/avatar.pug
2018-02-04 18:25:45 +02:00

211 lines
5.1 KiB
Plaintext

.rel.cropbox
.row#fileChoose
.col
h3 Current Avatar
.avatar
include ../../includes/avatar.pug
.col
.alert.alert-danger#avatarAlert(style="display: none")
form
.form-check
input.form-check-input#uploadType(type="radio", name="avi", checked)
label(for="#uploadType") Upload Image
.form-group.ml-5
label(for="#fileinput") Choose File
input.form-control-file#fileinput(type="file", aria-labelledby="#maxFileText")
small#maxFileText Max file size: 5 MB, only .png and .jpg allowed
.form-check
.row
.col
input.form-check-input#gravType(type="radio", name="avi")
label(for="#gravType") Use
a(href="https://en.gravatar.com/", target="_blank") Gravatar
.col
img#gravatarPic
.content#crop(style="display: none;")
h3 Crop the Image
.alert.alert-info#cropAlert(style="display: none;") Uploading..
img.preview#imageCropTag
script.
function failAlert (msg) {
$('#avatarAlert').text(msg)
$('#avatarAlert').show()
}
function dataURItoBlob (dataURI) {
// convert base64 to raw binary data held in a string
// doesn't handle URLEncoded DataURIs - see SO answer #6850276 for code that does this
var byteString = atob(dataURI.split(',')[1])
// separate out the mime component
var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0]
// write the bytes of the string to an ArrayBuffer
var ab = new ArrayBuffer(byteString.length)
// create a view into the buffer
var ia = new Uint8Array(ab)
// set the bytes of the buffer to the correct values
for (var i = 0; i < byteString.length; i++) {
ia[i] = byteString.charCodeAt(i)
}
// write the ArrayBuffer to a blob, and you're done
var blob = new Blob([ab], {type: mimeString})
return blob
}
function cropReady() {
let cropargs = $('#imageCropTag').cropper('getData')
let cropimage = $('#imageCropTag').cropper('getCroppedCanvas')
$('#btnUpload').show()
$('#btnDone').hide()
$('#imageCropTag').attr('src', cropimage.toDataURL())
$('#imageCropTag').show()
$('#imageCropTag').cropper('destroy')
let called = false
$('#btnUpload').click(function (e) {
if (called) return
called = true
$('#btnUpload').hide()
$('#cropAlert').show()
let formData = new FormData()
formData.append('image', dataURItoBlob(fr.result))
for (let i in cropargs) {
formData.append(i, cropargs[i])
}
$.ajax({
type: 'POST',
url: '/api/avatar',
data: formData,
processData: false,
contentType: false,
success: function (data) {
$('avatarModal').modal('hide')
window.location.reload()
},
error: function (err) {
if (err.responseJSON && err.responseJSON.error) {
failAlert(err.responseJSON.error)
}
cancel()
}
})
})
}
function ready (blob) {
let match = blob.match(/data:image\/(\w+);/)
let screenlen = $('.mobview').is(':visible')
if (!match) {
return failAlert('Not an image file!')
}
if (match[1] !== 'png' && match[1] !== 'jpg' && match[1] !== 'jpeg') {
return failAlert('Unsupported image file')
}
$('#imageCropTag').attr('src', fr.result).hide()
$('#fileChoose').hide()
$('#btnUpload').hide()
$('#btnDone').show()
$('#crop').show()
$('#imageCropTag').cropper({
aspectRatio: 1 / 1,
minContainerHeight: screenlen ? 128 : 512,
minContainerWidth: screenlen ? 128 : 512,
viewMode: 1
})
}
function gravatarDance() {
$.ajax({
type: 'GET',
url: '/api/avatar/gravatar',
success: function (ln) {
if ($('#userAvatarFile').length) {
var ufile = $('#userAvatarFile').attr('src')
if (ufile.indexOf('/GRAV-') !== -1) {
$('#gravType').prop('checked', true)
} else {
$('#uploadType').prop('checked', true)
}
}
$('#gravatarPic').attr('src', ln)
}
})
$('#gravType').click(function (e) {
$.ajax({
type: 'POST',
url: '/api/avatar/gravatar',
success: function () {
window.location.reload()
}
})
})
}
function cancel() {
$('#fileChoose').show()
$('#cropAlert').hide()
$('#btnDone').hide()
$('#btnUpload').hide()
$('#crop').hide()
$('#imageCropTag').cropper('destroy')
fr = null
}
function handleFileSelect() {
if (!window.File || !window.FileReader || !window.FileList || !window.Blob) {
return failAlert('The File APIs are not fully supported in this browser.')
}
let input = document.getElementById('fileinput')
if (!input.files) {
return failAlert('This browser doesn\'t seem to support the `files` property of file inputs.')
}
if (!input.files[0]) {
return failAlert('Please select a file.')
}
if (input.files[0].size > 5000000) {
return failAlert('This file is too big. Max: 5 MB')
}
file = input.files[0]
fr = new FileReader()
fr.readAsDataURL(file)
fr.addEventListener('load', function (e) {
ready(fr.result)
})
}
$(window).ready(function () {
$('#avatarModal').on('hidden.bs.modal', function (e) {
cancel()
})
$('#avatarModal').on('show.bs.modal', function (e) {
gravatarDance()
})
$('#fileinput').on('change', function (e) {
e.preventDefault()
handleFileSelect()
})
$('#btnDone').click(function (e) {
cropReady()
})
})