Merge branch 'rtl_editor' of https://github.com/mapmeld/iD into mapmeld-rtl_editor

css/app.css

@@ -3318,8 +3318,6 @@ img.tile-removing {
     margin: auto;
 }
 
-/* Mapillary
-------------------------------------------------------- */
 .mapillary-wrap {
     position: absolute;
     bottom: 30px;
@@ -3358,3 +3356,321 @@ img.tile-removing {
 .mly-wrapper.active {
   visibility: visible;
 }
+
+/* Right-to-left localization settings */
+
+[dir='rtl'] #sidebar {
+  float: right;
+}
+
+[dir='rtl'] #sidebar .search-header .icon {
+  left: auto;
+  right: 10px;
+}
+
+/* header */
+[dir='rtl'] .header h3 {
+  text-align: right;
+  padding: 20px 40px 20px 20px;
+}
+
+[dir='rtl'] .entity-editor-pane .header button.preset-choose {
+  left: auto;
+  right: 0;
+}
+
+[dir='rtl'] .entity-editor-pane .header button.preset-close, [dir='rtl'] .preset-list-pane .header button.preset-choose {
+  left: 0;
+  right: auto;
+}
+
+[dir='rtl'] .preset-icon-fill-area {
+  left: auto;
+  right: 10px;
+}
+
+[dir='rtl'] .map-data-control .layer-list button, [dir='rtl'] .background-control .layer-list button {
+  float: left;
+  border-left: none;
+  border-right: 1px solid #CCC;
+}
+
+[dir='rtl'] .map-data-control .layer-list button:first-of-type, [dir='rtl'] .background-control .layer-list button:first-of-type {
+  border-radius: 3px 0 0 3px;
+}
+
+/* search */
+[dir='rtl'] .feature-list-item .label {
+  text-align: right;
+}
+
+[dir='rtl'] .feature-list-item .entity-name {
+  padding-left: 0;
+  padding-right: 10px;
+}
+
+/* preset form */
+[dir='rtl'] .form-label {
+  padding: 5px 10px 5px 0;
+}
+
+[dir='rtl'] .form-label button {
+  border-left: none;
+  border-right: 1px solid #CCC;
+}
+
+[dir='rtl'] .more-fields label {
+  padding: 5px 0 5px 10px;
+}
+
+[dir='rtl'] .form-label-button-wrap {
+  text-align: left;
+}
+
+[dir='rtl'] button.minor {
+  left: 0;
+  right: auto;
+}
+
+[dir='rtl'] .form-field .localized-main {
+  padding-left: 10%;
+  padding-right: 10px;
+}
+
+[dir='rtl'] .combobox-caret {
+  margin-left: 0;
+  margin-right: -30px;
+}
+
+[dir='rtl'] .form-field .button-input-action {
+  margin-left: 0;
+  margin-right: -10%;
+}
+
+[dir='rtl'] .icon.pre-text {
+  margin-left: 3px;
+  margin-right: 0;
+}
+
+[dir='rtl'] .notice .zoom-to .icon {
+  margin-left: 10px;
+  margin-right: 0;
+}
+
+[dir='rtl'] .preset-list-button .label {
+  text-align: right;
+  left: 0;
+  right: 60px;
+  border-left: none;
+  border-right: 1px solid rgba(0, 0, 0, .1);
+  border-radius: 3px 0 0 3px;
+}
+
+[dir='rtl'] .preset-icon-frame {
+  left: auto;
+  right: 7px;
+}
+
+[dir='rtl'] .preset-list-item button.tag-reference-button {
+  left: 0;
+  right: auto;
+  border-radius: 3px 0 0 3px;
+}
+
+[dir='rtl'] .preset-list-button-wrap .preset-icon {
+  left: auto;
+  right: auto;
+}
+
+[dir='rtl'] .preset-list-button-wrap .preset-icon-32 {
+  right: 13px;
+}
+
+[dir='rtl'] .form-field .maxspeed-unit {
+  border-radius: 0 0 0 4px;
+}
+
+[dir='rtl'] input[type="checkbox"], [dir='rtl'] input[type="radio"] {
+  float: right;
+  margin-left: 5px;
+  margin-right: 0;
+}
+
+[dir='rtl'] .preset-input-wrap .col6 {
+  float: right;
+}
+
+/* tags form */
+[dir='rtl'] .tag-row .key-wrap, [dir='rtl'] .tag-row .input-wrap-position {
+  float: right;
+}
+
+[dir='rtl'] .tag-row input {
+  border-left: none;
+  border-right: 1px solid #CCC;
+}
+
+[dir='rtl'] .tag-row:first-child input.key {
+  border-top-left-radius: 0;
+  border-top-right-radius: 4px;
+}
+
+[dir='rtl'] .tag-row button {
+  left: 10%;
+  border-left-width: 1px;
+}
+
+[dir='rtl'] .tag-row .tag-reference-button {
+  left: auto;
+  right: auto;
+  margin-right: 35px;
+  border-left-width: 1px;
+  border-right-width: 0;
+}
+
+[dir='rtl'] .tag-row:first-child .tag-reference-button {
+  border-top-left-radius: 4px;
+  border-top-right-radius: 0;
+}
+
+[dir='rtl'] .tag-row:last-child .tag-reference-button {
+  border-bottom-left-radius: 4px;
+  border-bottom-right-radius: 0;
+}
+
+/* map control buttons */
+[dir='rtl'] .map-controls {
+  left: 0;
+  right: auto;
+}
+
+[dir='rtl'] .background-control button, [dir='rtl'] .zoombuttons button.zoom-in {
+  border-radius: 0 4px 0 0;
+}
+
+[dir='rtl'] .help-control button, [dir='rtl'] .geolocate-control button {
+  border-radius: 0 0 4px 0;
+}
+
+[dir='rtl'] .list-item-gpx-browse svg {
+  transform: rotateY(180deg);
+}
+
+/* map control button overlays */
+[dir='rtl'] .map-overlay {
+  padding: 20px 20px 20px 50px;
+  left: 0;
+  right: auto !important;
+}
+
+[dir='rtl'] .opacity-options {
+  left: 50px;
+  right: auto;
+}
+
+[dir='rtl'] .hide-toggle {
+  padding-left: 0;
+  padding-right: 12px;
+}
+
+[dir='rtl'] .hide-toggle:before {
+  left: auto;
+  right: 0;
+  border-left: none;
+  border-right: 8px solid #7092ff;
+}
+
+[dir='rtl'] .hide-toggle.expanded:before {
+  border-left: 4px solid transparent;
+  border-right: 4px solid transparent;
+}
+
+/* navbar */
+[dir='rtl'] #bar .spacer, [dir='rtl'] #bar .button-wrap, [dir='rtl'] #bar .button-wrap button {
+  float: right;
+}
+
+[dir='rtl'] .add-point .tooltip {
+  left: inherit !important;
+}
+
+[dir='rtl'] .button-wrap:last-of-type {
+  padding-left: 0;
+  padding-right: 10px;
+}
+
+[dir='rtl'] button.save.has-count .count {
+  margin-left: auto;
+  margin-right: 8%;
+}
+
+[dir='rtl'] button.save.has-count .count::before {
+  border-left: 6px solid rgba(255,255,255,.5);
+  border-right: none;
+  left: auto;
+  right: -6px;
+}
+
+[dir='rtl'] .joined button {
+  border-left: 1px solid rgba(0,0,0,.5);
+  border-right: none;
+}
+
+[dir='rtl'] .joined button:first-child {
+  border-radius: 0 4px 4px 0;
+}
+
+[dir='rtl'] .joined button:last-child {
+  border-radius: 4px 0 0 4px;
+}
+
+/* footer */
+[dir='rtl'] #scale-block {
+  float: right;
+  clear: right;
+}
+
+[dir='rtl'] #info-block {
+  clear: left;
+}
+
+[dir='rtl'] #about-list {
+  text-align: left;
+  clear: left;
+  margin-left: 10px;
+  margin-right: 0;
+}
+
+[dir='rtl'] #about-list li {
+  float: left;
+  border-left: none;
+  border-right: 1px solid rgba(255,255,255,.5);
+  margin-left: 0;
+  margin-right: 5px;
+  padding: 5px 5px 5px 0;
+}
+
+[dir='rtl'] #about-list li:last-child {
+  border-right: none;
+}
+
+[dir='rtl'] #scale text {
+  text-anchor: end;
+}
+
+/* increment / decrement control - code by Naoufel Razouane */
+
+[dir='rtl'] .spin-control{
+  margin-left: 0;
+  margin-right: -20%;
+}
+[dir='rtl'] .spin-control button{
+  border-left: 0;
+  border-right: 1px solid #CCC;
+}
+[dir='rtl'] .spin-control button.decrement{
+  border-bottom-right-radius: 0;
+}
+[dir='rtl'] .spin-control button.increment{
+  border-bottom-left-radius: 3px;
+}

