109 lines
3.1 KiB
HTML
109 lines
3.1 KiB
HTML
<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"
|
|
</script>
|
|
|
|
<div id="member-edit" style="display: none">
|
|
<label for="avatar-input" class="d-none">
|
|
<img id="avatar-preview" src="" style="width: 100%;"/>
|
|
</label>
|
|
<input class="d-none" type="file" accept="image/*" id="avatar-input" name="avatar" value="" />
|
|
|
|
<sib-form
|
|
class="edit-form"
|
|
data-fields="user, avatar, bio, cell, jabberID, number, pseudo, skills, website"
|
|
widget-user="hdapp-usereditinfo"
|
|
range-cell="<?php echo $sdn; ?>/cells/"
|
|
widget-skills="sib-form-multiple-dropdown"
|
|
range-skills="<?php echo $sdn; ?>/skills/"
|
|
bind-resources
|
|
></sib-form>
|
|
</div>
|
|
|
|
<div id="crop-modal">
|
|
<div class="crop-wrapper">
|
|
<img id="crop-preview" src="" />
|
|
</div>
|
|
|
|
<div class="control-bar">
|
|
<button id="cancel-img-cropping" class="btn btn-link">Annuler</button>
|
|
<i id="rotate-img" class="fa fa-undo" aria-hidden="true"></i>
|
|
<button id="crop-img" class="btn btn-link">Valider</button>
|
|
</div>
|
|
</div>
|
|
|
|
<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();
|
|
});
|
|
</script>
|