diff --git a/app/javascript/bridge/controllers/bridge/form_controller.js b/app/javascript/bridge/controllers/bridge/form_controller.js new file mode 100644 index 000000000..82fa88e81 --- /dev/null +++ b/app/javascript/bridge/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") + } +} diff --git a/app/javascript/bridge/initializers/bridge_element.js b/app/javascript/bridge/initializers/bridge_element.js index 364386875..7787f8b8a 100644 --- a/app/javascript/bridge/initializers/bridge_element.js +++ b/app/javascript/bridge/initializers/bridge_element.js @@ -43,3 +43,7 @@ BridgeElement.prototype.getOrder = function() { BridgeElement.prototype.shouldDisplayAsFormSubmitMenu = function() { return this.bridgeAttribute("display-as-form-submit-menu") === "true" } + +BridgeElement.prototype.displaysNavButtonMenu = function() { + return this.bridgeAttribute("displays-nav-button-menu") === "true" +}