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 171c42783049bdc973c8a983f4975731413ae94a..336d3eab0b1689b3c04409f05cffa6263bb246a6 100644 (file)
--- 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 2d9c4b46f785cb441ad78aff97a38a9d8bd53d98..b20e4516e8ceda5b698abceae4cc8c460e75d859 100644 (file)
--- 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 26c2351fa30086cde2fd5cdffc94d171633b1578..6d4881547b4d07bba65eecaf661c64462b0aa2c0 100644 (file)
--- 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 7c420b671b679901230be1b041a336e0bec676b4..1aa728ea0f36d3c4f40b38fe667888f74c4877c9 100644 (file)
--- 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 f13e2d48130d6c50396cd7d8c012d8c28c23692b..b9aba25d3fb2bc6e5fd77646cadd7db66861490a 100644 (file)
--- 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 0ec9b388c844eef59d461f4e234a2dc5ba46896d..ae5fdb9d61c80e0c2bb9da13e10f726e957dc0ac 100644 (file)
--- 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 f75cc29fe33f262539b1a12e53726f66cf26f5b4..961842668f25432a3c4905e8df6f8b9a3163fc58 100644 (file)
--- 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 (file)
index 64c006a..0000000
--- 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 b5520aa36e42373ab3fdde9bb693e5c1a0ce56cc..86a30958b97d258b22ab81ebae1e60bb74c82ff4 100644 (file)
--- 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 615bdeedcf25cd36c3826552c9069d18b46c241c..77d4e8458e86bde70ffe9ba292342a9d235325d2 100644 (file)
--- 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 525811ce461587277a54b4be6263533a0eacd615..4b66fa149c12c646953bb41d48c828fadac0be57 100644 (file)
--- a/app/views/site/index.html.erb
+++ b/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">