studio-engine 0.96.2 → 0.97.0

data/app/javascript/studio/booking.js

@@ -0,0 +1,176 @@
+// studio/booking: the booking frame and the booking popup (docs/BOOKING.md).
+//
+//   installBookingFrames  the inline frame: assign src after `load`, once the
+//                         frame is near the viewport, and open the crop when
+//                         focus moves into the frame.
+//   installBookingPopup   any a[data-booking-popup] link opens the booking
+//                         dialog instead of leaving the page.
+//
+// Both install document-level behaviour once per document, however many
+// frames, dialogs or Turbo visits follow. Started by the booking controller,
+// which studio/booking/_frame and studio/booking/_popup name.
+//
+// THE GUARDS ARE THE ENGINE'S OWN NAMES, AND THE ELEMENTS ARE THE ENGINE'S OWN
+// (data-studio-booking), for the reason studio/footer_map gives for the map: an
+// app that still renders a local booking script guards it with the unprefixed
+// names and marks its frame, dialog and links with the same data-booking-*
+// attributes. Sharing either lets one script stand the other down across a
+// Turbo visit, or act on elements that are not its own.
+//
+// It imports nothing; test/javascript/booking.test.mjs loads it as a data:
+// module.
+
+export const FRAME = "iframe[data-booking-frame][data-studio-booking]"
+export const WAITING_FRAMES = "iframe[data-booking-frame][data-studio-booking][data-src]"
+export const WRAP = "[data-booking-wrap][data-studio-booking]"
+export const SHUT_WRAP = "[data-booking-wrap][data-studio-booking][data-booking-crop]:not(.is-open)"
+export const POPUP_LINK = "a[data-booking-popup][data-studio-booking]"
+export const DIALOG = "dialog[data-booking-dialog][data-studio-booking]"
+export const POPUP_FRAME = "iframe[data-booking-popup-frame]"
+
+// ASK GOOGLE ONCE. Two things can ask for a frame: scrolling near it, and a
+// booking link that jumps to it. Assigning src a second time, even to the same
+// URL, is a second request, so whoever comes second finds it set.
+export function loadBookingFrame(frame) {
+  if (!frame.getAttribute("src")) frame.src = frame.dataset.src
+}
+
+// A plain primary click: not already handled, and not one the visitor modified
+// to open a new tab or window.
+export function plainClick(event) {
+  return !(event.defaultPrevented || event.button !== 0 ||
+           event.metaKey || event.ctrlKey || event.shiftKey || event.altKey)
+}
+
+// Watches every waiting frame in `doc`, and loads each once it comes within
+// 200px of the viewport. A frame is watched once.
+export function armBookingFrames(win, doc) {
+  doc.querySelectorAll(WAITING_FRAMES).forEach((frame) => {
+    if (frame.__bookingArmed) return
+    frame.__bookingArmed = true
+    if (typeof win.IntersectionObserver !== "function") { loadBookingFrame(frame); return }
+    const watcher = new win.IntersectionObserver((entries) => {
+      if (!entries.some((entry) => entry.isIntersecting)) return
+      watcher.disconnect()
+      loadBookingFrame(frame)
+    }, { rootMargin: "200px" })
+    watcher.observe(frame)
+  })
+}
+
+// Arms the frames once the window has loaded: a frame that starts loading
+// before `load` holds that event open for as long as Google takes to answer.
+export function armBookingFramesAfterLoad(win, doc) {
+  if (doc.readyState === "complete") armBookingFrames(win, doc)
+  else win.addEventListener("load", () => armBookingFrames(win, doc), { once: true })
+}
+
+// Focus moving into the frame is the one signal a cross-origin frame gives its
+// parent. It means the visitor has started using the calendar.
+function openActive(doc) {
+  const active = doc.activeElement
+  if (!active || !active.matches || !active.matches(FRAME)) return
+  const wrap = active.closest(WRAP)
+  if (wrap) wrap.classList.add("is-open")
+}
+
+// Installs the inline frame's behaviour, once per document. Answers false when
+// it was already installed.
+export function installBookingFrames(win, doc) {
+  if (win.__studioBookingFramesArmed) return false
+  win.__studioBookingFramesArmed = true
+  win.__studioBookingLoad = loadBookingFrame
+
+  // THE WINDOW BLURS ONCE. Focus that moves from one frame straight into
+  // another never comes back through this window, so no second blur announces
+  // the second frame, and on a page with two cropped frames it would stay
+  // cropped under the visitor's cursor. So while focus is away in a frame and a
+  // cropped wrapper is still shut, look again a few times a second. It stops
+  // when focus returns here or nothing is left to open, and a page with one
+  // frame never starts it: that frame is open by then.
+  let watching = null
+  const shut = () => doc.querySelector(SHUT_WRAP)
+  const stopWatching = () => { if (watching) { win.clearInterval(watching); watching = null } }
+
+  win.addEventListener("blur", () => {
+    openActive(doc)
+    const active = doc.activeElement
+    if (watching || !active || active.tagName !== "IFRAME" || !shut()) return
+    watching = win.setInterval(() => {
+      openActive(doc)
+      if (!shut()) stopWatching()
+    }, 250)
+  })
+  win.addEventListener("focus", stopWatching)
+
+  doc.addEventListener("turbo:load", () => armBookingFramesAfterLoad(win, doc))
+  armBookingFramesAfterLoad(win, doc)
+  return true
+}
+
+// What a click on a booking link does. Delegated from the document, so it
+// survives Turbo body swaps. A modified click (new tab, new window) is left
+// alone, and so is everything when the dialog is missing or <dialog> is
+// unsupported: the link's own href then takes the visitor to the booking page.
+//
+// ON A PAGE THAT ALREADY SHOWS THE INLINE FRAME the link goes to that frame
+// instead: it scrolls there, opens the crop and moves focus in. A popup would
+// be a second copy of the calendar on top of the first.
+//
+// Answers "frame", "dialog", or null when the click is left to the browser.
+export function handleBookingLinkClick(event, win, doc) {
+  const link = event.target.closest && event.target.closest(POPUP_LINK)
+  if (!link) return null
+  if (!plainClick(event)) return null
+
+  const inline = doc.querySelector(FRAME)
+  if (inline) {
+    event.preventDefault()
+    const wrap = inline.closest(WRAP)
+    if (wrap) wrap.classList.add("is-open")
+    // Before `load` the frame keeps waiting: installBookingFrames assigns src then.
+    if (doc.readyState === "complete" && win.__studioBookingLoad) win.__studioBookingLoad(inline)
+    const calm = win.matchMedia && win.matchMedia("(prefers-reduced-motion: reduce)").matches
+    const anchor = wrap || inline
+    anchor.scrollIntoView({ behavior: calm ? "auto" : "smooth", block: "start" })
+    inline.focus({ preventScroll: true })
+    return "frame"
+  }
+
+  const dialog = doc.querySelector(DIALOG)
+  if (!dialog || typeof dialog.showModal !== "function") return null
+
+  event.preventDefault()
+  const frame = dialog.querySelector(POPUP_FRAME)
+  if (frame && !frame.getAttribute("src")) frame.src = frame.dataset.src
+  if (!dialog.open) dialog.showModal()
+  return "dialog"
+}
+
+// Never snapshot the dialog open: a restored page would show it stuck. And
+// never snapshot its frame loaded: a restored page would ask Google for a popup
+// nobody has opened. The src goes back to waiting in data-src.
+export function resetBookingDialog(doc) {
+  const dialog = doc.querySelector(DIALOG)
+  if (!dialog) return
+  if (dialog.open) dialog.close()
+  const frame = dialog.querySelector(POPUP_FRAME)
+  if (frame) frame.removeAttribute("src")
+}
+
+// Installs the popup's behaviour, once per document. Answers false when it was
+// already installed.
+export function installBookingPopup(win, doc) {
+  if (win.__studioBookingPopupArmed) return false
+  win.__studioBookingPopupArmed = true
+
+  doc.addEventListener("click", (event) => { handleBookingLinkClick(event, win, doc) })
+
+  // A click on the backdrop lands on the dialog element itself.
+  doc.addEventListener("click", (event) => {
+    if (event.target.matches && event.target.matches(DIALOG)) event.target.close()
+  })
+
+  doc.addEventListener("turbo:before-cache", () => resetBookingDialog(doc))
+  return true
+}

