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, } )