Continuing core refactor, particularly for LocalizationSystem

(followup from ca9be60, 43e7f89, also see #961)

Continuing to remove localization operations from Context.
The idea here is to remove "magic" from the code.

- Removed `context.t`, `.tHtml`, `.tAppend`
  Code must go through the LocalizationSystem to do these things now.

modules/Context.js

@@ -127,9 +127,6 @@ export class Context extends EventEmitter {
 
     // LocalizationSystem
     const l10n = this.systems.l10n;
-    this.t = l10n.t;
-    this.tHtml = l10n.tHtml;
-    this.tAppend = l10n.tAppend;
     if (this._prelocale) {   // set preferred locale codes, if we have them
       this.systems.l10n.preferredLocaleCodes = this._prelocale;
     }

modules/core/LocalizationSystem.js

@@ -80,7 +80,7 @@ export class LocalizationSystem extends AbstractSystem {
     this._languageNames = {};
     this._scriptNames = {};
 
-    // When called like `context.t`, don't lose `this`
+    // Ensure methods used as callbacks always have `this` bound correctly.
     this.t = this.t.bind(this);
     this.tHtml = this.tHtml.bind(this);
     this.tAppend = this.tAppend.bind(this);

modules/core/lib/Preset.js

@@ -120,31 +120,36 @@ export class Preset {
 
 
   t(scope, options) {
-    return this.context.t(`_tagging.presets.presets.${this.id}.${scope}`, options);
+    const l10n = this.context.systems.l10n;
+    return l10n.t(`_tagging.presets.presets.${this.id}.${scope}`, options);
   }
 
   tHtml(scope, options) {
-    return this.context.tHtml(`_tagging.presets.presets.${this.id}.${scope}`, options);
+    const l10n = this.context.systems.l10n;
+    return l10n.tHtml(`_tagging.presets.presets.${this.id}.${scope}`, options);
   }
 
   tAppend (scope, options) {
-    return this.context.tAppend(`_tagging.presets.presets.${this.id}.${scope}`, options);
+    const l10n = this.context.systems.l10n;
+    return l10n.tAppend(`_tagging.presets.presets.${this.id}.${scope}`, options);
   }
 
   subtitle() {
     if (this.suggestion) {
+      const l10n = this.context.systems.l10n;
       let path = this.id.split('/');
       path.pop();  // remove brand name
-      return this.context.t('_tagging.presets.presets.' + path.join('/') + '.name');
+      return l10n.t('_tagging.presets.presets.' + path.join('/') + '.name');
     }
     return null;
   }
 
   subtitleLabel() {
     if (this.suggestion) {
+      const l10n = this.context.systems.l10n;
       let path = this.id.split('/');
       path.pop();  // remove brand name
-      return this.context.tHtml('_tagging.presets.presets.' + path.join('/') + '.name');
+      return l10n.tHtml('_tagging.presets.presets.' + path.join('/') + '.name');
     }
     return null;
   }

modules/core/lib/ValidationIssue.js

@@ -45,11 +45,14 @@ export class ValidationIssue {
 
     // For warnings, create an "ignore" option
     if (this.severity === 'warning') {
+      const l10n = this.context.systems.l10n;
+      const validator = this.context.systems.validator;
+
       fixes.push(new ValidationFix({
-        title: this.context.tHtml('issues.fix.ignore_issue.title'),
+        title: l10n.tHtml('issues.fix.ignore_issue.title'),
         icon: 'rapid-icon-close',
         onClick: () => {
-          this.context.systems.validator.ignoreIssue(this.id);
+          validator.ignoreIssue(this.id);
         }
       }));
     }

modules/services/ImproveOsmService.js

@@ -122,6 +122,7 @@ export class ImproveOsmService extends AbstractSystem {
 
     // determine the needed tiles to cover the view
     const context = this.context;
+    const l10n = context.systems.l10n;
     const tiles = this._tiler.getTiles(context.projection).tiles;
 
     // abort inflight requests that are no longer needed
@@ -193,7 +194,7 @@ export class ImproveOsmService extends AbstractSystem {
                 d.replacements = {
                   percentage: feature.percentOfTrips,
                   num_trips: feature.numberOfTrips,
-                  highway: this._linkErrorObject(context.t('QA.keepRight.error_parts.highway')),
+                  highway: this._linkErrorObject(l10n.t('QA.keepRight.error_parts.highway')),
                   from_node: this._linkEntity('n' + feature.fromNodeId),
                   to_node: this._linkEntity('n' + feature.toNodeId)
                 };
@@ -222,12 +223,12 @@ export class ImproveOsmService extends AbstractSystem {
 
                 d.replacements = {
                   num_trips: numberOfTrips,
-                  geometry_type: context.t(`QA.improveOSM.geometry_types.${geoType}`)
+                  geometry_type: l10n.t(`QA.improveOSM.geometry_types.${geoType}`)
                 };
 
                 // -1 trips indicates data came from a 3rd party
                 if (numberOfTrips === -1) {
-                  d.desc = context.t('QA.improveOSM.error_types.mr.description_alt', d.replacements);
+                  d.desc = l10n.t('QA.improveOSM.error_types.mr.description_alt', d.replacements);
                 }
 
                 this._cache.data[d.id] = d;
@@ -270,7 +271,7 @@ export class ImproveOsmService extends AbstractSystem {
                   from_way: this._linkEntity('w' + from_way),
                   to_way: this._linkEntity('w' + to_way),
                   travel_direction: dir_of_travel,
-                  junction: this._linkErrorObject(context.t('QA.keepRight.error_parts.this_node'))
+                  junction: this._linkErrorObject(l10n.t('QA.keepRight.error_parts.this_node'))
                 };
 
                 this._cache.data[d.id] = d;
@@ -566,7 +567,8 @@ export class ImproveOsmService extends AbstractSystem {
       360: 'north'
     };
 
-    return this.context.t(`QA.improveOSM.directions.${compass[dir]}`);
+    const l10n = this.context.systems.l10n;
+    return l10n.t(`QA.improveOSM.directions.${compass[dir]}`);
   }
 
 

modules/services/KeepRightService.js

@@ -415,6 +415,7 @@ export class KeepRightService extends AbstractSystem {
   _tokenReplacements(d) {
     if (!(d instanceof QAItem)) return;
 
+    const l10n = this.context.systems.l10n;
     const htmlRegex = new RegExp(/<\/[a-z][\s\S]*>/);
     const replacements = {};
 
@@ -454,7 +455,7 @@ export class KeepRightService extends AbstractSystem {
       } else {
         const compare = capture.toLowerCase();
         if (this._krData.localizeStrings[compare]) {   // some replacement strings can be localized
-          capture = this.context.t('QA.keepRight.error_parts.' + this._krData.localizeStrings[compare]);
+          capture = l10n.t('QA.keepRight.error_parts.' + this._krData.localizeStrings[compare]);
         }
       }
 
@@ -466,9 +467,11 @@ export class KeepRightService extends AbstractSystem {
 
 
   _parseError(capture, idType) {
+    const l10n = this.context.systems.l10n;
     const compare = capture.toLowerCase();
+
     if (this._krData.localizeStrings[compare]) {   // some replacement strings can be localized
-      capture = this.context.t('QA.keepRight.error_parts.' + this._krData.localizeStrings[compare]);
+      capture = l10n.t('QA.keepRight.error_parts.' + this._krData.localizeStrings[compare]);
     }
 
     switch (idType) {
@@ -544,7 +547,7 @@ export class KeepRightService extends AbstractSystem {
         const match = item.match(/\#(\d+)\((.+)\)?/);
         if (match !== null && match.length > 2) {
           newList.push(linkEntity('w' + match[1]) + ' ' +
-            this.context.t('QA.keepRight.errorTypes.231.layer', { layer: match[2] })
+            l10n.t('QA.keepRight.errorTypes.231.layer', { layer: match[2] })
           );
         }
       }
@@ -577,7 +580,7 @@ export class KeepRightService extends AbstractSystem {
 
       const match = capture.match(/\(including the name (\'.+\')\)/);
       if (match?.length) {
-        return this.context.t('QA.keepRight.errorTypes.370.including_the_name', { name: match[1] });
+        return l10n.t('QA.keepRight.errorTypes.370.including_the_name', { name: match[1] });
       }
       return '';
     }

modules/services/StreetsideService.js

@@ -339,6 +339,8 @@ export class StreetsideService extends AbstractSystem {
     let d = this._cache.bubbles.get(bubbleID);
 
     const context = this.context;
+    const l10n = context.systems.l10n;
+
     let viewer = context.container().select('.photoviewer');
     if (!viewer.empty()) {
       viewer.datum(d);
@@ -399,7 +401,7 @@ export class StreetsideService extends AbstractSystem {
 
     label
       .append('span')
-      .text(this.context.t('streetside.hires'));
+      .text(l10n.t('streetside.hires'));
 
 
     let captureInfo = line1
@@ -440,15 +442,15 @@ export class StreetsideService extends AbstractSystem {
       .attr('target', '_blank')
       .attr('href', 'https://www.bing.com/maps?cp=' + d.loc[1] + '~' + d.loc[0] +
         '&lvl=17&dir=' + d.ca + '&style=x&v=2&sV=1')
-      .text(this.context.t('streetside.view_on_bing'));
+      .text(l10n.t('streetside.view_on_bing'));
 
     line2
       .append('a')
       .attr('class', 'image-report-link')
       .attr('target', '_blank')
       .attr('href', 'https://www.bing.com/maps/privacyreport/streetsideprivacyreport?bubbleid=' +
         encodeURIComponent(d.id) + '&focus=photo&lat=' + d.loc[1] + '&lng=' + d.loc[0] + '&z=17')
-      .text(this.context.t('streetside.report'));
+      .text(l10n.t('streetside.report'));
 
 
 // const streetsideImagesApi = 'https://t.ssl.ak.tiles.virtualearth.net/tiles/';

modules/ui/account.js

@@ -2,6 +2,7 @@ import { uiIcon } from './icon';
 
 
 export function uiAccount(context) {
+  const l10n = context.systems.l10n;
   const osm = context.services.osm;
 
 
@@ -58,7 +59,7 @@ export function uiAccount(context) {
       loginLogout
         .classed('hide', false)
         .select('a')
-        .text(context.t('logout'))
+        .text(l10n.t('logout'))
         .on('click', e => {
           e.preventDefault();
           osm.logout();
@@ -69,7 +70,7 @@ export function uiAccount(context) {
       loginLogout
         .classed('hide', false)
         .select('a')
-        .text(context.t('login'))
+        .text(l10n.t('login'))
         .on('click', e => {
           e.preventDefault();
           osm.authenticate();

modules/ui/attribution.js

@@ -3,7 +3,10 @@ import { select as d3_select } from 'd3-selection';
 
 
 export function uiAttribution(context) {
-  const imagerySystem = context.systems.imagery;
+  const imagery = context.systems.imagery;
+  const l10n = context.systems.l10n;
+  const map = context.systems.map;
+
   let _selection = d3_select(null);
 
 
@@ -41,7 +44,7 @@ export function uiAttribution(context) {
             .attr('target', '_blank');
         }
 
-        const terms_text = context.t(`imagery.${d.idtx}.attribution.text`, { default: d.terms_text || d.id || d.name });
+        const terms_text = l10n.t(`imagery.${d.idtx}.attribution.text`, { default: d.terms_text || d.id || d.name });
 
         if (d.icon && !d.overlay) {
           attribution
@@ -60,7 +63,7 @@ export function uiAttribution(context) {
 
     let copyright = attributions.selectAll('.copyright-notice')
       .data(d => {
-        let notice = d.copyrightNotices(context.systems.map.zoom(), context.systems.map.extent());
+        let notice = d.copyrightNotices(map.zoom(), map.extent());
         return notice ? [notice] : [];
       });
 
@@ -78,12 +81,12 @@ export function uiAttribution(context) {
 
 
   function update() {
-    let baselayer = imagerySystem.baseLayerSource();
+    let baselayer = imagery.baseLayerSource();
     _selection
       .call(render, (baselayer ? [baselayer] : []), 'base-layer-attribution');
 
-    const z = context.systems.map.zoom();
-    let overlays = imagerySystem.overlayLayerSources() || [];
+    const z = map.zoom();
+    let overlays = imagery.overlayLayerSources() || [];
     _selection
       .call(render, overlays.filter(s => s.validZoom(z)), 'overlay-layer-attribution');
   }
@@ -92,8 +95,8 @@ export function uiAttribution(context) {
   return function(selection) {
     _selection = selection;
 
-    imagerySystem.on('imagerychange', update);
-    context.systems.map.on('draw', _throttle(update, 400, { leading: false }));
+    imagery.on('imagerychange', update);
+    map.on('draw', _throttle(update, 400, { leading: false }));
 
     update();
   };

modules/ui/changeset_editor.js

@@ -9,7 +9,9 @@ import { utilRebind, utilTriggerEvent } from '../util';
 
 
 export function uiChangesetEditor(context) {
-    var dispatch = d3_dispatch('change');
+    const l10n = context.systems.l10n;
+    const dispatch = d3_dispatch('change');
+
     var formFields = uiFormFields(context);
     var commentCombo = uiCombobox(context, 'comment').caseSensitive(true);
     var _uifields;
@@ -104,9 +106,9 @@ export function uiChangesetEditor(context) {
             .append('a')
             .attr('target', '_blank')
             .call(uiIcon('#rapid-icon-alert', 'inline'))
-            .attr('href', context.t('commit.google_warning_link'))
+            .attr('href', l10n.t('commit.google_warning_link'))
             .append('span')
-            .text(context.t('commit.google_warning'));
+            .text(l10n.t('commit.google_warning'));
 
         commentEnter
             .transition()

modules/ui/cmd.js

@@ -39,23 +39,23 @@ export let uiCmd = function(code) {
 uiCmd.display = function(context, code) {
   if (code.length !== 1) return code;
 
-  const t = context.t;
+  const l10n = context.systems.l10n;
   const detected = utilDetect();
   const mac = (detected.os === 'mac');
   const replacements = {
-    '⌘': mac ? '⌘ ' + t('shortcuts.key.cmd')    : t('shortcuts.key.ctrl'),
-    '⇧': mac ? '⇧ ' + t('shortcuts.key.shift')  : t('shortcuts.key.shift'),
-    '⌥': mac ? '⌥ ' + t('shortcuts.key.option') : t('shortcuts.key.alt'),
-    '⌃': mac ? '⌃ ' + t('shortcuts.key.ctrl')   : t('shortcuts.key.ctrl'),
-    '⌫': mac ? '⌫ ' + t('shortcuts.key.delete') : t('shortcuts.key.backspace'),
-    '⌦': mac ? '⌦ ' + t('shortcuts.key.del')    : t('shortcuts.key.del'),
-    '↖': mac ? '↖ ' + t('shortcuts.key.pgup')   : t('shortcuts.key.pgup'),
-    '↘': mac ? '↘ ' + t('shortcuts.key.pgdn')   : t('shortcuts.key.pgdn'),
-    '⇞': mac ? '⇞ ' + t('shortcuts.key.home')   : t('shortcuts.key.home'),
-    '⇟': mac ? '⇟ ' + t('shortcuts.key.end')    : t('shortcuts.key.end'),
-    '↵': mac ? '⏎ ' + t('shortcuts.key.return') : t('shortcuts.key.enter'),
-    '⎋': mac ? '⎋ ' + t('shortcuts.key.esc')    : t('shortcuts.key.esc'),
-    '☰': mac ? '☰ ' + t('shortcuts.key.menu')  : t('shortcuts.key.menu'),
+    '⌘': mac ? '⌘ ' + l10n.t('shortcuts.key.cmd')    : l10n.t('shortcuts.key.ctrl'),
+    '⇧': mac ? '⇧ ' + l10n.t('shortcuts.key.shift')  : l10n.t('shortcuts.key.shift'),
+    '⌥': mac ? '⌥ ' + l10n.t('shortcuts.key.option') : l10n.t('shortcuts.key.alt'),
+    '⌃': mac ? '⌃ ' + l10n.t('shortcuts.key.ctrl')   : l10n.t('shortcuts.key.ctrl'),
+    '⌫': mac ? '⌫ ' + l10n.t('shortcuts.key.delete') : l10n.t('shortcuts.key.backspace'),
+    '⌦': mac ? '⌦ ' + l10n.t('shortcuts.key.del')    : l10n.t('shortcuts.key.del'),
+    '↖': mac ? '↖ ' + l10n.t('shortcuts.key.pgup')   : l10n.t('shortcuts.key.pgup'),
+    '↘': mac ? '↘ ' + l10n.t('shortcuts.key.pgdn')   : l10n.t('shortcuts.key.pgdn'),
+    '⇞': mac ? '⇞ ' + l10n.t('shortcuts.key.home')   : l10n.t('shortcuts.key.home'),
+    '⇟': mac ? '⇟ ' + l10n.t('shortcuts.key.end')    : l10n.t('shortcuts.key.end'),
+    '↵': mac ? '⏎ ' + l10n.t('shortcuts.key.return') : l10n.t('shortcuts.key.enter'),
+    '⎋': mac ? '⎋ ' + l10n.t('shortcuts.key.esc')    : l10n.t('shortcuts.key.esc'),
+    '☰': mac ? '☰ ' + l10n.t('shortcuts.key.menu')  : l10n.t('shortcuts.key.menu'),
   };
 
   return replacements[code] || code;

modules/ui/confirm.js

@@ -2,6 +2,7 @@ import { uiModal } from './modal';
 
 
 export function uiConfirm(context, selection) {
+  const l10n = context.systems.l10n;
   let modalSelection = uiModal(selection);
 
   modalSelection.select('.modal')
@@ -24,7 +25,7 @@ export function uiConfirm(context, selection) {
       .append('button')
       .attr('class', 'button ok-button action')
       .on('click.confirm', () => modalSelection.remove())
-      .text(context.t('confirm.okay'))
+      .text(l10n.t('confirm.okay'))
       .node()
       .focus();