data/app/javascript/studio/controllers/board_controller.js

@@ -0,0 +1,41 @@
+// board: one board primitive (studio/board/_board), on the engine's Stimulus
+// application, which reads data-studio-controller and registers this controller
+// lazily, the first time a page renders a board. It sits on the element that
+// carries the board's Alpine scope:
+//
+//   <section x-data="studioBoard({...})" data-studio-controller="board">
+//
+// The scope (studio/board) owns the state, the requests and the toasts. This
+// controller owns what needs the page: it loads SortableJS, so only a page with
+// a board fetches it, and wires the zones when both the library and the scope
+// are there. Until it connects the board renders and its chrome works; a card
+// does not drag, and the element carries no data-alpine-ready.
+import { Controller } from "@hotwired/stimulus"
+import { loadSortable, scopeFor } from "studio/board"
+
+export default class extends Controller {
+  connect() {
+    const connection = this.connection = {}
+    // A board whose SortableJS fails to load is wired without it: it still
+    // counts, toasts and follows live updates.
+    const sortable = loadSortable().catch((error) => {
+      console.error("[studio] SortableJS failed to load; the board does not drag", error)
+      return null
+    })
+
+    Promise.all([scopeFor(this.element), sortable]).then(([scope, Sortable]) => {
+      if (this.connection !== connection) return
+      connection.unwire = scope.wire(Sortable)
+    })
+  }
+
+  disconnect() {
+    this.unwire()
+  }
+
+  unwire() {
+    const connection = this.connection
+    this.connection = null
+    if (connection && connection.unwire) connection.unwire()
+  }
+}

