Simplify sidebar/resize

Float sidebars left/right and use overflow: hidden.
Fixes a bug on Opera where mouse events propagate to
the map.

app/assets/javascripts/application.js

@@ -16,7 +16,6 @@
 //= require menu
 //= require sidebar
 //= require richtext
-//= require resize
 //= require geocoder
 //= require querystring
 

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") {

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 () {

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()) {

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"), {

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));
 
 

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;

app/assets/javascripts/resize.js

@@ -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);
-});

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 {

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 {

app/views/site/index.html.erb

@@ -13,10 +13,10 @@
   </div>
 </noscript>
 
-<div id="map">
+<div id="map-ui">
 </div>
 
-<div id="map-ui">
+<div id="map">
 </div>
 
 <iframe id="linkloader" style="display: none">