From 2029ca865d7a099a3f5f0ad53e2e14559e9578ae Mon Sep 17 00:00:00 2001
From: Alexandre Bourlier <alexandre@happy-dev.fr>
Date: Tue, 15 May 2018 03:54:34 +0200
Subject: [PATCH] Profile picture cropping coded

---
 package.json                   |   1 +
 src/html/dependencies-dev.php  |   2 +
 src/html/dependencies-prod.php |  30 ++++-----
 src/html/edit-profile.html     | 110 +++++++++++++++++++++++++++++++--
 src/html/menu.html             |   5 +-
 src/js/hd-app.js               |   1 +
 src/scss/_edit-profile.scss    |  39 ++++++++++++
 src/scss/_forms.scss           |  20 ++++++
 src/scss/_mixins.scss          |   5 ++
 src/scss/_variables.scss       |   2 +-
 src/scss/main.scss             |   1 +
 11 files changed, 192 insertions(+), 24 deletions(-)
 create mode 100644 src/scss/_edit-profile.scss

diff --git a/package.json b/package.json
index a0c175d..cc80597 100644
--- a/package.json
+++ b/package.json
@@ -14,6 +14,7 @@
   },
   "dependencies": {
     "bootstrap": "^4.0.0",
+    "cropper": "^4.0.0",
     "font-awesome": "^4.7.0",
     "jquery": "^3.3.1"
   }
diff --git a/src/html/dependencies-dev.php b/src/html/dependencies-dev.php
index 88c48cc..2534619 100644
--- a/src/html/dependencies-dev.php
+++ b/src/html/dependencies-dev.php
@@ -1,11 +1,13 @@
     <!-- Stylesheets -->
     <link rel="stylesheet" href="<?php echo $dn; ?>/node_modules/bootstrap/dist/css/bootstrap.min.css" />
+    <link rel="stylesheet" href="<?php echo $dn; ?>/node_modules/cropper/dist/cropper.min.css" />
     <link rel="stylesheet" href="<?php echo $dn; ?>/dist/css/hd-app.css?v=<?php echo $v ?>" />
     <link rel="stylesheet" href="<?php echo $dn; ?>/node_modules/font-awesome/css/font-awesome.min.css" />
 
     <!-- Javascript -->
     <script type="text/javascript" src="<?php echo $dn; ?>/node_modules/jquery/dist/jquery.min.js"></script>
     <script type="text/javascript" src="<?php echo $dn; ?>/node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
+    <script type="text/javascript" src="<?php echo $dn; ?>/node_modules/cropper/dist/cropper.min.js"></script>
     <script type="text/javascript" src="<?php echo $dn; ?>/dist/lib/webcomponentsjs/webcomponents-loader.js"></script>
     <script type="text/javascript" src="<?php echo $dn; ?>/src/js/hd-app.js?v=<?php echo $v ?>"></script>
 
diff --git a/src/html/dependencies-prod.php b/src/html/dependencies-prod.php
index adfcc21..f21882e 100644
--- a/src/html/dependencies-prod.php
+++ b/src/html/dependencies-prod.php
@@ -1,16 +1,18 @@
-    <!-- Stylesheets -->
-    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
-    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
-    <link rel="stylesheet" href="<?php echo $dn; ?>/dist/css/hd-app.css?v=<?php echo $v ?>" />
+<!-- Stylesheets -->
+<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
+<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
+<link href="https://cdn.bootcss.com/cropper/4.0.0/cropper.min.css" rel="stylesheet">
+<link rel="stylesheet" href="<?php echo $dn; ?>/dist/css/hd-app.css?v=<?php echo $v ?>" />
 
-    <!-- Javascript -->
-    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
-    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/1.2.0/webcomponents-loader.js" integrity="sha256-fUVqCtpScUF69qkFkeuHmcShr2N2UleRQJhRG4etHds=" crossorigin="anonymous"></script>
-    <script type="text/javascript" src="<?php echo $dn; ?>/dist/js/hd-app.js?v=<?php echo $v ?>"></script>
+<!-- Javascript -->
+<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
+<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>
+<script src="https://cdn.bootcss.com/cropper/4.0.0/cropper.min.js"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/1.2.0/webcomponents-loader.js" integrity="sha256-fUVqCtpScUF69qkFkeuHmcShr2N2UleRQJhRG4etHds=" crossorigin="anonymous"></script>
+<script type="text/javascript" src="<?php echo $dn; ?>/dist/js/hd-app.js?v=<?php echo $v ?>"></script>
 
-    <!-- Web components -->
-    <link rel="import" href="https://cdn.happy-dev.fr/ldp-display/ldp-display.html?v=<?php echo $v ?>" />
-    <link rel="import" href="https://cdn.happy-dev.fr/ldp-display/ldp-router.html?v=<?php echo $v ?>" />
-    <link rel="import" href="https://xmpp-chat-component.happy-dev.fr/chat-window-component.html?v=<?php echo $v ?>">
+<!-- Web components -->
+<link rel="import" href="https://cdn.happy-dev.fr/ldp-display/ldp-display.html?v=<?php echo $v ?>" />
+<link rel="import" href="https://cdn.happy-dev.fr/ldp-display/ldp-router.html?v=<?php echo $v ?>" />
+<link rel="import" href="https://xmpp-chat-component.happy-dev.fr/chat-window-component.html?v=<?php echo $v ?>">
diff --git a/src/html/edit-profile.html b/src/html/edit-profile.html
index c48991c..cbde15f 100644
--- a/src/html/edit-profile.html
+++ b/src/html/edit-profile.html
@@ -1,8 +1,106 @@
-<div id="edit-profile" style="display: none">
-  <ldp-form 
-    data-fields=""
-    bind-resources
-  ></ldp-form>
+<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}" />`;
+  //  }
 
