From c3c51ec3ff57669c9e1e92b07a1d596fbe325590 Mon Sep 17 00:00:00 2001
From: Étienne Loks <etienne.loks@iggdrasil.net>
Date: Tue, 12 Sep 2017 15:09:35 +0200
Subject: Jquery dialog to bootstrap modal

---
 chimere/static/chimere/js/jquery.chimere.js        | 19 ++++---
 chimere/templates/blocks/bootstrap-modal.html      |  6 +-
 .../templates/chimere/blocks/inline_formset.html   | 64 +++++++++++-----------
 chimere/templates/chimere/edit.html                | 25 +++------
 chimere/templates/chimere/main_map.html            |  8 +--
 5 files changed, 58 insertions(+), 64 deletions(-)

diff --git a/chimere/static/chimere/js/jquery.chimere.js b/chimere/static/chimere/js/jquery.chimere.js
index 6e573cd..2e8d6a8 100644
--- a/chimere/static/chimere/js/jquery.chimere.js
+++ b/chimere/static/chimere/js/jquery.chimere.js
@@ -2882,13 +2882,13 @@ function transformCoordToLonLat(coord) {
                    });
         },
         displayMessage: function(message){
-            if (!$('#chimere_message').length) return;
-            $('#chimere_message').html(message);
-            $('#chimere_message').dialog('open');
+            if (!$('#modal-chimere-message').length) return;
+            $('#modal-chimere-message .modal-body').html(message);
+            $('#modal-chimere-message').modal("show");
         },
         hideMessage: function(message){
-            if (!$('#chimere_message').length) return;
-            $('#chimere_message').dialog('close');
+            if (!$('#modal-chimere-message').length) return;
+            $('#modal-chimere-message').modal("show");
         },
         center_on_feature: function(feature) {
             var f = get_or_set(feature, settings.current_feature);
@@ -2910,9 +2910,9 @@ function transformCoordToLonLat(coord) {
             if(settings.open_dialog_fx){
                 settings.open_dialog_fx(title, content);
             } else {
-                $("#category_description").html(content).dialog();
-                $("#category_description").dialog("option", "title", title);
-                $('#category_description').dialog('open');
+                $('#category_description .modal-body').html(message);
+                $('#category_description .modal-title').html(title);
+                $('#category_description').modal("show");
             }
         },
         category_detail: function (category_id) {
@@ -3201,6 +3201,9 @@ function transformCoordToLonLat(coord) {
                                                    EPSG_DISPLAY_PROJECTION);
             document.cookie = extent_key + '=' + extent.toArray().join('_')
                               + ';path=/';
+        },
+        refresh: function(){
+            settings.map.updateSize();
         }
     }; // End of public methods
     var helpers = {
diff --git a/chimere/templates/blocks/bootstrap-modal.html b/chimere/templates/blocks/bootstrap-modal.html
index e800ec9..a833781 100644
--- a/chimere/templates/blocks/bootstrap-modal.html
+++ b/chimere/templates/blocks/bootstrap-modal.html
@@ -1,9 +1,9 @@
 {% load i18n %}<div class="modal fade" id="{{id}}" tabindex="-1" role="dialog"
      aria-labelledby="{{id}}-label" aria-hidden="true">
-    <div role="document" class="modal-dialog{% ifequal size 'small'%} modal-sm{% endifequal %}{% ifequal size 'large'%} modal-lg{% endifequal %}">
-        <div class="modal-content">
+    <div role="document"
+         class="modal-dialog{% ifequal size 'xlarge'%} modal-xl{% endifequal %}{% ifequal size 'small'%} modal-sm{% endifequal %}{% ifequal size 'large'%} modal-lg{% endifequal %}"> <div class="modal-content">
             <div class="modal-header">
-                {% if title %}<h5 class="modal-title" id="{{id}}-label"> {{title}}</h5>{% endif %}
+                {% if title %}<h5 class="modal-title" id="{{id}}-label">{{title}}</h5>{% endif %}
                 <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
             </div>
             <div class="modal-body">
diff --git a/chimere/templates/chimere/blocks/inline_formset.html b/chimere/templates/chimere/blocks/inline_formset.html
index 61cbd19..7cc0f04 100644
--- a/chimere/templates/chimere/blocks/inline_formset.html
+++ b/chimere/templates/chimere/blocks/inline_formset.html
@@ -1,40 +1,42 @@
 {% load i18n %}
-    {% if extra_formset.non_form_errors %}<div class='errors'>{{extra_formset.non_form_errors.as_ul}}</div>{% endif %}
-    {{ formset.management_form }}
-    <table class='inline-table' id='table_{{formset.prefix}}'>
-    <caption>{% trans caption %}</caption>
+{% if extra_formset.non_form_errors %}<div class='errors'>{{extra_formset.non_form_errors.as_ul}}</div>{% endif %}
+{{ formset.management_form }}
+<h5>{% trans caption %}</h5>
+<table class='inline-table' id='table_{{formset.prefix}}'>
     {% for frm in formset%}{%if forloop.first %}
     <tr>{% for field in frm%}{% if field.label %}
         <th>{{field.label}}</th>{% endif %}{%endfor%}
     </tr>{%endif%}
     <tr id='tr_{{formset.prefix}}_{{forloop.counter0}}'>{% for field in frm.visible_fields %}
         <td>{# Include the hidden fields in the form #}
-        {% if forloop.first %}
-          {% for hidden in frm.hidden_fields %}
-          {{ hidden }}
-          {% endfor %}
-        {% endif %}
-        {% if field.errors %}<div class='errors'>{{ field.errors.as_ul }}</div>{% endif %}
-        {{ field }}
+            {% if forloop.first %}
+            {% for hidden in frm.hidden_fields %}
+            {{ hidden }}
+            {% endfor %}
+            {% endif %}
+            {% if field.errors %}<div class='errors'>{{ field.errors.as_ul }}</div>{% endif %}
+            {{ field }}
         </td>{% endfor %}
     </tr>{%endfor%}
-    </table>
-    <button id='add_new_{{formset.prefix}}'>{% trans "Add" %}</button>
-    <script type='text/javascript'><!--
-    $('#add_new_{{formset.prefix}}').click(function(){
-        var total_input = $("#id_{{formset.prefix}}-TOTAL_FORMS");
-        total_input.val(parseInt(total_input.val())+1);
-        var new_line = $('#tr_{{formset.prefix}}_0').clone();
-        new_line.find('input').val('');
-        new_line.find('input[type=checkbox]').attr('checked', false);
-        new_line.find('select').val('');
-        {% for field in formset.0.visible_fields %}
-        var old_input_id = '{{formset.prefix}}-0-{{field.name}}';
-        var input_id = '{{formset.prefix}}-'+(parseInt(total_input.val())-1)+'-{{field.name}}';
-        new_line.find('#id_'+old_input_id).attr('id', 'id_'+input_id
-                                                ).attr('name', input_id);
-        {% endfor %}
-        $('#table_{{formset.prefix}}').append(new_line);
-        return false;
-    });
-    // --></script>
+</table>
+<p>
+    <button id='add_new_{{formset.prefix}}' class="btn btn-secondary">{% trans "Add" %}</button>
+</p>
+<script type='text/javascript'><!--
+$('#add_new_{{formset.prefix}}').click(function(){
+    var total_input = $("#id_{{formset.prefix}}-TOTAL_FORMS");
+    total_input.val(parseInt(total_input.val())+1);
+    var new_line = $('#tr_{{formset.prefix}}_0').clone();
+    new_line.find('input').val('');
+    new_line.find('input[type=checkbox]').attr('checked', false);
+    new_line.find('select').val('');
+    {% for field in formset.0.visible_fields %}
+    var old_input_id = '{{formset.prefix}}-0-{{field.name}}';
+    var input_id = '{{formset.prefix}}-'+(parseInt(total_input.val())-1)+'-{{field.name}}';
+    new_line.find('#id_'+old_input_id).attr('id', 'id_'+input_id
+                                            ).attr('name', input_id);
+    {% endfor %}
+    $('#table_{{formset.prefix}}').append(new_line);
+    return false;
+});
+// --></script>
diff --git a/chimere/templates/chimere/edit.html b/chimere/templates/chimere/edit.html
index e416458..5d7a5db 100644
--- a/chimere/templates/chimere/edit.html
+++ b/chimere/templates/chimere/edit.html
@@ -1,5 +1,5 @@
 {% extends "chimere/base.html" %}
-{% load i18n chimere_tags inline_formset staticfiles %}
+{% load i18n chimere_tags inline_formset staticfiles bootstrap %}
 {% block extra_head %}
     {{ form.media }}
     {{ block.super }}
@@ -136,23 +136,16 @@
             {{ form.submiter_comment }}
         </div>
     </div>
-    <div id='upload_in_progress'>
-        <p>{% trans "Upload in progress. Please wait..." %}</p>
-        <p><img alt='Ajax loader' src='{{STATIC_URL}}chimere/img/ajax-loader.gif'/></p>
-    </div>
+
+    {% bootstrap_modal "upload_in_progress" %}
+
     <script text='text/javascript'>
-            $( "#upload_in_progress" ).dialog({
-                 modal: true,
-                 resizable:false,
-                 height:110,
-                 autoOpen:false,
-                 dialogClass:'alert-box'
-                }
-            );
-        $(".ui-dialog-titlebar").hide();
+        var upload = '<p>{% trans "Upload in progress. Please wait..." %}</p>\n';
+        upload += "<p><img alt='Ajax loader' src='{{STATIC_URL}}chimere/img/ajax-loader.gif'/></p>";
+
         function displayProgress(){
-            $("#upload_in_progress").dialog('open');
-            return true;
+            $('#upload_in_progress .modal-body').html(upload);
+            $('#upload_in_progress').modal("show");
         }
     </script>
     <p><input type='submit' onclick='saveExtent();displayProgress();' value="{% trans 'Propose'%}"/></p>
diff --git a/chimere/templates/chimere/main_map.html b/chimere/templates/chimere/main_map.html
index e215c56..610487b 100644
--- a/chimere/templates/chimere/main_map.html
+++ b/chimere/templates/chimere/main_map.html
@@ -1,5 +1,5 @@
 {% extends "chimere/base.html" %}
-{% load i18n unlocalize_point chimere_tags %}
+{% load i18n unlocalize_point chimere_tags bootstrap %}
 {% block extra_head %}
 {% head_jquery %}
 {% head_chimere %}
@@ -17,11 +17,7 @@
       <form id="frm_categories"><div id='categories'></div></form>
       <div id='search-box' class='ui-widget ui-corner-all'></div>
     </div>
-    <div id='category_description'>
-    </div>
-    <script type='text/javascript'>
-    $(function(){$('#category_description').dialog({'autoOpen':false});});
-    </script>
+    {% bootstrap_modal "category_description" "Category description" %}
     <div id='detail'></div>
 {% endblock %}
 {% block search_box %} {% endblock %}
-- 
cgit v1.2.3