recourse 3.0.4 → 4.0.0

data/app/javascript/recourse/limit_controller.js

@@ -0,0 +1,23 @@
+import { Controller } from '/recourse/stimulus.js'
+
+// How much of a table one page shows. The choice belongs to the reader rather than
+// to the app, so it is kept in their browser — but in a cookie rather than in local
+// storage, which is where the scheme goes: pagy decides the page on the server, and
+// a cookie is the only storage the server is sent.
+export default class extends Controller {
+  static values = { storage: String, to: Number }
+
+  // Back to the first page, always: page five of twenty is past the end of a hundred
+  // to a page, and pagy answers that with an empty table rather than an error. And
+  // only the frame, so what is redrawn is the table and the row under it — the answer
+  // brings the button back naming the size a click would go to next.
+  toggle() {
+    document.cookie =
+      `${this.storageValue}=${this.toValue}; path=/; max-age=31536000; samesite=lax`
+
+    const url = new URL(window.location.href)
+    url.searchParams.delete('page')
+
+    window.Turbo.visit(url.href, { frame: 'results', action: 'replace' })
+  }
+}

data/app/javascript/recourse/phone_controller.js

@@ -0,0 +1,33 @@
+import { Controller } from '/recourse/stimulus.js'
+
+export default class extends Controller {
+  connect() {
+    this.#format(this.element)
+  }
+
+  down(event) {
+    if (!event.key) { return }
+    if (event.ctrlKey) { return }
+    if (event.metaKey) { return }
+    if (event.key.length > 1) { return }
+    if (/[0-9.]/.test(event.key)) { return }
+    event.preventDefault()
+  }
+
+  input(event) {
+    if (event.inputType === 'deleteContentBackward') { return }
+    if (/[\d-]{12}/.test(event.target.value)) { event.preventDefault() }
+    this.#format(event.target)
+  }
+
+  #format(element) {
+    const digits = element.value.replace(/\D/g,'').substring(0, 10)
+    const areaCode = digits.substring(0, 3)
+    const prefix = digits.substring(3, 6)
+    const suffix = digits.substring(6, 10)
+
+    if (digits.length > 5) { element.value = `${areaCode}-${prefix}-${suffix}` }
+    else if (digits.length > 2) { element.value = `${areaCode}-${prefix}` }
+    else if (digits.length > 0) { element.value = `${areaCode}` }
+  }
+}

data/app/javascript/recourse/relative_time_controller.js

@@ -0,0 +1,45 @@
+import { Controller } from '/recourse/stimulus.js'
+import { Tooltip } from '/recourse/bootstrap.bundle.min.js'
+
+// Largest first, so the first one an instant clears is the one it is said in.
+const UNITS = [
+  ['year', 31536000000], ['month', 2592000000], ['week', 604800000],
+  ['day', 86400000], ['hour', 3600000], ['minute', 60000],
+]
+
+// How long ago a timestamp was, said again at the moment somebody asks. The server
+// writes the same words with Rails' own helper, which is what a reader without
+// JavaScript gets — but a table is cached and a page is left open, so those words are
+// only true when they are drawn. These are true when they are read.
+export default class extends Controller {
+  // Before the `tooltip` controller beside it, which is what makes the instance: this
+  // listener is registered first and so runs before Bootstrap's own.
+  connect() {
+    this.entered = () => this.#refresh()
+    this.element.addEventListener('mouseenter', this.entered)
+  }
+
+  disconnect() {
+    this.element.removeEventListener('mouseenter', this.entered)
+  }
+
+  // Through `setContent`, since Bootstrap reads a tooltip's words once when it is made
+  // and never looks at the attribute again.
+  #refresh() {
+    const at = new Date(this.element.getAttribute('datetime'))
+    if (isNaN(at.getTime())) { return }
+
+    Tooltip.getInstance(this.element)?.setContent({ '.tooltip-inner': this.#words(at) })
+  }
+
+  #words(at) {
+    const format = new Intl.RelativeTimeFormat(document.documentElement.lang || 'en')
+    const ms = at - new Date()
+
+    for (const [unit, size] of UNITS) {
+      if (Math.abs(ms) >= size) { return format.format(Math.round(ms / size), unit) }
+    }
+
+    return format.format(Math.round(ms / 1000), 'second')
+  }
+}

data/app/javascript/recourse/reveal_controller.js

