Move the github and help translate links into their own component

facebook · Nov 13, 2024 · 592eb77 · 592eb77
1 parent 512a289
commit 592eb77
Show file tree

Hide file tree

Showing 4 changed files with 129 additions and 69 deletions.
diff --git a/modules/ui/UiAccount.js b/modules/ui/UiAccount.js
@@ -49,15 +49,19 @@ export class UiAccount {
       return;   // no parent - called too early?
     }
 
+    const context = this.context;
+    const l10n = context.systems.l10n;
+    const osm = context.services.osm;
+
+    // If we are embedded in another site, for example openstreetmap.org,
+    // we don't want to show account switcher controls.
+    if (context.embed()) return;
+
     if (this.user === undefined) {   // First time..
       this.getUserDetails();         // Get the user first, this will call render again..
       return;
     }
 
-    const context = this.context;
-    const l10n = context.systems.l10n;
-    const osm = context.services.osm;
-
     // enter .userInfo
     $parent.selectAll('.userInfo')
       .data([0])

diff --git a/modules/ui/UiMapFooter.js b/modules/ui/UiMapFooter.js
@@ -1,9 +1,8 @@
 import { selection } from 'd3-selection';
 
-import { utilDetect } from '../util/detect.js';
 import {
-  UiAccount, UiContributors, UiFilterStatus, uiIcon,
-  UiScale, UiSourceSwitch, uiTooltip, UiValidatorStatus, UiVersionInfo
+  UiAccount, UiContributors, UiFilterStatus, UiProjectLinks,
+  UiScale, UiSourceSwitch, UiValidatorStatus, UiVersionInfo
 } from './index.js';
 
 
@@ -21,27 +20,21 @@ export class UiMapFooter {
     this.context = context;
 
     // Create child components
+    this.AccountInfo = new UiAccount(context);
     this.Contributors = new UiContributors(context);
     this.FilterStatus = new UiFilterStatus(context);
+    this.ProjectLinks = new UiProjectLinks(context);
     this.Scale = new UiScale(context);
     this.SourceSwitch = new UiSourceSwitch(context);
     this.ValidatorStatus = new UiValidatorStatus(context);
     this.VersionInfo = new UiVersionInfo(context);
 
-    if (!context.embed()) {
-      this.AccountInfo = new UiAccount(context);
-    } else {
-      this.AccountInfo = null;
-    }
-
     // D3 selections
     this.$parent = null;
 
     // Ensure methods used as callbacks always have `this` bound correctly.
     // (This is also necessary when using `d3-selection.call`)
     this.render = this.render.bind(this);
-    this.rerender = (() => this.render());  // call render without argument
-    this._clickBugLink = this._clickBugLink.bind(this);
   }
 
 
@@ -58,9 +51,6 @@ export class UiMapFooter {
       return;   // no parent - called too early?
     }
 
-    const context = this.context;
-    const l10n = context.systems.l10n;
-
     let $footer = $parent.selectAll('.map-footer')
       .data([0]);
 
@@ -88,57 +78,10 @@ export class UiMapFooter {
       .call(this.Contributors.render)
       .call(this.SourceSwitch.render)
       .call(this.ValidatorStatus.render)
-      .call(this.FilterStatus.render);
-
-    const $$issueLinks = $$footerInfo
-      .append('div');
-
-    $$issueLinks
-      .append('button')
-      .attr('class', 'bugnub')
-      .attr('tabindex', -1)
-      .on('click', this._clickBugLink)
-      .call(uiIcon('#rapid-icon-bug', 'bugnub'))
-      .call(uiTooltip(context).title(l10n.t('report_a_bug')).placement('top'));
-
-    $$issueLinks
-      .append('a')
-      .attr('target', '_blank')
-      .attr('href', 'https://github.com/facebook/Rapid/blob/main/CONTRIBUTING.md#translations')
-      .call(uiIcon('#rapid-icon-translate', 'light'))
-      .call(uiTooltip(context).title(l10n.t('help_translate')).placement('top'));
-
-    $$footerInfo
-      .call(this.VersionInfo.render);
-
-    if (this.AccountInfo) {
-      $$footerInfo
-        .call(this.AccountInfo.render);
-    }
-  }
-
-
-  /*
-   * _clickBugLink
-   * Opens GitHub to report a bug
-   */
-  _clickBugLink() {
-    const link = new URL('https://github.com/facebook/Rapid/issues/new');
-
-    // From the template we set up at https://github.com/facebook/Rapid/blob/main/.github/ISSUE_TEMPLATE/bug_report.yml
-    link.searchParams.append('template', 'bug_report.yml');
-    const detected = utilDetect();
-    const browser = `${detected.browser} v${detected.version}`;
-    const os = `${detected.os}`;
-    const userAgent = navigator.userAgent;
-
-    link.searchParams.append('browser', browser);
-    link.searchParams.append('os', os);
-    link.searchParams.append('useragent', userAgent);
-    link.searchParams.append('URL', window.location.href);
-    link.searchParams.append('version', this.context.version);
-
-    window.open(link.toString(), '_blank');
+      .call(this.FilterStatus.render)
+      .call(this.ProjectLinks.render)
+      .call(this.VersionInfo.render)
+      .call(this.AccountInfo.render);
   }
 
 }
