Download as
Browse Code »

Commit 1ccdc019dc77c1f4af0b8798dba50ac3dffc5ff0

Authored by Gustavo
1 parent c30f087a
Exists in master and in 3 other branches amadeus_univasf, image-crop, refactoring

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
  Diff comments   View file @1ccdc01
... ... @@ -12,68 +12,6 @@
12 12 {% block sidebar %}
13 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 16 {% block content %}
79 17 <div class="row">
... ... @@ -112,7 +50,7 @@
112 50 {% if field.auto_id == 'id_image' %}
113 51 {% render_field field class='form-control' %}
114 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 54 <span class="input-group-btn">
117 55 <button type="button" class="btn btn-fab btn-fab-mini">
118 56 <i class="material-icons">image</i>
... ... @@ -160,34 +98,9 @@
160 98 </div>
161 99 </div>
162 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 104 {% endblock %}
192 105  
193 106 {% block bottommenu %}
... ...