data/app/javascript/studio/controllers/booking_controller.js

@@ -0,0 +1,24 @@
+// booking: the booking frame and the booking popup, on the engine's Stimulus
+// application (studio/stimulus, which reads data-studio-controller and
+// registers this controller lazily). It sits on the frame's wrapper
+// (studio/booking/_frame) and on the popup's dialog (studio/booking/_popup):
+//
+//   <div class="booking-frame" data-booking-wrap data-studio-booking
+//        data-studio-controller="booking">
+//   <dialog class="booking-popup" data-booking-dialog data-studio-booking
+//           data-studio-controller="booking">
+//
+// The behaviour is studio/booking, installed once per document however many of
+// these connect. Until it is installed a booking link is an ordinary link to
+// the booking page.
+import { Controller } from "@hotwired/stimulus"
+import { installBookingFrames, installBookingPopup, armBookingFramesAfterLoad } from "studio/booking"
+
+export default class extends Controller {
+  connect() {
+    const first = installBookingFrames(window, document)
+    installBookingPopup(window, document)
+    // A frame that arrives after the install (a stream, a second wrapper).
+    if (!first) armBookingFramesAfterLoad(window, document)
+  }
+}

data/app/javascript/studio/controllers/email_banner_scale_controller.js

@@ -0,0 +1,22 @@
+// email-banner-scale: fits every email banner preview on the page to its frame,
+// on the engine's Stimulus application (studio/stimulus, which reads
+// data-studio-controller and registers this controller lazily). It sits on the
+// anchor studio/emails/_banner_scale renders, once per page:
+//
+//   <template data-studio-controller="email-banner-scale"></template>
+//
+// The fit is studio/email_banner_scale. Connecting again after a Turbo visit
+// fits the new body's previews; disconnecting drops the observer.
+import { Controller } from "@hotwired/stimulus"
+import { startBannerScale } from "studio/email_banner_scale"
+
+export default class extends Controller {
+  connect() {
+    this.stop = startBannerScale(document, window.ResizeObserver)
+  }
+
+  disconnect() {
+    if (this.stop) this.stop()
+    this.stop = null
+  }
+}

data/app/javascript/studio/controllers/footer_map_controller.js

