recourse 4.8.0 → 5.0.0

data/app/javascript/recourse/flash.js

@@ -1,35 +0,0 @@
-// The toast the server ships, built in the browser for the one message that has no
-// response to arrive with. `data-controller` is what hands it to the toast
-// controller for its timer and its X, so the two kinds fade alike.
-export function flash(message, theme = 'theme-danger') {
-  const toast = document.createElement('div')
-  toast.className = `toast fade show ${theme}`
-  toast.setAttribute('role', 'alert')
-  toast.setAttribute('aria-live', 'assertive')
-  toast.dataset.controller = 'toast'
-  toast.dataset.action = ['mouseenter->toast#stopTimer', 'mouseleave->toast#startTimer',
-                          'focusin->toast#stopTimer', 'focusout->toast#startTimer'].join(' ')
-  const header = document.createElement('div')
-  header.className = 'toast-header border-0'
-  const text = document.createElement('span')
-  text.className = 'me-auto'
-  // Never innerHTML: this is a message, and a message is data.
-  text.textContent = message
-  header.append(text)
-  toast.append(header)
-  container().append(toast)
-}
-
-// A page with nothing to say ships no container at all, so the first message is what
-// makes one.
-function container() {
-  let container = document.querySelector('.toast-container')
-  if (container) return container
-
-  container = document.createElement('div')
-  container.className = 'toast-container position-fixed bottom-0 end-0 p-3'
-  container.dataset.turboTemporary = ''
-  document.body.append(container)
-
-  return container
-}

data/app/javascript/recourse/limit_controller.js

@@ -1,23 +0,0 @@
-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

@@ -1,33 +0,0 @@
-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

@@ -1,45 +0,0 @@
-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

@@ -1,16 +0,0 @@
-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

@@ -1,99 +0,0 @@
-import { Controller } from '/recourse/stimulus.js'
-
-// The sidebar's one control over how a page looks. A click moves it to another palette
-// and 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 = { themes: Array, path: String, storage: String }
-
-  // Turbo merges the head on a visit, which puts the palette the server chose back over
-  // the one the reader picked, 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.theme, stored.mode) }
-  }
-
-  // Another palette, in the other mode. Random rather than in order: the eight have no
-  // order that means anything. Excluding the one showing is what stops a click looking
-  // like it did nothing, which is the whole risk of picking at random.
-  rotate() {
-    const mode = this.#mode() === 'dark' ? 'light' : 'dark'
-    const others = this.themesValue.filter((theme) => theme !== this.#theme())
-    const theme = others[Math.floor(Math.random() * others.length)]
-
-    this.#apply(theme, mode)
-    localStorage.setItem(this.storageValue, JSON.stringify({ theme, mode }))
-  }
-
-  // The mode onto the element every `light-dark()` on the page is resolved against, and
-  // the palette onto the one link that serves one. A name is checked against the list
-  // the server sent: the storage is the reader's own, but what comes back out of it is
-  // still not something to put in a URL unread.
-  #apply(theme, mode) {
-    if (mode === 'light' || mode === 'dark') {
-      document.documentElement.dataset.bsTheme = mode
-    }
-    if (!this.themesValue.includes(theme)) { return }
-
-    this.#link().href = `${this.pathValue}/${theme}.css`
-  }
-
-  // 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')
-  }
-
-  // Which palette is showing, read off the link rather than remembered, so a reader who
-  // cleared their storage still moves on from the one in front of them.
-  #theme() {
-    const link = this.#current()
-
-    return link ? link.href.split('/').pop().replace('.css', '') : null
-  }
-
-  // The palette the page is drawn in, which is the *last* of these links rather than the
-  // first. Turbo's head merge appends a stylesheet the new head has and the old one does
-  // not — it never replaces one — and the server names the same palette on every page,
-  // so a visit made after the reader chose leaves two links and the browser obeys the
-  // one at the end. Writing to the other would change nothing anybody can see.
-  #current() {
-    const links = document.querySelectorAll('link[data-recourse-theme]')
-
-    return links[links.length - 1]
-  }
-
-  // The one link a palette is served through: whichever is in force, with any the merge
-  // left behind it taken away, and a new one where a host named no palette at all and
-  // there is none in the head to find.
-  #link() {
-    const links = [...document.querySelectorAll('link[data-recourse-theme]')]
-    const link = links.pop() || this.#appended()
-    links.forEach((stale) => stale.remove())
-
-    return link
-  }
-
-  #appended() {
-    const link = document.createElement('link')
-    link.rel = 'stylesheet'
-    link.dataset.recourseTheme = ''
-    document.head.appendChild(link)
-
-    return link
-  }
-}

data/app/javascript/recourse/search_controller.js

@@ -1,78 +0,0 @@
-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

@@ -1,42 +0,0 @@
-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

@@ -1,27 +0,0 @@
-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

@@ -1,35 +0,0 @@
-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

@@ -1,23 +0,0 @@
-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.
-//
-// None where nothing can hover: on a touch screen the tap that would open a link
-// is also what shows a tooltip, and a word popping up over a tap reads as a hitch.
-// Asked two ways, since an iPhone answered the first with a tooltip all the same: a
-// screen that cannot hover, or a pointer too coarse to rest on one word of a row.
-export default class extends Controller {
-  connect() {
-    if (matchMedia('(hover: none), (pointer: coarse)').matches) return
-
-    this.tooltip = Tooltip.getOrCreateInstance(this.element)
-  }
-
-  disconnect() {
-    this.tooltip?.dispose()
-  }
-}

data/app/javascript/recourse/written.js

@@ -1,20 +0,0 @@
-// The mark a create or an update leaves on the row it landed on, and how long the toast
-// saying so stands — the one clock, which the toast controller reads too.
-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')
-  }
-}

data/app/javascript/recourse/written_controller.js

@@ -1,28 +0,0 @@
-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) }
-  }
-}

data/app/stylesheets/recourse/themes/bootstrap.css

@@ -1,11 +0,0 @@
-/* Bootstrap's own palette, and the only file here that declares nothing.
-
-   The eight beside it work by overriding upstream's `:root`, so having upstream's
-   palette back is a matter of dropping their block rather than of writing one — and
-   swapping this link in is how the sidebar's toggle drops it. `Recourse.theme = nil`
-   and `:bootstrap` are the same look by two routes: the first links no stylesheet at
-   all, the second links this one.
-
-   It is named so the toggle can reach it. A reader who rotates through nine palettes
-   and never finds the one the pages started in has been shown a door with no handle
-   on the inside. */