diff --git a/app/javascript/bridge/controllers/bridge/nav_button_controller.js b/app/javascript/bridge/controllers/bridge/nav_button_controller.js new file mode 100644 index 000000000..35d5e6950 --- /dev/null +++ b/app/javascript/bridge/controllers/bridge/nav_button_controller.js @@ -0,0 +1,22 @@ +import { BridgeComponent } from "@hotwired/hotwire-native-bridge" + +export default class extends BridgeComponent { + static component = "nav-button" + + connect() { + super.connect() + + if (this.bridgeElement.enabled) { + this.notifyBridgeOfConnect() + } + } + + notifyBridgeOfConnect() { + const navButton = this.bridgeElement.getButton() + navButton.displayAsFormSubmitMenu = this.bridgeElement.shouldDisplayAsFormSubmitMenu() + + this.send("connect", navButton, () => { + this.element.click() + }) + } +} diff --git a/app/javascript/bridge/initializers/bridge_element.js b/app/javascript/bridge/initializers/bridge_element.js index 7e96bae1c..364386875 100644 --- a/app/javascript/bridge/initializers/bridge_element.js +++ b/app/javascript/bridge/initializers/bridge_element.js @@ -11,3 +11,35 @@ BridgeElement.prototype.showOnPlatform = function() { BridgeElement.prototype.hideOnPlatform = function() { this.element.classList.add("hide-on-native") } + +BridgeElement.prototype.getButton = function() { + return { + title: this.title, + icon: this.getIcon(), + label: this.getLabel(), + order: this.getOrder() + } +} + +BridgeElement.prototype.getIcon = function() { + const name = this.bridgeAttribute("icon-name") + const url = this.bridgeAttribute(`icon-${this.platform}-url`) + + if (name || url) { + return { name, url } + } + + return null +} + +BridgeElement.prototype.getLabel = function() { + return this.bridgeAttribute("label") +} + +BridgeElement.prototype.getOrder = function() { + return this.bridgeAttribute("order") || "1" +} + +BridgeElement.prototype.shouldDisplayAsFormSubmitMenu = function() { + return this.bridgeAttribute("display-as-form-submit-menu") === "true" +}