Merge pull request #3704 from AntonKhorev/leaflet-control-groups

Group map controls explicitly

diff --combined app/assets/javascripts/index.js
index e5590c9f7ec3cf607f75ff8260f8aa8387075b2f,449c52038e59ffc859f25375d6a9025a68625555..49266f919f374770f0b7463020c0dae762e4e424
--- 1/app/assets/javascripts/index.js
--- 2/app/assets/javascripts/index.js
+++ b/app/assets/javascripts/index.js
@@@ -2,6 -2,7 +2,7 @@@
  //= require leaflet.sidebar
  //= require leaflet.sidebar-pane
  //= require leaflet.locatecontrol/src/L.Control.Locate
+ //= require leaflet.locate
  //= require leaflet.layers
  //= require leaflet.key
  //= require leaflet.note
@@@ -98,62 -99,60 +99,60 @@@ $(document).ready(function () 
      }
    });
  
-   var position = $("html").attr("dir") === "rtl" ? "topleft" : "topright";
- 
-   L.OSM.zoom({ position: position })
+   var sidebar = L.OSM.sidebar("#map-ui")
      .addTo(map);
  
-   var locate = L.control.locate({
-     position: position,
-     icon: "icon geolocate",
-     iconLoading: "icon geolocate",
-     strings: {
-       title: I18n.t("javascripts.map.locate.title"),
-       popup: function (options) {
-         return I18n.t("javascripts.map.locate." + options.unit + "Popup", { count: options.distance });
-       }
-     }
-   }).addTo(map);
+   var position = $("html").attr("dir") === "rtl" ? "topleft" : "topright";
  
-   var locateContainer = locate.getContainer();
+   function addControlGroup(controls) {
+     controls.forEach(function (control) {
+       control.addTo(map);
+     });
  
-   $(locateContainer)
-     .removeClass("leaflet-control-locate leaflet-bar")
-     .addClass("control-locate")
-     .children("a")
-     .attr("href", "#")
-     .removeClass("leaflet-bar-part leaflet-bar-part-single")
-     .addClass("control-button");
+     var firstContainer = controls[0].getContainer();
+     $(firstContainer).find(".control-button").first()
+       .addClass("control-button-first");
  
-   var sidebar = L.OSM.sidebar("#map-ui")
-     .addTo(map);
+     var lastContainer = controls[controls.length - 1].getContainer();
+     $(lastContainer).find(".control-button").last()
+       .addClass("control-button-last");
+   }
  
-   L.OSM.layers({
-     position: position,
-     layers: map.baseLayers,
-     sidebar: sidebar
-   }).addTo(map);
- 
-   L.OSM.key({
-     position: position,
-     sidebar: sidebar
-   }).addTo(map);
- 
-   L.OSM.share({
-     "position": position,
-     "sidebar": sidebar,
-     "short": true
-   }).addTo(map);
- 
-   L.OSM.note({
-     position: position,
-     sidebar: sidebar
-   }).addTo(map);
- 
-   L.OSM.query({
-     position: position,
-     sidebar: sidebar
-   }).addTo(map);
+   addControlGroup([
+     L.OSM.zoom({ position: position }),
+     L.OSM.locate({ position: position })
+   ]);
+ 
+   addControlGroup([
+     L.OSM.layers({
+       position: position,
+       layers: map.baseLayers,
+       sidebar: sidebar
+     }),
+     L.OSM.key({
+       position: position,
+       sidebar: sidebar
+     }),
+     L.OSM.share({
+       "position": position,
+       "sidebar": sidebar,
+       "short": true
+     })
+   ]);
+ 
+   addControlGroup([
+     L.OSM.note({
+       position: position,
+       sidebar: sidebar
+     })
+   ]);
+ 
+   addControlGroup([
+     L.OSM.query({
+       position: position,
+       sidebar: sidebar
+     })
+   ]);
  
    L.control.scale()
      .addTo(map);
