Change translation on the fly

modules/renderer/map.js

@@ -99,7 +99,8 @@ export function rendererMap(context) {
 
         selection
             .on('dblclick.map', dblClick)
-            .call(zoom, projection.transform());
+            .call(zoom)
+            .call(zoom.transform, projection.transform());
 
         supersurface = selection.append('div')
             .attr('id', 'supersurface')

modules/svg/labels.js

@@ -1,6 +1,7 @@
 import * as d3 from 'd3';
 import _ from 'lodash';
 import rbush from 'rbush';
+import { textDirection } from '../util/locale';
 
 import {
     geoExtent,
@@ -355,7 +356,6 @@ export function svgLabels(projection, context) {
 
             var coord = projection(entity.loc),
                 margin = 2,
-                textDirection = detected.textDirection,
                 offset = pointOffsets[textDirection],
                 p = {
                     height: height,

modules/ui/init.js

@@ -34,8 +34,13 @@ import { uiCmd } from './cmd';
 
 
 export function uiInit(context) {
+    var uiInitCounter = 0;
+
 
     function render(container) {
+        container
+            .attr('dir', textDirection);
+
         var map = context.map();
 
         var hash = behaviorHash(context);
@@ -71,10 +76,6 @@ export function uiInit(context) {
             .attr('dir', 'ltr')
             .call(map);
 
-        if (textDirection === 'rtl') {
-            d3.select('body').attr('dir', 'rtl');
-        }
-
         content
             .call(uiMapInMap(context));
 
@@ -228,6 +229,7 @@ export function uiInit(context) {
 
         var mapDimensions = map.dimensions();
 
+
         function onResize() {
             mapDimensions = utilGetDimensions(content, true);
             map.dimensions(mapDimensions);
@@ -247,6 +249,7 @@ export function uiInit(context) {
             };
         }
 
+
         // pan amount
         var pa = 10;
 
@@ -266,9 +269,11 @@ export function uiInit(context) {
 
         context.enter(modeBrowse(context));
 
-        context.container()
-            .call(uiSplash(context))
-            .call(uiRestore(context));
+        if (!uiInitCounter++) {
+            context.container()
+                .call(uiSplash(context))
+                .call(uiRestore(context));
+        }
 
         var authenticating = uiLoading(context)
             .message(t('loading_auth'))
@@ -282,10 +287,15 @@ export function uiInit(context) {
             .on('authDone.ui', function() {
                 authenticating.close();
             });
+
+        uiInitCounter++;
     }
 
 
+    var renderCallback;
+
     function ui(node, callback) {
+        renderCallback = callback;
         var container = d3.select(node);
         context.container(container);
         context.loadLocale(function(err) {
@@ -298,6 +308,19 @@ export function uiInit(context) {
         });
     }
 
+
+    ui.restart = function(arg) {
+        context.locale(arg);
+        context.loadLocale(function(err) {
+            if (!err) {
+                context.container().selectAll('*').remove();
+                render(context.container());
+                if (renderCallback) renderCallback();
+            }
+        });
+    };
+
+
     ui.sidebar = uiSidebar(context);
 
     return ui;