@@ -0,0 +1,16 @@
+import { Controller } from '/recourse/stimulus.js'
+
+// One masked value and the click that unmasks it. The plaintext arrives with the
+// page rather than being fetched: the mask is against a screenshot, not against
+// whoever is already reading the record.
+export default class extends Controller {
+  static targets = ['mask', 'button']
+  static values = { plain: String }
+
+  show() {
+    this.maskTarget.textContent = this.plainValue
+    // Nothing left for it to do, and a link that reveals what is already revealed
+    // reads as though there were more to see.
+    this.buttonTarget.remove()
+  }
+}

data/app/javascript/recourse/scheme_controller.js

@@ -0,0 +1,51 @@
+import { Controller } from '/recourse/stimulus.js'
+
+// The sidebar's one control over how a page looks. A click moves it into the mode it is
+// not in, which is what the icon promises: a moon while the page is light, a sun while
+// it is dark. The choice belongs to the reader rather than to the app, so it is kept in
+// their browser — the layout's own script is what puts it back before the first paint,
+// a controller connecting far too late for that.
+export default class extends Controller {
+  static values = { storage: String }
+
+  // Turbo merges the head on a visit, and the layout's script runs only on a full load.
+  // The sidebar is drawn again on every visit, so connecting is the moment to say it again.
+  connect() {
+    const stored = this.#stored()
+
+    if (stored) { this.#apply(stored.mode) }
+  }
+
+  // The other mode, remembered.
+  rotate() {
+    const mode = this.#mode() === 'dark' ? 'light' : 'dark'
+
+    this.#apply(mode)
+    localStorage.setItem(this.storageValue, JSON.stringify({ mode }))
+  }
+
+  // The mode goes onto the element every `light-dark()` on the page is resolved against.
+  // Checked first: the storage is the reader's own, but what comes back out of it is
+  // still not something to write onto the page unread.
+  #apply(mode) {
+    if (mode === 'light' || mode === 'dark') {
+      document.documentElement.dataset.bsTheme = mode
+    }
+  }
+
+  // What the reader picked last, or nothing at all where they never have.
+  #stored() {
+    try {
+      return JSON.parse(localStorage.getItem(this.storageValue))
+    } catch (error) {
+      return null
+    }
+  }
+
+  // Which mode the page is in: whatever has been forced onto it, and otherwise whatever
+  // the system asks for, since a page nobody has chosen for follows that.
+  #mode() {
+    return document.documentElement.dataset.bsTheme ||
+      (matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light')
+  }
+}

data/app/javascript/recourse/search_controller.js

