new concept for modals in editor

src/c3nav/editor/static/editor/css/editor.css

@@ -118,9 +118,14 @@ legend {
     right: 8px;
     top: 8px;
 }
-[data-levels], [data-sublevels], #sidebar .nav, [data-back-to-map] {
+[data-levels], [data-sublevels], #sidebar .nav, [data-modal-close] {
     display:none;
 }
+[data-modal-close] {
+    font-size: 20px;
+    line-height: 18px;
+    padding: 5px 8px 4px;
+}
 form button.invisiblesubmit {
     overflow: visible;
     height: 0;

src/c3nav/editor/static/editor/js/editor.js

@@ -80,7 +80,7 @@ editor = {
     },
 
     // sidebar
-    _last_map_path: null,
+    _last_non_modal_path: null,
     get_location_path: function () {
         return window.location.pathname + window.location.search;
     },
@@ -150,9 +150,19 @@ editor = {
 
         content.find('[data-toggle="tooltip"]').tooltip();
 
+        var modal_close = content.find('[data-modal-close]');
+        var is_modal = (modal_close.length > 0);
+        if (!is_modal) {
+            editor._last_non_modal_path = editor.get_location_path();
+        } else if (editor._last_non_modal_path !== null) {
+            modal_close.attr('href', editor._last_non_modal_path).show();
+        } else {
+            modal_close.remove();
+        }
+
         var geometry_url = content.find('[data-geometry-url]');
+        var $body = $('body');
         if (geometry_url.length) {
-            editor._last_map_path = editor.get_location_path();
             geometry_url = geometry_url.attr('data-geometry-url');
             var highlight_type = content.find('[data-list]');
             var editing_id = content.find('[data-editing]');
@@ -164,7 +174,7 @@ editor = {
                 (highlight_type.length ? highlight_type.attr('data-list') : null),
                 (editing_id.length ? editing_id.attr('data-editing') : null)
             );
-            $('body').addClass('map-enabled');
+            $body.addClass('map-enabled');
             editor._level_control.clearLevels();
             editor._sublevel_control.clearLevels();
 
@@ -177,14 +187,9 @@ editor = {
                 bottom: offset_parent.height()-level_control_offset.top-editor._level_control_container.height()-parseInt(editor._level_control_container.css('margin-bottom')),
                 right: offset_parent.width()-level_control_offset.left
             });
-        } else if (content.find('[data-keep-geometry]').length) {
-            if (editor._last_map_path === null) $('[data-back-to-map]').remove()
-            $('a[data-back-to-map]').attr('href', editor._last_map_path).show();
-            $('body').removeClass('show-map');
-            editor._level_control.hide();
-            editor._sublevel_control.hide();
         } else {
-            $('body').removeClass('map-enabled').removeClass('show-map');
+            $body.removeClass('show-map');
+            if (!is_modal) $body.removeClass('map-enabled');
             editor._level_control.hide();
             editor._sublevel_control.hide();
         }

src/c3nav/editor/templates/editor/changeset.html

@@ -1,10 +1,10 @@
 {% load bootstrap3 %}
 {% load i18n %}
 
-<form method="post" action="{{ request.path }}" data-keep-geometry>
-{% csrf_token %}
-<p><a data-back-to-map>« {% trans 'back to map' %}</a></p>
+{% include 'editor/fragment_modal_close.html' %}
 <h3>{{ changeset.title }}</h3>
+<form method="post" action="{{ request.path }}">
+{% csrf_token %}
 <p class="text-muted">{{ desc }}{% if changeset.author %} {{ changeset.author.username }}{% endif %}</p>
 <p><em>No description</em></p>
 

src/c3nav/editor/templates/editor/changeset_history.html

@@ -1,7 +1,8 @@
 {% load bootstrap3 %}
 {% load i18n %}
 
-<h3 data-keep-geometry>{{ changeset.title }}</h3>
+{% include 'editor/fragment_modal_close.html' %}
+<h3>{{ changeset.title }}</h3>
 <h4>{% trans 'Changeset History' %}</h4>
 <p><a href="{% url 'editor.changesets.detail' pk=changeset.pk %}">« {% trans 'back to changeset' %}</a></p>
 

src/c3nav/editor/templates/editor/fragment_modal_close.html

@@ -0,0 +1,5 @@
+{% load i18n %}
+
+<a class="btn btn-default btn-sm pull-right" data-modal-close>
+    &times; <span class="sr-only">{% trans 'close dialog' %}</span>
+</a>

src/c3nav/editor/templates/editor/login.html

@@ -1,11 +1,10 @@
 {% load bootstrap3 %}
 {% load i18n %}
 
+{% include 'editor/fragment_modal_close.html' %}
 <h3>{% trans 'Log in' %}</h3>
 
-<p><a data-back-to-map>« {% trans 'back to map' %}</a></p>
-
-<form method="post" action="{{ request.path_info }}?{{ request.GET.urlencode }}" data-keep-geometry>
+<form method="post" action="{{ request.path_info }}?{{ request.GET.urlencode }}">
     {% csrf_token %}
     {% bootstrap_form form %}
     <div class="form-group">