include privacy settings in splash modal

see #8831

CHANGELOG.md

@@ -62,9 +62,10 @@ _Breaking developer changes, which may affect downstream projects or sites that
 * Fix a bug which made it impossible to switch to a custom TMS imagery layer after using a custom WMS source and vice versa ([#8057])
 * Fix a bug where the validator might show wrong tagging suggestions for a preset if another preset has a partial match ([#8828], thanks [@bhousel])
 #### :earth_asia: Localization
-* deprecate ~`t.html`~ for providing localized texts, which is replaced by the new method `t.append` which directly and safely appends the localized strings to the DOM. ([#8817])
+* Deprecate ~`t.html`~ for providing localized texts, which is replaced by the new method `t.append` which directly and safely appends the localized strings to the DOM ([#8817])
 #### :hourglass: Performance
 #### :mortar_board: Walkthrough / Help
+* Show privacy settings in splash screen (i.e. the "Welcome to iD" message) ([#8831])
 #### :rocket: Presets
 * Radio-button based presets fields can be in an non-unique state (e.g. a tunnel which is also a ford) – this is now rendered like a multi selection with conflicting states ([#8796])
 * Add colours for preset categories ([#8799])
@@ -84,6 +85,7 @@ _Breaking developer changes, which may affect downstream projects or sites that
 [#8817]: https://github.com/openstreetmap/iD/pull/8817
 [#8818]: https://github.com/openstreetmap/iD/issues/8818
 [#8828]: https://github.com/openstreetmap/iD/pull/8828
+[#8831]: https://github.com/openstreetmap/iD/issues/8831
 [#8836]: https://github.com/openstreetmap/iD/issues/8836
 [@k-yle]: https://github.com/k-yle
 

css/80_app.css

@@ -4965,6 +4965,14 @@ img.tile-debug {
     color: #7092ff;
 }
 
+.modal-splash .section-preferences-third-party {
+    margin-top: 20px;
+}
+
+.modal-splash .section-preferences-third-party .privacy-link {
+    display: none;
+}
+
 
 /* Shortcuts Modal
 ------------------------------------------------------- */
@@ -5377,22 +5385,26 @@ button.conflicts-button {
 /* dark tooltips for sidebar / panels */
 .tooltip.dark.top .popover-arrow,
 .map-pane .tooltip.top .popover-arrow,
-.sidebar .tooltip.top .popover-arrow {
+.sidebar .tooltip.top .popover-arrow,
+.modal .tooltip.top .popover-arrow {
     border-top-color: #000;
 }
 .tooltip.dark.bottom .popover-arrow,
 .map-pane .tooltip.bottom .popover-arrow,
-.sidebar .tooltip.bottom .popover-arrow {
+.sidebar .tooltip.bottom .popover-arrow,
+.modal .tooltip.bottom .popover-arrow {
     border-bottom-color: #000;
 }
 .tooltip.dark.left .popover-arrow,
 .map-pane .tooltip.left .popover-arrow,
-.sidebar .tooltip.left .popover-arrow {
+.sidebar .tooltip.left .popover-arrow,
+.modal .tooltip.left .popover-arrow {
     border-left-color: #000;
 }
 .tooltip.dark.right .popover-arrow,
 .map-pane .tooltip.right .popover-arrow,
-.sidebar .tooltip.right .popover-arrow {
+.sidebar .tooltip.right .popover-arrow,
+.modal .tooltip.right .popover-arrow {
     border-right-color: #000;
 }
 .tooltip.dark .popover-inner,
@@ -5403,7 +5415,8 @@ button.conflicts-button {
 .map-pane .keyhint-wrap,
 .sidebar .popover-inner,
 .sidebar .tooltip-heading,
-.sidebar .keyhint-wrap {
+.sidebar .keyhint-wrap,
+.modal .popover-inner {
     background: #000;
     color: #ccc;
 }

data/core.yaml

@@ -1027,6 +1027,7 @@ en:
     privacy_update: "Our privacy policy has recently been updated."
     privacy_policy: iD privacy policy
     privacy: "{updateMessage} By using this software, you agree to do so in accordance with the {privacyLink}."
+    privacy_settings: Your Privacy Settings
     walkthrough: "Start the Walkthrough"
     start: "Edit now"
   source_switch:

modules/core/preferences.js

@@ -12,6 +12,8 @@ _storage = _storage || (() => {
   };
 })();
 
+const _listeners = {};
+
 //
 // corePreferences is an interface for persisting basic key-value strings
 // within and between iD sessions on the same site.
@@ -22,11 +24,13 @@ _storage = _storage || (() => {
  * @returns {boolean} true if the action succeeded
  */
 function corePreferences(k, v) {
-
   try {
-    if (arguments.length === 1) return _storage.getItem(k);
+    if (v === undefined) return _storage.getItem(k);
     else if (v === null) _storage.removeItem(k);
     else _storage.setItem(k, v);
+    if (_listeners[k]) {
+      _listeners[k].forEach(handler => handler(v));
+    }
     return true;
   } catch (e) {
     /* eslint-disable no-console */
@@ -36,7 +40,12 @@ function corePreferences(k, v) {
     /* eslint-enable no-console */
     return false;
   }
+}
 
+// adds an event listener which is triggered whenever
+corePreferences.onChange = function(k, handler) {
+  _listeners[k] = _listeners[k] || [];
+  _listeners[k].push(handler);
 }
 
 export { corePreferences as prefs };

modules/ui/sections/privacy.js

@@ -5,22 +5,22 @@ import { svgIcon } from '../../svg/icon';
 import { uiSection } from '../section';
 
 export function uiSectionPrivacy(context) {
-
     let section = uiSection('preferences-third-party', context)
       .label(t.html('preferences.privacy.title'))
       .disclosureContent(renderDisclosureContent);
 
-    let _showThirdPartyIcons = prefs('preferences.privacy.thirdpartyicons') || 'true';
-
     function renderDisclosureContent(selection) {
       // enter
-      let privacyOptionsListEnter = selection.selectAll('.privacy-options-list')
+      selection.selectAll('.privacy-options-list')
         .data([0])
         .enter()
         .append('ul')
         .attr('class', 'layer-list privacy-options-list');
 
-      let thirdPartyIconsEnter = privacyOptionsListEnter
+      let thirdPartyIconsEnter = selection.select('.privacy-options-list')
+        .selectAll('.privacy-third-party-icons-item')
+        .data([prefs('preferences.privacy.thirdpartyicons') || 'true'])
+        .enter()
         .append('li')
         .attr('class', 'privacy-third-party-icons-item')
         .append('label')
@@ -32,17 +32,20 @@ export function uiSectionPrivacy(context) {
       thirdPartyIconsEnter
         .append('input')
         .attr('type', 'checkbox')
-        .on('change', (d3_event) => {
+        .on('change', (d3_event, d) => {
           d3_event.preventDefault();
-          _showThirdPartyIcons = (_showThirdPartyIcons === 'true') ? 'false' : 'true';
-          prefs('preferences.privacy.thirdpartyicons', _showThirdPartyIcons);
-          update();
+          prefs('preferences.privacy.thirdpartyicons', d === 'true' ? 'false' : 'true');
         });
 
       thirdPartyIconsEnter
         .append('span')
         .call(t.append('preferences.privacy.third_party_icons.description'));
 
+      // update
+      selection.selectAll('.privacy-third-party-icons-item')
+        .classed('active', d => d === 'true')
+        .select('input')
+        .property('checked', d => d === 'true');
 
       // Privacy Policy link
       selection.selectAll('.privacy-link')
@@ -57,16 +60,9 @@ export function uiSectionPrivacy(context) {
         .append('span')
         .call(t.append('preferences.privacy.privacy_link'));
 
-      update();
-
-
-      function update() {
-        selection.selectAll('.privacy-third-party-icons-item')
-          .classed('active', (_showThirdPartyIcons === 'true'))
-          .select('input')
-          .property('checked', (_showThirdPartyIcons === 'true'));
-      }
     }
 
+    prefs.onChange('preferences.privacy.thirdpartyicons', section.reRender);
+
     return section;
 }

modules/ui/splash.js

@@ -3,6 +3,7 @@ import { fileFetcher } from '../core/file_fetcher';
 import { t } from '../core/localizer';
 import { uiIntro } from './intro';
 import { uiModal } from './modal';
+import { uiSectionPrivacy } from './sections/privacy';
 
 
 export function uiSplash(context) {
@@ -64,6 +65,10 @@ export function uiSplash(context) {
           t('splash.privacy_policy') + '</a>' }
       }));
 
+    uiSectionPrivacy(context)
+      .label(t.html('splash.privacy_settings'))
+      .render(modalSection);
+
     let buttonWrap = introModal
       .append('div')
       .attr('class', 'modal-actions');