From 276eee5adfec9123693daffb2f73e5a62169cd35 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Laura=20Kl=C3=BCnder?= Date: Thu, 7 Dec 2017 00:52:13 +0100 Subject: [PATCH] make c3nav embeddable using iframes --- src/c3nav/site/static/site/css/c3nav.css | 37 +++- src/c3nav/site/static/site/js/c3nav.js | 26 ++- src/c3nav/site/templates/site/map.html | 204 ++++++++++++----------- src/c3nav/site/urls.py | 11 +- src/c3nav/site/views.py | 7 +- 5 files changed, 167 insertions(+), 118 deletions(-) diff --git a/src/c3nav/site/static/site/css/c3nav.css b/src/c3nav/site/static/site/css/c3nav.css index 998f4f73..ba814b4a 100644 --- a/src/c3nav/site/static/site/css/c3nav.css +++ b/src/c3nav/site/static/site/css/c3nav.css @@ -96,6 +96,9 @@ main.map { } #search { + width: 0; +} +#sidebar #search { z-index: 4; min-height: 54px; min-width: 54px; @@ -103,7 +106,7 @@ main.map { transition: width 150ms; flex-shrink: 0; } -#search.loading { +#sidebar #search.loading { /*noinspection CssUnknownTarget*/ background: url('../../img/loader.gif') no-repeat 4px 3px; width: 5%; @@ -116,6 +119,26 @@ main.map { background: url('../../img/loader.gif'); } +#embed-logo { + font-size: 3rem; + line-height: 100%; + font-weight: 300; + z-index: 2; + position: absolute; + color: #606c76; + top: 10px; + left: 10px; + opacity: 0.4; + letter-spacing: -.1rem; +} +#embed-logo:hover { + opacity: 1; + text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.3), + 1px -1px 1px rgba(255, 255, 255, 0.3), + -1px 1px 1px rgba(255, 255, 255, 0.3), + -1px -1px 1px rgba(255, 255, 255, 0.3); +} + main:not([data-view^=route]) #origin-input, #search.loading #destination-input { margin-bottom: -55px; @@ -475,13 +498,13 @@ main:not([data-view=route-result]) #route-summary { } @media not all and (min-height: 700px) and (min-width: 1100px) { - main[data-view=route-result] #search:not(.focused) .locationinput { + main[data-view=route-result] #sidebar #search:not(.focused) .locationinput { margin-bottom: -21px; } - main[data-view=route-result] #search:not(.focused) .locationinput input { + main[data-view=route-result] #sidebar #search:not(.focused) .locationinput input { padding-bottom: 28px; } - main[data-view=route-result] #search:not(.focused) .locationinput small { + main[data-view=route-result] #sidebar #search:not(.focused) .locationinput small { opacity: 0; -webkit-user-select: none; -moz-user-select: none; @@ -489,16 +512,16 @@ main:not([data-view=route-result]) #route-summary { user-select: none; pointer-events: none; } - main[data-view=route-result] #search:not(.focused) .locationinput .icon { + main[data-view=route-result] #sidebar #search:not(.focused) .locationinput .icon { transform: scale(0.6); top: -1px; } - main[data-view=route-result] #search:not(.focused) .locationinput button { + main[data-view=route-result] #sidebar #search:not(.focused) .locationinput button { transform: scale(0.6); top: -5px; right: -5px; } - main[data-view=route-result] #search:not(.focused) #route-dots { + main[data-view=route-result] #sidebar #search:not(.focused) #route-dots { transform: scale(0.7); top: 32px; } diff --git a/src/c3nav/site/static/site/js/c3nav.js b/src/c3nav/site/static/site/js/c3nav.js index 2d6a18b1..85bcd676 100644 --- a/src/c3nav/site/static/site/js/c3nav.js +++ b/src/c3nav/site/static/site/js/c3nav.js @@ -47,7 +47,10 @@ c3nav = { $('.locationinput').data('location', null); - var state = JSON.parse($('main').attr('data-state')); + var $main = $('main'), + state = JSON.parse($main.attr('data-state')); + c3nav.embed = $main.is('[data-embed]'); + history.replaceState(state, window.location.path); c3nav.load_state(state, true); c3nav.update_map_locations(); @@ -343,16 +346,16 @@ c3nav = { if (a.center[0] !== b.center[0] || a.center[1] !== b.center[1]) return false; return true; }, - _build_state_url: function (state) { - var url; + _build_state_url: function (state, embed) { + var url = embed ? '/embed' : ''; if (state.routing) { if (state.origin) { - url = (state.destination) ? '/r/'+state.origin.slug+'/'+state.destination.slug+'/' : '/o/'+state.origin.slug+'/'; + url += (state.destination) ? '/r/'+state.origin.slug+'/'+state.destination.slug+'/' : '/o/'+state.origin.slug+'/'; } else { - url = (state.destination) ? '/d/'+state.destination.slug+'/' : '/r/'; + url += (state.destination) ? '/d/'+state.destination.slug+'/' : '/r/'; } } else { - url = state.destination?('/l/'+state.destination.slug+'/'):'/'; + url += state.destination?('/l/'+state.destination.slug+'/'):'/'; } if (state.details && (url.startsWith('/l/') || url.startsWith('/r/'))) { url += 'details/' @@ -368,7 +371,12 @@ c3nav = { if (!replace && c3nav._equal_states(old_state, state)) return; - var url = c3nav._build_state_url(state); + var url = c3nav._build_state_url(state, c3nav.embed), + embed_logo = $('#embed-logo'); + + if (embed_logo.length) { + embed_logo.attr('href', c3nav._build_state_url(state)); + } c3nav.state = state; if (replace || (!state.sidebar && !old_state.sidebar)) { @@ -859,8 +867,8 @@ c3nav = { var $search = $('#search'), $main = $('main'), padBesideSidebar = ($main.width() > 1000 && ($main.height() < 250 || c3nav.state.details)), - left = padBesideSidebar ? $search.width()+10 : 0, - top = padBesideSidebar ? 10 : $search.height()+10; + left = padBesideSidebar ? ($search.width() || 0)+10 : 0, + top = padBesideSidebar ? 10 : ($search.height() || 0)+10; options[topleft || 'paddingTopLeft'] = L.point(left+13, top+41); options[bottomright || 'paddingBottomRight'] = L.point(50, 20); return options; diff --git a/src/c3nav/site/templates/site/map.html b/src/c3nav/site/templates/site/map.html index 44f13288..3ec09674 100644 --- a/src/c3nav/site/templates/site/map.html +++ b/src/c3nav/site/templates/site/map.html @@ -3,7 +3,7 @@ {% load i18n %} - + c3nav @@ -15,110 +15,120 @@ {% endcompress %} - - - -
-

c3nav

- - {{ user_data.title }} - {% if user_data.subtitle %}{{ user_data.subtitle }}{% endif %} - -
-
- - + + + {% if not embed %} +
+

c3nav

+ + {{ user_data.title }} + {% if user_data.subtitle %}{{ user_data.subtitle }}{% endif %} + +
+ {% endif %} +
-
-