[openstreetmap/openstreetmap-website] Add Turbo to replace custom JS (PR #4562)

[Gregory Igelmund]

@grekko commented on this pull request.



>    });
 
-  $(".inbox-mark-read").on("ajax:success", function (event, data) {
-    updateHtml(data);
-    updateReadState(this, true);
+  $(".messages-table .message-summary").on("turbo:before-morph-element", function (event) {

AFAIU the `turbo:before-morph-element`-event is only fired for DOM elements with an `id`. Therefore I had to set the `id`-attribute in `app/views/messages/_sent_message_summary.html.erb` which is non-obvious here. 

I tried to dig into the responsible underlying Idiomorph-lib [code](https://github.com/bigskysoftware/idiomorph/blob/8e40c42cc573609eb6863e72fa3403574974dd7d/src/idiomorph.js#L122-L155) which is used by Turbo (see https://github.com/hotwired/turbo/blob/8c668612b3715cdae0b291abd2ce61baf5813c71/src/core/drive/morph_renderer.js#L28-L41) to figure out if there is a more obvious configuration e.g. a `data`-attribute to subscribe to such events, but could not find anything useful yet.


It is a bit unfortunate that the `id` is set just to subscribe for the `turbo:before-morph-element`-event. We could rename the `id` so reflect this since we do not care about the actual value here, e.g. to `id="turbo-morph-element-#{message_summary.id}"`.

-- 
Reply to this email directly or view it on GitHub:
https://github.com/openstreetmap/openstreetmap-website/pull/4562#pullrequestreview-1919325918
You are receiving this because you are subscribed to this thread.

Message ID: <openstreetmap/openstreetmap-website/pull/4562/review/1919325918 at github.com>
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.openstreetmap.org/pipermail/rails-dev/attachments/20240306/f5f7c95c/attachment.htm>