X-Git-Url: https://git.openstreetmap.org./rails.git/blobdiff_plain/eebe1f1d3ed885e94725c07d24e0483f603f03da..bab796bc7eb0b44eeb15d6fee567440647bc57e0:/app/assets/javascripts/leaflet.layers.js?ds=sidebyside

diff --git a/app/assets/javascripts/leaflet.layers.js b/app/assets/javascripts/leaflet.layers.js
index bbc84701c..57cd53d4d 100644
--- a/app/assets/javascripts/leaflet.layers.js
+++ b/app/assets/javascripts/leaflet.layers.js
@@ -16,12 +16,19 @@ L.OSM.layers = function(options) {
       .appendTo($container);
 
     var $ui = $('<div>')
-      .attr('class', 'layers-ui')
-      .appendTo(options.uiPane);
-
-    $('<h2>')
-      .text(I18n.t('javascripts.map.layers.header'))
-      .appendTo($ui);
+      .attr('class', 'layers-ui');
+
+    $('<section>')
+       .appendTo($ui)
+       .append(
+          $('<a>')
+            .html('&raquo;')
+            .attr('class', 'close-button')
+            .attr('href', '#')
+            .bind('click', toggle))
+       .append(
+        $('<h2>')
+          .text(I18n.t('javascripts.map.layers.header')));
 
     if (OSM.STATUS != 'api_offline' && OSM.STATUS != 'database_offline') {
       var overlaySection = $('<section>')
@@ -90,19 +97,30 @@ L.OSM.layers = function(options) {
 
       map.whenReady(function() {
         var miniMap = L.map(div[0], {attributionControl: false, zoomControl: false})
-          .setView(map.getCenter(), Math.max(map.getZoom() - 2, 0))
-          .addLayer(new layer.constructor);
+          .addLayer(new layer.constructor());
 
         miniMap.dragging.disable();
         miniMap.touchZoom.disable();
         miniMap.doubleClickZoom.disable();
         miniMap.scrollWheelZoom.disable();
 
-        map.on('moveend', function() {
-          miniMap.setView(map.getCenter(), Math.max(map.getZoom() - 2, 0));
-        });
+        $ui
+          .on('show', shown)
+          .on('hide', hide);
 
-        div.data('map', miniMap);
+        function shown() {
+          miniMap.invalidateSize();
+          setView();
+          map.on('moveend', setView);
+        }
+
+        function hide() {
+          map.off('moveend', setView);
+        }
+
+        function setView() {
+          miniMap.setView(map.getCenter(), Math.max(map.getZoom() - 2, 0));
+        }
       });
 
       var label = $('<label>')
@@ -124,23 +142,12 @@ L.OSM.layers = function(options) {
       });
     });
 
+    options.sidebar.addPane($ui);
+
     function toggle(e) {
       e.stopPropagation();
       e.preventDefault();
-
-      var controlContainer = $('.leaflet-control-container .leaflet-top.leaflet-right');
-
-      if ($ui.is(':visible')) {
-        $(control.options.uiPane).hide();
-        controlContainer.css({paddingRight: '0'});
-      } else {
-        $(control.options.uiPane).show();
-        controlContainer.css({paddingRight: '230px'});
-      }
-
-      $ui.find('.base-layers .leaflet-container').each(function() {
-        $(this).data('map').invalidateSize();
-      });
+      options.sidebar.togglePane($ui);
     }
 
     return $container[0];