modules/ui/background.js

@@ -1,7 +1,7 @@
 import * as d3 from 'd3';
 import _ from 'lodash';
 import { d3keybinding } from '../lib/d3.keybinding.js';
-import { t } from '../util/locale';
+import { t, textDirection } from '../util/locale';
 import { rendererBackgroundSource } from '../renderer/index';
 import { geoMetersToOffset, geoOffsetToMeters } from '../geo/index';
 import { utilDetect } from '../util/detect';
@@ -150,7 +150,7 @@ export function uiBackground(context) {
                 .attr('class', 'best')
                 .call(tooltip()
                     .title(t('background.best_imagery'))
-                    .placement('left'))
+                    .placement((textDirection === 'rtl') ? 'right' : 'left'))
                 .append('span')
                 .html('★');
 
@@ -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((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((textDirection === 'rtl') ? 'right' : 'left'))
             .append('div')
             .attr('class', 'opacity')
             .style('opacity', function(d) { return 1.25 - d; });
@@ -378,7 +378,8 @@ export function uiBackground(context) {
         /* background switcher */
 
         var backgroundList = content.append('ul')
-            .attr('class', 'layer-list');
+            .attr('class', 'layer-list')
+            .attr('dir', 'auto');
 
         var custom = backgroundList.append('li')
             .attr('class', 'custom_layer')
@@ -388,7 +389,7 @@ export function uiBackground(context) {
             .attr('class', 'layer-browse')
             .call(tooltip()
                 .title(t('background.custom_button'))
-                .placement('left'))
+                .placement((textDirection === 'rtl') ? 'right' : 'left'))
             .on('click', editCustom)
             .call(svgIcon('#icon-search'));
 
@@ -497,7 +498,9 @@ export function uiBackground(context) {
             .attr('title', t('background.reset'))
             .attr('class', 'nudge-reset disabled')
             .on('click', resetOffset)
-            .call(svgIcon('#icon-undo'));
+            .call(
+                (textDirection === 'rtl') ? svgIcon('#icon-redo') : svgIcon('#icon-undo')
+            );
 
         context.map()
             .on('move.background-update', _.debounce(update, 1000));

modules/ui/entity_editor.js

@@ -1,6 +1,6 @@
 import * as d3 from 'd3';
 import _ from 'lodash';
-import { t } from '../util/locale';
+import { t, textDirection } from '../util/locale';
 import { tooltip } from '../util/tooltip';
 import { actionChangeTags } from '../actions/index';
 import { modeBrowse } from '../modes/index';
@@ -46,7 +46,7 @@ export function uiEntityEditor(context) {
             .attr('class', 'fl preset-reset preset-choose')
             .on('click', function() { dispatch.call('choose', this, activePreset); })
             .append('span')
-            .html('◄');
+            .html((textDirection === 'rtl') ? '►' : '◄');
 
         enter
             .append('button')

modules/ui/geolocate.js

@@ -1,4 +1,4 @@
-import { t } from '../util/locale';
+import { t, textDirection } from '../util/locale';
 import { tooltip } from '../util/tooltip';
 import { modeBrowse } from '../modes/index';
 import { geoExtent } from '../geo/index';
@@ -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((textDirection === 'rtl') ? 'right' : 'left'));
     };
 }

modules/ui/help.js

@@ -1,7 +1,7 @@
 import * as d3 from 'd3';
 import marked from 'marked';
 import { d3keybinding } from '../lib/d3.keybinding.js';
-import { t } from '../util/locale';
+import { t, textDirection } from '../util/locale';
 import { svgIcon } from '../svg/index';
 import { uiIntro } from './intro/index';
 import { uiTooltipHtml } from './tooltipHtml';
@@ -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((textDirection === 'rtl') ? 'right' : 'left')
                 .html(true)
                 .title(uiTooltipHtml(t('help.title'), key)),
             button = selection.append('button')

modules/ui/init.js

@@ -1,6 +1,6 @@
 import * as d3 from 'd3';
 import { d3keybinding } from '../lib/d3.keybinding.js';
-import { t } from '../util/locale';
+import { t, textDirection } from '../util/locale';
 import { tooltip } from '../util/tooltip';
 import { utilDetect } from '../util/detect';
 import { utilSetDimensions } from '../util/dimensions';
@@ -73,8 +73,13 @@ export function uiInit(context) {
         content
             .append('div')
             .attr('id', 'map')
+            .attr('dir', 'ltr')
             .call(map);
 
+        if (textDirection === 'rtl') {
+            d3.select('body').attr('dir', 'rtl');
+        }
+
         content
             .call(uiMapInMap(context));
 
@@ -150,6 +155,7 @@ export function uiInit(context) {
         about
             .append('div')
             .attr('id', 'attrib')
+            .attr('dir', 'ltr')
             .call(uiAttribution(context));
 
         var footer = about

modules/ui/map_data.js

@@ -1,7 +1,7 @@
 import * as d3 from 'd3';
 import _ from 'lodash';
 import { d3keybinding } from '../lib/d3.keybinding.js';
-import { t } from '../util/locale';
+import { t, textDirection } from '../util/locale';
 import { svgIcon } from '../svg/index';
 import { uiTooltipHtml } from './tooltipHtml';
 import { tooltip } from '../util/tooltip';
@@ -216,7 +216,7 @@ export function uiMapData(context) {
                 .attr('class', 'list-item-gpx-extent')
                 .call(tooltip()
                     .title(t('gpx.zoom'))
-                    .placement('left'))
+                    .placement((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((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((textDirection === 'rtl') ? 'right' : 'left')
                 .html(true)
                 .title(uiTooltipHtml(t('map_data.description'), key)),
             button = selection

modules/ui/preset.js

@@ -1,7 +1,7 @@
 import * as d3 from 'd3';
 import _ from 'lodash';
 import { d3combobox } from '../lib/d3.combobox.js';
-import { t } from '../util/locale';
+import { t, textDirection } from '../util/locale';
 import { modeBrowse } from '../modes/index';
 import { svgIcon } from '../svg/index';
 import { uiDisclosure } from './disclosure';
@@ -160,7 +160,9 @@ export function uiPreset(context) {
         wrap.append('button')
             .attr('class', 'modified-icon')
             .attr('tabindex', -1)
-            .call(svgIcon('#icon-undo'));
+            .call(
+                (textDirection === 'rtl') ? svgIcon('#icon-redo') : svgIcon('#icon-undo')
+            );
 
 
         // Update

modules/ui/preset_list.js

@@ -1,7 +1,7 @@
 import * as d3 from 'd3';
 import { utilRebind } from '../util/rebind';
 import { d3keybinding } from '../lib/d3.keybinding.js';
-import { t } from '../util/locale';
+import { t, textDirection } from '../util/locale';
 import { actionChangePreset } from '../actions/index';
 import { operationDelete } from '../operations/index';
 import { modeBrowse } from '../modes/index';
@@ -44,7 +44,7 @@ export function uiPresetList(context) {
                 .attr('class', 'preset-choose')
                 .on('click', function() { dispatch.call('choose', this, currentPreset); })
                 .append('span')
-                .html('►');
+                .html((textDirection === 'rtl') ? '◄' : '►');
         } else {
             messagewrap
                 .append('button')

modules/ui/undo_redo.js

@@ -1,6 +1,6 @@
 import * as d3 from 'd3';
 import { d3keybinding } from '../lib/d3.keybinding.js';
-import { t } from '../util/locale';
+import { t, textDirection } from '../util/locale';
 import { svgIcon } from '../svg/index';
 import { uiCmd } from './cmd';
 import { uiTooltipHtml } from './tooltipHtml';
@@ -44,11 +44,18 @@ export function uiUndoRedo(context) {
             .on('click', function(d) { return d.action(); })
             .call(tooltipBehavior);
 
-        buttons
-            .each(function(d) {
-                d3.select(this)
-                    .call(svgIcon('#icon-' + d.id));
-            });
+        buttons.each(function(d) {
+            var iconName = d.id;
+            if (textDirection === 'rtl') {
+                if (iconName === 'undo') {
+                    iconName = 'redo';
+                } else if (iconName === 'redo') {
+                    iconName = 'undo';
+                }
+            }
+            d3.select(this)
+                .call(svgIcon('#icon-' + iconName));
+        });
 
         var keybinding = d3keybinding('undo')
             .on(commands[0].cmd, function() { d3.event.preventDefault(); commands[0].action(); })

modules/ui/zoom.js

@@ -1,7 +1,7 @@
 import * as d3 from 'd3';
 import _ from 'lodash';
 import { d3keybinding } from '../lib/d3.keybinding.js';
-import { t } from '../util/locale';
+import { t, textDirection } from '../util/locale';
 import { svgIcon } from '../svg/index';
 import { uiCmd } from './cmd';
 import { uiTooltipHtml } from './tooltipHtml';
@@ -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((textDirection === 'rtl') ? 'right' : 'left')
                 .html(true)
                 .title(function(d) {
                     return uiTooltipHtml(d.title, d.key);

modules/util/detect.js

@@ -1,4 +1,4 @@
-import { currentLocale } from './locale';
+import { currentLocale, setTextDirection } from './locale';
 
 export function utilDetect() {
     var detected = {};
@@ -64,6 +64,13 @@ export function utilDetect() {
         detected.locale = loadedLocale;
     }
 
+    if (['ar', 'fa', 'iw', 'dv'].indexOf(detected.locale.split('-')[0]) > -1 || window.location.href.indexOf('rtl-test-rtl') > -1) {
+        detected.textDirection = 'rtl';
+    } else {
+        detected.textDirection = 'ltr';
+    }
+    setTextDirection(detected.textDirection);
+
     detected.host = window.location && (window.location.origin + window.location.pathname);
 
     detected.filedrop = (window.FileReader && 'ondrop' in window);

modules/util/locale.js

@@ -1,6 +1,7 @@
 var translations = Object.create(null);
 
 export var currentLocale = 'en';
+export var textDirection = 'ltr';
 
 export function setLocale(_) {
     if (translations[_] !== undefined) {
@@ -47,3 +48,13 @@ export function t(s, o, loc) {
 
     return missing;
 }
+
+/**
+ * Given string 'ltr' or 'rtl', save that setting
+ *
+ * @param {string} s ltr or rtl
+ */
+
+export function setTextDirection(dir) {
+    textDirection = dir;
+}

modules/util/util.js

@@ -1,6 +1,6 @@
 import * as d3 from 'd3';
 import _ from 'lodash';
-import { t } from './locale';
+import { t, textDirection } from './locale';
 import { utilDetect } from './detect';
 import { remove as removeDiacritics } from 'diacritics';
 
@@ -174,6 +174,9 @@ export function utilFastMouse(container) {
         rectTop = rect.top,
         clientLeft = +container.clientLeft,
         clientTop = +container.clientTop;
+    if (textDirection === 'rtl') {
+        rectLeft = 0;
+    }
     return function(e) {
         return [
             e.clientX - rectLeft - clientLeft,