Commit 1ccdc019dc77c1f4af0b8798dba50ac3dffc5ff0
1 parent
c30f087a
Exists in
master
and in
3 other branches
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">×</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 %} |