106 lines
3.0 KiB
HTML
106 lines
3.0 KiB
HTML
<script>
|
|
//class LDPFormImgUpload extends LDPWidget {
|
|
// 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="edit-profile" style="display: none">
|
|
<label for="avatar-input">
|
|
<img id="avatar-preview" src="http://cdn.hd-app.local/members/alexandre-bourlier.jpg" style="width: 100%;"/>
|
|
</label>
|
|
<input type="file" id="avatar-input" name="avatar" value="http://cdn.hd-app.local/members/alexandre-bourlier.jpg" />`;
|
|
|
|
<ldp-form
|
|
class="edit-form"
|
|
data-src="<?php echo $sdn; ?>/members/1/"
|
|
bind-resources
|
|
></ldp-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", (e) => {
|
|
var img = avatarInput.files[0];
|
|
var reader = new FileReader();
|
|
|
|
reader.onloadend = function () {
|
|
cropPreview.src = reader.result;
|
|
}
|
|
|
|
if (img) {
|
|
reader.readAsDataURL(img);//reads the data as a URL
|
|
cropModal.classList.add("cropping-mode");
|
|
}
|
|
});
|
|
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>
|