Commit 1ccdc019dc77c1f4af0b8798dba50ac3dffc5ff0

Authored by Gustavo
1 parent c30f087a

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
Showing 1 changed file with 4 additions and 91 deletions   Show diff stats
users/templates/users/register.html
@@ -12,68 +12,6 @@ @@ -12,68 +12,6 @@
12 {% block sidebar %} 12 {% block sidebar %}
13 {% endblock sidebar %} 13 {% endblock sidebar %}
14 14
15 -{% block javascript %}  
16 -<script>  
17 - $(function () {  
18 -  
19 - /* SCRIPT TO OPEN THE MODAL WITH THE PREVIEW */  
20 - $("#id_image").change(function () {  
21 - if (this.files && this.files[0]) {  
22 - var reader = new FileReader();  
23 - reader.onload = function (e) {  
24 - $("#image").attr("src", e.target.result);  
25 - $("#modalCrop").modal("show");  
26 - }  
27 - reader.readAsDataURL(this.files[0]);  
28 - }  
29 - });  
30 -  
31 - /* SCRIPTS TO HANDLE THE CROPPER BOX */  
32 - var $image = $("#image");  
33 - var cropBoxData;  
34 - var canvasData;  
35 - $("#modalCrop").on("shown.bs.modal", function () {  
36 - $image.cropper({  
37 - viewMode: 1,  
38 - aspectRatio: 1/1,  
39 - minCropBoxWidth: 200,  
40 - minCropBoxHeight: 200,  
41 - ready: function () {  
42 - $image.cropper("setCanvasData", canvasData);  
43 - $image.cropper("setCropBoxData", cropBoxData);  
44 - }  
45 - });  
46 - }).on("hidden.bs.modal", function () {  
47 - cropBoxData = $image.cropper("getCropBoxData");  
48 - canvasData = $image.cropper("getCanvasData");  
49 - $image.cropper("destroy");  
50 - });  
51 -  
52 - $(".js-zoom-in").click(function () {  
53 - $image.cropper("zoom", 0.1);  
54 - });  
55 -  
56 - $(".js-zoom-out").click(function () {  
57 - $image.cropper("zoom", -0.1);  
58 - });  
59 -  
60 - /* SCRIPT TO COLLECT THE DATA AND POST TO THE SERVER */  
61 - $(".js-crop-and-upload").click(function () {  
62 - var cropData = $image.cropper("getData");  
63 - $("#id_x").val(cropData["x"]);  
64 - $("#id_y").val(cropData["y"]);  
65 - $("#id_height").val(cropData["height"]);  
66 - $("#id_width").val(cropData["width"]);  
67 - $("#modalCrop").modal('hide');  
68 - });  
69 -  
70 - });  
71 -</script>  
72 -  
73 -{% endblock javascript %}  
74 -  
75 -  
76 -  
77 15
78 {% block content %} 16 {% block content %}
79 <div class="row"> 17 <div class="row">
@@ -112,7 +50,7 @@ @@ -112,7 +50,7 @@
112 {% if field.auto_id == 'id_image' %} 50 {% if field.auto_id == 'id_image' %}
113 {% render_field field class='form-control' %} 51 {% render_field field class='form-control' %}
114 <div class="input-group"> 52 <div class="input-group">
115 - <input type="text" readonly="" class="form-control" placeholder="{% trans 'Choose your photo...' %}"> 53 + <input type="text" readonly="" class="form-control" id="pic_holder" placeholder="{% trans 'Choose your photo...' %}">
116 <span class="input-group-btn"> 54 <span class="input-group-btn">
117 <button type="button" class="btn btn-fab btn-fab-mini"> 55 <button type="button" class="btn btn-fab btn-fab-mini">
118 <i class="material-icons">image</i> 56 <i class="material-icons">image</i>
@@ -160,34 +98,9 @@ @@ -160,34 +98,9 @@
160 </div> 98 </div>
161 </div> 99 </div>
162 </div> 100 </div>
163 - <!-- MODAL TO CROP THE IMAGE -->  
164 - <div class="modal fade" id="modalCrop" data-keyboard="false" data-backdrop="static">  
165 - <div class="modal-dialog">  
166 - <div class="modal-content">  
167 - <div class="modal-header">  
168 - <button type="button" class="close" data-dismiss="modal" aria-label="Close">  
169 - <span aria-hidden="true">&times;</span>  
170 - </button>  
171 - <h4 class="modal-title">Crop the photo</h4>  
172 - </div>  
173 - <div class="modal-body">  
174 - <img src="" id="image" style="max-width: 100%;">  
175 - </div>  
176 - <div class="modal-footer">  
177 - <div class="btn-group pull-left" role="group">  
178 - <button type="button" class="btn btn-default js-zoom-in">  
179 - <span class="glyphicon glyphicon-zoom-in"></span>  
180 - </button>  
181 - <button type="button" class="btn btn-default js-zoom-out">  
182 - <span class="glyphicon glyphicon-zoom-out"></span>  
183 - </button>  
184 - </div>  
185 - <button type="button" class="btn btn-raised btn-default" data-dismiss="modal">{% trans 'Cancel' %}</button>  
186 - <button type="button" class="btn btn-success btn-raised post-button js-crop-and-upload">{% trans 'Crop' %} </button>  
187 - </div>  
188 - </div>  
189 - </div>  
190 - </div> 101 +
  102 +{% include 'users/modal_crop.html' %}
  103 +
191 {% endblock %} 104 {% endblock %}
192 105
193 {% block bottommenu %} 106 {% block bottommenu %}