Merge pull request #2615 from basecamp/card-perma-editing

Mobile: card perma improvements

app/javascript/controllers/bridge/buttons_controller.js

@@ -5,6 +5,26 @@ export default class extends BridgeComponent {
   static component = "buttons"
   static targets = [ "button" ]
 
+  connect() {
+    super.connect()
+
+    if (!this.beforeUnloadHandler) {
+      this.beforeUnloadHandler = this.handleBeforeUnload.bind(this)
+    }
+
+    window.addEventListener("beforeunload", this.beforeUnloadHandler)
+  }
+
+  disconnect() {
+    super.disconnect()
+
+    if (this.beforeUnloadHandler) {
+      window.removeEventListener("beforeunload", this.beforeUnloadHandler)
+    }
+
+    this.notifyBridgeOfDisconnect()
+  }
+
   buttonTargetConnected() {
     this.notifyBridgeOfConnect()
   }
@@ -27,6 +47,14 @@ export default class extends BridgeComponent {
     })
   }
 
+  notifyBridgeOfDisconnect() {
+    this.send("disconnect")
+  }
+
+  handleBeforeUnload() {
+    this.notifyBridgeOfDisconnect()
+  }
+
   #clickButton(message) {
     const selectedIndex = message.data.selectedIndex
     this.#enabledButtonTargets[selectedIndex].click()

app/javascript/controllers/bridge/form_controller.js

@@ -6,13 +6,31 @@ export default class extends BridgeComponent {
   static targets = [ "submit", "cancel" ]
   static values = { submitTitle: String }
 
+  connect() {
+    super.connect()
+
+    if (!this.beforeUnloadHandler) {
+      this.beforeUnloadHandler = this.handleBeforeUnload.bind(this)
+    }
+
+    window.addEventListener("beforeunload", this.beforeUnloadHandler)
+  }
+
+  disconnect() {
+    super.disconnect()
+
+    if (this.beforeUnloadHandler) {
+      window.removeEventListener("beforeunload", this.beforeUnloadHandler)
+    }
+  }
+
   submitTargetConnected() {
     this.notifyBridgeOfConnect()
     this.#observeSubmitTarget()
   }
 
   submitTargetDisconnected() {
-    this.notifyBridgeOfDisonnect()
+    this.notifyBridgeOfDisconnect()
     this.submitObserver?.disconnect()
   }
 
@@ -37,7 +55,7 @@ export default class extends BridgeComponent {
     }
   }
 
-  notifyBridgeOfDisonnect() {
+  notifyBridgeOfDisconnect() {
     this.send("disconnect")
   }
 
@@ -49,6 +67,10 @@ export default class extends BridgeComponent {
     this.send("submitEnd")
   }
 
+  handleBeforeUnload() {
+    this.notifyBridgeOfDisconnect()
+  }
+
   #observeSubmitTarget() {
     this.submitObserver = new MutationObserver(() => {
       this.send(this.submitTarget.disabled ? "submitDisabled" : "submitEnabled")

app/views/cards/container/_closure.html.erb

@@ -5,6 +5,7 @@
       <%= button_to card_closure_path(card), method: :delete, class: "btn btn--plain borderless fill-transparent" do %>
         <span class="pad-inline-end">Undo</span>
       <% end %>
+      <%= bridged_button_to_board(card.board) %>
     </div>
   <% else %>
     <div class="card-perma__notch card-perma__notch--bottom">

app/views/cards/container/_closure_buttons.html.erb

@@ -13,4 +13,6 @@
     <span class="overflow-ellipsis">Mark as Done</span>
     <kbd class="txt-x-small hide-on-touch">d</kbd>
   <% end %>
+
+  <%= bridged_button_to_board(card.board) %>
 </div>

app/views/cards/container/_image.html.erb

@@ -1,12 +1,12 @@
 <% if card.image.attached? %>
-  <%= button_to card_image_path(card), method: :delete, class: "btn",
-        data: { controller: "tooltip", bridge__overflow_menu_target: "item", bridge_title: "Remove background image" } do %>
+  <%= button_to card_image_path(card), method: :delete, class: "btn hide-on-native",
+        data: { controller: "tooltip" } do %>
     <%= icon_tag "picture-remove" %>
     <span class="for-screen-reader">Remove background image</span>
   <% end %>
 <% elsif !card.closed? %>
   <%= form_with model: card, data: { controller: "form" } do |form| %>
-    <label class="card-perma__image-btn btn input--file btn--circle-mobile" data-controller="tooltip" data-bridge--overflow-menu-target="item" data-bridge-title="Add background image">
+    <label class="card-perma__image-btn btn input--file btn--circle-mobile hide-on-native" data-controller="tooltip">
       <%= icon_tag "picture-add" %>
       <span class="for-screen-reader">Add background image</span>
 

app/views/cards/show.html.erb

@@ -9,7 +9,6 @@
   <div class="header__actions header__actions--start">
     <%= link_back_to_board(@card.board) %>
   </div>
-  <%= bridged_button_to_board(@card.board) %>
 <% end %>
 
 <%= turbo_stream_from @card %>