From 765b6c78f3cb5cd69bd4561a75dda5681b20391a Mon Sep 17 00:00:00 2001
From: Evgeny Varnakov <evgeniy.varnakov@sbermarket.ru>
Date: Mon, 31 Jul 2023 18:15:11 +0300
Subject: [PATCH] solution: day 1 - task 1

---
 app/javascript/application.js     | 4 +++-
 app/views/albums/_aside.html.erb  | 2 +-
 app/views/shared/_player.html.erb | 2 +-
 3 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/app/javascript/application.js b/app/javascript/application.js
index ec493c2..fd64414 100644
--- a/app/javascript/application.js
+++ b/app/javascript/application.js
@@ -9,7 +9,9 @@ document.addEventListener("turbo:before-render", (event) => {
   prevPath = window.location.pathname;
   event.detail.render = async (prevEl, newEl) => {
     await new Promise((resolve) => setTimeout(() => resolve(), 0));
-    morphdom(prevEl, newEl);
+    morphdom(prevEl, newEl, {
+      onBeforeElUpdated: (el, _) => !(el.hasAttribute('data-turbo-morph-permanent')),
+    });
   };
 
   if (document.startViewTransition) {
diff --git a/app/views/albums/_aside.html.erb b/app/views/albums/_aside.html.erb
index d20595d..3b1c236 100644
--- a/app/views/albums/_aside.html.erb
+++ b/app/views/albums/_aside.html.erb
@@ -1,5 +1,5 @@
 <%# locals: (album: nil) -%>
-<%= turbo_frame_tag :aside, class: "aside", target: "_top", data: {"turbo-permanent" => true}, "transition-name" => "aside" do %>
+<%= turbo_frame_tag :aside, class: "aside", target: "_top", data: {"turbo-morph-permanent" => true}, "transition-name" => "aside" do %>
   <% next unless album %>
   <div transition-id="<%= album.id %>">
     <div class="album-info">
diff --git a/app/views/shared/_player.html.erb b/app/views/shared/_player.html.erb
index 12ed9cd..b08be87 100644
--- a/app/views/shared/_player.html.erb
+++ b/app/views/shared/_player.html.erb
@@ -1,5 +1,5 @@
 <%# locals: (track:, station: nil) -%>
-<div class="player" id="<%= dom_id(station || track, "player_#{track.id}") %>" data-turbo-permanent>
+<div class="player" id="<%= dom_id(station || track, "player_#{track.id}") %>" data-turbo-morph-permanent>
   <% if track %>
     <div class="player--timeline">
       <div class="player--timeline-progress" style="width:11%;"></div>