Display Cmd instead of Ctrl for shortcuts on MacOS

umap/static/umap/js/umap.controls.js

@@ -1,6 +1,9 @@
 L.U.BaseAction = L.ToolbarAction.extend({
   initialize: function (map) {
     this.map = map
+    if (this.options.label) {
+      this.options.tooltip = this.map.help.displayLabel(this.options.label, withKbdTag=false)
+    }
     this.options.toolbarIcon = {
       className: this.options.className,
       tooltip: this.options.tooltip,
@@ -15,7 +18,7 @@ L.U.ImportAction = L.U.BaseAction.extend({
   options: {
     helpMenu: true,
     className: 'upload-data dark',
-    tooltip: `${L._('Import data')} (Ctrl+I)`,
+    label: 'IMPORT_PANEL'
   },
 
   addHooks: function () {
@@ -84,7 +87,7 @@ L.U.DrawMarkerAction = L.U.BaseAction.extend({
   options: {
     helpMenu: true,
     className: 'umap-draw-marker dark',
-    tooltip: `${L._('Draw a marker')} (Ctrl+M)`,
+    label: 'DRAW_MARKER'
   },
 
   addHooks: function () {
@@ -96,7 +99,7 @@ L.U.DrawPolylineAction = L.U.BaseAction.extend({
   options: {
     helpMenu: true,
     className: 'umap-draw-polyline dark',
-    tooltip: `${L._('Draw a polyline')} (Ctrl+L)`,
+    label: 'DRAW_LINE'
   },
 
   addHooks: function () {
@@ -108,7 +111,7 @@ L.U.DrawPolygonAction = L.U.BaseAction.extend({
   options: {
     helpMenu: true,
     className: 'umap-draw-polygon dark',
-    tooltip: `${L._('Draw a polygon')} (Ctrl+P)`,
+    label: 'DRAW_POLYGON'
   },
 
   addHooks: function () {
@@ -1020,7 +1023,7 @@ L.U.Map.include({
       'mouseover',
       function () {
         this.ui.tooltip({
-          content: `${L._('Cancel')} (<kbd>Ctrl+Z</kbd>)`,
+          content: this.help.displayLabel('CANCEL'),
           anchor: controlEditCancel,
           position: 'bottom',
           delay: 500,
@@ -1044,7 +1047,7 @@ L.U.Map.include({
       'mouseover',
       function () {
         this.ui.tooltip({
-          content: `${L._('Back to preview')} (<kbd>Ctrl+E</kbd>)`,
+          content: this.help.displayLabel('PREVIEW'),
           anchor: controlEditDisable,
           position: 'bottom',
           delay: 500,
@@ -1065,7 +1068,7 @@ L.U.Map.include({
       'mouseover',
       function () {
         this.ui.tooltip({
-          content: `${L._('Save current edits')} (<kbd>Ctrl+S</kbd>)`,
+          content: this.help.displayLabel('SAVE'),
           anchor: controlEditSave,
           position: 'bottom',
           delay: 500,

umap/static/umap/js/umap.core.js

@@ -436,12 +436,60 @@ L.U.Keys = {
 L.U.Help = L.Class.extend({
 
   SHORTCUTS: {
-    'Ctrl+M': L._('Draw a marker'),
-    'Ctrl+L': L._('Draw a polyline'),
-    'Ctrl+P': L._('Draw a polygon'),
-    'Ctrl+E': L._('Toggle edit mode'),
-    'Ctrl+S': L._('Save map'),
-    'Ctrl+I': L._('Open import panel'),
+    DRAW_MARKER: {
+      shortcut:'Modifier+M',
+      label: L._('Draw a marker')
+    },
+    DRAW_LINE: {
+      shortcut:'Modifier+L',
+      label: L._('Draw a polyline')
+    },
+    DRAW_POLYGON: {
+      shortcut:'Modifier+P',
+      label: L._('Draw a polygon')
+    },
+    TOGGLE_EDIT: {
+      shortcut:'Modifier+E',
+      label: L._('Toggle edit mode')
+    },
+    STOP_EDIT: {
+      shortcut:'Modifier+E',
+      label: L._('Stop editing')
+    },
+    SAVE_MAP: {
+      shortcut:'Modifier+S',
+      label: L._('Save map')
+    },
+    IMPORT_PANEL: {
+      shortcut:'Modifier+I',
+      label: L._('Import data')
+    },
+    SEARCH: {
+      shortcut:'Modifier+F',
+      label: L._('Search location')
+    },
+    CANCEL: {
+      shortcut:'Modifier+Z',
+      label: L._('Cancel edits')
+    },
+    PREVIEW: {
+      shortcut:'Modifier+E',
+      label: L._('Back to preview')
+    },
+    SAVE: {
+      shortcut:'Modifier+S',
+      label: L._('Save current edits')
+    },
+  },
+
+  displayLabel: function (action, withKbdTag=true) {
+    let {shortcut, label} = this.SHORTCUTS[action]
+    if (withKbdTag) {
+      shortcut = shortcut.split('+').map((el) => `<kbd>${el}</kbd>`).join('+')
+    }
+    const modifier = this.isMacOS ? 'Cmd' : 'Ctrl'
+    label += ` (${shortcut.replace('Modifier', modifier)})`
+    return label
   },
 
   initialize: function (map) {
@@ -462,6 +510,7 @@ L.U.Help = L.Class.extend({
     const label = L.DomUtil.create('span', '', closeButton)
     label.title = label.textContent = L._('Close')
     this.content = L.DomUtil.create('div', 'umap-help-content', this.box)
+    this.isMacOS = /mac/i.test(navigator.userAgentData ? navigator.userAgentData.platform : navigator.platform)
   },
 
   onKeyDown: function (e) {
@@ -535,9 +584,9 @@ L.U.Help = L.Class.extend({
     for (const id in this.map.helpMenuActions) {
       addAction(this.map.helpMenuActions[id])
     }
-    const kbdList = L.DomUtil.create('div', 'kbd-list', container)
-    for (const [kbd, label] of Object.entries(this.SHORTCUTS)) {
-      L.DomUtil.add('span', '', kbdList, `<kbd>${kbd}</kbd> ${label}`)
+    const kbdList = L.DomUtil.create('ul', 'kbd-list', container)
+    for (const key of Object.keys(this.SHORTCUTS)) {
+      L.DomUtil.add('li', '', kbdList, this.displayLabel(key))
     }
     return container
   },

umap/static/umap/js/umap.js

@@ -162,6 +162,9 @@ L.U.Map.include({
     this.features_index = {}
     this.facets = {}
 
+    // Needed for actions labels
+    this.help = new L.U.Help(this)
+
     if (this.options.hash) this.addHash()
     this.initTileLayers(this.options.tilelayers)
     // Needs tilelayer to exist for minimap
@@ -235,7 +238,6 @@ L.U.Map.include({
       }
     }
 
-    this.help = new L.U.Help(this)
     this.slideshow = new L.U.Slideshow(this, this.options.slideshow)
     this.permissions = new L.U.MapPermissions(this)
     this.initCaptionBar()
@@ -1896,27 +1898,27 @@ L.U.Map.include({
       if (this.editEnabled) {
         if (!this.isDirty) {
           items.push({
-            text: `${L._('Stop editing')} (<kbd>Ctrl+E</kbd>)`,
+            text: this.help.displayLabel('STOP_EDIT'),
             callback: this.disableEdit,
           })
         }
         if (this.options.enableMarkerDraw) {
           items.push({
-            text: `${L._('Draw a marker')} (<kbd>Ctrl+M</kbd>)`,
+            text: this.help.displayLabel('DRAW_MARKER'),
             callback: this.startMarker,
             context: this,
           })
         }
         if (this.options.enablePolylineDraw) {
           items.push({
-            text: `${L._('Draw a polygon')} (<kbd>Ctrl+P</kbd>)`,
+            text: this.help.displayLabel('DRAW_POLYGON'),
             callback: this.startPolygon,
             context: this,
           })
         }
         if (this.options.enablePolygonDraw) {
           items.push({
-            text: `${L._('Draw a line')} (<kbd>Ctrl+L</kbd>)`,
+            text: this.help.displayLabel('DRAW_LINE'),
             callback: this.startPolyline,
             context: this,
           })
@@ -1930,7 +1932,7 @@ L.U.Map.include({
         })
       } else {
         items.push({
-          text: `${L._('Start editing')} (<kbd>Ctrl+E</kbd>)`,
+          text: this.help.displayLabel('TOGGLE_EDIT'),
           callback: this.enableEdit,
         })
       }
@@ -1951,7 +1953,7 @@ L.U.Map.include({
         callback: this.displayCaption,
       },
       {
-        text: L._('Search location'),
+        text: this.help.displayLabel('SEARCH'),
         callback: this.search,
       }
     )