From 6bc9e63fc3fd00c86a52cb1c827d32d4023e5547 Mon Sep 17 00:00:00 2001
From: Nick Doiron <ndoiron@mapmeld.com>
Date: Fri, 6 May 2016 12:20:56 -0400
Subject: [PATCH] map controls and menus

---
 css/app.css              | 4 ++++
 modules/ui/background.js | 8 ++++----
 modules/ui/geolocate.js  | 3 ++-
 modules/ui/help.js       | 2 +-
 modules/ui/map_data.js   | 6 +++---
 modules/ui/zoom.js       | 2 +-
 6 files changed, 15 insertions(+), 10 deletions(-)

diff --git a/css/app.css b/css/app.css
index 5ad787b69..e1bd3e7f0 100644
--- a/css/app.css
+++ b/css/app.css
@@ -3537,6 +3537,10 @@ img.tile-removing {
   border-radius: 0 0 4px 0;
 }
 
+[dir='rtl'] .geolocate-control button svg, [dir='rtl'] .list-item-gpx-browse svg {
+  transform: rotateY(180deg);
+}
+
 /* map control button overlays */
 [dir='rtl'] .map-overlay {
   padding: 20px 20px 20px 50px;
diff --git a/modules/ui/background.js b/modules/ui/background.js
index 8c2cbea91..335bc19c8 100644
--- a/modules/ui/background.js
+++ b/modules/ui/background.js
@@ -150,7 +150,7 @@ export function uiBackground(context) {
                 .attr('class', 'best')
                 .call(tooltip()
                     .title(t('background.best_imagery'))
-                    .placement('left'))
+                    .placement((iD.detect().textDirection === 'rtl') ? 'right' : 'left'))
                 .append('span')
                 .html('&#9733;');
 
@@ -337,7 +337,7 @@ export function uiBackground(context) {
         var content = selection.append('div')
                 .attr('class', 'fillL map-overlay col3 content hide'),
             tooltipBehavior = tooltip()
-                .placement('left')
+                .placement((iD.detect().textDirection === 'rtl') ? 'right' : 'left')
                 .html(true)
                 .title(uiTooltipHtml(t('background.description'), key)),
             button = selection.append('button')
@@ -369,7 +369,7 @@ export function uiBackground(context) {
             .on('click.set-opacity', setOpacity)
             .html('<div class="select-box"></div>')
             .call(tooltip()
-                .placement('left'))
+                .placement((iD.detect().textDirection === 'rtl') ? 'right' : 'left'))
             .append('div')
             .attr('class', 'opacity')
             .style('opacity', function(d) { return 1.25 - d; });
@@ -388,7 +388,7 @@ export function uiBackground(context) {
             .attr('class', 'layer-browse')
             .call(tooltip()
                 .title(t('background.custom_button'))
-                .placement('left'))
+                .placement((iD.detect().textDirection === 'rtl') ? 'right' : 'left'))
             .on('click', editCustom)
             .call(svgIcon('#icon-search'));
 
diff --git a/modules/ui/geolocate.js b/modules/ui/geolocate.js
index 61e4d7d8f..0ae5d7723 100644
--- a/modules/ui/geolocate.js
+++ b/modules/ui/geolocate.js
@@ -54,6 +54,7 @@ export function uiGeolocate(context) {
             .attr('title', t('geolocate.title'))
             .on('click', click)
             .call(svgIcon('#icon-geolocate', 'light'))
-            .call(tooltip().placement('left'));
+            .call(tooltip()
+                .placement((iD.detect().textDirection === 'rtl') ? 'right' : 'left'));
     };
 }
diff --git a/modules/ui/help.js b/modules/ui/help.js
index 1961880f5..781d79747 100644
--- a/modules/ui/help.js
+++ b/modules/ui/help.js
@@ -113,7 +113,7 @@ export function uiHelp(context) {
         var pane = selection.append('div')
                 .attr('class', 'help-wrap map-overlay fillL col5 content hide'),
             tooltipBehavior = tooltip()
-                .placement('left')
+                .placement((iD.detect().textDirection === 'rtl') ? 'right' : 'left')
                 .html(true)
                 .title(uiTooltipHtml(t('help.title'), key)),
             button = selection.append('button')
diff --git a/modules/ui/map_data.js b/modules/ui/map_data.js
index f5efc3192..3bf74cadf 100644
--- a/modules/ui/map_data.js
+++ b/modules/ui/map_data.js
@@ -216,7 +216,7 @@ export function uiMapData(context) {
                 .attr('class', 'list-item-gpx-extent')
                 .call(tooltip()
                     .title(t('gpx.zoom'))
-                    .placement('left'))
+                    .placement((iD.detect().textDirection === 'rtl') ? 'right' : 'left'))
                 .on('click', function() {
                     d3.event.preventDefault();
                     d3.event.stopPropagation();
@@ -229,7 +229,7 @@ export function uiMapData(context) {
                 .attr('class', 'list-item-gpx-browse')
                 .call(tooltip()
                     .title(t('gpx.browse'))
-                    .placement('left'))
+                    .placement((iD.detect().textDirection === 'rtl') ? 'right' : 'left'))
                 .on('click', function() {
                     d3.select(document.createElement('input'))
                         .attr('type', 'file')
@@ -388,7 +388,7 @@ export function uiMapData(context) {
                 .append('div')
                 .attr('class', 'fillL map-overlay col3 content hide'),
             tooltipBehavior = tooltip()
-                .placement('left')
+                .placement((iD.detect().textDirection === 'rtl') ? 'right' : 'left')
                 .html(true)
                 .title(uiTooltipHtml(t('map_data.description'), key)),
             button = selection
diff --git a/modules/ui/zoom.js b/modules/ui/zoom.js
index c8fe72ea0..88af3b7f0 100644
--- a/modules/ui/zoom.js
+++ b/modules/ui/zoom.js
@@ -57,7 +57,7 @@ export function uiZoom(context) {
             .attr('class', function(d) { return d.id; })
             .on('click.editor', function(d) { d.action(); })
             .call(tooltip()
-                .placement('left')
+                .placement((iD.detect().textDirection === 'rtl') ? 'right' : 'left')
                 .html(true)
                 .title(function(d) {
                     return uiTooltipHtml(d.title, d.key);