@@ -0,0 +1,78 @@
+import { Controller } from '/recourse/stimulus.js'
+
+// Survives the visit that a submit starts, since the module is not reloaded with
+// the page: it is how the next controller knows the search box was being typed in.
+// Only a submit that replaces the whole page needs it — a frame leaves the form,
+// and the caret in it, exactly where they were.
+let typing = false
+
+export default class extends Controller {
+  static targets = ['field']
+
+  connect() {
+    // Not on a cached preview: the real render connects a second time, and it is
+    // the one whose field can still be typed into.
+    if (typing && !document.documentElement.hasAttribute('data-turbo-preview')) {
+      typing = false
+      this.#restore()
+    }
+
+    // A combobox writes its hidden input from JavaScript, which fires no `change`
+    // of its own. Bootstrap's own event bubbles, so one listener on the form hears
+    // every menu in it, and each tick or untick narrows the table straight away.
+    // Coalesced to the end of the turn, because emptying a filter unticks every
+    // option in it — one request for the table that leaves, not one per option.
+    this.picked = () => {
+      clearTimeout(this.pick)
+      this.pick = setTimeout(() => this.#submit(), 0)
+    }
+    this.element.addEventListener('change.bs.combobox', this.picked)
+
+    // The frame is not inside the form, so its events never reach it.
+    this.reloaded = () => { typing = false; this.#syncSort() }
+    document.addEventListener('turbo:frame-load', this.reloaded)
+
+    // A refresh morph would write the fetched page's older query over what is
+    // mid-typing, so the form's subtree sits a morph out — the text, the caret
+    // and any open filter menu stay. Only a morph: a page visit still renders
+    // every page's own form, which `turbo-permanent` here would carry across.
+    this.morphing = (event) => { if (this.element.contains(event.target)) event.preventDefault() }
+    document.addEventListener('turbo:before-morph-element', this.morphing)
+  }
+
+  disconnect() {
+    this.element.removeEventListener('change.bs.combobox', this.picked)
+    document.removeEventListener('turbo:frame-load', this.reloaded)
+    document.removeEventListener('turbo:before-morph-element', this.morphing)
+    clearTimeout(this.timer)
+    clearTimeout(this.pick)
+  }
+
+  submit() {
+    clearTimeout(this.timer)
+    this.timer = setTimeout(() => { typing = true; this.#submit() }, 300)
+  }
+
+  #submit() {
+    this.element.requestSubmit()
+  }
+
+  // A heading sorts by navigating the frame, which advances the address bar but
+  // leaves this form alone — so the sort it carries has to be read back off the URL,
+  // or the next search would reorder the table by whatever was in force before.
+  #syncSort() {
+    const field = this.element.querySelector('input[name="q[s]"]')
+
+    if (field) { field.value = new URL(window.location.href).searchParams.get('q[s]') || '' }
+  }
+
+  // The value comes back from the server, so only the caret has to be put back,
+  // and at the end of it — typing carries on where it left off.
+  #restore() {
+    if (!this.hasFieldTarget) { return }
+
+    const field = this.fieldTarget
+    field.focus({ preventScroll: true })
+    field.setSelectionRange(field.value.length, field.value.length)
+  }
+}

data/app/javascript/recourse/shortcuts_controller.js

@@ -0,0 +1,42 @@
+import { Controller } from '/recourse/stimulus.js'
+
+// Option is the modifier. Control and Command are spoken for — Control+C and
+// Command+C are both copy — while Option is what a browser's own accesskey reaches
+// for on most platforms, and it collides with almost nothing a page would want.
+export default class extends Controller {
+  connect() {
+    this.reveal = (event) => this.element.classList.toggle('recourse-keys', event.altKey)
+    this.hide = () => this.element.classList.remove('recourse-keys')
+    this.press = (event) => this.#press(event)
+
+    document.addEventListener('keydown', this.reveal)
+    document.addEventListener('keyup', this.reveal)
+    document.addEventListener('keydown', this.press)
+    // Holding Option and switching windows would otherwise leave the hints up.
+    window.addEventListener('blur', this.hide)
+  }
+
+  disconnect() {
+    document.removeEventListener('keydown', this.reveal)
+    document.removeEventListener('keyup', this.reveal)
+    document.removeEventListener('keydown', this.press)
+    window.removeEventListener('blur', this.hide)
+  }
+
+  #press(event) {
+    if (!event.altKey || event.ctrlKey || event.metaKey) { return }
+
+    // On a Mac, Option+c is 'ç', so the key pressed is read from the keyboard's own
+    // layout-independent code rather than from the character it produced.
+    const pressed = event.code.match(/^Key([A-Z])$/)
+    if (!pressed) { return }
+
+    const link = this.element.querySelector(`[data-key="${pressed[1].toLowerCase()}"]`)
+    if (!link) { return }
+
+    event.preventDefault()
+    this.hide()
+    // Clicked rather than assigned to, so Turbo takes the visit like any other link.
+    link.click()
+  }
+}

data/app/javascript/recourse/timezone_controller.js

@@ -0,0 +1,27 @@
+import { Controller } from '/recourse/stimulus.js'
+
+// The reader's own zone, told to the server so it can draw their pages against their
+// clock. A cookie rather than local storage, for the reason the page size uses one:
+// the server does the converting, and a cookie is the only storage the server is sent.
+export default class extends Controller {
+  static values = { storage: String }
+
+  // The page in front of the reader was drawn before this cookie existed, so the first
+  // visit from a browser — and the first after they travel — is drawn against the
+  // host's zone and then asked for again. Only when the cookie disagrees, so every
+  // other visit costs nothing: this writes what is already there and stops.
+  connect() {
+    const zone = Intl.DateTimeFormat().resolvedOptions().timeZone
+    if (!zone || zone === this.#stored()) { return }
+
+    document.cookie =
+      `${this.storageValue}=${encodeURIComponent(zone)}; path=/; max-age=31536000; samesite=lax`
+    window.Turbo.visit(window.location.href, { action: 'replace' })
+  }
+
+  #stored() {
+    const row = document.cookie.split(/;\s*/).find((one) => one.startsWith(`${this.storageValue}=`))
+
+    return row ? decodeURIComponent(row.split('=')[1]) : null
+  }
+}

data/app/javascript/recourse/toast_controller.js

