Move bridge javascript into existing folder structure

app/javascript/controllers/bridge/buttons_controller.js

@@ -0,0 +1,42 @@
+import { BridgeComponent } from "@hotwired/hotwire-native-bridge"
+import { BridgeElement } from "@hotwired/hotwire-native-bridge"
+
+export default class extends BridgeComponent {
+  static component = "buttons"
+  static targets = [ "button" ]
+
+  static shouldLoad() {
+    return true
+  }
+
+  connect() {
+    super.connect()
+    if (!this.hasButtonTarget) return
+    this.notifyBridgeOfConnect()
+  }
+
+  disconnect() {
+    super.disconnect()
+    this.notifyBridgeOfDisconnect()
+  }
+
+  notifyBridgeOfConnect() {
+    const buttons = this.buttonTargets.map((target, index) => {
+      const element = new BridgeElement(target)
+      return { ...element.getButton(), index }
+    })
+
+    this.send("connect", { buttons }, message => {
+      this.activateButton(message)
+    })
+  }
+
+  notifyBridgeOfDisconnect() {
+    this.send("disconnect")
+  }
+
+  activateButton(message) {
+    const selectedIndex = message.data.selectedIndex
+    this.buttonTargets[selectedIndex].click()
+  }
+}

app/javascript/controllers/bridge/form_controller.js

@@ -0,0 +1,49 @@
+import { BridgeComponent } from "@hotwired/hotwire-native-bridge"
+import { BridgeElement } from "@hotwired/hotwire-native-bridge"
+
+export default class extends BridgeComponent {
+  static component = "form"
+  static targets = [ "submit" ]
+  static values = { submitTitle: String }
+
+  connect() {
+    super.connect()
+    if (!this.hasSubmitTarget) return
+    this.notifyBridgeOfConnect()
+    this.observeSubmitTarget()
+  }
+
+  disconnect() {
+    super.disconnect()
+    this.submitObserver?.disconnect()
+  }
+
+  notifyBridgeOfConnect() {
+    const submitButton = new BridgeElement(this.submitTarget)
+    const title = submitButton.title
+    const displaysNavButtonMenu = submitButton.displaysNavButtonMenu()
+
+    this.send("connect", { title, displaysNavButtonMenu }, () => {
+      this.submitTarget.click()
+    })
+  }
+
+  observeSubmitTarget() {
+    this.submitObserver = new MutationObserver(() => {
+      this.send(this.submitTarget.disabled ? "submitDisabled" : "submitEnabled")
+    })
+
+    this.submitObserver.observe(this.submitTarget, {
+      attributes: true,
+      attributeFilter: [ "disabled" ]
+    })
+  }
+
+  submitStart() {
+    this.send("submitStart")
+  }
+
+  submitEnd() {
+    this.send("submitEnd")
+  }
+}

app/javascript/controllers/bridge/insets_controller.js

@@ -0,0 +1,31 @@
+import { BridgeComponent } from "@hotwired/hotwire-native-bridge"
+
+// Bridge component to control custom safe-area insets from native apps.
+// Sets CSS variables --injected-safe-inset-(top|right|bottom|left).
+export default class extends BridgeComponent {
+  static component = "insets"
+
+  connect() {
+    super.connect()
+    this.notifyBridgeOfConnect()
+  }
+
+  disconnect() {
+    super.disconnect()
+    this.send("disconnect")
+  }
+
+  notifyBridgeOfConnect() {
+    this.send("connect", {}, message => {
+      this.setInsets(message.data)
+    })
+  }
+
+  setInsets({ top, right, bottom, left }) {
+    const root = document.documentElement.style
+    root.setProperty("--injected-safe-inset-top", `${top}px`)
+    root.setProperty("--injected-safe-inset-right", `${right}px`)
+    root.setProperty("--injected-safe-inset-bottom", `${bottom}px`)
+    root.setProperty("--injected-safe-inset-left", `${left}px`)
+  }
+}

app/javascript/controllers/bridge/overflow_menu_controller.js

@@ -0,0 +1,38 @@
+import { BridgeComponent } from "@hotwired/hotwire-native-bridge"
+import { BridgeElement } from "@hotwired/hotwire-native-bridge"
+
+export default class extends BridgeComponent {
+  static component = "overflow-menu"
+  static targets = [ "item" ]
+
+  connect() {
+    super.connect()
+    if (!this.hasItemTarget) return
+    this.notifyBridgeOfConnect()
+  }
+
+  disconnect() {
+    super.disconnect()
+    this.notifyBridgeOfDisconnect()
+  }
+
+  notifyBridgeOfConnect() {
+    const items = this.itemTargets.map((target, index) => {
+      const element = new BridgeElement(target)
+      return { title: element.title, index }
+    })
+
+    this.send("connect", { items }, message => {
+      this.activateItem(message)
+    })
+  }
+
+  notifyBridgeOfDisconnect() {
+    this.send("disconnect")
+  }
+
+  activateItem(message) {
+    const selectedIndex = message.data.selectedIndex
+    this.itemTargets[selectedIndex].click()
+  }
+}

app/javascript/controllers/bridge/page_controller.js

@@ -0,0 +1,89 @@
+import { BridgeComponent } from "@hotwired/hotwire-native-bridge"
+import { viewport } from "helpers/bridge/viewport_helpers"
+import { nextFrame } from "helpers/timing_helpers"
+
+export default class extends BridgeComponent {
+  static component = "page"
+  static targets = [ "header" ]
+  static values = { title: String }
+
+  async connect() {
+    super.connect()
+    this.notifyBridgeOfPageChange()
+    await nextFrame()
+    this.startObserver()
+    window.addEventListener("resize", this.windowResized)
+  }
+
+  disconnect() {
+    super.disconnect()
+    this.stopObserver()
+    window.removeEventListener("resize", this.windowResized)
+  }
+
+  receive(message) {
+    switch (message.event) {
+    case "set-text-size":
+      this.setTextSize(message.data)
+      break
+    }
+  }
+
+  setTextSize(data) {
+    document.documentElement.dataset.textSize = data.textSize
+  }
+
+  // Bridge
+
+  notifyBridgeOfPageChange() {
+    const data = { title: this.title }
+
+    if (this.hasHeaderTarget) {
+      // Assume header visible by default until we get IntersectionObserver update
+      data.elementVisible = true
+    }
+
+    this.send("change", data, message => this.receive(message))
+  }
+
+  notifyBridgeOfVisibilityChange(visible) {
+    this.send("visibility", { title: this.title, elementVisible: visible })
+  }
+
+  // Intersection Observer
+
+  startObserver() {
+    if (!this.hasHeaderTarget) return
+
+    this.observer = new IntersectionObserver(([ entry ]) =>
+      this.notifyBridgeOfVisibilityChange(entry.isIntersecting),
+      { rootMargin: `-${this.topOffset}px 0px 0px 0px` }
+    )
+
+    this.observer.observe(this.headerTarget)
+    this.previousTopOffset = this.topOffset
+  }
+
+  stopObserver() {
+    this.observer?.disconnect()
+  }
+
+  updateObserverIfNeeded() {
+    if (this.topOffset === this.previousTopOffset) return
+
+    this.stopObserver()
+    this.startObserver()
+  }
+
+  windowResized = () => {
+    this.updateObserverIfNeeded()
+  }
+
+  get title() {
+    return this.titleValue ? this.titleValue : document.title
+  }
+
+  get topOffset() {
+    return viewport.top
+  }
+}