diff --git a/umap/static/umap/js/umap.controls.js b/umap/static/umap/js/umap.controls.js
index b905e13f6..8fd73f25a 100644
--- a/umap/static/umap/js/umap.controls.js
+++ b/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 () {
@@ -1018,7 +1021,7 @@ L.U.Map.include({
'mouseover',
function () {
this.ui.tooltip({
- content: `${L._('Cancel')} (Ctrl+Z)`,
+ content: this.help.displayLabel('CANCEL'),
anchor: controlEditCancel,
position: 'bottom',
delay: 500,
@@ -1042,7 +1045,7 @@ L.U.Map.include({
'mouseover',
function () {
this.ui.tooltip({
- content: `${L._('Back to preview')} (Ctrl+E)`,
+ content: this.help.displayLabel('PREVIEW'),
anchor: controlEditDisable,
position: 'bottom',
delay: 500,
@@ -1063,7 +1066,7 @@ L.U.Map.include({
'mouseover',
function () {
this.ui.tooltip({
- content: `${L._('Save current edits')} (Ctrl+S)`,
+ content: this.help.displayLabel('SAVE'),
anchor: controlEditSave,
position: 'bottom',
delay: 500,
diff --git a/umap/static/umap/js/umap.core.js b/umap/static/umap/js/umap.core.js
index 8d29e9055..6cc43b0f2 100644
--- a/umap/static/umap/js/umap.core.js
+++ b/umap/static/umap/js/umap.core.js
@@ -434,12 +434,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._('Open import panel')
+ },
+ 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) => `${el}`).join('+')
+ }
+ const modifier = this.isMacOS ? 'Cmd' : 'Ctrl'
+ label += ` (${shortcut.replace('Modifier', modifier)})`
+ return label
},
initialize: function (map) {
@@ -460,6 +508,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) {
@@ -533,9 +582,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} ${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
},
diff --git a/umap/static/umap/js/umap.js b/umap/static/umap/js/umap.js
index 44be35cc6..a85ebfd7f 100644
--- a/umap/static/umap/js/umap.js
+++ b/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()
@@ -1891,27 +1893,27 @@ L.U.Map.include({
if (this.editEnabled) {
if (!this.isDirty) {
items.push({
- text: `${L._('Stop editing')} (Ctrl+E)`,
+ text: this.help.displayLabel('STOP_EDIT'),
callback: this.disableEdit,
})
}
if (this.options.enableMarkerDraw) {
items.push({
- text: `${L._('Draw a marker')} (Ctrl+M)`,
+ text: this.help.displayLabel('DRAW_MARKER'),
callback: this.startMarker,
context: this,
})
}
if (this.options.enablePolylineDraw) {
items.push({
- text: `${L._('Draw a polygon')} (Ctrl+P)`,
+ text: this.help.displayLabel('DRAW_POLYGON'),
callback: this.startPolygon,
context: this,
})
}
if (this.options.enablePolygonDraw) {
items.push({
- text: `${L._('Draw a line')} (Ctrl+L)`,
+ text: this.help.displayLabel('DRAW_LINE'),
callback: this.startPolyline,
context: this,
})
@@ -1925,7 +1927,7 @@ L.U.Map.include({
})
} else {
items.push({
- text: `${L._('Start editing')} (Ctrl+E)`,
+ text: this.help.displayLabel('TOGGLE_EDIT'),
callback: this.enableEdit,
})
}
@@ -1946,7 +1948,7 @@ L.U.Map.include({
callback: this.displayCaption,
},
{
- text: L._('Search location'),
+ text: this.help.displayLabel('SEARCH'),
callback: this.search,
}
)