formatUnits/GeoInfo: prepare changing unit formats and instant updates

lang/en.json

@@ -18,6 +18,8 @@
     "facilities": "Facilities",
     "filter:title": "Title",
     "filter:type": "Type",
+    "formatUnits:coordFormat": "Coordinate format",
+    "formatUnits:coordSpacer": "Coordinate spacer",
     "form_element:please_select": "-- please select --",
     "geoinfo:nw-corner": "Northwestern corner",
     "geoinfo:center": "Center",

src/GeoInfo.js

@@ -48,28 +48,64 @@ register_hook('init', function () {
     updateTabHeader(tab.header)
   }
 
+  let lastMouseEvent
   function updateMouse (e) {
-    domMouse.innerHTML = '<span title="' + lang('geoinfo:mouse') + '"><i class="fas fa-mouse-pointer icon"></i>' + formatUnits.coord(e.latlng.wrap()) + '</span>'
+    if (!e) {
+      e = lastMouseEvent
+    }
+
+    if (e) {
+      domMouse.innerHTML = '<span title="' + lang('geoinfo:mouse') + '"><i class="fas fa-mouse-pointer icon"></i>' + formatUnits.coord(e.latlng.wrap()) + '</span>'
+    } else {
+      removeMouse()
+    }
+
+    lastMouseEvent = e
   }
 
   function removeMouse () {
+    lastMouseEvent = null
     domMouse.innerHTML = ''
   }
 
+  let lastLocation
   function updateLocation (e) {
-    domLocation.innerHTML = '<span title="' + lang('geoinfo:location') + '"><i class="fas fa-map-marker-alt"></i> ' + formatUnits.coord(e.latlng.wrap()) + '</span>'
+    if (!e) {
+      lastLocation = e
+    }
+
+    if (e) {
+      domLocation.innerHTML = '<span title="' + lang('geoinfo:location') + '"><i class="fas fa-map-marker-alt"></i> ' + formatUnits.coord(e.latlng.wrap()) + '</span>'
+    }
   }
 
   global.map.on('move', updateMapView)
   global.map.on('mousemove', updateMouse)
   global.map.on('mouseout', removeMouse)
   global.map.on('locationfound', updateLocation)
+  register_hook('format-units-refresh', updateMapView)
+  register_hook('format-units-refresh', updateMouse)
+  register_hook('format-units-refresh', removeMouse)
+  register_hook('format-units-refresh', updateLocation)
 })
 
+let showDetailsCurrent
 register_hook('show-details', (data, category, dom, callback) => {
   let div = document.createElement('div')
   dom.appendChild(div)
 
+  showDetailsCurrent = [ data, category, div ]
+  geoInfoShowDetails.apply(this, showDetailsCurrent)
+  callback()
+})
+register_hook('format-units-refresh', () => {
+  if (showDetailsCurrent) {
+    showDetailsCurrent[2].innerHTML = ''
+    geoInfoShowDetails.apply(this, showDetailsCurrent)
+  }
+})
+
+function geoInfoShowDetails (data, category, div) {
   let ob = data.object
   let result = '<div class="geo-info"><h3>' + lang('geoinfo:header') + '</h3>'
 
@@ -96,9 +132,7 @@ register_hook('show-details', (data, category, dom, callback) => {
 
   result += '</div>'
   div.innerHTML = result
-
-  callback()
-})
+}
 
 function updateTabHeader (header) {
   if (!global.map._loaded) {

src/formatUnits.js

@@ -1,8 +1,18 @@
 const formatUnit = require('format-unit').default
 const formatcoords = require('formatcoords')
 
+const defaults = {
+}
+
 module.exports = {
   distance: value => formatUnit('length')(value)(['mm', 'cm', 'm', 'km']),
   area: value => formatUnit('area')(value)(['cm2', 'm2', 'ha', 'km2']),
   coord: value => formatcoords(value).format()
 }
+
+register_hook('options_form', def => {
+})
+
+register_hook('options_save', def => {
+  call_hooks('format-units-refresh')
+})