98 lines
2.9 KiB
Plaintext
98 lines
2.9 KiB
Plaintext
// script.
|
|
class LDPFormImgUpload extends SIBWidget {
|
|
get template() {
|
|
return `<label for="${this.name}"><img id="${this.name}-preview" src="${this.value}"/></label>
|
|
<input id="${this.name}" type="file" name="${this.name}" value="${this.value}" />`;
|
|
}
|
|
|
|
render() {
|
|
store.get(this.value).then( (value) => {
|
|
this._value = value;
|
|
this.innerHTML = this.template;
|
|
});
|
|
}
|
|
}
|
|
customElements.define("ldp-form-img-upload", LDPFormImgUpload);
|
|
widget-avatar="ldp-form-img-upload"
|
|
|
|
#member-edit(style='display: none')
|
|
label.d-none(for='avatar-input')
|
|
img#avatar-preview(src='', style='width: 100%;')
|
|
input#avatar-input.d-none(accept='image/*', name='avatar', value='', type='file')
|
|
sib-form.edit-form(
|
|
data-fields='user, avatar, bio, cell, jabberID, number, pseudo, skills, website',
|
|
widget-user='hdapp-usereditinfo',
|
|
range-cell=`${sdn}/cells/`, widget-skills='sib-form-multiple-dropdown',
|
|
range-skills=`${sdn}/skills/`,
|
|
bind-resources=''
|
|
)
|
|
#crop-modal
|
|
.crop-wrapper
|
|
img#crop-preview(src='')
|
|
.control-bar
|
|
button#cancel-img-cropping.btn.btn-link Annuler
|
|
i#rotate-img.fa.fa-undo(aria-hidden='true')
|
|
button#crop-img.btn.btn-link Valider
|
|
|
|
|
|
script.
|
|
// Constant declaration
|
|
const avatarPreview = document.querySelector("#avatar-preview");
|
|
const avatarInput = document.querySelector("#avatar-input");
|
|
const cropModal = document.querySelector("#crop-modal");
|
|
const cropPreview = cropModal.querySelector("#crop-preview");
|
|
const $cropPreview = $(cropPreview);
|
|
|
|
// Triggers cropping on image upload
|
|
avatarInput.addEventListener("change", function(e) {
|
|
var img = avatarInput.files[0];
|
|
var reader = new FileReader();
|
|
|
|
reader.onloadend = function () {
|
|
cropPreview.src = reader.result;
|
|
cropModal.classList.add("cropping-mode");
|
|
}
|
|
|
|
if (img) {
|
|
reader.readAsDataURL(img);//reads the data as a URL
|
|
}
|
|
});
|
|
cropPreview.addEventListener("load", () => {
|
|
$cropPreview.cropper({
|
|
aspectRatio: 1/1,
|
|
viewMode: 3,
|
|
zoomable: false,
|
|
});
|
|
});
|
|
|
|
|
|
// Rotate image
|
|
cropModal.querySelector("#rotate-img").addEventListener("click", () => {
|
|
$cropPreview.cropper("rotate", -90);
|
|
});
|
|
|
|
|
|
// Cancel cropping
|
|
cropModal.querySelector("#cancel-img-cropping").addEventListener("click", () => {
|
|
closeCropping();
|
|
});
|
|
|
|
// Shortcut
|
|
document.querySelector("body").addEventListener("keydown", function(e) {
|
|
// Escape key
|
|
if (e.keyCode == 27 && cropModal.classList.contains("cropping-mode")) {
|
|
closeCropping();
|
|
}
|
|
});
|
|
function closeCropping() {
|
|
cropModal.classList.remove("cropping-mode");
|
|
avatarInput.value = null;
|
|
}
|
|
|
|
|
|
// Validating cropping
|
|
cropModal.querySelector("#crop-img").addEventListener("click", () => {
|
|
avatarPreview.src = $cropPreview.cropper("getCroppedCanvas").toDataURL()
|
|
closeCropping();
|
|
});
|