From ca8f4994824a63b8bbf285d0c4b6bb4fa087cf97 Mon Sep 17 00:00:00 2001
From: Quincy Morgan <quincy.morgan@icloud.com>
Date: Wed, 6 Mar 2019 14:59:21 -0500
Subject: [PATCH] Right-to-left layout support for drag-and-drop favorites,
 favorite shortcuts, and feature search

---
 css/80_app.css           | 11 ++++++++++-
 modules/ui/modes.js      | 38 +++++++++++++++++++++++++++++---------
 modules/ui/search_add.js |  2 +-
 3 files changed, 40 insertions(+), 11 deletions(-)

diff --git a/css/80_app.css b/css/80_app.css
index d769d858b..d5a647638 100644
--- a/css/80_app.css
+++ b/css/80_app.css
@@ -634,6 +634,10 @@ button.add-note svg.icon {
     top: 10px;
     pointer-events: none;
 }
+[dir='rtl'] .search-add .search-icon {
+    left: auto;
+    right: 10px;
+}
 .search-add .popover {
     max-height: 250px;
     width: 100%;
@@ -723,9 +727,14 @@ button.add-note svg.icon {
     color: #666;
 }
 .search-add .subsection {
-    padding-left: 6px;
     background-color: #CBCBCB;
 }
+[dir='ltr'] .search-add .subsection {
+    padding-left: 6px;
+}
+[dir='rtl'] .search-add .subsection {
+    padding-right: 6px;
+}
 /* Header for modals / panes
 ------------------------------------------------------- */
 .header {
diff --git a/modules/ui/modes.js b/modules/ui/modes.js
index c82f3d918..238581e8e 100644
--- a/modules/ui/modes.js
+++ b/modules/ui/modes.js
@@ -11,7 +11,7 @@ import {
 } from '../modes';
 
 import { svgIcon } from '../svg';
-import { t } from '../util/locale';
+import { t, textDirection } from '../util/locale';
 import { tooltip } from '../util/tooltip';
 import { uiPresetIcon } from './preset_icon';
 import { uiTooltipHtml } from './tooltipHtml';
@@ -96,13 +96,26 @@ export function uiModes(context) {
                     preset: preset,
                     geometry: d.geom
                 };
-                var keyCode = index + 1;
-                if (keyCode <= 10) {
-                    if (keyCode === 10) {
+                var keyCode;
+                if (textDirection === 'ltr') {
+                    // use number row order: 1 2 3 4 5 6 7 8 9 0
+                    if (index === 9) {
                         keyCode = 0;
+                    } else if (index < 10) {
+                        keyCode = index + 1;
                     }
+                } else {
+                    // use number row order from right to left
+                    if (index === 0) {
+                        keyCode = 0;
+                    } else if (index < 10) {
+                        keyCode = 10 - index;
+                    }
+                }
+                if (keyCode !== null) {
                     favoriteMode.key = keyCode.toString();
                 }
+
                 var mode;
                 switch (d.geom) {
                     case 'point':
@@ -201,22 +214,29 @@ export function uiModes(context) {
 
                     selection.selectAll('button.add-preset')
                         .style('transform', function(d2, index2) {
+                            var node = d3_select(this).node();
                             if (index === index2) {
                                 return 'translate(' + x + 'px, ' + y + 'px)';
                             } else if (y > 50) {
                                 if (index2 > index) {
-                                    return 'translateX(-100%)';
+                                    return 'translateX(' + (textDirection === 'rtl' ? '' : '-') + '100%)';
                                 }
-                            } else if (index2 > index && d3_event.x > d3_select(this).node().offsetLeft) {
+                            } else if (index2 > index && (
+                                (d3_event.x > node.offsetLeft && textDirection === 'ltr') ||
+                                (d3_event.x < node.offsetLeft + node.offsetWidth && textDirection === 'rtl')
+                            )) {
                                 if (targetIndex === null || index2 > targetIndex) {
                                     targetIndex = index2;
                                 }
-                                return 'translateX(-100%)';
-                            } else if (index2 < index && d3_event.x < d3_select(this).node().offsetLeft + d3_select(this).node().offsetWidth) {
+                                return 'translateX(' + (textDirection === 'rtl' ? '' : '-') + '100%)';
+                            } else if (index2 < index && (
+                                (d3_event.x < node.offsetLeft + node.offsetWidth && textDirection === 'ltr') ||
+                                (d3_event.x > node.offsetLeft && textDirection === 'rtl')
+                            )) {
                                 if (targetIndex === null || index2 < targetIndex) {
                                     targetIndex = index2;
                                 }
-                                return 'translateX(100%)';
+                                return 'translateX(' + (textDirection === 'rtl' ? '-' : '') + '100%)';
                             }
                             return null;
                         });
diff --git a/modules/ui/search_add.js b/modules/ui/search_add.js
index 4ed356420..24d45d503 100644
--- a/modules/ui/search_add.js
+++ b/modules/ui/search_add.js
@@ -40,7 +40,7 @@ export function uiSearchAdd(context) {
             .call(tooltip()
                 .placement('bottom')
                 .html(true)
-                .title(function(d) { return uiTooltipHtml(t('modes.add_feature.description'), key); })
+                .title(function() { return uiTooltipHtml(t('modes.add_feature.description'), key); })
             );
 
         search = searchWrap