-    <h1>BOOM</h1>
+  //  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">
+  <!--ldp-form 
+    class="edit-form"
+    data-src="<?php echo $sdn; ?>/members/1/" 
+    bind-resources
+  ></ldp-form-->
+
+  
+  <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" />`;
 </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>
diff --git a/src/html/menu.html b/src/html/menu.html
index 9822e37..2598d69 100644
--- a/src/html/menu.html
+++ b/src/html/menu.html
@@ -10,9 +10,8 @@
         <i class="fa fa-users" aria-hidden="true"></i>
         <span class="d-none d-md-inline"> Membres</span>
       </ldp-route>
-      <ldp-route class="nav-item d-none" name="member" id-prefix="<?php echo $sdn; ?>/members/">
-        Membre
-      </ldp-route>
+      <ldp-route class="d-none" name="member" id-prefix="<?php echo $sdn; ?>/members/"></ldp-route>
+      <ldp-route class="d-none" name="edit-profile" id-prefix="<?php echo $sdn; ?>/members/"></ldp-route>
 
       <ldp-route class="nav-item pb-2 align-self-stretch text-center text-md-left" name="projects">
         <i class="fa fa-tasks" aria-hidden="true"></i>
diff --git a/src/js/hd-app.js b/src/js/hd-app.js
index 7e1b390..a1b0571 100644
--- a/src/js/hd-app.js
+++ b/src/js/hd-app.js
@@ -15,6 +15,7 @@ document.addEventListener("DOMContentLoaded", function(event) {
       openSearchBar();
     }
 
+    // Escape key
     else if (e.keyCode == 27 && navBar.classList.contains("search-mode")) {
       closeSearchBar();
     }
diff --git a/src/scss/_edit-profile.scss b/src/scss/_edit-profile.scss
new file mode 100644
index 0000000..4c01e67
--- /dev/null
+++ b/src/scss/_edit-profile.scss
@@ -0,0 +1,39 @@
+#crop-modal {
+  position:         absolute;
+  z-index:          1111;
+  top:              $menu-height;
+  bottom:           0px;
+  left:             0px;
+  right:            0px;
+  background-color: black;
+  display:          none;
+
+  &.cropping-mode {
+    display:  block;
+  }
+
+  .crop-wrapper {
+    img {
+      width:  100%;
+    }
+  }
+
+  .control-bar {
+    display:              flex;
+    justify-content:      space-between;
+    color:                white;
+    font-size:            30px;
+
+    button {
+      text-transform:   uppercase;
+      color:            white;
+      font-size:        18px;
+      font-weight:      bold;
+    }
+
+    i {
+      padding-top:    4px;
+    }
+  }
+}
+
diff --git a/src/scss/_forms.scss b/src/scss/_forms.scss
index a0f6eb4..5ae2f5e 100644
--- a/src/scss/_forms.scss
+++ b/src/scss/_forms.scss
@@ -54,3 +54,23 @@ ldp-display {
     }
   }
 }
+
+ldp-form.edit-form {
+  ldp-form-text {
+    @extend %form-group;
+
+    label {
+      text-transform:   capitalize;
+    }
+
+    input {
+      @extend %form-control;
+      @extend %form-control-sm;
+    }
+  }
+
+  input[type="submit"] {
+    @extend %btn;
+    @extend %btn-primary;
+  }
+}
diff --git a/src/scss/_mixins.scss b/src/scss/_mixins.scss
index 5a0da00..2142554 100644
--- a/src/scss/_mixins.scss
+++ b/src/scss/_mixins.scss
@@ -33,6 +33,11 @@
   background-color: transparent;
 }
 
+%form-group {
+  display:        block;
+  margin-bottom:  1rem;
+}
+
 %form-control {
   display: block;
   width: 100%;
diff --git a/src/scss/_variables.scss b/src/scss/_variables.scss
index ae35db0..4b07813 100644
--- a/src/scss/_variables.scss
+++ b/src/scss/_variables.scss
@@ -2,7 +2,7 @@ $hd-color: rgb(253, 200, 21);
 $hd-color-faded: rgba(253, 200, 21, 0.8);
 $twitter-color: grey;
 
-$menu-height:           46px;
+$menu-height:           43px;
 $menu-font-size:        16px;
 $vertical-menu-width:   50px;
 $sm-with:               576px;
diff --git a/src/scss/main.scss b/src/scss/main.scss
index cd2f418..8bd5639 100644
--- a/src/scss/main.scss
+++ b/src/scss/main.scss
@@ -11,6 +11,7 @@
 @import "dashboard";
 @import "members";
 @import "member";
+@import "edit-profile";
 @import "projects";
 @import "project";
 @import "channels";