@@@ -246,8 -245,8 +245,8 @@@
    });
  
    function remoteEditHandler(bbox, object) {
 -    var loaded = false,
 -        url,
 +    var remoteEditHost = "http://127.0.0.1:8111",
 +        osmHost = location.protocol + "//" + location.host,
          query = {
            left: bbox.getWest() - 0.0001,
            top: bbox.getNorth() + 0.0001,
@@@ -255,31 -254,25 +254,31 @@@
            bottom: bbox.getSouth() - 0.0001
          };
  
 -    url = "http://127.0.0.1:8111/load_and_zoom?";
 -
 -    if (object) query.select = object.type + object.id;
 -
 -    var iframe = $("<iframe>")
 -      .hide()
 -      .appendTo("body")
 -      .attr("src", url + Qs.stringify(query))
 -      .on("load", function () {
 -        $(this).remove();
 -        loaded = true;
 -      });
 +    if (object && object.type !== "note") query.select = object.type + object.id; // can't select notes
 +    sendRemoteEditCommand(remoteEditHost + "/load_and_zoom?" + Qs.stringify(query), function () {
 +      if (object && object.type === "note") {
 +        var noteQuery = { url: osmHost + OSM.apiUrl(object) };
 +        sendRemoteEditCommand(remoteEditHost + "/import?" + Qs.stringify(noteQuery));
 +      }
 +    });
  
 -    setTimeout(function () {
 -      if (!loaded) {
 +    function sendRemoteEditCommand(url, callback) {
 +      var iframe = $("<iframe>");
 +      var timeoutId = setTimeout(function () {
          alert(I18n.t("site.index.remote_failed"));
          iframe.remove();
 -      }
 -    }, 1000);
 +      }, 5000);
 +
 +      iframe
 +        .hide()
 +        .appendTo("body")
 +        .attr("src", url)
 +        .on("load", function () {
 +          clearTimeout(timeoutId);
 +          iframe.remove();
 +          if (callback) callback();
 +        });
 +    }
  
      return false;
    }

diff --combined app/assets/stylesheets/common.scss
index 5ff48dc6c54c226cbe4a4de27bef891858ac23eb,a5afa85b1d80fb9a9051807b5e68180ca1e7d5b5..312f7ca24166e3da48ffa2c3ae017102d6954097
--- 1/app/assets/stylesheets/common.scss
--- 2/app/assets/stylesheets/common.scss
+++ b/app/assets/stylesheets/common.scss
@@@ -358,8 -358,6 +358,6 @@@ body.small-nav 
    width: 40px;
    background-color: #333;
    background-color: rgba(0,0,0,.6);
-   border-radius: 4px 0 0 4px;
-   margin-bottom: 10px;
    outline: none;
  
    &:hover,
@@@ -378,26 -376,18 +376,18 @@@
      background-color: $vibrant-green;
    }
  
-   .icon {
-     margin: 10px;
+   &-first {
+     border-start-start-radius: 4px;
    }
- }
- 
- .leaflet-control .zoomin,
- .control-layers .control-button {
-   margin-bottom: 0px;
-   border-radius: 4px 0 0 0;
- }
  
- .leaflet-control .zoomout,
- .control-key .control-button {
-   margin-bottom: 0;
-   border-radius: 0;
- }
+   &-last {
+     border-end-start-radius: 4px;
+     margin-bottom: 10px;
+   }
  
- .control-locate .control-button,
- .control-share .control-button {
-   border-radius: 0 0 0 4px;
+   .icon {
+     margin: 10px;
+   }
  }
  
  /* Rules for the sidebar and main map area */
@@@ -510,6 -500,14 +500,6 @@@
        border-bottom: 1px solid $grey;
        padding: 10px 20px;
      }
 -
 -    .tooltip {
 -      opacity: 1;
 -      border: 1px solid $grey;
 -      .tooltip-arrow {
 -        border-top-color: $grey;
 -      }
 -    }
    }
  }
  
@@@ -522,13 -520,6 +512,13 @@@
        height: 50%;
      }
  
 +    #map-ui {
 +      z-index: 9999;
 +      width: 100%;
 +      height: 50%;
 +      overflow-y: scroll;
 +    }
 +
      .overlay-sidebar {
        #sidebar {
          position: absolute;
@@@ -537,10 -528,16 +527,10 @@@
          overflow: hidden;
        }
  
 -      #map {
 +      #map, #map-ui {
          height: 100%;
        }
      }
 -
 -    #map-ui {
 -      z-index: 9999;
 -      width: 100%;
 -      overflow-y: scroll;
 -    }
    }
  }
  
@@@ -1091,10 -1088,6 +1081,10 @@@ tr.turn:hover 
  
  [dir=rtl] .header-illustration {
    transform: scaleX(-1);
 +
 +  h1 {
 +    transform: scaleX(-1);
 +  }
  }
  
  #content.maximised {
@@@ -1132,7 -1125,7 +1122,7 @@@
    min-width: 200px;
    p {
      padding: 0 0 5px 0;
 -    margin-top: 0 0 0 60px;
 +    margin: 0 0 0 60px;
      font-size: 12px;
    }
  }
@@@ -1511,6 -1504,15 +1501,6 @@@ dl.dl-inline 
      display: block;
    }
  
 -  .icon-list {
 -    padding-bottom: 20px;
 -    div {
 -      margin-bottom: 10px;
 -      p {
 -        padding-top: 10px;
 -      }
 -    }
 -  }
    .sprite.small {
      width: 50px;
      height: 50px;
@@@ -1594,6 -1596,8 +1584,6 @@@
    .icon {
      width: 30px;
      height: 30px;
 -    margin-right: 10px;
 -    vertical-align: middle;
      background: 40px 40px image-url('about/sprite.png') no-repeat;
  
      &.local {