From: John Firebaugh Date: Fri, 12 Jul 2013 19:17:51 +0000 (-0700) Subject: Simplify sidebar/resize X-Git-Tag: live~4882^2~7 X-Git-Url: https://git.openstreetmap.org/rails.git/commitdiff_plain/aff23d4b4bc9e9fecd5c1caa7e4d38087e002396?hp=d9f3ceed958a1d39b17bc4719b59ef8a226ace70 Simplify sidebar/resize Float sidebars left/right and use overflow: hidden. Fixes a bug on Opera where mouse events propagate to the map. --- diff --git a/app/assets/javascripts/application.js b/app/assets/javascripts/application.js index 171c42783..336d3eab0 100644 --- a/app/assets/javascripts/application.js +++ b/app/assets/javascripts/application.js @@ -16,7 +16,6 @@ //= require menu //= require sidebar //= require richtext -//= require resize //= require geocoder //= require querystring diff --git a/app/assets/javascripts/browse.js b/app/assets/javascripts/browse.js index 2d9c4b46f..b20e4516e 100644 --- a/app/assets/javascripts/browse.js +++ b/app/assets/javascripts/browse.js @@ -8,10 +8,6 @@ $(document).ready(function () { L.OSM.zoom() .addTo(map); - $("#small_map").on("resized", function () { - map.invalidateSize(); - }); - var params = $("#small_map").data(); var object, bbox; if (params.type == "changeset") { diff --git a/app/assets/javascripts/changeset.js b/app/assets/javascripts/changeset.js index 26c2351fa..6d4881547 100644 --- a/app/assets/javascripts/changeset.js +++ b/app/assets/javascripts/changeset.js @@ -9,10 +9,6 @@ $(document).ready(function () { L.OSM.zoom() .addTo(map); - $("#changeset_list_map").on("resized", function () { - map.invalidateSize(); - }); - var group = L.featureGroup().addTo(map); $("[data-changeset]").each(function () { diff --git a/app/assets/javascripts/diary_entry.js b/app/assets/javascripts/diary_entry.js index 7c420b671..1aa728ea0 100644 --- a/app/assets/javascripts/diary_entry.js +++ b/app/assets/javascripts/diary_entry.js @@ -30,10 +30,6 @@ $(document).ready(function () { L.OSM.zoom() .addTo(map); - $("#map").on("resized", function () { - map.invalidateSize(); - }); - map.setView(centre, params.zoom); if ($("#latitude").val() && $("#longitude").val()) { diff --git a/app/assets/javascripts/edit.js b/app/assets/javascripts/edit.js index f13e2d481..b9aba25d3 100644 --- a/app/assets/javascripts/edit.js +++ b/app/assets/javascripts/edit.js @@ -1,19 +1,12 @@ function maximiseMap() { $("#content").addClass("maximised"); - - handleResize(); } function minimiseMap() { $("#content").removeClass("maximised"); - - handleResize(); } $(document).ready(function () { - $(window).resize(handleResize); - handleResize(); - $("#search_form").submit(function () { $("#sidebar_title").html(I18n.t('site.sidebar.search_results')); $("#sidebar_content").load($(this).attr("action"), { diff --git a/app/assets/javascripts/index.js b/app/assets/javascripts/index.js index 0ec9b388c..ae5fdb9d6 100644 --- a/app/assets/javascripts/index.js +++ b/app/assets/javascripts/index.js @@ -51,7 +51,7 @@ $(document).ready(function () { map.noteLayer = new L.LayerGroup({code: 'N'}); map.dataLayer = new L.OSM.DataLayer(null); - $("#map").on("resized", function () { + $("#sidebar").on("opened closed", function () { map.invalidateSize(); }); @@ -61,7 +61,8 @@ $(document).ready(function () { L.control.locate({position: 'topright'}) .addTo(map); - var sidebar = L.OSM.sidebar('#map-ui'); + var sidebar = L.OSM.sidebar('#map-ui') + .addTo(map); L.OSM.layers({ position: 'topright', @@ -135,8 +136,6 @@ $(document).ready(function () { addObjectToMap(params.object, map, { zoom: params.object_zoom }); } - handleResize(); - $("body").on("click", "a.set_position", setPositionLink(map)); $("a[data-editor=remote]").click(function(e) { @@ -148,8 +147,6 @@ $(document).ready(function () { remoteEditHandler(map.getBounds()); } - $(window).resize(handleResize); - $("#search_form").submit(submitSearch(map)); diff --git a/app/assets/javascripts/leaflet.sidebar.js b/app/assets/javascripts/leaflet.sidebar.js index f75cc29fe..961842668 100644 --- a/app/assets/javascripts/leaflet.sidebar.js +++ b/app/assets/javascripts/leaflet.sidebar.js @@ -1,7 +1,13 @@ L.OSM.sidebar = function(selector) { var control = {}, sidebar = $(selector), - current = $(); + current = $(), + map; + + control.addTo = function (_) { + map = _; + return control; + }; control.addPane = function(pane) { pane @@ -10,25 +16,23 @@ L.OSM.sidebar = function(selector) { }; control.togglePane = function(pane) { - var controlContainer = $('.leaflet-control-container .leaflet-top.leaflet-right'); - current .hide() .trigger('hide'); if (current === pane) { $(sidebar).hide(); - controlContainer.css({paddingRight: '0'}); current = $(); } else { $(sidebar).show(); - controlContainer.css({paddingRight: '250px'}); current = pane; } current .show() .trigger('show'); + + map.invalidateSize({pan: false, animate: false}); }; return control; diff --git a/app/assets/javascripts/resize.js b/app/assets/javascripts/resize.js deleted file mode 100644 index 64c006a0b..000000000 --- a/app/assets/javascripts/resize.js +++ /dev/null @@ -1,53 +0,0 @@ -function resizeContent() { - var content = $("#content"); - var leftMargin = parseInt(content.css("left")); - var rightMargin = parseInt(content.css("right")); - var bottomMargin = parseInt(content.css("bottom")); - - if ($("html").attr("dir") == "ltr") { - content.width($(window).width() - content.prop("offsetLeft") - rightMargin); - } else { - content.width($(window).width() - content.prop("offsetRight") - leftMargin); - } - - content.height($(window).height() - content.prop("offsetTop") - bottomMargin); -} - -function resizeMap() { - var content_width = $("#content").width(); - var content_height = $("#content").height(); - var sidebar_width = 0; - var left_border = parseFloat($("#map").css("border-left-width")); - var right_border = parseFloat($("#map").css("border-right-width")); - var top_border = parseFloat($("#map").css("border-top-width")); - var bottom_border = parseFloat($("#map").css("border-bottom-width")); - - $("#sidebar:visible").each(function () { - sidebar_width = sidebar_width + $(this).outerWidth(true); - }); - - if ($("html").attr("dir") == "ltr") { - $("#map").css("left", (sidebar_width) + "px"); - } else { - $("#map").css("right", (sidebar_width) + "px"); - } - - $("#map").width(content_width - sidebar_width - left_border - right_border); - $("#map").height(content_height - top_border - bottom_border); - $("#map").trigger("resized"); -} - -function handleResize() { - var brokenContentSize = $("#content").prop("offsetWidth") == 0; - - if (brokenContentSize) { - resizeContent(); - } - - resizeMap(); -} - -$(document).ready(function () { - $("#sidebar").on("opened", resizeMap); - $("#sidebar").on("closed", resizeMap); -}); diff --git a/app/assets/javascripts/user.js b/app/assets/javascripts/user.js index b5520aa36..86a30958b 100644 --- a/app/assets/javascripts/user.js +++ b/app/assets/javascripts/user.js @@ -7,10 +7,6 @@ $(document).ready(function () { L.OSM.zoom() .addTo(map); - $("#map").on("resized", function () { - map.invalidateSize(); - }); - if (OSM.home) { map.setView([OSM.home.lat, OSM.home.lon], 12); } else { diff --git a/app/assets/stylesheets/common.css.scss b/app/assets/stylesheets/common.css.scss index 615bdeedc..77d4e8458 100644 --- a/app/assets/stylesheets/common.css.scss +++ b/app/assets/stylesheets/common.css.scss @@ -568,18 +568,25 @@ a.donate { margin: 10px; } +/* Rules for the home page */ + +.site-export #map, +.site-index #map, +.site-edit #map { + height: 100%; + overflow: hidden; +} + #map-ui { - position: absolute; display: none; - right: 0; + position: relative; + float: right; width: 250px; height: 100%; background: white; border-left: 1px solid #CCC; overflow: auto; -} -#map-ui { section { border-bottom: 1px solid #DDD; padding: 15px; @@ -699,11 +706,9 @@ a.donate { #sidebar { display: none; - position: absolute; + position: relative; + float: left; overflow: auto; - top: 0px; - bottom: 0px; - left: 0px; border-right: 1px solid $keyline; width: 33.3333%; ul { @@ -961,28 +966,6 @@ ul.results-list li { border-bottom: 1px solid #ccc; } margin-bottom: $lineheight; } -/* Rules for the home page */ - -.site-export #map, -.site-index #map { - position: absolute; - top: 0px; - bottom: 0px; - left: 0px; - right: 0px; -} - -/* Rules for the edit page */ - -.site-edit #map { - position: absolute; - top: 0px; - bottom: 0px; - left: 0px; - right: 0px; - overflow: hidden; -} - /* Rules for the changeset list shown by the history tab etc */ #changeset_list { diff --git a/app/views/site/index.html.erb b/app/views/site/index.html.erb index 525811ce4..4b66fa149 100644 --- a/app/views/site/index.html.erb +++ b/app/views/site/index.html.erb @@ -13,10 +13,10 @@ -
+
-
+