mirror of https://gitlab.crans.org/bde/nk20
96 lines
3.4 KiB
HTML
96 lines
3.4 KiB
HTML
|
{% load i18n crispy_forms_tags %}
|
||
|
|
{% block profile_content %}
|
||
|
|
<div class="text-center">
|
||
|
|
<form method="post" enctype="multipart/form-data" id="formUpload">
|
||
|
|
{% csrf_token %}
|
||
|
|
{{ form |crispy }}
|
||
|
|
</form>
|
||
|
|
</div>
|
||
|
|
<!-- MODAL TO CROP THE IMAGE -->
|
||
|
|
<div class="modal fade" id="modalCrop">
|
||
|
|
<div class="modal-dialog">
|
||
|
|
<div class="modal-content">
|
||
|
|
<div class="modal-body">
|
||
|
|
<img src="" id="modal-image" style="max-width: 100%;">
|
||
|
|
</div>
|
||
|
|
<div class="modal-footer">
|
||
|
|
<div class="btn-group pull-left" role="group">
|
||
|
|
<button type="button" class="btn btn-default" id="js-zoom-in">
|
||
|
|
<span class="glyphicon glyphicon-zoom-in"></span>
|
||
|
|
</button>
|
||
|
|
<button type="button" class="btn btn-default js-zoom-out">
|
||
|
|
<span class="glyphicon glyphicon-zoom-out"></span>
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
<button type="button" class="btn btn-default" data-dismiss="modal">Nevermind</button>
|
||
|
|
<button type="button" class="btn btn-primary js-crop-and-upload">Crop and upload</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
{% endblock %}
|
||
|
|
{% block extracss %}
|
||
|
|
<link href="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.6/cropper.min.css" rel="stylesheet">
|
||
|
|
{% endblock %}
|
||
|
|
|
||
|
|
{% block extrajavascript%}
|
||
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.6/cropper.min.js"></script>
|
||
|
|
<script src="https://cdn.jsdelivr.net/npm/jquery-cropper@1.0.1/dist/jquery-cropper.min.js"></script>
|
||
|
|
<script>
|
||
|
|
$(function () {
|
||
|
|
|
||
|
|
/* SCRIPT TO OPEN THE MODAL WITH THE PREVIEW */
|
||
|
|
$("#id_image").change(function (e) {
|
||
|
|
if (this.files && this.files[0]) {
|
||
|
|
var reader = new FileReader();
|
||
|
|
reader.onload = function (e) {
|
||
|
|
$("#modal-image").attr("src", e.target.result);
|
||
|
|
$("#modalCrop").modal("show");
|
||
|
|
}
|
||
|
|
reader.readAsDataURL(this.files[0]);
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
/* SCRIPTS TO HANDLE THE CROPPER BOX */
|
||
|
|
var $image = $("#modal-image");
|
||
|
|
var cropBoxData;
|
||
|
|
var canvasData;
|
||
|
|
$("#modalCrop").on("shown.bs.modal", function () {
|
||
|
|
$image.cropper({
|
||
|
|
viewMode: 1,
|
||
|
|
aspectRatio: 1/1,
|
||
|
|
minCropBoxWidth: 200,
|
||
|
|
minCropBoxHeight: 200,
|
||
|
|
ready: function () {
|
||
|
|
$image.cropper("setCanvasData", canvasData);
|
||
|
|
$image.cropper("setCropBoxData", cropBoxData);
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}).on("hidden.bs.modal", function () {
|
||
|
|
cropBoxData = $image.cropper("getCropBoxData");
|
||
|
|
canvasData = $image.cropper("getCanvasData");
|
||
|
|
$image.cropper("destroy");
|
||
|
|
});
|
||
|
|
|
||
|
|
$(".js-zoom-in").click(function () {
|
||
|
|
$image.cropper("zoom", 0.1);
|
||
|
|
});
|
||
|
|
|
||
|
|
$(".js-zoom-out").click(function () {
|
||
|
|
$image.cropper("zoom", -0.1);
|
||
|
|
});
|
||
|
|
|
||
|
|
/* SCRIPT TO COLLECT THE DATA AND POST TO THE SERVER */
|
||
|
|
$(".js-crop-and-upload").click(function () {
|
||
|
|
var cropData = $image.cropper("getData");
|
||
|
|
$("#id_x").val(cropData["x"]);
|
||
|
|
$("#id_y").val(cropData["y"]);
|
||
|
|
$("#id_height").val(cropData["height"]);
|
||
|
|
$("#id_width").val(cropData["width"]);
|
||
|
|
$("#formUpload").submit();
|
||
|
|
});
|
||
|
|
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
{% endblock %}
|