@@ -0,0 +1,22 @@
+// footer-map: one live map of an address, on the engine's Stimulus application
+// (studio/stimulus, which reads data-studio-controller and registers this
+// controller lazily). It sits on the map element studio/site_footer/_map
+// renders:
+//
+//   <div class="ftr-map" data-footer-map data-studio-controller="footer-map"
+//        data-lat="..." data-lng="..." data-leaflet-js="..." data-leaflet-css="...">
+//
+// The mount is studio/footer_map, installed once per document however many maps
+// connect. Until Leaflet mounts, and if it never does, the link inside the
+// element is the whole map.
+import { Controller } from "@hotwired/stimulus"
+import { installFooterMaps } from "studio/footer_map"
+
+export default class extends Controller {
+  connect() {
+    const installed = !window.__studioFooterMapsArmed
+    const arm = installFooterMaps(window, document)
+    // A map that arrives after the install (a stream, a second map).
+    if (!installed) arm()
+  }
+}

data/app/javascript/studio/controllers/geo_settings_controller.js

@@ -0,0 +1,24 @@
+// geo-settings: the geo manager's live preview, on the engine's Stimulus
+// application (studio/stimulus, which reads data-studio-controller and
+// registers this controller lazily). It sits on the page's root:
+//
+//   <div data-geo-page data-studio-controller="geo-settings"
+//        data-geo-home="US" data-geo-country="US" data-geo-subdivision="CO"
+//        data-geo-fail-closed="true">
+//
+// The rules and the painting are studio/geo_settings. Any change inside the
+// page repaints.
+import { Controller } from "@hotwired/stimulus"
+import { paintGeo } from "studio/geo_settings"
+
+export default class extends Controller {
+  connect() {
+    this.paint = () => paintGeo(this.element, document)
+    this.element.addEventListener("change", this.paint)
+    this.paint()
+  }
+
+  disconnect() {
+    this.element.removeEventListener("change", this.paint)
+  }
+}

data/app/javascript/studio/controllers/hold_button_controller.js

@@ -0,0 +1,64 @@
+// hold-button: one hold-to-confirm button, on the engine's Stimulus application
+// (studio/stimulus, which reads data-studio-controller and imports this
+// controller statically, so it arrives with the page). It sits on the
+// stack studio/_hold_button renders, and the button carries the presses:
+//
+//   <span class="hold-stack" data-studio-controller="hold-button">
+//     <button class="hold-btn" data-hold-id="confirm" data-duration="2000"
+//             data-studio-action="mousedown->hold-button#start mouseup->hold-button#end
+//                                 mouseleave->hold-button#end touchstart->hold-button#press
+//                                 touchend->hold-button#end touchcancel->hold-button#end">
+//
+// The timeline, the idle nudge and the fizz portal are studio/hold_button; the
+// events and string locals the timeline asks are studio/hold_button_hooks.
+import { Controller } from "@hotwired/stimulus"
+import { Hold, mountPortal } from "studio/hold_button"
+import { holdHooks } from "studio/hold_button_hooks"
+
+const NUDGES = ["hold-nudge", "hold-nudge-soft"]
+
+// What a connected stack carries. The guard in the head
+// (studio/_hold_button_guard) marks a stack that never gets it as unavailable,
+// and takes that mark back here when the controller connects late.
+const CONNECTED = "data-hold-button-connected"
+
+export default class extends Controller {
+  connect() {
+    this.element.setAttribute(CONNECTED, "")
+    if (window.studioHoldButtonGuard) window.studioHoldButtonGuard.clear(this.element)
+
+    this.button = this.element.querySelector(":scope > .hold-btn")
+    if (!this.button) return
+
+    this.hold = new Hold(this.button, holdHooks(this.button, { win: window }))
+    this.clearNudge = (event) => {
+      if (NUDGES.includes(event.animationName)) this.button.classList.remove("nudge", "nudge-soft")
+    }
+    this.button.addEventListener("animationend", this.clearNudge)
+    this.hold.nudge.start()
+    if (this.element.hasAttribute("data-fizz-portal")) mountPortal(this.element)
+  }
+
+  disconnect() {
+    this.element.removeAttribute(CONNECTED)
+    if (!this.hold) return
+    this.hold.stop()
+    this.hold = null
+    this.button.removeEventListener("animationend", this.clearNudge)
+    // The portal notices its stack leaving by itself (studio/hold_button).
+  }
+
+  start() {
+    if (this.hold) this.hold.start()
+  }
+
+  // A touch: no synthetic mouse events, no long-press menu.
+  press(event) {
+    event.preventDefault()
+    this.start()
+  }
+
+  end() {
+    if (this.hold) this.hold.end()
+  }
+}

