npm - @yz-social/civildefense.io - Versions diffs - 4.5.9 → 4.5.21 - Mend

@yz-social/civildefense.io 4.5.9 → 4.5.21

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (24) hide show

package/index.js +2 -1
package/package.json +6 -3
package/public/images/loading.gif +0 -0
package/public/index.html +6 -6
package/public/javascripts/agent.js +72 -48
package/public/javascripts/alert.js +126 -63
package/public/javascripts/hashtags.js +148 -92
package/public/javascripts/main.js +9 -5
package/public/javascripts/map.js +1 -1
package/public/javascripts/p2pWebNetwork.js +41 -16
package/public/javascripts/protocol.js +168 -0
package/public/javascripts/pubsub.js +124 -0
package/public/javascripts/s2.js +36 -41
package/public/javascripts/service-manager.js +5 -4
package/public/javascripts/translations.js +1 -0
package/public/javascripts/versions.js +16 -5
package/public/service-worker.js +25 -10
package/public/stylesheets/style.css +20 -13
package/server/app.js +42 -28
package/server/{location.json → location.save.json} +1 -1
package/server/websocket.js +46 -0
package/spec/axonSpec.js +9 -8
package/public/junk.html +0 -145
package/public/material-combobox.html +0 -379

package/public/material-combobox.html DELETED Viewed

