@bongos/core 1.21.10 → 1.21.12

package/modules/hall-ui/public/street.js

@@ -10,6 +10,14 @@
 // short matter card a pin opens. No innerHTML anywhere: every node is created,
 // and every docket string lands as text or an attribute.
 //
+// INSIDE (task 1004526). When the address names a building or a district the
+// street gives way to its interior (#streetInside): GovInside.buildingModel()
+// or districtModel() (street-inside.js) drawn into the same artboard. Picking a
+// floor moves the lift (a CSS transition on one persistent node) and re-enters
+// the chosen floor's block (the prototype's flip: two blocks, alternating); a
+// table row opens the same short card a pin does; a district reads its goal's
+// tasks once (GET /tasks?goal_id=N) and draws them.
+//
 // THE FEEDS (all GETs, all gated server-side):
 //   /api/bongos/government/docket          buildings, pins, lines, readings (task 1004523)
 //   /api/bongos/goals                      the open goals: one district each
@@ -38,7 +46,10 @@
     goals: '/api/bongos/goals',
     rollups: '/api/bongos/goals/rollups',
     earnings: function (id) { return '/api/bongos/builders/' + encodeURIComponent(id) + '/earnings'; },
+    tasks: function (goalId) { return '/api/bongos/tasks?goal_id=' + encodeURIComponent(goalId); },
   };
+  var NARROW = 900;
+  var I = window.GovInside;
   // The artboard's street band: the prototype's 900-high board less its 64 px
   // header and 128 px footer, which this page lays out as real rows.
   var BAND_TOP = 64, BAND_H = 708;
@@ -46,8 +57,8 @@
 
   var $ = function (id) { return document.getElementById(id); };
   var media = window.matchMedia ? window.matchMedia('(prefers-color-scheme: dark)') : null;
-  var data = { docket: null, goals: [], rollups: [], earnings: null, loaded: false };
-  var view = { open: null, opener: null, model: null, scale: 1, mode: null };
+  var data = { docket: null, goals: [], rollups: [], earnings: null, loaded: false, tasks: {} };
+  var view = { open: null, opener: null, model: null, scale: 1, mode: null, inside: null, insideModel: null };
 
   // ---------- light / dark ----------
   var chosen = null;
@@ -91,6 +102,7 @@
   // grows it, a smaller one shrinks it; a phone keeps it near full size and the
   // street scrolls sideways inside its window, so a pin stays a pin.
   function fit() {
+    fitInside();
     var win = $('streetWindow'), sizer = $('streetSizer'), board = $('streetBoard');
     if (!win || !sizer || !board) return;
     var W = view.model ? view.model.width : S.ARTBOARD_W;
@@ -108,6 +120,32 @@
     placeCard();
   }
 
+  // The interior's artboard: 1440 x 708 scaled to the window like the street;
+  // under NARROW px the board is a column and only the drawing scales, in its
+  // own sideways strip, never under 0.6 so a floor stays a 24 px target.
+  function fitInside() {
+    var box = $('streetInside'), sizer = $('insideSizer'), board = $('insideBoard'), art = $('insideArt'), artBox = $('insideArtBox'), span = $('insideArtSpan');
+    if (!box || !sizer || !board || !art || !artBox || box.hidden) return;
+    var win = $('streetWindow');
+    var cw = (win && win.clientWidth) || window.innerWidth || 1440, ch = (win && win.clientHeight) || 708;
+    var artW = view.inside && view.inside.kind === 'district' ? 1440 : 800;
+    if ((window.innerWidth || cw) < NARROW) {
+      var a = Math.max(0.6, Math.min(1, Math.round((cw - 32) / artW * 1000) / 1000));
+      sizer.style.width = ''; sizer.style.height = '';
+      board.style.setProperty('--inside-scale', '1');
+      artBox.style.setProperty('--inside-art-scale', String(a));
+      art.style.setProperty('--inside-art-h', Math.round(708 * a) + 'px');
+      if (span) { span.style.width = Math.round(artW * a) + 'px'; span.style.height = Math.round(708 * a) + 'px'; }
+      return;
+    }
+    var s = Math.max(0.4, Math.round(Math.min(cw / 1440, ch / 708) * 1000) / 1000);
+    sizer.style.width = Math.round(1440 * s) + 'px';
+    sizer.style.height = Math.round(708 * s) + 'px';
+    board.style.setProperty('--inside-scale', String(s));
+    artBox.style.setProperty('--inside-art-scale', '1');
+    if (span) { span.style.width = '0px'; span.style.height = '0px'; }
+  }
+
   // ---------- the feeds ----------
   function getJson(url) {
     return fetch(url, { credentials: 'same-origin', headers: { accept: 'application/json' } })
@@ -130,6 +168,18 @@
     });
   }
 
