Tooltips for map controls

EdLoach · Aug 7, 2013 · 54ded37 · 54ded37
1 parent 3324fd8
commit 54ded37
Show file tree

Hide file tree

Showing 8 changed files with 479 additions and 9 deletions.
diff --git a/Vendorfile b/Vendorfile
@@ -3,6 +3,10 @@ folder 'vendor/assets' do
     file 'jquery.throttle-debounce.js', 'https://raw.github.com/cowboy/jquery-throttle-debounce/v1.1/jquery.ba-throttle-debounce.js'
   end
 
+  folder 'bootstrap' do
+    file 'bootstrap.tooltip.js', 'https://raw.github.com/twbs/bootstrap/v2.3.2/js/bootstrap-tooltip.js'
+  end
+
   folder 'leaflet' do
     file 'leaflet.js', 'http://cdn.leafletjs.com/leaflet-0.6.3/leaflet-src.js'
     file 'leaflet.css', 'http://cdn.leafletjs.com/leaflet-0.6.3/leaflet.css'

diff --git a/app/assets/javascripts/application.js b/app/assets/javascripts/application.js
@@ -3,6 +3,7 @@
 //= require jquery.timers
 //= require jquery.cookie
 //= require jquery.throttle-debounce
+//= require bootstrap.tooltip
 //= require augment
 //= require osm
 //= require leaflet

diff --git a/app/assets/javascripts/index.js b/app/assets/javascripts/index.js
@@ -71,8 +71,10 @@ $(document).ready(function () {
   L.OSM.zoom({position: position})
     .addTo(map);
 
-  L.control.locate({position: position})
-    .addTo(map);
+  L.control.locate({
+    position: position,
+    title: I18n.t('javascripts.map.locate.title')
+  }).addTo(map);
 
   var sidebar = L.OSM.sidebar('#map-ui')
     .addTo(map);
@@ -102,6 +104,8 @@ $(document).ready(function () {
   L.control.scale()
     .addTo(map);
 
+  $('.leaflet-control .control-button').tooltip({placement: 'left', container: 'body'});
+
   map.on('moveend layeradd layerremove', updateLocation);
 
   var marker = L.marker([0, 0], {icon: getUserIcon()});

diff --git a/app/assets/javascripts/leaflet.key.js b/app/assets/javascripts/leaflet.key.js
@@ -8,7 +8,6 @@ L.OSM.key = function (options) {
     var button = $('<a>')
       .attr('class', 'control-button')
       .attr('href', '#')
-      .attr('title', I18n.t('javascripts.key.tooltip'))
       .html('<span class="icon key"></span>')
       .on('click', toggle)
       .appendTo($container);
@@ -61,8 +60,12 @@ L.OSM.key = function (options) {
     }
 
     function updateButton() {
-      var layer = map.getMapBaseLayerId();
-      button.toggleClass('disabled', layer !== 'mapnik');
+      var disabled = map.getMapBaseLayerId() !== 'mapnik'
+      button
+        .toggleClass('disabled', disabled)
+        .attr('data-original-title', I18n.t(disabled ?
+          'javascripts.key.tooltip_disabled' :
+          'javascripts.key.tooltip'))
     }
 
     function update() {

diff --git a/app/assets/javascripts/leaflet.note.js b/app/assets/javascripts/leaflet.note.js
@@ -5,14 +5,25 @@ L.OSM.note = function (options) {
     var $container = $('<div>')
       .attr('class', 'control-note');
 
-    $('<a>')
-      .attr('id', 'createnoteanchor')
-      .attr('class', 'control-button geolink')
-      .attr('data-minzoom', 12)
+    var link = $('<a>')
+      .attr('class', 'control-button')
       .attr('href', '#')
       .html('<span class="icon note"></span>')
       .appendTo($container);
 
+    map.on('zoomend', update);
+
+    update();
+
+    function update() {
+      var disabled = map.getZoom() < 12;
+      link
+        .toggleClass('disabled', disabled)
+        .attr('data-original-title', I18n.t(disabled ?
+          'javascripts.site.createnote_disabled_tooltip' :
+          'javascripts.site.createnote_tooltip'));
+    }
+
     return $container[0];
   };
 

diff --git a/app/assets/stylesheets/common.css.scss b/app/assets/stylesheets/common.css.scss
@@ -525,6 +525,89 @@ a.donate {
   left: 15px;
 }
 
+/* Rules for bootstrap tooltips */
+
+.tooltip {
+    position: absolute;
+    display: none;
+    color:#333;
+    text-align: left;
+    font-size: 12px;
+}
+
+.tooltip.in {
+    opacity: 0.8;
+    z-index: 1030;
+    height: auto;
+    display: block;
+}
+
+.tooltip.top {
+    margin-top: -20px;
+    text-align: center;
+}
+
+.tooltip.right {
+    margin-left: 20px;
+}
+
+.tooltip.bottom {
+    margin-top: 20px;
+    text-align: center;
+}
+
+.tooltip.left {
+    margin-left: -20px;
+    text-align: right;
+}
+
+.tooltip-inner {
+    display: inline-block;
+    padding: 10px;
+    font-weight: normal;
+    background-color: white;
+}
+
+.tooltip-arrow {
+    position: absolute;
+    width: 0;
+    height: 0;
+    border-color: transparent;
+    border-style: solid;
+}
+
+.tooltip.top .tooltip-arrow {
+    bottom: -5px;
+    left: 50%;
+    margin-left: -5px;
+    border-top-color: white;
+    border-width: 5px 5px 0;
+}
+
+.tooltip.right .tooltip-arrow {
+    top: 50%;
+    left: -5px;
+    margin-top: -5px;
+    border-right-color: white;
+    border-width: 5px 5px 5px 0;
+}
+
+.tooltip.left .tooltip-arrow {
+    top: 50%;
+    right: -5px;
+    margin-top: -5px;
+    border-left-color: white;
+    border-width: 5px 0 5px 5px;
+}
+
+.tooltip.bottom .tooltip-arrow {
+    top: -5px;
+    left: 50%;
+    margin-left: -5px;
+    border-bottom-color: white;
+    border-width: 0 5px 5px;
+}
+
 /* Rules for Leaflet maps */
 
 .leaflet-control .control-button {

diff --git a/config/locales/en.yml b/config/locales/en.yml
@@ -2068,10 +2068,13 @@ en:
     key:
       title: "Map Key"
       tooltip: "Map Key"
+      tooltip_disabled: "Map Key available only for Standard layer"
     map:
       zoom:
         in: Zoom In
         out: Zoom Out
+      locate:
+        title: Show My Location
       base:
         standard: Standard
         cycle_map: Cycle Map