From 1ccdc019dc77c1f4af0b8798dba50ac3dffc5ff0 Mon Sep 17 00:00:00 2001
From: Gustavo <gbl3@cin.ufpe.br>
Date: Wed, 29 Mar 2017 11:41:28 -0300
Subject: [PATCH] Removed javascript code of the template to move it to a .js file, removed modal html to move it to a separated html file and just include it, and fix'd some things

---
 users/templates/users/register.html | 95 ++++-------------------------------------------------------------------------------------------
 1 file changed, 4 insertions(+), 91 deletions(-)

diff --git a/users/templates/users/register.html b/users/templates/users/register.html
index 19f1ecb..f15fec7 100644
--- a/users/templates/users/register.html
+++ b/users/templates/users/register.html
@@ -12,68 +12,6 @@
 {% block sidebar %}
 {% endblock sidebar %}
 
-{% block javascript %}
-<script>
-	$(function () {
-
-		/* SCRIPT TO OPEN THE MODAL WITH THE PREVIEW */
-		$("#id_image").change(function () {
-			if (this.files && this.files[0]) {
-				var reader = new FileReader();
-				reader.onload = function (e) {
-					$("#image").attr("src", e.target.result);
-					$("#modalCrop").modal("show");
-				}
-				reader.readAsDataURL(this.files[0]);
-			}
-		});
-
-		/* SCRIPTS TO HANDLE THE CROPPER BOX */
-		var $image = $("#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"]);
-			$("#modalCrop").modal('hide');
-		});
-
-	});
-</script>
-
-{% endblock javascript %}
-
-
-
 
 {% block content %}
 	<div class="row">
@@ -112,7 +50,7 @@
 										{% if field.auto_id == 'id_image' %}
 											{% render_field field class='form-control' %}
 											<div class="input-group">
-							                    <input type="text" readonly="" class="form-control" placeholder="{% trans 'Choose your photo...' %}">
+							                    <input type="text" readonly="" class="form-control" id="pic_holder" placeholder="{% trans 'Choose your photo...' %}">
 							                    <span class="input-group-btn">
 							                        <button type="button" class="btn btn-fab btn-fab-mini">
 							                          	<i class="material-icons">image</i>
@@ -160,34 +98,9 @@
 			</div>
 		</div>
 	</div>
-	<!-- MODAL TO CROP THE IMAGE -->
-	<div class="modal fade" id="modalCrop" data-keyboard="false" data-backdrop="static">
-	  <div class="modal-dialog">
-	    <div class="modal-content">
-	      <div class="modal-header">
-	        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-	          <span aria-hidden="true">&times;</span>
-	        </button>
-	        <h4 class="modal-title">Crop the photo</h4>
-	      </div>
-	      <div class="modal-body">
-	        <img src="" id="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 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-raised btn-default" data-dismiss="modal">{% trans 'Cancel' %}</button>
-	        <button type="button" class="btn btn-success btn-raised post-button js-crop-and-upload">{% trans 'Crop' %} </button>
-	      </div>
-	    </div>
-	  </div>
-	</div>
+
+{% include 'users/modal_crop.html'  %}
+
 {% endblock %}
 
 {% block bottommenu %}
--
libgit2 0.21.2