+  // A district's work: its goal's tasks, read once per goal and kept
+  // (null while reading, false when the read failed).
+  function loadTasks(goalId) {
+    var k = String(goalId);
+    if (Object.prototype.hasOwnProperty.call(data.tasks, k)) return null;
+    data.tasks[k] = null;
+    return getJson(FEEDS.tasks(k)).then(function (r) {
+      data.tasks[k] = r && Array.isArray(r.tasks) ? r.tasks : false;
+      draw();
+    });
+  }
+
   // ---------- drawing ----------
   function clear(el) { while (el && el.firstChild) el.removeChild(el.firstChild); }
   function pathEl(p) {
@@ -208,6 +258,11 @@
     var mode = currentMode();
     view.mode = mode;
     paintSwitch(mode);
+    var h = here();
+    var inside = $('streetInside');
+    var sizerEl = $('streetSizer');
+    var showInside = !!(h && inside && I);
+    if (sizerEl) sizerEl.hidden = showInside;
     var m = S.streetModel({ docket: data.docket, goals: data.goals, rollups: data.rollups, earnings: data.earnings, mode: mode, now: Date.now(), here: here() });
     view.model = m;
     var flat = $('streetFlat'), blds = $('streetBlds');
@@ -258,9 +313,9 @@
     m.signs.forEach(function (sg) { signs.appendChild(drawSign(sg)); });
 
     var hint = $('streetHint');
-    if (hint) { hint.textContent = m.hint; hint.hidden = !m.hint || !!view.open; }
+    if (hint) { hint.textContent = m.hint; hint.hidden = !m.hint || !!view.open || showInside; }
     var eve = $('streetEvening');
-    if (eve) eve.hidden = !(m.evening && !view.open);
+    if (eve) eve.hidden = !(m.evening && !view.open) || showInside;
     var eveLine = $('streetEveningLine');
     if (eveLine) eveLine.textContent = m.eveningLine;
 
@@ -274,11 +329,264 @@
     var home = $('streetHome');
     if (home) home.setAttribute('href', S.HOME_HREF);
 
+    if (showInside) drawInside(h, mode);
+    else {
+      if (inside) inside.hidden = true;
+      view.inside = null;
+      view.insideModel = null;
+    }
+
     fit();
     if (view.open) fillCard();
     return m;
   }
 
