Profile picture cropping coded
This commit is contained in:
Alexandre Bourlier
@ -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>
|
||||
|
||||
|
||||
@ -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 ?>">
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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>
|
||||
|
||||
Reference in New Issue
Block a user