add modal base and make the share button work

src/c3nav/site/static/site/css/c3nav.css

@@ -526,3 +526,68 @@ main:not([data-view=route-result]) #route-summary {
     font-weight: bold;
     background-color: #eeeeee;
 }
+
+
+#modal {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100vw;
+    height: 100vh;
+    background-color: rgba(0, 0, 0, 0.3);
+    z-index: 2;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    opacity: 0;
+    transition: opacity 300ms;
+    pointer-events: none;
+}
+#modal.show {
+    opacity: 1;
+    pointer-events: auto;
+}
+#modal-content {
+    box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);
+    border-radius: 2px;
+    background-color: #ffffff;
+    width: 380px;
+    min-height: 150px;
+    max-height: 95vh;
+    max-width: 95vw;
+    padding: 20px;
+    overflow: auto;
+    position: relative;
+}
+#modal.loading #modal-content {
+    /*noinspection CssUnknownTarget*/
+    background: #ffffff url('../../img/loader.gif') no-repeat center;
+}
+#close-modal {
+    position: absolute;
+    top: 8px;
+    right: 8px;
+    font-size: 30px;
+    color: #b2b2b2;
+}
+#close-modal:hover {
+    color: #a2a2a2;
+}
+
+.share-ui {
+    text-align: center;
+}
+.share-ui h3 {
+    text-align: left;
+    margin: 0;
+}
+.share-ui img {
+    width: 100%;
+    max-width: 50vh;
+}
+.share-ui input {
+    margin: 0;
+}
+main > .share-ui {
+    display: none;
+}

src/c3nav/site/static/site/js/c3nav.js

@@ -68,10 +68,13 @@ c3nav = {
         $location_buttons.find('.details').on('click', c3nav._location_buttons_details_click);
         $location_buttons.find('.route').on('click', c3nav._location_buttons_route_click);
 
+        $('#location-buttons, #route-result-buttons').find('.share').on('click', c3nav._buttons_share_click);
         $('#route-search-buttons, #route-result-buttons').find('.swap').on('click', c3nav._route_buttons_swap_click);
         $('#route-search-buttons').find('.close').on('click', c3nav._route_buttons_close_click);
         $('#map').on('click', '.location-popup .button-clear', c3nav._popup_button_click);
 
+        $('#modal').on('click', c3nav._modal_click);
+
         window.onpopstate = c3nav._onpopstate;
     },
     get_csrf_token: function() {
@@ -332,6 +335,7 @@ c3nav = {
         return new_coords
     },
     _equal_states: function (a, b) {
+        if (a.modal !== b.modal) return false;
         if (a.routing !== b.routing || a.details !== b.details) return false;
         if ((a.origin && a.origin.id) !== (b.origin && b.origin.id)) return false;
         if ((a.destination && a.destination.id) !== (b.destination && b.destination.id)) return false;
@@ -339,12 +343,7 @@ c3nav = {
         if (a.center[0] !== b.center[0] || a.center[1] !== b.center[1]) return false;
         return true;
     },
-    _push_state: function (state, replace) {
-        state = $.extend({}, c3nav.state, state);
-        var old_state = c3nav.state;
-
-        if (!replace && c3nav._equal_states(old_state, state)) return;
-
+    _build_state_url: function (state) {
         var url;
         if (state.routing) {
             if (state.origin) {
@@ -361,6 +360,15 @@ c3nav = {
         if (state.center) {
             url += '@'+String(c3nav.level_labels_by_id[state.level])+','+String(state.center[0])+','+String(state.center[1])+','+String(state.zoom);
         }
+        return url
+    },
+    _push_state: function (state, replace) {
+        state = $.extend({}, c3nav.state, state);
+        var old_state = c3nav.state;
+
+        if (!replace && c3nav._equal_states(old_state, state)) return;
+
+        var url = c3nav._build_state_url(state);
 
         c3nav.state = state;
         if (replace || (!state.sidebar && !old_state.sidebar)) {
@@ -376,6 +384,12 @@ c3nav = {
         c3nav.load_state(e.state);
     },
     load_state: function (state, nofly) {
+        if (state.modal) {
+            history.back();
+            return;
+        }
+        state.modal = false;
+        $('#modal').removeClass('show');
         c3nav._locationinput_set($('#origin-input'), state.origin);
         c3nav._locationinput_set($('#destination-input'), state.destination);
         c3nav._sidebar_state_updated(state, state.center);
@@ -437,6 +451,24 @@ c3nav = {
         }
     },
 
+    // share logic
+    _buttons_share_click: function () {
+        c3nav.open_modal($('main > .share-ui')[0].outerHTML);
+        c3nav._update_share_ui();
+    },
+    _update_share_ui: function(with_position) {
+        var $share = $('#modal .share-ui'),
+            state = $.extend({}, c3nav.state),
+            url;
+        if (!with_position) {
+            state.center = null;
+        }
+        url = c3nav._build_state_url(state);
+        $share.find('img').attr('src', '/qr'+url);
+        $share.find('input').val(window.location.protocol+'://'+window.location.host+url)[0].select();
+        console.log(url);
+    },
+
     // location inputs
     locations: [],
     locations_by_id: {},
@@ -657,6 +689,23 @@ c3nav = {
         }
     },
 
+    open_modal: function (content) {
+        var $modal = $('#modal');
+        $modal.toggleClass('loading', !content)
+            .find('#modal-content')
+            .html('<button class="button-clear material-icons" id="close-modal">clear</button>')
+            .append(content || '');
+        if (!$modal.is('.show')) {
+            c3nav._push_state({modal: true, sidebar: true});
+            $modal.addClass('show');
+        }
+    },
+    _modal_click: function(e) {
+        if (e.target.id === 'modal' || e.target.id === 'close-modal') {
+            history.back();
+        }
+    },
+
     // map
     init_map: function () {
         var $map = $('#map'), i;

src/c3nav/site/templates/site/map.html

@@ -31,6 +31,11 @@
             <button class="button-clear as-destination">{% trans 'Route to here' %}</button>
             <button class="button-clear as-origin">{% trans 'Route from here' %}</button>
         </section>
+        <section class="share-ui">
+            <h3>Share</h3>
+            <img src="">
+            <input type="text" readonly>
+        </section>
         <section id="map" data-bounds="{{ bounds }}" data-levels="{{ levels }}"{% if tile_cache_server %} data-tile-server="{{ tile_cache_server }}"{% endif %}></section>
         <section id="sidebar">
             <section id="search" class="loading">
@@ -105,6 +110,11 @@
             </div>
         </section>
     </main>
+    <div id="modal" class="loading">
+        <div id="modal-content">
+
+        </div>
+    </div>
     {% compress js %}
         <script type="text/javascript" src="{% static 'jquery/jquery.js' %}"></script>
         <script type="text/javascript" src="{% static 'leaflet/leaflet.js' %}"></script>

src/c3nav/site/views.py

@@ -98,7 +98,7 @@ def qr_code(request, path):
         version=1,
         error_correction=qrcode.constants.ERROR_CORRECT_L,
         box_size=10,
-        border=4,
+        border=2,
     )
     qr.add_data(data)
     qr.make(fit=True)