data/app/javascript/studio/controllers/link_preview_card_controller.js

@@ -0,0 +1,25 @@
+// link-preview-card: the site identity manager's live card, on the engine's
+// Stimulus application (studio/stimulus, which reads data-studio-controller and
+// registers this controller lazily). It sits on the page's root:
+//
+//   <div data-link-preview-page data-studio-controller="link-preview-card"
+//        data-fallback-title="..." data-fallback-description="...">
+//
+// The repaint is studio/link_preview_card. One listener on the root takes the
+// `input` of every [data-link-preview-input] inside it.
+import { Controller } from "@hotwired/stimulus"
+import { paintCard } from "studio/link_preview_card"
+
+export default class extends Controller {
+  connect() {
+    this.repaint = (event) => {
+      const input = event.target
+      if (input && input.matches && input.matches("[data-link-preview-input]")) paintCard(this.element, input)
+    }
+    this.element.addEventListener("input", this.repaint)
+  }
+
+  disconnect() {
+    this.element.removeEventListener("input", this.repaint)
+  }
+}

data/app/javascript/studio/controllers/link_sidebar_controller.js

@@ -0,0 +1,18 @@
+// link-sidebar: the link sidebar's presence on the page, on the engine's
+// Stimulus application (studio/application, which reads data-studio-controller).
+// It sits on the anchor components/_link_sidebar renders beside its panels:
+//
+//   <template data-studio-controller="link-sidebar"></template>
+//
+// The open flag and the document handlers are studio/link_sidebar, which
+// registers $store.sidebars.linkTreeOpen on alpine:init and before a Turbo
+// render. connect() registers it too, for a sidebar that arrived any other way.
+// Registered by studio/application.
+import { Controller } from "@hotwired/stimulus"
+import { ensureLinkSidebarStore } from "studio/link_sidebar"
+
+export default class extends Controller {
+  connect() {
+    ensureLinkSidebarStore(window.Alpine)
+  }
+}

data/app/javascript/studio/controllers/survey_controller.js

@@ -0,0 +1,18 @@
+// survey: the survey stepper, on the engine's Stimulus application
+// (studio/stimulus, which reads data-studio-controller and registers this
+// controller lazily). It sits on the survey's root (studio/surveys/show):
+//
+//   <main class="studio-survey" data-studio-survey data-studio-controller="survey"
+//         data-answer-base="..." data-resume-index="..." data-csrf="...">
+//
+// The stepper is studio/survey, which binds a root once. A page restored from
+// Turbo's cache is a new element, so it connects and is bound again. Until the
+// controller connects, and if it never does, the page is the plain form.
+import { Controller } from "@hotwired/stimulus"
+import { enhanceSurvey } from "studio/survey"
+
+export default class extends Controller {
+  connect() {
+    enhanceSurvey(this.element, window, document)
+  }
+}

data/app/javascript/studio/controllers/toast_controller.js

@@ -0,0 +1,26 @@
+// toast: the toast root's lifetime, on the engine's Stimulus application
+// (studio/application, which reads data-studio-controller). It sits on the
+// root of layouts/studio/_flash:
+//
+//   <div x-data data-studio-controller="toast"
+//        data-toast-initial-value='[{"type":"notice","message":"Saved"}]'>
+//
+// The queue is studio/toast ($store.toasts), which also seeds a rendered root
+// on a full load and on turbo:load. connect() seeds this root too, for markup
+// that arrived any other way; an element is seeded once. disconnect() empties
+// the queue when the root leaves the page with no other root left to show it.
+// Registered by studio/application.
+import { Controller } from "@hotwired/stimulus"
+import { seedToasts, TOAST_ROOT } from "studio/toast"
+
+export default class extends Controller {
+  connect() {
+    seedToasts(this.element, { win: window })
+  }
+
+  disconnect() {
+    if (document.querySelector(TOAST_ROOT)) return
+    const store = window.Alpine && window.Alpine.store("toasts")
+    if (store && typeof store.clear === "function") store.clear()
+  }
+}