From e21bb9916716b7afba571de2dcee77118c85c929 Mon Sep 17 00:00:00 2001
From: Jorge Manrubia <jorge@37signals.com>
Date: Thu, 10 Apr 2025 13:06:55 +0200
Subject: [PATCH] Reflect picked color automatically with a custom stream
 action

---
 app/javascript/initializers/custom_stream_actions.js | 8 ++++++++
 app/javascript/initializers/index.js                 | 1 +
 app/views/cards/show.html.erb                        | 2 +-
 app/views/cards/stagings/create.turbo_stream.erb     | 3 +++
 app/views/workflows/stages/_color.html.erb           | 2 +-
 5 files changed, 14 insertions(+), 2 deletions(-)
 create mode 100644 app/javascript/initializers/custom_stream_actions.js

diff --git a/app/javascript/initializers/custom_stream_actions.js b/app/javascript/initializers/custom_stream_actions.js
new file mode 100644
index 000000000..fecb25ff5
--- /dev/null
+++ b/app/javascript/initializers/custom_stream_actions.js
@@ -0,0 +1,8 @@
+import { Turbo } from "@hotwired/turbo-rails"
+
+Turbo.StreamActions.set_css_variable = function() {
+  const name = this.getAttribute("name")
+  const value = this.getAttribute("value")
+
+  this.targetElements.forEach(element => element.style.setProperty(name, value))
+}
diff --git a/app/javascript/initializers/index.js b/app/javascript/initializers/index.js
index 10fb36975..01fdd9220 100644
--- a/app/javascript/initializers/index.js
+++ b/app/javascript/initializers/index.js
@@ -1 +1,2 @@
 import "initializers/current"
+import "initializers/custom_stream_actions"
diff --git a/app/views/cards/show.html.erb b/app/views/cards/show.html.erb
index 60d74f89e..753c2e464 100644
--- a/app/views/cards/show.html.erb
+++ b/app/views/cards/show.html.erb
@@ -51,7 +51,7 @@
 <% end %>
 
 <div data-controller="beacon" data-beacon-url-value="<%= card_reading_url(@card) %>">
-  <div class="card__container position-relative <%= "card__container--pointing" unless @card.published? %>" style="--card-color: <%= @card.color %>;">
+  <div id="<%= dom_id(@card, :card_container) %>" class="card__container position-relative <%= "card__container--pointing" unless @card.published? %>" style="--card-color: <%= @card.color %>;">
     <%= render "cards/display/perma", card: @card %>
 
     <div class="card__actions flex flex-column gap-half">
diff --git a/app/views/cards/stagings/create.turbo_stream.erb b/app/views/cards/stagings/create.turbo_stream.erb
index e52906f74..7b2668a2d 100644
--- a/app/views/cards/stagings/create.turbo_stream.erb
+++ b/app/views/cards/stagings/create.turbo_stream.erb
@@ -1,3 +1,6 @@
 <%= turbo_stream.replace dom_id(@card, "stages") do %>
   <%= render partial: "cards/stagings/stages", locals: { card: @card } %>
 <% end %>
+
+<turbo-stream action="set_css_variable" target="<%= dom_id(@card, :card_container) %>" name="--card-color" value="<%= @card.color %>"></turbo-stream>
+<turbo-stream action="set_css_variable" target="<%= dom_id(@card, :ticket) %>" name="--card-color" value="<%= @card.color %>"></turbo-stream>
diff --git a/app/views/workflows/stages/_color.html.erb b/app/views/workflows/stages/_color.html.erb
index fc0b65b6e..04a9e12a3 100644
--- a/app/views/workflows/stages/_color.html.erb
+++ b/app/views/workflows/stages/_color.html.erb
@@ -24,4 +24,4 @@
       </button>
     </form>
   </dialog>
-</div>
\ No newline at end of file
+</div>