@yz-social/civildefense.io 4.4.1

package/public/javascripts/hashtags.js

@@ -0,0 +1,205 @@
+const { localStorage } = globalThis; // For linters.
+import { stripLeadingEmoji, canonicalTag } from './versions.js';
+import { Int } from './translations.js';
+import { updateSubscriptions, Marker, showMessage } from './map.js';
+import { resetInactivityTimer, clickTip } from './main.js';
+
+// We subscribe to the cartesian product of the list of non-overlapping cells and all hashes.
+// We publish to just the first of these.
+export const Hashtags = {
+
+  // Unless otherwise noted, a `hashtag` is an extended hashtag that contains a leading emoji if known.
+  // That emoji is used as the marker on the map.
+  // This full string is what is displayed, and shared with others through publishing and urls.
+  //
+  // However, there is also a `canonical` form that is used in forming the eventName for pub/sub, in which the leading emoji is stripped.
+  // A user might manually type in either form to add a new subscription, and they will receive publications that carry the full string.
+  // Any user that does not yet have a leading emoji will display an identicon of the canonical part as the marker,
+  // but the first time they get an extended string whose canonical part matches, they will start using that emoji going forward.
+  // Thus:
+  // 1. A user does not have to type an emoji to add a hashtag subscription.
+  // 2. Once a user has an emoji for a given hashtag - either entered by them or learned from others - it will "stick" and not change for this user.
+  // 3. But until then, we still have a marker that will automatically pick up the first one it sees from someone else.
+  //    (The already displayed identicons do not change until the user "opens" a post, and then they all change.
+  //     Later, we will allow a user to change what they see on their own device.)
+  // 4. While an identicon is displayed, it is the same for all markers of this hashtag, regardless of whether the original posters
+  //    were using the same emoji as each other.
+  hashtags: {},
+  canonical2extended: {},
+  add(label, active = true, updateMarkers = true) { // Ensure label is a hashtag, initialized to active, and if existing, forcing it active.
+    // Return our (possibly new) understanding of the extended hashtag.
+    // Note that only startup-population of tags from persistence would ever specify active=false.
+    // Here we accept a canonical or extended label, updating our records keyed by the canonical part,
+    // but if we currently have just a canonical part we update our records to capture the extended.
+    // (We do not change the emoji of an existing extended.)
+    const canonical = canonicalTag(label);                   // no emoji, lower case.
+    const ourExtended = this.canonical2extended[canonical];  // our current version, if any
+    const oursHasEmoji = this.firstEmoji(ourExtended);
+    const extended = oursHasEmoji ? ourExtended : label;      // full emoji form to use
+    if (!oursHasEmoji) {
+      active = this.hashtags[canonical] || active;
+      delete this.hashtags[ourExtended];
+    }
+    this.hashtags[extended] ||= active; // If it's 'pub', let it remain so.
+    this.canonical2extended[canonical] = extended;
+    if (!oursHasEmoji) {
+      this.onchange({resetSubscriptions: false});
+      if (updateMarkers) Marker.updateMarkers(canonical, extended);
+    }
+    return extended;
+  },
+  getAll() { // List of all the user's hashtags.
+    return Object.keys(this.hashtags);
+  },
+  getSubscribe() { // Return a list of the hashtags to which the user intendeds to subscribe.
+    return this.getAll().filter(tag => this.hashtags[tag]);
+  },
+  isPublish(key) {
+    return this.hashtags[key] === 'pub';
+  },
+  getPublish() { // Return the one hashtag to which the user intends to publish.
+    return this.getAll().find(key => this.isPublish(key));
+  },  
+  firstEmoji(tag) { // First emoji that appears in string, else falsy.
+    // I would prefer that it take just the first emoji, but that doesn't grab double-wide ones
+    // such as flags. So instead this will return any leading emoji ending with a space, terminator, or normal character.
+    return tag && tag.match(/\p{Emoji}+/u)?.[0];
+
+  },
+  identicon(tag, slot = '') { // HTML for an identicon representing tag.
+    // Unneeded and not necessarilly meaningful if tag has emoji.
+    return `<minidenticon-svg ${slot ? `slot="${slot}"` : ''} username="${tag}"></minidenticon-svg>`;
+  },
+  formatMarker(tag) { // HTML (possibly text) to represent tag as a marker on map.
+    return this.firstEmoji(tag) || this.identicon(tag);
+  },
+  formatPubtag(tag) { // HTML (possibly text) to represent tag with defaulted icon.
+    const emoji = this.firstEmoji(tag);
+    return emoji ? tag : this.identicon(tag) + tag;
+  },
+  onchange({redisplaySubscribers = true, highlightPublish = false, resetSubscriptions = true} = {}) { // Update and persist internal data, and update visuals.
+    // If redisplaySubscribers, the presence/order may have changed.
+    if (redisplaySubscribers) this.resetSubscriberDisplay();
+    localStorage.setItem('hashtags', JSON.stringify(this.hashtags));
+    if (resetSubscriptions) {
+      updateSubscriptions();
+      Object.values(Marker.markers).forEach(wrapper => this.hashtags[wrapper.hashtag] || wrapper.destroy());
+    }
+  },
+  chipset: document.body.querySelector('.watching-hashtags'), // Element containing the user's chips.
+  chipHTML(label) { // Answer an HTML string to represent label in the chipset.
+    const active = this.hashtags[label];
+    return `<md-filter-chip label="${label}" elevated removable
+        ${active === 'pub' ? 'class="pub"' : ''}
+        ${active ? ' selected' : ''}
+      >${this.firstEmoji(label) ? '' : this.identicon(label, 'selected-icon')}
+        <md-icon-button slot="remove-trailing-icon" title="fixme help"><md-icon class="material-icons"></md-icon></md-icon-button>
+      </md-filter-chip>`;
+  },
+  resetSubscriberDisplay() { // Lay out all the hashtag chips display, including the input for adding new ones.
+    this.chipset.innerHTML = '';
+    const tags = this.getAll();
+
+    // Sort alphabetically, ignoring any leading emoji, as these have unexpected orderings.
+    tags.sort((a, b) => stripLeadingEmoji(a).localeCompare(stripLeadingEmoji(b)));
+    const reordered = {};
+    tags.forEach(tag => reordered[tag] = this.hashtags[tag]);
+    this.hashtags = reordered;
+
+    // Add a chip for each hashtag.
+    tags.forEach(label => { // Elements are displayed from the bottom up.
+      this.chipset.insertAdjacentHTML("afterbegin", this.chipHTML(label));
+    });
+    // IWBNI we just added handlers once to the chipset and relied on bubbling up, but there's something not working about that.
+    [...this.chipset.children].forEach(element => {
+      // Material design will update the displays. We have to handle the data changes.
+      element.addEventListener('remove', event => { // Clicking the button WITHIN the chip (which is the material design 'remove' event).
+	resetInactivityTimer();
+	const chip = event.target;
+	if (!chip.selected) { // 'x' icon. Not currently selected. Go ahead and remove it.
+	  showMessage(Int`Topic "${chip.label}" has been removed. You can add it back with "add topic".`, 'instructions');
+	  return this.remove(chip);
+	} // radio button icon. Chip is already selected. We are setting the publishing tag.
+	event.preventDefault();
+	showMessage(Int`Tapping the map will now produce an alert for the "${chip.label}" topic.`, 'instructions');
+	if (chip.classList.contains('pub')) return false;
+	return this.setPublish(chip.label);
+      });
+      clickTip(element, Int`Toggle whether alerts for this topic shown on the map. Separately, a radio button is shown when selected and sets this as the initial topic of the next alert you make, while an x button is shown when deselected and removes the topic.`, event => { // Toggle action on whole chip.
+	event.stopPropagation();
+	resetInactivityTimer();
+	const chip = event.target;
+	if (chip.selected) showMessage(Int`Turning "${chip.label}" alerts back on in the map.`, 'instructions');
+	else showMessage(Int`Turning off "${chip.label}" alerts in the map. You can delete the topic altogether with the X.`, 'instructions');
+	this.toggleChip(chip);
+	Marker.closePopup();
+	if (chip.selected) this.setPublish(chip.label);
+	this.onchange({redisplaySubscribers: false});
+      });
+    });
+    this.chipset.insertAdjacentHTML("afterbegin",  // Chip to add a new hashtag.
+				    `<md-filled-text-field class="newtag" placeholder="➕${Int`add topic`}"></md-filled-text-field>`);
+    clickTip(this.chipset.firstChild, Int`Add a new topic for which the map should show any alerts.`, event => { // Focusing "add topic".
+      event.stopPropagation();
+      Marker.closePopup();
+      showMessage(Int`Type a new topic name to see any alerts on the map with this topic.`, 'instructions');
+    });
+    this.chipset.firstChild.onchange = event => { // Add the new hashtag.
+      resetInactivityTimer();
+      let tag = event.target.value.trim()  // Get into standard form, but do not strip emoji or case into canonical yet.
+	  .replace(/^#/, '')       // No leading hash
+	  .replace(/\s+/g, ' ')    // Replace multiple spaces with a single space
+	  .normalize('NFD');        // Standardize different ways of making accents into decomposed form - but do not remove them.
+      if (!tag) return;
+      Marker.closePopup();
+      tag = this.add(tag); // Might exist, in which case tag might now be extended.
+      this.setPublish(tag);
+      this.onchange({highlightPublish: true});
+    };
+  },
+  remove(chip, redisplaySubscribers = false) { // Remove this topic, persistently.
+    delete this.hashtags[chip.label];
+    delete this.canonical2extended[canonicalTag(chip.label)];
+    this.onchange({redisplaySubscribers, resetSubscriptions: false});
+  },
+  toggleChip(chip) { // Switch whether the topic is or is not subscribed.
+    const label = chip.label;
+    const isPub = label === this.getPublish();
+    let altPub;
+    if (isPub) { // Find the next alternative, if possible.
+      let subs = this.getSubscribe();
+      if (subs.length > 1) {
+	let pubIndex = subs.indexOf(label);
+	let index = (pubIndex + 1) % subs.length;
+	altPub = subs[index];
+      }
+    }
+    if (altPub) this.setPublish(altPub);
+    else if (isPub && !chip.selected) { chip.selected = true; return; } // Don't allow deselecting the only pub tag.
+    this.hashtags[label] = chip.selected;
+  },
+  getChip(label) { // Handy for scripting, but not otherwise used in app.
+    for (const chip of this.chipset.children) {
+      if (chip.label === label) return chip;
+    }
+    return null;
+  },
+  setPublish(newTag) { // Make this topic be the one to be used when we next publish an alert.
+    const oldTag = this.getPublish();
+    this.hashtags[oldTag] = true;
+    this.hashtags[newTag] = 'pub';
+    for (const chip of this.chipset.children) {
+      if (chip.label === oldTag) chip.classList.remove('pub');
+      else if (chip.label === newTag) chip.classList.add('pub');
+    }
+    return oldTag;
+  }
+};
+
+// Populate hashtags data and display.
+// First the persisted/default data:
+const persisted = JSON.parse(localStorage.getItem('hashtags') ||
+			     `{"🍰 ${Int`cake`}": true, "🔥 ${Int`fire`}": true, "🌊 ${Int`flood`}": true, "🆘 ${Int`help`}": "pub", "🧊 ${Int`ice`}": true}`);
+			     //`{"🎙️ news":"pub", "🎸 classic rock":true, "🎷 jazz":true, "🎵 pop":true, "🎤 hiphop":true, "🎧 edm":true, "🤠 country":true, "🎼 classical":true}`);			     
+			     //`{"🍰 ${Int`cake`}": true, "🔥 ${Int`fire`}": true, "🌊 ${Int`flood`}": true, "🆘 ${Int`help`}": "pub", "🧊 ${Int`ice`}": true, "🎙️ news":true, "🎸 classic rock":true, "🎷 jazz":true, "🎵 pop":true, "🎤 hiphop":true, "🎧 edm":true, "🤠 country":true, "🎼 classical":true}`);
+Object.entries(persisted).forEach(([tag, active]) => Hashtags.add(tag, active, false));

package/public/javascripts/main.js

@@ -0,0 +1,394 @@
+const { QRCodeStyling, GeolocationPositionError, localStorage, BigInt, URL, Notification } = globalThis; // For linters.
+import { appVersion } from './versions.js';
+import { Int } from './translations.js';
+import { openDisplay } from './display.js';
+import { Agent} from './agent.js';
+import { P2PWebNetwork } from './p2pWebNetwork.js';
+import { getPointInCell } from './s2.js';
+import { Marker, map, getShareableURL, showMessage, updateLocation, updateSubscriptions, recenterMap, share } from './map.js';
+import './service-manager.js'; // Comment this out and kill service-workers for reload-to-get-latest behavior during development.
+
+document.getElementById('appVersion').textContent = appVersion;
+document.getElementById('kernelVersion').textContent = P2PWebNetwork.kernelVersion;
+
+const RETRY_SECONDS = 90;
+const INACTIVITY_SECONDS = 5 * 60; // five minutes
+
+export function delay(ms = 800, value = undefined) { // Promise resolves to value after specified milliseconds.
+  return new Promise(resolve => setTimeout(resolve, ms, value));
+}
+
+var inactivityTimer = null, reconnectCountdown, networkPromise = null;
+export { networkPromise };
+export async function resetInactivityTimer(clearMessage = true) { // if !network, initialize(false), else disconnect after INACTIVITY_SECONDSif not restarted
+  //console.log('resetInactivityTimer, networkPromise:', networkPromise);
+  if (clearMessage) showMessage('');
+  clearTimeout(inactivityTimer);
+  clearInterval(reconnectCountdown);
+  if (!networkPromise) return initialize(false);
+  // return inactivityTimer = setTimeout(() => {
+  //   networkPromise?.then(contact => contact.disconnect());
+  // }, INACTIVITY_SECONDS * 1e3);
+}
+
+function asElement(elementOrQuerySelector) { // Return an element - treating a string arg as a query selector, or just return the arg.
+  if (typeof(elementOrQuerySelector) === 'string') return document.querySelector(elementOrQuerySelector);
+  return elementOrQuerySelector;
+}
+export function tooltip(elementOrQuerySelector, text) { // Add plain tooltip text to element.
+  const element = asElement(elementOrQuerySelector);
+  element.title = text; // TODO: try via aria-describedby pointing to separate role="tooltip" div
+}
+export function clickTip(elementOrQuerySelector, text, clickHandler) { // tooltip and onclick in one step.
+  const element = asElement(elementOrQuerySelector);
+  tooltip(element, text);
+  element.onclick = clickHandler;
+}
+
+function isWebView() { return /CriOS|(WebView|wv|(iPhone|iPod|iPad)(?!.*Safari))/.test(navigator.userAgent); }
+function isApple() { return navigator.platform.startsWith('Mac') || ['iPhone', 'iPad'].includes(navigator.platform); }
+function isMobile() { return navigator.userAgentData?.mobile || /iPhone|iPad|iPod|Mobile/.test(navigator.userAgent); }
+function isStandalone() { return window.matchMedia('(display-mode: standalone)').matches; }
+export function osName() { return navigator.userAgentData?.platform || navigator.userAgent.match(/Android/)?.[0] || navigator.platform; }
+function mobilePlatformName() { return isMobile() && (isApple() ? 'iOS' : 'Android'); }
+function mobileVendorName() { return isMobile() && (isApple() ? 'Apple' : 'Android'); }
+function mobileBrowserName() { return isApple() ? 'Safari' : 'Chrome'; }
+function browserName() {
+  if (navigator.userAgent.includes("Firefox")) return "Firefox";
+  if (navigator.userAgent.includes("Edg")) return "Edge";
+  if (navigator.userAgent.includes("Chrome")) return "Chrome";
+  if (navigator.userAgent.includes("CriOS")) return "Chrome";
+  if (navigator.userAgent.includes("Safari")) return "Safari";
+  return '';
+}
+
+var showNotifications = document.getElementById('showNotifications');
+var showNotificationsLabel = document.getElementById('showNotificationsLabel');
+function disabledNotifications() { return localStorage.getItem('disabledNotifications'); }
+export function disableNotifications(force) { localStorage.setItem('disabledNotifications', force ? '1' : ''); }
+export function notificationsAllowed() { return (Notification?.permission === 'granted') && !disabledNotifications(); }
+function noteNotificationPermission(permission) {
+  if (isWebView()) {
+    showNotifications.indeterminate = true;
+    showNotifications.toggleAttribute('disabled', true);
+    showNotificationsLabel.innerHTML = `${mobileVendorName()} ${Int`does not support notifications on WebViews embedded in other programs. Please use CivilDefense.io in native`} ${mobileBrowserName()}.`;
+    return;
+  }
+  if (isMobile() && isApple() && !isStandalone()) {
+    showNotifications.indeterminate = true;
+    showNotifications.toggleAttribute('disabled', true);
+    showNotificationsLabel.innerHTML = `${Int`Apple only supports mobile notifications for web pages that have been`} <a href="https://www.google.com/search?q=iphone+install+web+page+to+home+screen" target="yz.sidebar">${Int`installed to the home screen`}</a>.`;
+    return;
+  }
+  switch (permission) {
+  case 'default':
+    showNotifications.indeterminate = true;
+    showNotifications.toggleAttribute('disabled', false);
+    showNotificationsLabel.innerHTML = Int`Enable notifications`;
+    break;
+  case 'granted':
+    showNotifications.checked = !disabledNotifications();
+    showNotifications.toggleAttribute('disabled', false);
+    showNotificationsLabel.innerHTML = Int`Allow notifications`;
+    break;
+  default:
+    showNotifications.checked = false;
+    showNotifications.toggleAttribute('disabled', true);
+    const isApp = isStandalone();
+    const search = isApp ?
+	  `https://www.google.com/search?q=${osName()}+open+app+settings` :
+	  `https://www.google.com/search?q=open+site+settings+${browserName() || `"${navigator.userAgent}"`}`;
+    const label = isApp ? `CivilDefense.io ${Int`app`}` : Int`browser site settings`;
+    showNotificationsLabel.innerHTML = `${Int`Permissions can be re-enabled through the`} <a href="${search}" target="yz.sidebar">${label}</a>.`;
+    break;
+  }
+}
+clickTip(showNotifications.parentElement, Int`Enable local ${osName()} notifcations for map alerts, without going through any servers. Requires that the app be running.`, event => {
+  resetInactivityTimer();
+  event.stopPropagation();
+});
+showNotifications.onchange = () => {
+  if (window.Notification?.permission === 'granted') {
+    disableNotifications(!showNotifications.checked);
+  } else {
+    window.Notification?.requestPermission().then(noteNotificationPermission);
+  }
+};
+// Safari never fires 'change': https://webkit.org/b/259432
+navigator.permissions.query({ name: 'notifications'})
+  .then(status => status.onchange = () => noteNotificationPermission(window.Notification?.permission));
+
+export function openAbout(event) {
+  openDisplay('aboutContainer', event);
+  noteNotificationPermission(window.Notification?.permission);
+}
+clickTip('#aboutButton', Int`Information about this app, and options to change how you appear to others.`, event => { // open about
+  Marker.closePopup();
+  openAbout(event);
+});
+clickTip('#wipe', Int`Wipe from ${osName()} all personal data and source files for this app.`, async event => {
+  await networkPromise?.then(contact => contact.disconnect());
+  localStorage.clear();
+  await caches.keys().then(keys => Promise.all(keys.map(key => caches.delete(key))));
+  await navigator.serviceWorker.getRegistrations().then(registrations => Promise.all(registrations.map(r => r.unregister())));
+  window.location.replace('about/index.html');
+});
+document.getElementById('scriptChooser').onchange = event => { // Run a script module chosen by the user. e.g., for testing.
+  const file = event.currentTarget.files[0];
+  if (!file) return;
+  const script = document.createElement('script');
+  script.type = "module";
+  script.src = URL.createObjectURL(file);
+  document.body.appendChild(script);
+};
+
+clickTip('#qrButton', Int`Display QR code that can be scanned by a friend to show the same map on their device.`, event => { // generate (and display) qr code on-demand (in case url changes)
+  const content = openDisplay('qrContainer', event, '');
+  const qr = new QRCodeStyling({
+    width: 300,
+    height: 300,
+    margin: 0,
+    type: "svg",
+    data: getShareableURL().href,
+    dotsOptions: {
+      color: "#0A2E7C",
+      type: "rounded"
+    },
+    cornersSquareOptions: {type: "dot"},
+    cornersDotOptions: {type: "dot"},
+    backgroundOptions: {
+      color: "white",
+    },
+    image: "images/civil-defense-240.png",
+    imageOptions: {
+      crossOrigin: "anonymous",
+      margin:2
+    }
+  });
+  qr.append(content);
+});
+document.querySelector('#correspondentContainer md-outlined-text-field').onclick = event => {
+  resetInactivityTimer();
+  event.stopPropagation();
+};
+
+clickTip('#share', Int`${osName()} share a link to this map and topics, with picture of map.`, event => {
+  event.stopPropagation();
+  share({text: "CivilDefense.io", url: getShareableURL().href });
+});
+
+clickTip('#recenterButton', Int`Recenter the map to where you are in the world.`, recenterMap);
+
+function checkOnline() { //true if online and visible, else cancel reconnectCountdown and inactivityTimeout, and show "offline"
+  //console.log('checkOnline', navigator.onLine && !document.hidden);
+  if (navigator.onLine && !document.hidden) return true;
+  clearTimeout(inactivityTimer);
+  clearInterval(reconnectCountdown);
+  if (!navigator.onLine) showMessage(Int`No network connection.`, 'error');
+  else console.warn('hidden');
+  return false;
+}
+function resetReconnectCountdown() { // if !checkOnline each second, show time remaining; at expiration initialize(false)
+  console.log('resetReconnectCountdown');
+  clearInterval(reconnectCountdown);
+  let counter = RETRY_SECONDS;
+  reconnectCountdown = setInterval(() => {
+    if (!checkOnline()) return null;
+    if (counter > 1) return showMessage(Int`Disconnected. Retrying in ` + counter-- + Int` seconds.`, 'error');
+    showMessage('');
+    console.log('countdown timer expired');
+    clearInterval(reconnectCountdown);
+    return initialize(false);
+  }, 1e3);
+}
+
+export let positionWatch;
+let subscribeOneShot;
+const goodPositionLabel = Int`Your Location`;
+
+function initializeGeolocation(subscribe = false) { // Arrange to constantly updateLocation, but:
+  // Arrange to constantly updateLocation when geolocation updates (or a default init if that's not possible).
+  // Once updateLocation has been called, updateSubscriptions() if the subscribe arg is true.
+  //
+  // Non-geo cases:
+  // if no support, message and defaultInit
+  // if no permission, message and defaultInit
+  // if !checkOnline, nothing further - we'll be called again later.
+  // if other error; delay and try again
+  //
+  // Subscription:
+  // If this was for a new node, we will be told to subscribe. That cannot meaningfully happen
+  // until we get our first position, so we do so ONCE in the watch position handler.
+  // Any subsequent location updates will update position in the map, but not move the map
+  // nor change the subscriptions.
+  const {geolocation} = navigator;  // Get user's geolocation
+  console.log('Initializing geolocation.', subscribe ? 'Will subscribe.' : 'Has subscriptions.');
+  subscribeOneShot = subscribe;
+  const initMap = (lat, lng) => {
+    let zoom = 14, positionLabel = goodPositionLabel;
+    if (lat === undefined) {
+      positionLabel = Int`Default location. Geolocation unavailable.`;
+      const level9Cell = localStorage.getItem('level9Cell');
+      if (level9Cell) { // Zoomed out near where we last where, but not too exact for security.
+	zoom = 12;
+	[lat, lng] = getPointInCell(BigInt(level9Cell));
+      } else {
+	zoom = 13;
+	[lat, lng] = [37.7749, -122.4194]; // San Fransisco
+      }
+    }
+    console.log('initializeGeolocation updateLocation');
+    updateLocation(lat, lng, zoom, positionLabel);
+    if (!subscribeOneShot) return;
+    subscribeOneShot = false;
+    resetInactivityTimer(false);
+    updateSubscriptions([]); // This was for a new node, so supply an empty oldSubscriptions.
+  };
+  if (!geolocation) {
+    showMessage(Int`Geolocation not supported. Using default location.`, 'error', 'fail');
+    delay(2e3).then(() => initMap());
+    return;
+  }
+  geolocation.clearWatch(positionWatch);
+  positionWatch = geolocation.watchPosition(
+    position => {
+      const {latitude, longitude} = position.coords;
+      console.log('Location update.', map ? 'Map exists.' : 'Will create map.', subscribeOneShot ? 'Will subscribe fresh.' : 'Has subscriptions.');
+      initMap(latitude, longitude);
+    }, error => {
+      geolocation.clearWatch(positionWatch);
+      console.warn(`Geolocation code ${error.code}. online:`, navigator.onLine, 'code:', error.code);
+      if (navigator.onLine) {
+	if (error.code === GeolocationPositionError.PERMISSION_DENIED) {
+	  showMessage(Int`Location access denied. Using default location.`, 'error', error);
+	  delay(2e3).then(() => initMap());
+	} else {
+	  showMessage(Int`Unable to get location.`, 'error', error);
+	  delay(4e3).then(() => initializeGeolocation(subscribe));
+	}
+      } else {
+	showMessage(Int`No network connection.`, 'error');
+      }
+    }, {
+      enableHighAccuracy: true,
+      timeout: 10000,
+      maximumAge: 0
+    }
+  );
+}
+
+let checking = false; // For debouncing.
+// On startup, get last persisted portals list, else the portal we came in on.
+//fixme let portals = new Set(JSON.parse(localStorage.getItem('portals') || `["${new URL('/kdht', window.location).href}"]`));
+async function initialize(event) { // Ensure there is a network promise and map, and reset geolocation:
+  // debounce
+  // if !checkOnline(), return
+  // set network to promise a new Contact, set ondisconnect, and connect.
+  // delay if asked
+  // initializeGeolocation
+  if (checking)  return;
+  checking = true;
+  try {
+    // Always close about display, because notification permissions and the like can change in the OS while we're hidden, and safari and mobile chrome don't issue change events for them.
+    document.getElementById('aboutContainer').classList.toggle('hidden', true);
+
+    // If networkPromise has not yet been set (or cleared by disconnect), we will be subscribing.
+    const needsConnection = !networkPromise;
+    const couldConnect = checkOnline(); // Meaning online AND visble (could be hidden)
+    console.log('Initialize', appVersion, 'from', event ? event.type : 'reset', networkPromise ? 'Has network.' : 'Needs network.', couldConnect ? 'Is online+visible.' : 'Is not online+visible.');
+    if (!couldConnect) {
+      navigator?.geolocation.clearWatch(positionWatch);
+      if (navigator.onLine) networkPromise?.then(contact => contact.replicateStorage()); // Hidden. Replicate in case we get shut down.
+      return;
+    }
+    showMessage('');
+    initializeGeolocation(needsConnection);
+    if (!networkPromise) {
+      showMessage(Int`Connecting to network...`);
+      const {promise, resolve} = Promise.withResolvers();
+      networkPromise = promise;
+      console.log('Creating node.');
+      resolve(P2PWebNetwork.create({}));
+      networkPromise.then(contact => {
+	globalThis.contact = contact; // For debugging.
+	// On leaving, we would like to copy stored data and politely say 'bye' (so others can clean up their connections). Alas:
+	// - The events we get will be, in order: beforeunload (except iOS Safari), pagehide, visibilitychange, unload
+	// - None of these will wait for any asynchronous operation.
+	// - The two unload events are not fired when mobile background tabs are killed.
+	// - visibilitychange is also fired when tab is switched.
+	// And so the best we can do is:
+	// - When tabs are switched, we try to replicate storage.
+	//   I think we will always get time to complete this.
+	//   But we will stay online as long as we're allowed, at which point we may be asked to store more that will not get replicated if killed.
+	// - On pagehide and unload, we synchronously say 'bye' with disconnectTransports.
+	//   These two are assigned now with a resolved networkPromise => contact so that we don't have to await.
+	window.onpagehide = () => contact.fastDisconnect();
+	// causes errors in some browsers: window.onunload = () => contact.fastDisconnect();
+
+	showMessage(Int`Tap anywhere to mark a concern. Markers fade after 24 hours.`, 'instructions');
+	contact.detachment.then(onPurpose => { // On disconnect (whether initiated by us or not), message user and set up for reconnection.
+	  networkPromise = null;
+	  const message = onPurpose ? Int`Connection closed. Will reconnect on use.` :
+		(navigator.onLine ? Int`The service connection has closed. Please reload.` : Int`No network connection.`);
+	  console.log('contact detached', {onPurpose, onLine: navigator.onLine});
+	  // If/when we reconnect, we will make a new network object with a new GUID,
+	  // so as not to confuse other nodes that have given up on the unresponsive old GUID.
+	  showMessage(message, 'error');
+	});
+	//contact.connect(/*fixme ...portals*/)
+	  // .then(() => contact.subscribe({ // Add and persist any new portals we haven't heard about.
+	  //   eventName: 'sys:portals',
+	  //   handler: data => {
+	  //     const operation = data.payload ? 'add' : 'delete';
+	  //     const resultSet = portals[operation](data.subject);
+	  //     localStorage.setItem('portals', JSON.stringify([...resultSet]));
+	  //   }
+	  // }))
+      });
+    }
+    await Agent.initialize();
+    if (event) await delay();
+  } finally {
+    checking = false;
+  }
+}
+document.addEventListener('visibilitychange', initialize);
+window.addEventListener('online', initialize);
+
+const titleElement = document.querySelector('#aboutContainer h1');
+titleElement.textContent = Int([titleElement.textContent]);
+titleElement.textContent += ` @${location.hostname}`;
+document.querySelector('head > title').innerHTML = titleElement.textContent;
+// Set up text for the browser language.
+function initText(selector, content = selector) {
+  const element = document.querySelector(selector);
+  const text = Int([content]);
+  element.textContent = text;
+}
+initText('#aboutReport');
+initText('#aboutShared');
+initText('#aboutFade');
+initText('#aboutAnyone1');
+initText('#aboutAnyone2');
+initText('#aboutAnyone3');
+initText('#learnMore');
+initText('#version');
+initText('#checkForUpdates');
+initText('#downloadUpdates');
+initText('#newVersionHeader');
+initText('#updateNowQuestion');
+initText('#updateReload');
+initText('#updateDefer');
+initText('#downloadUpdates2');
+initText('#downloadDefer');
+initText('#describePrivate1');
+initText('#describePrivate2');
+initText('#describePublic');
+initText('#describeSystem');
+initText('#pickLabels');
+initText('#wipe');
+
+tooltip('#learnMore', Int`Click to see more information in another tab about what you can do with this app and how it is resistant to tracking, censorship, and takedown.`);
+tooltip('#aboutAnyone2', Int`Click to see the source code and documentation for serving copies of this app in another tab.`);
+
+initialize(false);