autonomic-cooperative/hubl
0
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Profile picture cropping coded

Browse Source
This commit is contained in:
Alexandre Bourlier 2018-05-15 03:54:34 +02:00
parent 61eb9bae4a
commit 2029ca865d
11 changed files with 192 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
package.json
View File

@ -14,6 +14,7 @@
},
"dependencies": {
"bootstrap": "^4.0.0",
"cropper": "^4.0.0",
"font-awesome": "^4.7.0",
"jquery": "^3.3.1"
}

2
src/html/dependencies-dev.php
View File

@ -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>

2
src/html/dependencies-prod.php
View File

@ -1,12 +1,14 @@
<!-- 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://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>

110
src/html/edit-profile.html
View File

@ -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>

5
src/html/menu.html
View File

@ -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>

1
src/js/hd-app.js
View File

@ -15,6 +15,7 @@ document.addEventListener("DOMContentLoaded", function(event) {
openSearchBar();
}
// Escape key
else if (e.keyCode == 27 && navBar.classList.contains("search-mode")) {
closeSearchBar();
}

39
src/scss/_edit-profile.scss Normal file
View File

@ -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;
}
}
}

20
src/scss/_forms.scss
View File

@ -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;
}
}

5
src/scss/_mixins.scss
View File

@ -33,6 +33,11 @@
background-color: transparent;
}
%form-group {
display: block;
margin-bottom: 1rem;
}
%form-control {
display: block;
width: 100%;

2
src/scss/_variables.scss
View File

@ -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;

1
src/scss/main.scss
View File

@ -11,6 +11,7 @@
@import "dashboard";
@import "members";
@import "member";
@import "edit-profile";
@import "projects";
@import "project";
@import "channels";