diff --git a/modules/ui/UiProjectLinks.js b/modules/ui/UiProjectLinks.js
@@ -0,0 +1,112 @@
+import { selection } from 'd3-selection';
+
+import { uiIcon } from './icon.js';
+import { uiTooltip } from './tooltip.js';
+import { utilDetect } from '../util/detect.js';
+
+
+/**
+ * UiProjectLinks
+ * This component adds the validator status control to the footer.
+ * (was named "issues_info")
+ */
+export class UiProjectLinks {
+
+  /**
+   * @constructor
+   * @param  `context`  Global shared application context
+   */
+  constructor(context) {
+    this.context = context;
+
+    // Create child components
+    this.BugTooltip = uiTooltip(context).placement('top');
+    this.TranslateTooltip = uiTooltip(context).placement('top');
+
+    // D3 selections
+    this.$parent = null;
+
+    // Ensure methods used as callbacks always have `this` bound correctly.
+    // (This is also necessary when using `d3-selection.call`)
+    this.render = this.render.bind(this);
+    this.reportIssue = this.reportIssue.bind(this);
+  }
+
+
+  /**
+   * render
+   * Accepts a parent selection, and renders the content under it.
+   * (The parent selection is required the first time, but can be inferred on subsequent renders)
+   * @param {d3-selection} $parent - A d3-selection to a HTMLElement that this component should render itself into
+   */
+  render($parent = this.$parent) {
+    if ($parent instanceof selection) {
+      this.$parent = $parent;
+    } else {
+      return;   // no parent - called too early?
+    }
+
+    const context = this.context;
+    const l10n = context.systems.l10n;
+
+    // Create/remove wrapper div if necessary
+    let $wrap = $parent.selectAll('.project-links')
+      .data([0]);
+
+    const $$wrap = $wrap.enter()
+      .append('div')
+      .attr('class', 'project-links');
+
+    $$wrap
+      .append('button')
+      .attr('class', 'bugnub')
+      .attr('tabindex', -1)
+      .on('click', this.reportIssue)
+      .call(uiIcon('#rapid-icon-bug', 'bugnub'))
+      .call(this.BugTooltip);
+
+    $$wrap
+      .append('a')
+      .attr('target', '_blank')
+      .attr('href', 'https://github.com/facebook/Rapid/blob/main/CONTRIBUTING.md#translations')
+      .call(uiIcon('#rapid-icon-translate', 'light'))
+      .call(this.TranslateTooltip);
+
+    // update
+    $wrap = $wrap.merge($$wrap);
+
+    // localize tooltips
+    this.BugTooltip.title(l10n.t('report_a_bug'));
+    this.TranslateTooltip.title(l10n.t('help_translate'));
+  }
+
+
+  /*
+   * reportIssue
+   * Opens GitHub to report a bug
+   * @param  {Event} e - event that triggered the click (if any)
+   */
+  reportIssue(e) {
+    if (e)  e.preventDefault();
+
+    this.BugTooltip.hide();
+
+    const link = new URL('https://github.com/facebook/Rapid/issues/new');
+
+    // From the template we set up at https://github.com/facebook/Rapid/blob/main/.github/ISSUE_TEMPLATE/bug_report.yml
+    link.searchParams.append('template', 'bug_report.yml');
+    const detected = utilDetect();
+    const browser = `${detected.browser} v${detected.version}`;
+    const os = `${detected.os}`;
+    const userAgent = navigator.userAgent;
+
+    link.searchParams.append('browser', browser);
+    link.searchParams.append('os', os);
+    link.searchParams.append('useragent', userAgent);
+    link.searchParams.append('URL', window.location.href);
+    link.searchParams.append('version', this.context.version);
+
+    window.open(link.toString(), '_blank');
+  }
+
+}
diff --git a/modules/ui/index.js b/modules/ui/index.js
@@ -54,6 +54,7 @@ export { UiPhotoViewer } from './UiPhotoViewer.js';
 export { uiPopover } from './popover.js';
 export { uiPresetIcon } from './preset_icon.js';
 export { uiPresetList } from './preset_list.js';
+export { UiProjectLinks } from './UiProjectLinks.js';
 export { uiRapidColorpicker } from './rapid_colorpicker.js';
 export { uiRapidFeatureInspector } from './rapid_feature_inspector.js';
 export { uiRapidFeatureToggleDialog } from './rapid_feature_toggle_dialog.js';