136 lines
4.1 KiB
HTML
136 lines
4.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"
|
|
|
|
|
|
class HDAppUserInfo extends SIBDisplayLookupList {
|
|
get parentElement() {return "div"}
|
|
getTemplate(value, index) {
|
|
var firstname, lastname, email;
|
|
|
|
if(typeof value == "object")
|
|
if(value.first_name) {
|
|
firstname = value.first_name;
|
|
lastname = value.last_name;
|
|
email = value.email;
|
|
}
|
|
else {
|
|
store.get(value).then(resource => {
|
|
this.value.push(resource);
|
|
this.render();
|
|
});
|
|
if(Array.isArray(this.value))this.value.splice(this.value.indexOf(value), 1);
|
|
else this.value = [];
|
|
return '';
|
|
}
|
|
return `<div id="${firstname}-${lastname}">${firstname} ${lastname}</div>
|
|
<div id="${email}">${email}</div>`;
|
|
}
|
|
}
|
|
customElements.define('hdapp-userinfo', HDAppUserInfo);
|
|
</script>
|
|
|
|
<div id="member-edit-profile" style="display: none">
|
|
<!--<label for="avatar-input">-->
|
|
<!--<img id="avatar-preview" src="http://cdn.local/hdapp/members/alexandre-bourlier.jpg" style="width: 100%;"/>-->
|
|
<!--</label>-->
|
|
<!--<input type="file" accept="image/*" id="avatar-input" name="avatar" value="http://cdn.hd-app.local/members/alexandre-bourlier.jpg" />-->
|
|
|
|
<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>
|