// 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();
  });