Open modification form inside a modal window

8 files changed, 277 insertions, 338 deletions

diff --git a/static/saclay/css/styles.css b/static/saclay/css/styles.css
index 6708328..4499375 100644
--- a/static/saclay/css/styles.css
+++ b/static/saclay/css/styles.css
@@ -201,6 +201,10 @@ html, body{
     overflow:hidden;
 }
 
+filedset{
+    margin: 0;
+}
+
 .ui-button,
 .action li{
     padding:2px 18px;
@@ -2152,3 +2156,13 @@ li.main_category > span > label{
 .main_category.full .main-category-tick{
     color: #1db11d;
 }
+
+#map_edit{
+    width: 100%;
+    height: 400px;
+}
+
+#id_description{
+    width: 100%;
+    height: 100px;
+}
diff --git a/static/saclay/js/interface.js b/static/saclay/js/interface.js
index 600012f..22cc237 100644
--- a/static/saclay/js/interface.js
+++ b/static/saclay/js/interface.js
@@ -2,7 +2,7 @@ var msg_edit_route = "Cliquez sur la carte pour tracer le trajet. Chaque nouveau
 var msg_edit = "Cliquez sur la carte pour placer le lieu. Pour modifier ce lieu sélectionnez-le puis glissez-déposez pour le déplacer.";
 
 var update_editmarker = function(){
-    $("#main-map").chimere('cleanRoute');
+    /*$("#main-map").chimere('cleanRoute');
     $('.map_button').hide();
     if($('#multimedia_form').length) $('#multimedia_form').remove();
     $('#action-edit-event').removeClass('state-active');
@@ -17,14 +17,11 @@ var update_editmarker = function(){
     $('#message').addClass('alert-info');
     $('#message .content').html(msg_edit);
     $('#message').show();
-
+*/
     $.ajax({url: edit_url,
             dataType: "html",
             success: function (data) {
-                $('#frm-edit-event').html('');
-                $('#frm-edit-route').html('');
-                $('#frm-edit-marker').html(data);
-                $("#main-map").chimere('activateMarkerEdit');
+                $("#modal-edit .modal-body").html(data);
             },
             error: function (data) {
                 $('#frm-edit-marker').html("<p class='warning'>"+
@@ -121,6 +118,7 @@ var action_map = function(){
 };
 
 var action_participate = function(){
+/*
         $('.map_button').hide();
         $('#message').hide();
         $('#action-carte').removeClass('state-active');
@@ -129,6 +127,7 @@ var action_participate = function(){
         $('#edit-actions').show();
         $('#map-panel').hide();
         $('#edit-panel').show();
+        */
         update_editmarker();
 };
 
@@ -163,11 +162,13 @@ var search_panel_open = function(){
 
 var edit_panel_open = function(){
     action_participate();
+    /*
     $('#search-box').hide();
     $('#search-result').hide();
     $('#frm_categories').hide();
     $('#edit-actions').show();
     $('#back-categories').show();
+    */
 };
 
 $(function(){
@@ -187,18 +188,23 @@ $(function(){
         $("." + $(this).attr("data-hide")).hide();
     });
 
-    $('#default-message').dialog({'autoOpen':false,
-                                  'resizable':false,
-                                  width:630,
-                                   'dialogClass':'no-titlebar'});
     $("#categories").fadeIn();
     $(".buttonset label").click(function(){
         $(".buttonset label").removeAttr("aria-pressed");
         $(this).attr("aria-pressed", 'true');
     });
     $("#action-news").click(function(){
-        $('#news').dialog('open');
+        $('#modal-news').modal("show");
     });
+
+    $("#modal-edit").on('shown.bs.modal', function () {
+        // ol3 must be initialized after modal opening
+        init_map_edit();
+        alert("hophop");
+        $('#map_edit').chimere('refresh');
+        $("#modal-edit").modal('handleUpdate');
+    });
+
     $("#action-carte").click(action_map);
 
     $("#action-participate").click(action_participate);
@@ -220,8 +226,8 @@ $(function(){
                 success: function (content) {
                     html = "<div class='dialog-content'>" +
                            content + "</div>"
-                    $('#default-message').html(html);
-                    $('#default-message').dialog('open');
+                    $('#modal-default-message .modal-body').html(html);
+                    $('#modal-default-message').modal("show");
                 }
             });
         return false;
diff --git a/templates/chimere/base.html b/templates/chimere/base.html
index d616765..72efd17 100644
--- a/templates/chimere/base.html
+++ b/templates/chimere/base.html
@@ -2,14 +2,15 @@
 {% load chimere_tags i18n %}
 {% block extra_head %}
 <link rel="stylesheet" href="{{ STATIC_URL }}font-awesome/css/font-awesome.min.css?ver=4.3.0" />
-<link rel="stylesheet" href="{{ STATIC_URL }}bootstrap/bootstrap.min.css?ver=4.3.0" />
+<link rel="stylesheet" href="{{ STATIC_URL }}bootstrap/bootstrap.min.css?ver=4.0.0-beta" />
 <link rel="shortcut icon" href="{{ STATIC_URL }}saclay/images/favicon.png?ver={{SACLAY_VERSION}}"/>
 <link rel="stylesheet" href="{{ STATIC_URL }}chimere/css/styles.css?ver={{VERSION}}" />
 <link rel="stylesheet" href="{{ STATIC_URL }}chimere/css/print.css?ver={{VERSION}}" media='print'/>
 <link rel="stylesheet" href="{{ STATIC_URL }}saclay/css/styles.css?ver={{SACLAY_VERSION}}" />
 {% for css in EXTRA_CSS %}<link rel="stylesheet" href="{{ css }}?ver={{SACLAY_VERSION}}" />{% endfor %}
 <link rel="stylesheet" href="{{ STATIC_URL }}saclay/css/print.css?ver={{SACLAY_VERSION}}" media='print'/>
-<script src="{{ STATIC_URL }}bootstrap/bootstrap.min.js?ver=3.0.0" type="text/javascript"></script>
+<script src="{{ STATIC_URL }}bootstrap/popper.min.js?ver=4.0.0-beta" type="text/javascript"></script>
+<script src="{{ STATIC_URL }}bootstrap/bootstrap.min.js?ver=4.0.0-beta" type="text/javascript"></script>
 {% if MOBILE %}
 <link rel="stylesheet" href="{{ STATIC_URL }}chimere/css/mobile.css?ver={{VERSION}}" />
 <link rel="stylesheet" href="{{ STATIC_URL }}saclay/css/mobile.css?ver={{SACLAY_VERSION}}" />
diff --git a/templates/chimere/blocks/news.html b/templates/chimere/blocks/news.html
index 0bc04a1..4c46690 100644
--- a/templates/chimere/blocks/news.html
+++ b/templates/chimere/blocks/news.html
@@ -1,44 +1,51 @@
 {% load i18n sanitize chimere_tags %}
-<script type='text/javascript'>
-<!--
-$(function(){
-    /*$('#news div.media-player').jmeEmbedControls();
-    $('#news video').each(function(index){$(this).pause()});
-    $('#news audio').each(function(index){$(this).pause()});*/
-    $("#news").dialog({width:630, dialogClass:'no-titlebar',
-                       autoOpen:false});
-});
-// -->
-</script>
-<div id='news' style='display:none'>
-    <h2>{% trans "News" %}</h2>
-    <div class='news'>
-    {% if news_lst %}
-        {% for news in news_lst %}
-        <div class='info'>
-        {% if news.title %}
-            <h4>{{news.title}} &ndash; {{ news.date }}</h4>
-            {{news.content|safe}}
-        {% else %}
-            <h4>{{news.name}} &ndash; {{ news.start_date }}{% if news.end_date %} - {{ news.end_date }}{% endif %}</h4>
-            {% if news.description %}
-            {{news.description|sanitize:"p b i br hr strong em span:style a:href:target ul li ol h1 h2 h3 h4 table td th tr"|safe}}
-            {% endif %}
-        {% endif %}
-            <p class='marker_link'>
-            {% if news.point %}
-            <a href='{% get_tinyfied_url news area_name %}'>{% trans "See it on the map"%}</a>
-            {% endif %}{% if news.point and news.url %} - {% endif %}{% if news.url %}
-            <a href='{{news.url}}'>{% trans "Go to the event website"%}</a>
-            {% endif %}
-            </p>
-        </div>
-        {%endfor%}
-    {% else %}
-        <div class='info'>
-            <em>{% trans "No news today."%}</em>
+
+<div class="modal fade" id="modal-news" tabindex="-1" role="dialog"
+     aria-labelledby="modal-news-label" aria-hidden="true">
+    <div class="modal-dialog modal-lg">
+        <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>
+            </div>
+            <div class="modal-body">
+                <h2>{% trans "News" %}</h2>
+                <div class='news'>
+                    {% if news_lst %}
+                    {% for news in news_lst %}
+                    <div class='info'>
+                        {% if news.title %}
+                        <h4>{{news.title}} &ndash; {{ news.date }}</h4>
+                        {{news.content|safe}}
+                        {% else %}
+                        <h4>{{news.name}} &ndash; {{ news.start_date }}{% if news.end_date %} - {{ news.end_date }}{% endif %}</h4>
+                        {% if news.description %}
+                        {{news.description|sanitize:"p b i br hr strong em span:style a:href:target ul li ol h1 h2 h3 h4 table td th tr"|safe}}
+                        {% endif %}
+                        {% endif %}
+                        <p class='marker_link'>
+                            {% if news.point %}
+                            <a href='{% get_tinyfied_url news area_name %}'>{% trans "See it on the map"%}</a>
+                            {% endif %}{% if news.point and news.url %} - {% endif %}{% if news.url %}
+                            <a href='{{news.url}}'>{% trans "Go to the event website"%}</a>
+                            {% endif %}
+                        </p>
+                    </div>
+                    {%endfor%}
+                    {% else %}
+                    <div class='info'>
+                        <em>{% trans "No news today."%}</em>
+                    </div>
+                    {% endif %}
+                </div>
+            </div>
+            <div class="modal-footer">
+                <button type="button" class="btn btn-secondary" data-dismiss="modal">
+                    {% trans "Close" %}
+                </button>
+            </div>
         </div>
-    {% endif %}
     </div>
 </div>
 
diff --git a/templates/chimere/edit.html b/templates/chimere/edit.html
index ff832e5..88c1d24 100644
--- a/templates/chimere/edit.html
+++ b/templates/chimere/edit.html
@@ -1,172 +1,134 @@
-{% load i18n chimere_tags inline_formset%}
+{% load i18n chimere_tags inline_formset staticfiles %}
     {% if submited %}{% submited %}{% endif %}
+    {% if error_message %}<div class='edit errorlist'>
+        <legend>{% trans "Error" %}</legend>
+        <p>{{ error_message }}</p>
+    {% endif %}</div>
+    {% if is_modification and is_superuser %}<div class='warning'><p>{% trans "You are logged as an administrator. Your modifications will be taking into account immediately." %}</p></div>{% endif %}
     <div class='edit'>
-    {% if event %}<h3>{% trans "Add an event" %}</h3>
-    {% else %}
-    {% if route %}<h3>{% trans "Add a route" %}</h3>
-    {% else %}<h3>{% trans "Add a location" %}</h3>
-    {% endif%}{% endif%}
-    <div class='notice'>
-    {% if event %}
-    <p>Vous pouvez utiliser le formulaire ci-dessous pour partager avec nous un événement public à venir sur le territoire. Merci de ne renseigner un événement que lorsqu’il est confirmé, et de nous faire part le plus rapidement possible de toute modification le concernant.  Pensez à indiquer la date de début et de fin.
-Les évènements à caractère politique, confessionnel ainsi que ceux relevant de prosélytisme divers ne seront pas affichés sur le site.</p>
-    {% else %}
-    {% if route %}
-    <p>Vous pouvez utiliser le formulaire ci-dessous pour proposer un itinéraire de promenade sur le territoire. Merci de renseigner seulement un itinéraire que vous avez déjà pratiqué à plusieurs reprises et avec succès, afin d’éviter des déconvenues à ceux qui s’en inspireraient.</p>
-    {% else %}
-    <p>Vous pouvez utiliser le formulaire ci-dessous pour proposer un lieu utile ou remarquable sur le plateau. Merci de vous assurer au préalable de l’exactitude des informations fournies et de visiter les rubriques déjà existantes pour harmoniser les informations soumises.</p>
-    {% endif%}{% endif%}
-    </div>
-    <p class='notice'>* {% trans "indicates a mandatory field" %}</p>
-    <form enctype="multipart/form-data" method='post' action='{% if route%}{% url 'edit-route' %}{%else%}{% url 'edit' %}{% endif %}' id='proposition_form'>
-    {% csrf_token %}
-    {% if not route %}
-    <div class="fieldWrapper point_label">
-        <label class='error'>{% trans "Select a location for this new site" %}</label>
-        <input type='hidden' id='id_point' name='point'/>
+    {% block legend %}{% endblock %}
+    <form enctype="multipart/form-data" method='post' action='.'>
+        {% csrf_token %}
+        <p>* {% trans "indicates a mandatory field" %}</p>
+
+        <div class="container">
+          <div class="row">
+            <div class="col">
+                <label for="id_name">{% trans "Name"%} *</label>
+                {% if form.name.errors %}<div class='errors'>{{ form.name.errors }}</div>{% endif %}
+                {{ form.name }}
+            </div>
+            <div class="col">
+                <label for="id_subcategory">{% if form.categories.label %}{{ form.categories.label }}{% else %}{% trans "Categories" %} *{% endif %}</label>
+                {% if form.categories.errors %}<div class='errors'>{{ form.categories.errors }}</div>{% endif %}
+                {{ form.categories }}
+            </div>
+          </div>
+          <div class="row">
+            <div class="col">
+                {% block geometry %}
+                {% endblock %}
+            </div>
+          </div>
+            <div class="row">
+                <div class="col">
+                    <label for="id_description">{% trans "Description" %}</label>
+                    {{ form.description.errors }}
+                    {{ form.description }}
+                    <p class="help">{{ form.description.help_text }}</p>
+                </div>
+            </div>
+        </div>
+
+    {% if form.keywords %}<div class="fieldWrapper">
+        <label for="id_keywords">{% trans "Keywords" %}</label>
+        {{ form.keywords.errors }}
+        {{ form.keywords }}
+        <p class="help">{{ form.keywords.help_text }}</p>
     </div>{% endif %}
-    <div class="fieldWrapper">
-        <label for="id_name">{%if route%}{% trans "Name of the route"%}{% else %}{% if event %}{% trans "Name of the event"%}{% else %}{% trans "Name of the location"%}{% endif %}{% endif %} <span class='mandatory'>*</span></label>
-        {% if form.name.errors %}<div class='errors'>{{ form.name.errors }}</div>{% endif %}
-        {{ form.name }}
-    </div>
-    <div class="fieldWrapper">
-      <label for="id_subcategory">{% trans "Category" %} <span class='mandatory'>*</span></label>
-        {% if form.categories.errors %}<div class='errors'>{{ form.categories.errors }}</div>{% endif %}
-      {{ form.categories }}
-    </div>
-    <hr class='clean'/>
-    {% if event %}
-    <div class="fieldWrapper" id='div_start_date'>
-        <label for="id_start_date">{% trans "Start date" %} <span class='mandatory'>*</span></label>
+    {% if dated %}
+    <div class="fieldWrapper full">
+        <label for="id_start_date">{% trans "Start date" %}</label>
         {{ form.start_date.errors }}
         {{ form.start_date }}
+        <p class="help">{{ form.start_date.help_text }}</p>
     </div>
-    <div class="fieldWrapper" id='div_end_date'>
+    <div class="fieldWrapper full">
         <label for="id_end_date">{% trans "End date" %}</label>
         {{ form.end_date.errors }}
         {{ form.end_date }}
+        <p class="help">{{ form.end_date.help_text }}</p>
     </div>
-    <hr class='clean'/>
     {% endif %}
     {% for field in form %}
         {% for property in properties %}
             {% ifequal field.name property.getNamedId %}
-                <div class="fieldWrapper single-line">
-                    <label for="id_{{field.name}}">{% trans field.label %}{% if property.mandatory %} <span class='mandatory'>*</span>{% endif %}</label>
+                <div class="fieldWrapper">
+                    <label for="id_{{field.name}}">{% trans field.label %}{% if property.mandatory %} *{% endif %}</label>
                     {% if field.errors %}<div class='errors'>{{ field.errors }}</div>{% endif %}
                     {{ field }}
                 </div>
             {%endifequal%}
         {%endfor%}
     {%endfor%}
-    <div class="fieldWrapper">
-        <label for="id_description">{% trans "Description" %}</label>
-        {{ form.description.errors }}
-        {{ form.description }}
-        <p class="help">{{ form.description.help_text }}</p>
-    </div>
+    <div class='bottomform'>
+
+        {% inline_formset "Multimedia files" formset_multi %}
+        {% inline_formset "Picture files" formset_picture %}
 
-    {% if filtered_properties %}
-    <script type='text/javascript'>
-        <!--
-        var cat_filters = new Array();
-        var cat_to_hide = new Array();
-        {% for property in filtered_properties %}
-        cat_to_hide.push('#id_{{property.getNamedId}}');
-        {% for subcat in property.subcategories.all %}
-        if(!cat_filters['{{subcat.id}}']) cat_filters['{{subcat.id}}'] = new Array();
-        cat_filters['{{subcat.id}}'].push('#id_{{property.getNamedId}}');
-        {% endfor %}
-        {% endfor %}
-        $('#id_categories').change(function(){
-            for (idx in cat_to_hide){
-                $(cat_to_hide[idx]).parent().hide();
-            }
-            var vals = $(this).val();
-            for (val_id in vals){
-                var val = vals[val_id];
-                for (ids in cat_filters[val]){
-                    $(cat_filters[val][ids]).parent().show();
+        {% if filtered_properties %}
+        <script type='text/javascript'>
+            var cat_filters = new Array();
+            var cat_to_hide = new Array();
+            {% for property in filtered_properties %}
+            cat_to_hide.push('#id_{{property.getNamedId}}');
+            {% for subcat in property.subcategories.all %}
+            if(!cat_filters['{{subcat.id}}']) cat_filters['{{subcat.id}}'] = new Array();
+            cat_filters['{{subcat.id}}'].push('#id_{{property.getNamedId}}');
+            {% endfor %}
+            {% endfor %}
+            $('.bsmSelect').change(function(){
+                for (idx in cat_to_hide){
+                    $(cat_to_hide[idx]).parent().hide();
                 }
-            }
-        });
-        $('#id_categories').change();
-        // -->
-    </script>
-    {% endif %}
-    {% if route %}
-    <h4 id='head_route' class='toggle maximized'>{% trans "Route" context "form" %} <span class='mandatory'>*</span></h4>
-    <div id='itinerary_field_contener'>
-        <input id='id_route' name='route' type='hidden'/>
-        <label class='error'>{% trans "Select a route for this new site (have you submit the search?)" %}</label>
-    <div id='itinerary_field'>{% if not itinerary_form %}
-    <div class='notice'><p>Cliquez sur la carte pour dessiner le trajet.</p></div>
-    {% endif %}</div>
-    <hr class='clean'/>
+                var vals = $('#id_categories').val();
+                for (val_id in vals){
+                    var val = vals[val_id];
+                    for (ids in cat_filters[val]){
+                        $(cat_filters[val][ids]).parent().show();
+                    }
+                }
+            });
+            $('.bsmSelect').change();
+        </script>
+        {% endif %}
     </div>
-    {% endif %}
-    <h4 id='head_multimedia'><span>Images, audios, vidéos</span><span id="add_multimedia_list">Ajouter</span></h4>
-    {% alternate_multimedia formset_multi formset_picture %}
-    <h4 id='head_personalform' class='toggle maximized'>{% trans "Personal information"%}</h4>
-    <div id='personalform'>
-        <div class="fieldWrapper single-line">
-            <label for="id_submiter_email">{% trans "Email"%} <span class='mandatory'>*</span></label>
-            {% if form.submiter_email.errors %}<div class='errors'>{{ form.submiter_email.errors }}</div>{% endif %}
-            {{ form.submiter_email }}
+    <div class='personalform'>
+        <h3>{% trans "Personal information"%}</h3>
+        <div class='warning'>
+        {% trans "This fields are not mandatory. If you provided them they not will be made public and they will only used to join you for this project."%}
         </div>
-        <div class="fieldWrapper single-line">
-            <label for="id_submiter_name">{% trans "Name"%}</label>
+        <div class="fieldWrapper">
+            <label for="id_submiter_name">{% trans "Your name or nickname"%}</label>
             {% if form.submiter_name.errors %}<div class='errors'>{{ form.submiter_name.errors }}</div>{% endif %}
             {{ form.submiter_name }}
         </div>
         <div class="fieldWrapper">
-            <label for="id_submiter_comment">{% trans "Comment" %}</label>
+            <label for="id_submiter_email">{% trans "Your email"%}</label>
+            {% if form.submiter_email.errors %}<div class='errors'>{{ form.submiter_email.errors }}</div>{% endif %}
+            {{ form.submiter_email }}
+        </div>
+        <div class="fieldWrapper full">
+            <label for="id_submiter_comment">{% trans "Comments about your submission"%}</label>
             {% if form.submiter_comment.errors %}<div class='errors'>{{ form.submiter_comment.errors }}</div>{% endif %}
             {{ form.submiter_comment }}
         </div>
     </div>
     <div id='upload_in_progress'>
         <p>{% trans "Upload in progress. Please wait..." %}</p>
-        <p><img src='{{STATIC_URL}}chimere/img/ajax-loader.gif'/></p>
+        <p><img alt='Ajax loader' src='{{STATIC_URL}}chimere/img/ajax-loader.gif'/></p>
     </div>
-    <p><span id='proposition_form_submit'>{% trans 'Propose'%}</span></p>
     <script text='text/javascript'>
-        <!--
-        $(function(){
-            tinyMCE.init({
-                mode : "textareas",
-                theme: 'modern',
-                editor_selector : "mceEditor",
-                relative_urls : false,
-                toolbar_items_size: 'small',
-                menubar: '',
-                toolbar1: 'bold italic,underline | bullist,numlist',
-                toolbar2: "",
-                toolbar3: ""
-            });
-            {% if route %}
-            var edition_type = 'route';
-            {% if itinerary_form %}
-            $("#chimere_itinerary_form").appendTo($("#itinerary_field"));
-            $('#main_map').chimere('updateRoutingInput');{% endif%}
-            {% else %}
-            var edition_type = 'marker';
-            $('#main_map').chimere('updateMarkerInput');
-            {% endif %}
-            $('#main_map').chimere('activateEdition', edition_type);
-            $('#main_map').chimere('activateDraw');
-            $('.toggle').click(function(){
-                var div_item = $(this).next();
-                div_item.toggle();
-                if (div_item.is(":visible")){
-                    $(this).removeClass('minified');
-                    $(this).addClass('maximized');
-                } else {
-                    $(this).addClass('minified');
-                    $(this).removeClass('maximized');
-                }
-            });
             $( "#upload_in_progress" ).dialog({
                  modal: true,
                  resizable:false,
@@ -175,49 +137,13 @@ Les évènements à caractère politique, confessionnel ainsi que ceux relevant
                  dialogClass:'alert-box'
                 }
             );
-            $('#proposition_form_submit').click(function(){
-                // JS tests because if a file is submited there is no way
-                // to refill the form with (browser security issue)
-                tinyMCE.triggerSave();
-                validation = [{%if route%}
-                    'id_route'{%else%}'id_point'{% endif %},
-                    'id_name',
-                    'id_categories',{% if event %}
-                    'id_start_date',{% endif %}
-                    'id_submiter_email'
-                ];
-                var validated = true;
-                for (var idx=0; idx<validation.length ;idx++){
-                    var input_id = validation[idx];
-                    var val = jQuery('#'+input_id).val();
-                    if (!val || val == '0' ||
-                            (input_id == 'id_submiter_email' && 
-                            !isValidEmailAddress(val))){
-                        jQuery('#'+input_id).parent().addClass('warning');
-                        jQuery('#'+input_id).parent().addClass('error');
-                        validated = false;
-                    } else {
-                        jQuery('#'+input_id).parent().removeClass('warning');
-                        jQuery('#'+input_id).parent().removeClass('error');
-                    }
-                }
-                if (!validated){
-                    alert("{%trans "There are missing/erroneous fields."%}");
-                    $("#panel").scrollTop(0);
-                    return false;
-                }
-                $("#proposition_form").ajaxForm();
-                $("#upload_in_progress").dialog('open');
-                $("#proposition_form").ajaxSubmit({
-                    target:"#frm-edit-marker",
-                    success:function(msg){
-                        $("#panel").scrollTop(0);
-                        $("#upload_in_progress").dialog('close');
-                    }
-                });
-            });
-        });
-        // -->
+        $(".ui-dialog-titlebar").hide();
+        function displayProgress(){
+            $("#upload_in_progress").dialog('open');
+            return true;
+        }
     </script>
+    <p><input type='submit' onclick='saveExtent();displayProgress();' value="{% trans 'Propose'%}"/></p>
     </form>
     </div>
+    </div>
diff --git a/templates/chimere/main_map.html b/templates/chimere/main_map.html
index 8bf77d7..90ccaba 100644
--- a/templates/chimere/main_map.html
+++ b/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 %}
@@ -10,16 +10,19 @@
 {% if has_search %}
 <script src="{{ STATIC_URL }}chimere/js/search.js?ver={{VERSION}}" type="text/javascript"></script>
 <script src="{{ STATIC_URL }}chimere/js/search-autocomplete.js?ver={{VERSION}}" type="text/javascript"></script>{% endif %}
+{% for js in extra_js %}<script src="{{js}}?ver={{VERSION}}" type="text/javascript"></script>
+{% endfor %}
 
 <script type='text/javascript' language='javascript'>
     <!--
     var default_error_message = "{% trans "Error while loading the page... Refresh the page. If the problem persist contact the webmaster." %}";
-    var edit_url = "{% url 'edit' %}";
-    var edit_event_url = "{% url 'edit-event' %}";
-    var edit_route_url = "{% url 'edit-route' %}";
+    var edit_url = "{% url 'editmarker' %}";
     // -->
 </script>
 <script src="{{ STATIC_URL }}saclay/js/interface.js?ver={{SACLAY_VERSION}}" type="text/javascript"></script>
+
+{% for css in extra_css %}<link rel="stylesheet" type="text/css" href="{{css}}" />
+{% endfor %}
 {{ block.super }}
 <link rel="stylesheet" type="text/css" href="{% url 'dyn-css' %}" />
 {% endblock %}
@@ -74,13 +77,16 @@
     </div>
     <div class='footer' id='footer-panel'>
         {% if contact_email %}<a href='mailto:{{contact_email}}' id='contactus'>{% trans "contact" %}</a> | {% endif %}
-        <a href='{% url 'chimere:extra_page' '' 'legal' %}' id='page-legal' class='dyn-page'>{% trans "terms of service & credits" %}</a>
+        <a href="{% url 'chimere:extra_page' '' 'legal' %}" id='page-legal' class='dyn-page'>{% trans "terms of service & credits" %}</a>
     </div>
   </div>
 {% endblock %}
 {% block content %}
     <div id='category_description'>
     </div>
+
+
+
     <script type='text/javascript'>
     $(function(){
         $('#category_description').dialog({'autoOpen':false, width:630,
@@ -107,11 +113,61 @@
     {% display_news news_visible %}
     {{ block.super }}
     <div id='map-shadow'></div>
-    <div id='edit-button' class="action-button">
-        <i class="fa fa-plus" aria-hidden="true"></i></div>
-    {% if itinerary_form %}<div id='routing-button' class="action-button">
-        <i class="fa fa-map-signs" aria-hidden="true"></i></div>{% endif %}
-    <div id='default-message'></div>
+    <div id='edit-button' class="action-button" data-toggle="modal"
+         data-target="#modal-edit">
+        <i class="fa fa-plus" aria-hidden="true"></i>
+    </div>
+
+
+    {% with title="Propose"|translate %}
+    {% bootstrap_modal "modal-edit" title "" "xlarge" 1 %}
+    {% endwith %}
+{% comment %}
+    <div class="modal fade" id="modal-edit" tabindex="-1" role="dialog"
+         aria-labelledby="modal-edit-label" aria-hidden="true">
+      <div class="modal-dialog modal-lg">
+        <div class="modal-content">
+          <div class="modal-header">
+            <h5 class="modal-title" id="modal-edit-label">{% trans "Propose" %}</h5>
+            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+              <span aria-hidden="true">&times;</span>
+            </button>
+          </div>
+          <div class="modal-body">
+          </div>
+          <div class="modal-footer">
+            <button type="button" class="btn btn-secondary" data-dismiss="modal">
+                {% trans "Close" %}
+            </button>
+            <button type="button" class="btn btn-primary">
+                {% trans "Edit" %}
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+{% endcomment %}
+
+    <div class="modal fade" id="modal-default-message" tabindex="-1" role="dialog"
+         aria-labelledby="modal-default-message-label" aria-hidden="true">
+        <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>
+                </div>
+                <div class="modal-body">
+                </div>
+                <div class="modal-footer">
+                    <button type="button" class="btn btn-secondary" data-dismiss="modal">
+                        {% trans "Close" %}
+                    </button>
+                </div>
+            </div>
+        </div>
+    </div>
+
 <script type="text/javascript">
    <!--
    $("#main-map").show();
diff --git a/urls.py b/urls.py
index b442449..0dc96e8 100644
--- a/urls.py
+++ b/urls.py
@@ -45,23 +45,22 @@ urlpatterns += patterns(
     (r'^admin/', include(admin.site.urls)),
     url(r'^(?P<area_name>[a-zA-Z0-9_-]+/)?dyn.css$',
         views.DynCSS.as_view(), name="dyn-css"),
-    url(r'^(?P<area_name>[a-zA-Z0-9_-]+/)?edit/$', 'chimere_saclay.views.edit',
-        name="edit"),
-    url(r'^(?P<area_name>[a-zA-Z0-9_-]+/)?edit/(?P<item_id>\w+)/'
-        r'(?P<submited>\w+)?$',
-        'chimere_saclay.views.edit', name="edit-item"),
-    url(r'^(?P<area_name>[a-zA-Z0-9_-]+/)?edit-event/$',
-        'chimere_saclay.views.edit', name="edit-event",
-        kwargs={'event': True}),
-    url(r'^(?P<area_name>[a-zA-Z0-9_-]+/)?edit-event/(?P<item_id>\w+)/'
-        r'(?P<submited>\w+)?$', 'chimere_saclay.views.edit',
-        kwargs={'event': True}, name="edit-event-item"),
-    url(r'^(?P<area_name>[a-zA-Z0-9_-]+/)?edit-route/$',
-        'chimere_saclay.views.edit_route', name="edit-route"),
-    url(r'^(?P<area_name>[a-zA-Z0-9_-]+/)?edit-route/(?P<item_id>\w+)/'
-        r'(?P<submited>\w+)?$', 'chimere_saclay.views.edit_route',
-        name="edit-route-item"),
     url(r'^(saclay/)?$', 'chimere_saclay.views.index_saclay',
         name="index-saclay"),
+    url(r'^(?P<area_name>[a-zA-Z0-9_-]+/)?edit-marker/'
+        r'(?P<submited>\w+)?$', views.editMarker, name="editmarker"),
+    url(r'^(?P<area_name>[a-zA-Z0-9_-]+/)?edit-marker/(?P<item_id>\w+)/'
+        r'(?P<submited>\w+)?$', views.editMarker, name="editmarker-item"),
+    url(r'^(?P<area_name>[a-zA-Z0-9_-]+/)?edit-route/$', views.editRoute,
+        name="editroute"),
+    url(r'^(?P<area_name>[a-zA-Z0-9_-]+/)?edit-route/(?P<item_id>\w+)/'
+        r'(?P<submited>\w+)?$',
+        views.editRoute, name="editroute-item"),
+    url(r'^(?P<area_name>[a-zA-Z0-9_-]+/)?edit-polygon/$', views.editPolygon,
+        name="editpolygon"),
+    url(r'^(?P<area_name>[a-zA-Z0-9_-]+/)?edit-polygon/(?P<item_id>\w+)/'
+        r'(?P<submited>\w+)?$',
+        views.editPolygon, name="editpolygon-item"),
     url(r'^', include('chimere.urls', namespace="chimere")),
 ) + static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)
+
diff --git a/views.py b/views.py
index 7eb560b..9445de6 100644
--- a/views.py
+++ b/views.py
@@ -28,7 +28,10 @@ from chimere.actions import actions
 from chimere.models import Marker, Route, PropertyModel, SubCategory
 from chimere.version import get_version
 from chimere_saclay.version import get_saclay_version
-from chimere.views import get_edit_page, index, get_area
+from chimere.views import get_edit_page, index, get_area, get_edit_marker, \
+    get_edit_route, get_edit_polygon, edit_page
+from chimere.widgets import MultiSelectWidget, PointChooserWidget, \
+    PolygonChooserWidget, RouteChooserWidget
 
 
 def index_saclay(request, area_name=None, default_area=None, simple=False):
@@ -38,6 +41,8 @@ def index_saclay(request, area_name=None, default_area=None, simple=False):
     response_dct['simple'] = simple
     response_dct['VERSION'] = get_version()
     response_dct['SACLAY_VERSION'] = get_saclay_version()
+    response_dct['extra_css'] = MultiSelectWidget.Media.EXTRA_CSS
+    response_dct['extra_js'] = MultiSelectWidget.Media.EXTRA_JS
     return render_to_response(tpl, response_dct,
                               context_instance=RequestContext(request))
 
@@ -58,85 +63,10 @@ class DynCSS(TemplateView):
             context['categories'].append((cat.pk, color))
         return context
 
+editMarker = edit_page(get_edit_marker, ['M', 'B'], 'marker',
+                       PointChooserWidget, init_widget=False)
+editRoute = edit_page(get_edit_route, ['R', 'B'], 'route',
+                      RouteChooserWidget, init_widget=False)
+editPolygon = edit_page(get_edit_polygon, ['P'], 'polygon',
+                        PolygonChooserWidget, init_widget=False)
 
-get_edit_marker = get_edit_page('edit', Marker, MarkerForm)
-
-
-def edit(request, area_name="", item_id=None, submited=False, event=False):
-    """
-    Edition page
-    """
-    response, values, sub_categories = get_edit_marker(request, area_name,
-                                                       item_id, ['M', 'B'])
-    if response:
-        return response
-    item_id, init_item, response_dct, form, formset_multi, formset_picture = \
-        values
-    # get the "manualy" declared_fields. Ie: properties
-    declared_fields = form.declared_fields.keys()
-    declared_fields = PropertyModel.objects.filter(available=True).all()
-    filtered_properties = PropertyModel.objects.filter(
-        available=True, subcategories__id__isnull=False).all()
-    response_dct.update({
-        'actions': actions,
-        'action_selected': ('contribute', 'edit'),
-        'map_layer': settings.CHIMERE_DEFAULT_MAP_LAYER,
-        'form': form,
-        'formset_multi': formset_multi,
-        'formset_picture': formset_picture,
-        'dated': settings.CHIMERE_DAYS_BEFORE_EVENT,
-        'extra_head': form.media,
-        'marker_id': item_id,
-        'sub_categories': sub_categories,
-        'point_widget': '',
-        'properties': declared_fields,
-        'filtered_properties': filtered_properties,
-        'submited': submited,
-        'event': event,
-    })
-    # manualy populate the custom widget
-    if 'subcategory' in form.data and form.data['subcategory']:
-        response_dct['current_category'] = int(form.data['subcategory'])
-    return render_to_response('chimere/edit.html', response_dct,
-                              context_instance=RequestContext(request))
-
-get_edit_route = get_edit_page('edit-route', Route, RouteForm)
-
-
-def edit_route(request, area_name="", item_id=None, submited=False):
-    """
-    Edition page
-    """
-    response, values, sub_categories = get_edit_route(request, area_name,
-                                                      item_id, ['R', 'B'])
-    if response:
-        return response
-    item_id, init_item, response_dct, form, formset_multi, formset_picture = \
-        values
-    # get the "manualy" declared_fields. Ie: properties
-    declared_fields = form.declared_fields.keys()
-    declared_fields = PropertyModel.objects.filter(available=True).all()
-    filtered_properties = PropertyModel.objects.filter(
-        available=True, subcategories__id__isnull=False).all()
-    response_dct.update({
-        'actions': actions,
-        'action_selected': ('contribute', 'edit'),
-        'map_layer': settings.CHIMERE_DEFAULT_MAP_LAYER,
-        'form': form,
-        'formset_multi': formset_multi,
-        'formset_picture': formset_picture,
-        'dated': settings.CHIMERE_DAYS_BEFORE_EVENT,
-        'extra_head': form.media,
-        'marker_id': item_id,
-        'sub_categories': sub_categories,
-        'point_widget': '',
-        'properties': declared_fields,
-        'filtered_properties': filtered_properties,
-        'submited': submited,
-        'route': True
-    })
-    # manualy populate the custom widget
-    if 'subcategory' in form.data and form.data['subcategory']:
-        response_dct['current_category'] = int(form.data['subcategory'])
-    return render_to_response('chimere/edit.html', response_dct,
-                              context_instance=RequestContext(request))