Make rtl compatible

and minor refactor

css/80_app.css

@@ -3132,11 +3132,10 @@ img.tile-removing {
     padding-right: 10px;
     color: #767676;
     text-align: right;
-    white-space: nowrap;
     padding-bottom: 5px;
     width: 50%;
-    
-} 
+
+}
 .modal-shortcuts .shortcut-desc {
     padding-bottom: 5px;
     width: 50%;
@@ -3144,7 +3143,7 @@ img.tile-removing {
 
 .modal-shortcuts kbd {
     display: inline-block;
-    text-align: right;    
+    text-align: right;
     padding: 3px 5px;
     font-size: 11px;
     line-height: 10px;
@@ -3159,6 +3158,7 @@ img.tile-removing {
     box-shadow: inset 0 -1px 0 #bbb;
 }
 
+
 /* Save Mode
 ------------------------------------------------------- */
 .mode-save a.user-info {
@@ -4092,3 +4092,22 @@ li.hide + li.version .badge .tooltip .tooltip-arrow {
 [dir='rtl'] .spin-control button.increment{
   border-bottom-left-radius: 3px;
 }
+/* modal */
+[dir='rtl'] .modal > button {
+    position: absolute;
+    left: 0;
+    right: unset;
+    top: 0;
+    height: 59px;
+    z-index: 50;
+}
+
+/* shortcuts modal */
+
+[dir='rtl'] .kbd-row {
+    padding-left: 10px;
+    color: #767676;
+    text-align: left;
+    padding-bottom: 5px;
+    width: 50%;
+}

data/core.yaml

@@ -1017,6 +1017,8 @@ en:
       save: "Don't forget to regularly save your changes!"
       start: "Start mapping!"
   shortcuts:
+    modal:
+      title: "Keyboard shortcuts"
     display:
       desc: "Display"
       pan_map: "Pan map"

data/index.js

@@ -6,7 +6,7 @@ export { dataDeprecated } from './deprecated.json';
 export { dataDiscarded } from './discarded.json';
 export { dataLocales } from './locales.json';
 export { dataPhoneFormats } from './phone-formats.json';
-export { shortcuts } from './shortcuts.json';
+export { dataShortcuts } from './shortcuts.json';
 
 export { default as dataImperial } from './imperial.json';
 export { default as dataDriveLeft } from './drive-left.json';

data/shortcuts.json

@@ -1,4 +1,4 @@
-{ "shortcuts": [
+{ "dataShortcuts": [
     {
         "key": "display",
         "desc": "shortcuts.display.desc",

dist/locales/en.json

@@ -884,6 +884,9 @@
             }
         },
         "shortcuts": {
+            "modal": {
+                "title": "Keyboard shortcuts"
+            },
             "display": {
                 "desc": "Display",
                 "pan_map": "Pan map",

modules/ui/shortcuts.js

@@ -3,142 +3,141 @@ import { uiCmd } from './cmd';
 import { uiModal } from './modal';
 import { d3keybinding } from '../lib/d3.keybinding.js';
 import { t } from '../util/locale';
-import { shortcuts as shortcutsData } from '../../data';
+import { dataShortcuts } from '../../data';
 
 export function uiShortcuts() {
     var key = '⇧/';
     var activeTab = 0;
+    var modalSelection;
+    var savedSelection;
+    var keybinding = d3keybinding('shortcuts')
+        .on(key, function () {
+            if (modalSelection) {
+                modalSelection.close();
+                modalSelection = null;
+                return;
+            }
+            modalSelection = uiModal(savedSelection);
+            shortcutsModal(modalSelection);
+        });
 
-    function shortcuts(selection) {
-        var modalSelection;
+    d3.select(document)
+        .call(keybinding);
+    
+    function shortcutsModal(modalSelection) {
+        modalSelection.select('.modal')
+        .attr('class', 'modal modal-shortcuts fillL col6');
 
-        function show() {
-            modalSelection = uiModal(selection);
+        var shortcutsModal = modalSelection.select('.content');
 
-            modalSelection.select('.modal')
-                .attr('class', 'modal fillL col6');
-
-            var shortcutsModal = modalSelection.select('.content');
-
-            shortcutsModal
-                .attr('class', 'cf modal-shortcuts');
-
-            shortcutsModal
-                .append('div')
-                .attr('class', 'modal-section')
-                .append('h3')
-                .text('Keyboard shortcuts');
-
-            shortcutsModal
-                .call(render);
-        }
-
-        function render(selection) {
-            var wrapper = selection
-                .selectAll('.wrapper')
-                .data([0]);
-
-            var wrapperEnter = wrapper
-                .enter()
-                .append('div')
-                .attr('class', 'wrapper');
-
-            var tabsBar = wrapperEnter
-                .append('div')
-                .attr('class', 'tabs-bar');
-
-            var shortcutsList = wrapperEnter
-                .append('div')
-                .attr('class', 'shortcuts-list');
-
-            wrapper = wrapper.merge(wrapperEnter);
-
-            var tabs = tabsBar
-                .selectAll('.tab')
-                .data(shortcutsData);
-
-            var tabsEnter = tabs
-                .enter()
-                .append('div')
-                .attr('class', 'tab')
-                .on('click', function (d, i) {
-                    activeTab = i;
-                    render(selection);
-                });
-
-            tabsEnter
-                .append('span')
-                .text(function (d) { return t(d.desc); });
-
-            tabs = tabs
-                .merge(tabsEnter);
-
-            // Update
-            wrapper.selectAll('.tab')
-                .classed('active', function (d, i) {
-                    return i === activeTab;
-                });
-
-
-            var shortcuts = shortcutsList
-                .selectAll('.shortcut-tab')
-                .data(shortcutsData);
-
-            var shortcutsEnter = shortcuts
-                .enter()
-                .append('div')
-                .attr('class', 'shortcut-tab')
-                .on('click', function (d, i) {
-                    activeTab = i;
-                    render(selection);
-                });
-
-            var row = shortcutsEnter
-                .selectAll('.shortcut-row')
-                .data(function (d) { return d.shortcuts; })
-                .enter()
-                .append('div')
-                .attr('class', 'shortcut-row');
-
-            var shortcutsRow = row
-                .append('div')
-                .attr('class', 'kbd-row');
-
-            shortcutsRow
-                .selectAll('kbd')
-                .data(function (d) { return d.shortcut; })
-                .enter()
-                .append('kbd')
-                .text(function (d) { return uiCmd(d); });
-
-            row
-                .append('div')
-                .attr('class', 'shortcut-desc')
-                .text(function (d) { return t(d.key); });
-
-            shortcuts = shortcuts
-                .merge(shortcutsEnter);
-
-            // Update
-            wrapper.selectAll('.shortcut-tab')
-                .style('display', function (d, i) {
-                    return i === activeTab ? 'flex' : 'none';
-                });
-        }
-
-        var keybinding = d3keybinding('shortcuts')
-            .on(key, function () {
-                if (modalSelection) {
-                    modalSelection.close();
-                    modalSelection = null;
-                    return;
-                }
-                show();
-            });
-
-        d3.select(document)
-            .call(keybinding);
+        shortcutsModal
+            .append('div')
+            .attr('class', 'modal-section')
+            .append('h3')
+            .text(t('shortcuts.modal.title'));
+        
+        shortcutsModal
+            .call(renderTabs);
     }
 
-    return shortcuts;
+    function renderTabs(selection) {
+        var wrapper = selection
+            .selectAll('.wrapper')
+            .data([0]);
+
+        var wrapperEnter = wrapper
+            .enter()
+            .append('div')
+            .attr('class', 'wrapper modal-section');
+
+        var tabsBar = wrapperEnter
+            .append('div')
+            .attr('class', 'tabs-bar');
+
+        var shortcutsList = wrapperEnter
+            .append('div')
+            .attr('class', 'shortcuts-list');
+
+        wrapper = wrapper.merge(wrapperEnter);
+
+        var tabs = tabsBar
+            .selectAll('.tab')
+            .data(dataShortcuts);
+
+        var tabsEnter = tabs
+            .enter()
+            .append('div')
+            .attr('class', 'tab')
+            .on('click', function (d, i) {
+                activeTab = i;
+                renderTabs(selection);
+            });
+
+        tabsEnter
+            .append('span')
+            .text(function (d) { return t(d.desc); });
+
+        tabs = tabs
+            .merge(tabsEnter);
+
+        // Update
+        wrapper.selectAll('.tab')
+            .classed('active', function (d, i) {
+                return i === activeTab;
+            });
+
+
+        var shortcuts = shortcutsList
+            .selectAll('.shortcut-tab')
+            .data(dataShortcuts);
+
+        var shortcutsEnter = shortcuts
+            .enter()
+            .append('div')
+            .attr('class', 'shortcut-tab')
+            .on('click', function (d, i) {
+                activeTab = i;
+                renderTabs(selection);
+            });
+
+        var row = shortcutsEnter
+            .selectAll('.shortcut-row')
+            .data(function (d) { return d.shortcuts; })
+            .enter()
+            .append('div')
+            .attr('class', 'shortcut-row');
+
+        var shortcutsRow = row
+            .append('div')
+            .attr('class', 'kbd-row');
+
+        shortcutsRow
+            .selectAll('kbd')
+            .data(function (d) { return d.shortcut; })
+            .enter()
+            .append('kbd')
+            .text(function (d) { return uiCmd(d); });
+
+        row
+            .append('div')
+            .attr('class', 'shortcut-desc')
+            .text(function (d) { return t(d.key); });
+
+        shortcuts = shortcuts
+            .merge(shortcutsEnter);
+
+        // Update
+        wrapper.selectAll('.shortcut-tab')
+            .style('display', function (d, i) {
+                return i === activeTab ? 'flex' : 'none';
+            });
+    }
+
+    return function(selection, show) {
+        savedSelection = selection;
+        if (show) {
+            modalSelection = uiModal(selection);
+            shortcutsModal(modalSelection);
+        }
+    };
 }