@@ -0,0 +1,35 @@
+import { Controller } from '/recourse/stimulus.js'
+import { Toast } from '/recourse/bootstrap.bundle.min.js'
+import { DELAY } from '/recourse/written.js'
+
+// The toast arrives from the server already shown, so Bootstrap's show() must never
+// run: it re-adds `showing` and blinks the toast through transparent. But show() is
+// also the only place Bootstrap arms its autohide, so the timer lives here instead,
+// and only the hiding is Bootstrap's — the timed hide and the dismiss X then share
+// one code path and one fade.
+export default class extends Controller {
+  static values = { delay: { type: Number, default: DELAY } }
+
+  connect() {
+    // `autohide: false` keeps Bootstrap from arming a rival timer if anything ever
+    // does call show() on this element.
+    this.toast = Toast.getOrCreateInstance(this.element, { autohide: false })
+    this.startTimer()
+  }
+
+  disconnect() {
+    this.stopTimer()
+    this.toast.dispose()
+  }
+
+  // Reading the message, or aiming for the X, holds the toast open — Bootstrap's
+  // own pause-on-hover only guards the timer *it* armed, so it is redone here.
+  stopTimer() {
+    clearTimeout(this.timeout)
+  }
+
+  // A fresh full delay on leave, which is also what Bootstrap re-arms.
+  startTimer() {
+    this.timeout = setTimeout(() => this.toast.hide(), this.delayValue)
+  }
+}

data/app/javascript/recourse/tooltip_controller.js

@@ -0,0 +1,16 @@
+import { Controller } from '/recourse/stimulus.js'
+import { Tooltip } from '/recourse/bootstrap.bundle.min.js'
+
+// The tooltip naming an icon-only heading. Bootstrap never wires one on its own,
+// and a Stimulus lifecycle is what survives Turbo redrawing the table: connect
+// makes it, disconnect takes it down before the element goes, so a sorted or
+// searched table never strands one over an element that left.
+export default class extends Controller {
+  connect() {
+    this.tooltip = Tooltip.getOrCreateInstance(this.element)
+  }
+
+  disconnect() {
+    this.tooltip.dispose()
+  }
+}

data/app/javascript/recourse/written.js

@@ -0,0 +1,29 @@
+// The mark a write leaves on the row it landed on, and how long it stands for. Two
+// things write rows here and both say so this way: a create or an update, which has a
+// toast to keep time with, and the square that keeps a row, which has none — so the
+// marking is here and the clock belongs to whoever calls it.
+export const DELAY = 2000
+
+// Marked, and handed back the way to let it go. Letting go swaps one class for the
+// other rather than adding to it: the fade is an animation, and while the first class
+// is still on the row it would paint the tint straight back the moment that animation
+// ended. Off the row entirely, what paints it afterwards is whatever else the cascade
+// says — the tint of a kept row, or nothing.
+export function mark(row) {
+  if (!row) { return () => {} }
+
+  row.classList.remove('recourse-written-out')
+  row.classList.add('recourse-written')
+
+  return () => {
+    row.classList.remove('recourse-written')
+    row.classList.add('recourse-written-out')
+  }
+}
+
+// And the same, on a clock of its own, for a write with no message to keep time with.
+export function marked(row) {
+  const fade = mark(row)
+
+  setTimeout(fade, DELAY)
+}

data/app/javascript/recourse/written_controller.js

@@ -0,0 +1,28 @@
+import { Controller } from '/recourse/stimulus.js'
+import { mark } from '/recourse/written.js'
+
+// The row a create or an update just landed on, marked for exactly as long as the
+// toast that says so. One clock rather than two: the mark goes when the message goes,
+// however long somebody held the toast open by reading it.
+//
+// `hide`, never `hidden`. Bootstrap fires the first as the toast begins to fade and the
+// second only once it has finished, a whole second later — which is a mark still lit
+// over a message that has already gone.
+export default class extends Controller {
+  static values = { row: String }
+
+  // Only where the row is on this page — a record can be written onto a page it does
+  // not appear on, sorted or filtered or paged away — and only where a toast is here
+  // to end it, since nothing else would.
+  connect() {
+    const row = document.getElementById(this.rowValue)
+    if (!row || !this.element.querySelector('.toast')) { return }
+
+    this.fade = mark(row)
+    this.element.addEventListener('hide.bs.toast', this.fade)
+  }
+
+  disconnect() {
+    if (this.fade) { this.element.removeEventListener('hide.bs.toast', this.fade) }
+  }
+}