include privacy settings in splash modal

see #8831

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');