@@ -1,379 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-<meta charset="UTF-8" />
-<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
-<title>Material Web Autocomplete Combo Box</title>
-<!-- Material Web components (outlined text field + icon) -->
-<script type="module" src="https://esm.run/@material/web/textfield/outlined-text-field.js"></script>
-<script type="module" src="https://esm.run/@material/web/icon/icon.js"></script>
-<!-- Roboto + Material Symbols, since Material Web expects these by default -->
-<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500&display=swap" />
-<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined" />
-<style>
-  :root {
-    color-scheme: light;
-    font-family: 'Roboto', system-ui, sans-serif;
-  }
-  html, body {
-    height: 100%;
-  }
-  body {
-    margin: 0;
-    background: #f6f6f9;
-    /* Leave room at the bottom for the fixed field so page content
-       never sits underneath it. */
-    padding-bottom: 96px;
-    box-sizing: border-box;
-  }
-  main.content {
-    max-width: 480px;
-    margin: 0 auto;
-    padding: 24px 20px;
-  }
-  h1 {
-    font-size: 1.1rem;
-    font-weight: 500;
-    color: #1c1b1f;
-    margin: 0 0 4px;
-  }
-  p.hint {
-    font-size: 0.85rem;
-    color: #49454f;
-    margin: 0 0 20px;
-  }
-    /* The field is pinned to the bottom of the *visual* viewport (see JS). */
-    /* position: fixed + bottom: 0 alone anchors to the bottom of the */
-    /* layout viewport, which on mobile stays put even when a keyboard */
-    /* slides up (some browsers just draw the keyboard on top of it, or */
-    /* slide the page instead). To keep the field visible directly above */
-    /* the keyboard, JS below tracks window.visualViewport and applies a */
-    /* translateY offset equal to the keyboard's height. */
-  .combobox {
-    position: fixed;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    z-index: 10;
-    box-sizing: border-box;
-    padding: 12px 20px calc(12px + env(safe-area-inset-bottom));
-    background: #f6f6f9;
-    box-shadow: 0 -1px 0 rgba(0,0,0,0.08);
-    max-width: 480px;
-    margin: 0 auto;
-    /* set by JS to compensate for the on-screen keyboard */
-    transform: translateY(0px);
-    will-change: transform;
-  }
-  md-outlined-text-field {
-    width: 100%;
-  }
-  /*
-    The suggestion list is positioned independently (fixed, computed in
-    JS) rather than nested inside .combobox, so its top edge can be
-    clamped to the available space above the field regardless of how
-    tall the list's content is.
-  */
-  .combobox-listbox {
-    position: fixed;
-    z-index: 20;
-    margin: 0;
-    padding: 8px 0;
-    list-style: none;
-    overflow-y: auto;
-    background: #fff;
-    border-radius: 4px;
-    box-shadow: 0 2px 6px 2px rgba(0,0,0,0.15), 0 1px 2px rgba(0,0,0,0.3);
-    display: none;
-  }
-  .combobox-listbox.open {
-    display: block;
-  }
-  .combobox-option {
-    padding: 10px 16px;
-    font-size: 0.95rem;
-    color: #1c1b1f;
-    cursor: pointer;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
-  .combobox-option mark {
-    background: none;
-    color: #6750a4;
-    font-weight: 500;
-  }
-  .combobox-option:hover,
-  .combobox-option.active {
-    background: #eaddff;
-  }
-  .combobox-empty {
-    padding: 10px 16px;
-    font-size: 0.9rem;
-    color: #79747e;
-  }
-</style>
-</head>
-<body>
-<main class="content">
-  <h1>Country picker</h1>
-  <p class="hint">
-    Start typing a country name. Use ↑ / ↓ to navigate, Enter to select, Esc to close.
-    The field stays pinned to the bottom of the screen, and the suggestion list opens
-    upward above it — try this on a phone to see it stay clear of the keyboard.
-  </p>
-</main>
-<div class="combobox">
-  <md-outlined-text-field
-    id="country-input"
-    label="Country"
-    role="combobox"
-    aria-expanded="false"
-    aria-controls="country-listbox"
-    aria-autocomplete="list"
-    autocomplete="off"
-  >
-    <md-icon slot="leading-icon">search</md-icon>
-  </md-outlined-text-field>
-</div>
-<ul class="combobox-listbox" id="country-listbox" role="listbox"></ul>
-<script type="module">
-  // Wait for the custom element to be defined so its internal <input> exists.
-  await customElements.whenDefined('md-outlined-text-field');
-  const DATA = [
-    "Argentina","Australia","Austria","Bangladesh","Belgium","Brazil","Canada",
-    "Chile","China","Colombia","Denmark","Egypt","Finland","France","Germany",
-    "Greece","India","Indonesia","Ireland","Italy","Japan","Kenya","Malaysia",
-    "Mexico","Netherlands","New Zealand","Nigeria","Norway","Pakistan","Peru",
-    "Philippines","Poland","Portugal","Russia","Saudi Arabia","Singapore",
-    "South Africa","South Korea","Spain","Sweden","Switzerland","Thailand",
-    "Turkey","Ukraine","United Arab Emirates","United Kingdom","United States",
-    "Vietnam"
-  ];
-  const footer = document.querySelector('.combobox');
-  const field = document.getElementById('country-input');
-  const listbox = document.getElementById('country-listbox');
-  let matches = [];
-  let activeIndex = -1;
-  function getValue() {
-    return field.value ?? '';
-  }
-  function escapeRegExp(str) {
-    return str.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
-  }
-  function highlight(text, query) {
-    if (!query) return text;
-    const re = new RegExp(`(${escapeRegExp(query)})`, 'ig');
-    return text.replace(re, '<mark>$1</mark>');
-  }
-  // ---------------------------------------------------------------------
-  // Keyboard-aware positioning
-  // ---------------------------------------------------------------------
-  // window.visualViewport reports the *actually visible* area, shrinking
-  // when a mobile keyboard appears. window.innerHeight / layout viewport
-  // rects do not shrink the same way, which is why a plain
-  // `position: fixed; bottom: 0` element can end up hidden behind the
-  // keyboard. We measure the gap between the two and shift the field up
-  // by exactly that amount.
-  function keyboardInset() {
-    const vv = window.visualViewport;
-    if (!vv) return 0;
-    return Math.max(0, window.innerHeight - vv.height - vv.offsetTop);
-  }
-  function repositionField() {
-    footer.style.transform = `translateY(-${keyboardInset()}px)`;
-  }
-  // Positions the listbox so its bottom edge sits just above the field,
-  // and clamps its top edge (via max-height) to the visible viewport,
-  // so it never runs off-screen above a shrunken (keyboard-open) viewport.
-  function repositionListbox() {
-    const rect = field.getBoundingClientRect();
-    const vv = window.visualViewport;
-    const viewportTop = vv ? vv.offsetTop : 0;
-    const gap = 4;
-    const topMargin = 8;
-    listbox.style.left = `${rect.left}px`;
-    listbox.style.width = `${rect.width}px`;
-    listbox.style.bottom = `${window.innerHeight - rect.top + gap}px`;
-    const available = rect.top - viewportTop - gap - topMargin;
-    listbox.style.maxHeight = `${Math.max(80, available)}px`;
-  }
-  function repositionAll() {
-    repositionField();
-    // Wait a frame so the field's transform has applied before we read
-    // its position for the listbox.
-    requestAnimationFrame(repositionListbox);
-  }
-  window.visualViewport?.addEventListener('resize', repositionAll);
-  window.visualViewport?.addEventListener('scroll', repositionAll);
-  window.addEventListener('resize', repositionAll);
-  window.addEventListener('orientationchange', repositionAll);
-  repositionAll();
-  // ---------------------------------------------------------------------
-  // Combobox behavior
-  // ---------------------------------------------------------------------
-  function closeListbox() {
-    listbox.classList.remove('open');
-    field.setAttribute('aria-expanded', 'false');
-    field.removeAttribute('aria-activedescendant');
-    activeIndex = -1;
-  }
-  function openListbox() {
-    listbox.classList.add('open');
-    field.setAttribute('aria-expanded', 'true');
-    repositionListbox();
-  }
-  function setActive(index) {
-    const options = listbox.querySelectorAll('.combobox-option');
-    options.forEach(opt => opt.classList.remove('active'));
-    activeIndex = index;
-    if (index >= 0 && options[index]) {
-      options[index].classList.add('active');
-      options[index].scrollIntoView({ block: 'nearest' });
-      field.setAttribute('aria-activedescendant', options[index].id);
-    } else {
-      field.removeAttribute('aria-activedescendant');
-    }
-  }
-  function selectValue(value) {
-    field.value = value;
-    closeListbox();
-    field.focus();
-  }
-  function renderMatches(query) {
-    listbox.innerHTML = '';
-    if (!query) {
-      closeListbox();
-      return;
-    }
-    matches = DATA.filter(item =>
-      item.toLowerCase().includes(query.toLowerCase())
-    );
-    if (matches.length === 0) {
-      const li = document.createElement('li');
-      li.className = 'combobox-empty';
-      li.textContent = 'No matches found';
-      listbox.appendChild(li);
-      openListbox();
-      setActive(-1);
-      return;
-    }
-    matches.forEach((item, i) => {
-      const li = document.createElement('li');
-      li.className = 'combobox-option';
-      li.id = `country-option-${i}`;
-      li.setAttribute('role', 'option');
-      li.innerHTML = highlight(item, query);
-      li.addEventListener('mousedown', (e) => {
-        // mousedown (not click) so it fires before the field's blur event
-        e.preventDefault();
-        selectValue(item);
-      });
-      listbox.appendChild(li);
-    });
-    openListbox();
-    setActive(-1);
-  }
-  field.addEventListener('input', () => {
-    renderMatches(getValue());
-  });
-  // The keyboard opening/closing changes visualViewport size, which
-  // fires our resize listener above and keeps everything positioned
-  // correctly without any extra work here.
-  field.addEventListener('focus', () => {
-    if (getValue()) renderMatches(getValue());
-  });
-  field.addEventListener('keydown', (e) => {
-    const isOpen = listbox.classList.contains('open');
-    const optionCount = listbox.querySelectorAll('.combobox-option').length;
-    switch (e.key) {
-      case 'ArrowDown':
-        e.preventDefault();
-        if (!isOpen) { renderMatches(getValue()); return; }
-        if (optionCount > 0) setActive((activeIndex + 1) % optionCount);
-        break;
-      case 'ArrowUp':
-        e.preventDefault();
-        if (!isOpen) { renderMatches(getValue()); return; }
-        if (optionCount > 0) setActive((activeIndex - 1 + optionCount) % optionCount);
-        break;
-      case 'Enter':
-        if (isOpen && activeIndex >= 0 && matches[activeIndex]) {
-          e.preventDefault();
-          selectValue(matches[activeIndex]);
-        }
-        break;
-      case 'Escape':
-        if (isOpen) {
-          e.preventDefault();
-          closeListbox();
-        }
-        break;
-      case 'Tab':
-        closeListbox();
-        break;
-    }
-  });
-  // Close when clicking outside the combobox/listbox.
-  document.addEventListener('click', (e) => {
-    if (!e.target.closest('.combobox') && !e.target.closest('.combobox-listbox')) {
-      closeListbox();
-    }
-  });
-</script>
-</body>
-</html>