+  // ---------- inside a building or a district ----------
+  function svgEl(tag) { return document.createElementNS(SVG_NS, tag); }
+  function setText(id, v) { var el = $(id); if (el) el.textContent = v == null ? '' : String(v); return el; }
+  function show(id, on) { var el = $(id); if (el) el.hidden = !on; return el; }
+  function drawPaths(g, list) { clear(g); list.forEach(function (p) { if (g) g.appendChild(pathEl(p)); }); }
+
+  function drawInside(h, mode) {
+    var box = $('streetInside');
+    var same = view.inside && view.inside.kind === h.kind && view.inside.key === h.key;
+    if (!same) view.inside = { kind: h.kind, key: h.key, floor: null, drawer: null, picks: 0, note: false };
+    var arriving = box.hidden;
+    box.hidden = false;
+    box.setAttribute('data-kind', h.kind);
+    if (h.kind === 'building') drawBuilding(mode);
+    else drawDistrict(mode);
+    // stepping in through a door moves focus to the interior's name, so a
+    // keyboard or a screen reader arrives where the eye does (a page opened
+    // straight at the address keeps the browser's own start)
+    if ((arriving || !same) && view.navigated) {
+      var target = h.kind === 'building' ? $('insideName') : $('insideDName');
+      if (target && target.focus) target.focus();
+    }
+  }
+
+  function drawBuilding(mode) {
+    var st = view.inside;
+    var bv = I.buildingModel({ key: st.key, docket: data.docket, goals: data.goals, mode: mode, now: Date.now(), floor: st.floor, drawer: st.drawer, picks: st.picks });
+    view.insideModel = bv;
+    setText('insideKicker', bv.kicker);
+    show('insidePanel', true); show('insideDHead', false); show('insideLegend', false);
+    clear($('insideItems'));
+    var svg = $('insideSvg');
+    if (svg) { svg.setAttribute('width', '800'); svg.setAttribute('viewBox', '0 0 800 708'); svg.setAttribute('aria-label', bv.label); }
+    drawPaths($('insideShapes'), bv.shapes);
+    var syms = $('insideSyms'); clear(syms);
+    bv.syms.forEach(function (sy) {
+      var g = svgEl('g');
+      g.setAttribute('transform', 'translate(' + sy.x + ' ' + sy.y + ') scale(' + sy.k + ')');
+      var a = svgEl('path');
+      a.setAttribute('class', 'inside-sym');
+      a.setAttribute('d', sy.d); a.setAttribute('stroke', sy.c); a.setAttribute('stroke-width', String(sy.w));
+      var b = svgEl('path');
+      b.setAttribute('d', sy.f || ''); b.setAttribute('fill', sy.c); b.setAttribute('stroke', 'none');
+      g.appendChild(a); g.appendChild(b);
+      if (syms) syms.appendChild(g);
+    });
+    var texts = $('insideTexts'); clear(texts);
+    bv.texts.forEach(function (t) {
+      var el = svgEl('text');
+      el.setAttribute('x', String(t.x)); el.setAttribute('y', String(t.y));
+      el.setAttribute('fill', t.c);
+      el.setAttribute('font-size', String(t.s)); el.setAttribute('font-weight', String(t.w));
+      el.setAttribute('text-anchor', t.a);
+      if (t.ls && t.ls !== 'normal') el.setAttribute('letter-spacing', t.ls);
+      if (/Mono/.test(t.f)) el.setAttribute('class', 'inside-mono');
+      el.textContent = t.v;
+      if (texts) texts.appendChild(el);
+    });
+    var floors = $('insideFloors'); clear(floors);
+    bv.floors.forEach(function (f) {
+      var b = at(node('button', 'inside-floor'), f.x, f.y, f.w, f.h);
+      b.setAttribute('type', 'button');
+      b.setAttribute('aria-label', f.aria);
+      b.setAttribute('aria-pressed', f.selected ? 'true' : 'false');
+      b.setAttribute('data-floor', String(f.index));
+      b.addEventListener('click', function () { pickFloor(f.index); });
+      if (floors) floors.appendChild(b);
+    });
+    // the lift is ONE node kept across draws, so its transform transitions
+    var lift = $('insideLift');
+    if (lift) {
+      lift.hidden = false;
+      at(lift, bv.lift.x, bv.lift.y, null, bv.lift.h);
+      lift.style.transform = 'translateY(' + bv.lift.ty + 'px)';
+    }
+    var annex = $('insideAnnex');
+    if (annex) {
+      annex.hidden = !bv.hasAnnex;
+      if (bv.hasAnnex) at(annex, bv.annex.x, bv.annex.y, bv.annex.w, bv.annex.h);
+      setText('insideAnnexText', bv.annex.text);
+    }
+
+    // the panel
+    setText('insideName', bv.name);
+    setText('insideHolds', bv.holds);
+    var seats = $('insideSeats'); clear(seats);
+    bv.seats.forEach(function (sc) {
+      var cls = sc.key === 'you' ? ' inside-seat--you' : sc.key === '—' ? ' inside-seat--open' : '';
+      if (seats) seats.appendChild(node('span', 'inside-seat' + cls, sc.init));
+    });
+    setText('insideWho', bv.whoText);
+    var gf = $('insideGlyphF'), gl = $('insideGlyphL');
+    if (gf) gf.setAttribute('d', bv.gf || '');
+    if (gl) gl.setAttribute('d', bv.gl || '');
+    setText('insideHow', bv.howText);
+    var note = $('insideAmendNote');
+    if (note) { note.textContent = st.note ? AMEND_NOTE : ''; note.hidden = !st.note; }
+    var fill = $('insideFill');
+    if (fill) { fill.style.width = bv.fill + '%'; fill.className = 'inside-meter__fill' + (bv.fill >= 80 ? ' inside-meter__fill--full' : ''); }
+    setText('insideGrowth', bv.growth);
+    show('insideTableWrap', bv.hasTable);
+    var table = $('insideTable'); clear(table);
+    bv.table.forEach(function (r) {
+      var b = node('button', 'inside-row' + (r.state === 'needs' ? ' inside-row--needs' : ''));
+      b.setAttribute('type', 'button');
+      b.setAttribute('data-matter', r.matter);
+      b.setAttribute('aria-controls', 'streetCard');
+      b.setAttribute('aria-expanded', view.open === r.matter ? 'true' : 'false');
+      b.appendChild(node('span', 'inside-row__label', r.label));
+      b.appendChild(node('span', 'inside-row__status', r.status));
+      b.addEventListener('click', function () { openCard(r.matter, b); });
+      if (table) table.appendChild(b);
+    });
+    // the chosen floor: two blocks that take turns, so the block re-enters on every pick
+    var on = $(bv.flipA ? 'insideOpenA' : 'insideOpenB'), off = $(bv.flipA ? 'insideOpenB' : 'insideOpenA');
+    if (off) { off.hidden = true; clear(off); }
+    if (on) { on.hidden = false; fillOpen(on, bv); }
+    setText('insideOnFile', bv.onFile);
+    var drawers = $('insideDrawers'); clear(drawers);
+    bv.drawers.forEach(function (dw) {
+      var b = node('button', 'inside-drawer');
+      b.setAttribute('type', 'button');
+      b.setAttribute('aria-label', dw.aria);
+      b.setAttribute('aria-pressed', dw.selected ? 'true' : 'false');
+      b.setAttribute('data-drawer', String(dw.index));
+      b.appendChild(node('span', 'inside-drawer__handle'));
+      b.appendChild(node('span', 'inside-drawer__label', dw.label));
+      b.appendChild(node('span', 'inside-drawer__count', dw.count));
+      b.addEventListener('click', function () { st.drawer = dw.index; draw(); });
+      if (drawers) drawers.appendChild(b);
+    });
+    var ditems = $('insideDrawerItems'); clear(ditems);
+    bv.drawerItems.forEach(function (it) {
+      var row = node('div', 'inside-ditem');
+      row.appendChild(node('span', '', it.text));
+      row.appendChild(node('span', 'inside-ditem__meta', it.meta));
+      if (ditems) ditems.appendChild(row);
+    });
+  }
+
+  function fillOpen(el, bv) {
+    clear(el);
+    var head = node('div', 'inside-open__head');
+    var plate = node('span', 'inside-plate');
+    var svg = svgEl('svg');
+    svg.setAttribute('width', '40'); svg.setAttribute('height', '40'); svg.setAttribute('viewBox', '0 0 24 24'); svg.setAttribute('aria-hidden', 'true');
+    var a = svgEl('path'); a.setAttribute('d', bv.sym.d || '');
+    var b = svgEl('path'); b.setAttribute('d', bv.sym.f || '');
+    svg.appendChild(a); svg.appendChild(b);
+    plate.appendChild(svg);
+    head.appendChild(plate);
+    var words = node('div', 'inside-open__words');
+    words.appendChild(node('span', 'inside-open__kicker', bv.openKicker));
+    words.appendChild(node('h3', 'inside-open__title', bv.openTitle));
+    head.appendChild(words);
+    el.appendChild(head);
+    bv.openLines.forEach(function (l) {
+      var row = node('div', 'inside-line');
+      row.appendChild(node('span', '', l.text));
+      row.appendChild(node('span', 'inside-line__meta', l.meta));
+      el.appendChild(row);
+    });
+  }
+
+  function pickFloor(i) {
+    var st = view.inside;
+    if (!st) return;
+    st.floor = i;
+    st.picks = (st.picks || 0) + 1;
+    draw();
+    var floors = $('insideFloors');
+    var kids = (floors && floors.children) || [];
+    for (var k = 0; k < kids.length; k++) if (kids[k].getAttribute('data-floor') === String(i)) { if (kids[k].focus) kids[k].focus(); break; }
+  }
+
+  // Change how this works: drafting the amendment is task 1004530. Until then
+  // the button is present and says so, rather than doing nothing silently.
+  var AMEND_NOTE = 'Drafting an amendment from here is not built yet. For now, raise it with the council on the board.';
+  function amend() {
+    if (!view.inside) return;
+    view.inside.note = true;
+    var note = $('insideAmendNote');
+    if (note) { note.textContent = AMEND_NOTE; note.hidden = false; }
+  }
+
+  function drawDistrict(mode) {
+    var st = view.inside;
+    var k = String(st.key);
+    var known = Object.prototype.hasOwnProperty.call(data.tasks, k);
+    if (!known) loadTasks(k);
+    var dv = I.districtModel({ goalId: k, goals: data.goals, tasks: known ? data.tasks[k] : null, mode: mode });
+    view.insideModel = dv;
+    var T = S.theme(mode);
+    setText('insideKicker', dv.kicker);
+    show('insidePanel', false); show('insideDHead', true); show('insideLegend', true);
+    show('insideAnnex', false);
+    var lift = $('insideLift'); if (lift) lift.hidden = true;
+    clear($('insideFloors')); clear($('insideSyms')); clear($('insideTexts'));
+    setText('insideDName', dv.name);
+    setText('insideDLine', dv.line);
+    var svg = $('insideSvg');
+    if (svg) { svg.setAttribute('width', '1440'); svg.setAttribute('viewBox', '0 0 1440 708'); svg.setAttribute('aria-label', dv.label); }
+    var shapes = $('insideShapes'); clear(shapes);
+    var g = svgEl('g');
+    g.setAttribute('transform', 'translate(' + dv.tx + ' ' + dv.ty + ') scale(' + dv.s + ')');
+    dv.shapes.forEach(function (p) { g.appendChild(pathEl(p)); });
+    if (shapes) {
+      shapes.appendChild(pathEl({ d: dv.road, f: T.road, s: 'none' }));
+      shapes.appendChild(pathEl({ d: dv.ground, f: 'none', s: T.line }));
+      shapes.appendChild(g);
+    }
+    var items = $('insideItems'); clear(items);
+    dv.items.forEach(function (it) {
+      var el = at(node(it.href ? 'a' : 'div', 'inside-item' + (it.stage === 'shipped' ? ' inside-item--shipped' : '')), it.x, it.y, it.w);
+      if (it.href) el.setAttribute('href', it.href);
+      var nm = node('span', 'inside-item__name', it.name);
+      nm.setAttribute('title', it.name);
+      el.appendChild(nm);
+      el.appendChild(node('span', 'inside-item__meta', it.meta));
+      el.appendChild(node('span', 'inside-item__stage', it.stage));
+      if (items) items.appendChild(el);
+    });
+    var legend = $('insideLegend'); clear(legend);
+    dv.legend.forEach(function (l) { if (legend) legend.appendChild(node('span', '', l.text)); });
+    if (dv.more && legend) {
+      var more = node('a', 'inside-more', dv.more + ' more in this goal');
+      more.setAttribute('href', dv.goalHref);
+      legend.appendChild(more);
+    }
+  }
+
+  // back to the street without a reload: drop the hash, keep the history entry,
+  // and give focus back to the door that was used
+  function goStreet(e) {
+    var was = view.inside;
+    if (!(window.history && window.history.pushState)) return;
+    if (e && e.preventDefault) e.preventDefault();
+    window.history.pushState(null, '', '/builders/street');
+    draw();
+    if (!was) return;
+    var doors = ($('streetDoors') && $('streetDoors').children) || [];
+    var key = was.kind === 'building' ? was.key : 'd:' + was.key;
+    for (var i = 0; i < doors.length; i++) if (doors[i].getAttribute('data-door') === key) { if (doors[i].focus) doors[i].focus(); break; }
+  }
+
+
   // ---------- the short matter card ----------
   function fillCard() {
     var cv = S.cardFor(data.docket, view.open, Date.now());
@@ -333,9 +641,14 @@
     // The pins were redrawn, so focus goes back to the new button for the same matter.
     if (restore !== false && was && was.getAttribute) {
       var key = was.getAttribute('data-matter');
-      var pins = $('streetPins').children || [];
-      for (var i = 0; i < pins.length; i++) {
-        if (pins[i].getAttribute('data-matter') === key) { if (pins[i].focus) pins[i].focus(); break; }
+      // the pins and the table rows were redrawn: focus the new control for the same matter
+      // .children is an HTMLCollection, which concat does not spread: copy it first
+      var list = function (id) { var el = $(id); return el && el.children ? Array.prototype.slice.call(el.children) : []; };
+      var pins = list('streetPins');
+      var rows = list('insideTable');
+      var pool = view.inside ? [].concat(rows, pins) : [].concat(pins, rows);
+      for (var i = 0; i < pool.length; i++) {
+        if (pool[i].getAttribute('data-matter') === key) { if (pool[i].focus) pool[i].focus(); break; }
       }
     }
   }
@@ -350,7 +663,12 @@
     if (close) close.addEventListener('click', function () { closeCard(true); });
     window.addEventListener('keydown', onKey);
     window.addEventListener('resize', fit);
-    window.addEventListener('hashchange', function () { draw(); });
+    window.addEventListener('hashchange', function () { view.navigated = true; draw(); });
+    window.addEventListener('popstate', function () { view.navigated = true; draw(); });
+    var back = $('insideBack');
+    if (back) back.addEventListener('click', goStreet);
+    var am = $('insideAmend');
+    if (am) am.addEventListener('click', amend);
     var win = $('streetWindow');
     if (win) win.addEventListener('scroll', placeCard);
     if (media && media.addEventListener) media.addEventListener('change', function () { if (!storedTheme()) { applyTheme(); draw(); } });
@@ -359,6 +677,6 @@
     return load();
   }
 
-  window.GovStreetPage = { boot: boot, draw: draw, load: load, fit: fit, openCard: openCard, closeCard: closeCard, FEEDS: FEEDS, THEME_KEY: THEME_KEY };
+  window.GovStreetPage = { boot: boot, draw: draw, load: load, fit: fit, openCard: openCard, closeCard: closeCard, pickFloor: pickFloor, goStreet: goStreet, FEEDS: FEEDS, THEME_KEY: THEME_KEY };
   window.GovStreetPage.ready = boot();
 }());