diff --git a/app/assets/stylesheets/components/transition.css b/app/assets/stylesheets/components/transition.css index 8b7d0fc4..995cdf88 100644 --- a/app/assets/stylesheets/components/transition.css +++ b/app/assets/stylesheets/components/transition.css @@ -10,7 +10,6 @@ } .banner-img .v-vlite { - view-transition-name: banner-img; contain: layout; } diff --git a/app/helpers/talks_helper.rb b/app/helpers/talks_helper.rb index 69434fe3..5edbaed4 100644 --- a/app/helpers/talks_helper.rb +++ b/app/helpers/talks_helper.rb @@ -1,7 +1,2 @@ module TalksHelper - def view_transition_style(talk_id:, from_talk_id:, name:) - return unless from_talk_id && talk_id == from_talk_id.to_i - - "view-transition-name: #{name}" - end end diff --git a/app/javascript/controllers/view_transition_controller.js b/app/javascript/controllers/view_transition_controller.js deleted file mode 100644 index 5d5ef511..00000000 --- a/app/javascript/controllers/view_transition_controller.js +++ /dev/null @@ -1,16 +0,0 @@ -import { Controller } from "@hotwired/stimulus"; - -export default class extends Controller { - static values = { name: String, fade: Boolean }; - - connect() { - this.element.addEventListener("click", this.click.bind(this)); - } - - async click(event) { - const img = - event.currentTarget.querySelector("img") || - this.element.querySelector("div.video"); - img.style.viewTransitionName = this.nameValue; - } -} diff --git a/app/javascript/controllers/view_transition_page_cleaner_controller.js b/app/javascript/controllers/view_transition_page_cleaner_controller.js deleted file mode 100644 index f56669c7..00000000 --- a/app/javascript/controllers/view_transition_page_cleaner_controller.js +++ /dev/null @@ -1,14 +0,0 @@ -import { Controller } from "@hotwired/stimulus"; - -export default class extends Controller { - connect() { - requestAnimationFrame(() => { - const elementsWithViewTransitionName = document.querySelectorAll( - "[style*='view-transition-name']" - ); - elementsWithViewTransitionName.forEach((element) => { - element.style.viewTransitionName = ""; - }); - }); - } -} diff --git a/app/javascript/entrypoints/application.js b/app/javascript/entrypoints/application.js index b8f1d6d0..42812655 100644 --- a/app/javascript/entrypoints/application.js +++ b/app/javascript/entrypoints/application.js @@ -3,6 +3,10 @@ import * as Turbo from "@hotwired/turbo"; Turbo.start(); +import Turn from "@domchristie/turn"; +Turn.config.experimental.viewTransitions = true +Turn.start() + // import ActiveStorage from "@rails/activestorage"; // ActiveStorage.start(); // @@ -12,16 +16,6 @@ Turbo.start(); // Example: Import a stylesheet in app/frontend/index.css import "../../assets/stylesheets/application.tailwind.css"; -addEventListener("turbo:before-render", (event) => { - if (document.startViewTransition) { - event.preventDefault(); - - document.startViewTransition(() => { - event.detail.resume(); - }); - } -}); - addEventListener("turbo:before-frame-render", (event) => { if (document.startViewTransition) { event.preventDefault(); diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb index b3e0d8e4..7fb05c0a 100644 --- a/app/views/layouts/application.html.erb +++ b/app/views/layouts/application.html.erb @@ -2,7 +2,6 @@ - <%= csrf_meta_tags %> <%= csp_meta_tag %> diff --git a/app/views/talks/_card.html.erb b/app/views/talks/_card.html.erb index 289d00b5..2e1a8c3e 100644 --- a/app/views/talks/_card.html.erb +++ b/app/views/talks/_card.html.erb @@ -1,13 +1,13 @@
- <%= link_to talk_path(talk, speaker_slug: local_assigns.fetch(:speaker_slug, nil)), class: "flex aspect-video", data: { controller: "view-transition", view_transition_name_value: "banner-img" } do %> + <%= link_to talk_path(talk, speaker_slug: local_assigns.fetch(:speaker_slug, nil)), class: "flex aspect-video" do %> <%= image_tag talk.thumbnail_sm, srcset: ["#{talk.thumbnail_lg} 2x"], id: dom_id(talk), height: 174, width: 310, alt: "talk by #{talk.speakers.join(", ")}: #{talk.title}", - style: view_transition_style(talk_id: talk.id, from_talk_id: local_assigns.fetch(:from_talk_id, nil), name: "banner-img"), + style: "view-transition-name: #{dom_id(talk, :image)}", class: "rounded-lg w-full object-cover" %> <% end %> diff --git a/app/views/talks/_card_horizontal.html.erb b/app/views/talks/_card_horizontal.html.erb index 49c705f4..5b19fc66 100644 --- a/app/views/talks/_card_horizontal.html.erb +++ b/app/views/talks/_card_horizontal.html.erb @@ -2,12 +2,8 @@
<%= link_to talk_path(talk), - class: "flex aspect-video shrink-0 relative", - data: { - controller: "view-transition", - view_transition_name_value: "card-horizontal-img" - } do %> - <%= image_tag talk.thumbnail_sm, srcset: ["#{talk.thumbnail_lg} 2x"], id: dom_id(talk), class: "w-full h-auto object-cover", loading: :lazy %> + class: "flex aspect-video shrink-0 relative" do %> + <%= image_tag talk.thumbnail_sm, srcset: ["#{talk.thumbnail_lg} 2x"], id: dom_id(talk), class: "w-full h-auto object-cover", style: "view-transition-name: #{dom_id(talk, :image)}", loading: :lazy %> <% end %> <%= content_tag :div, talk.title, class: "text-sm text-gray line-clamp-2 mt-1" %>
diff --git a/app/views/talks/_talk.html.erb b/app/views/talks/_talk.html.erb index c7b6a8d2..6a17f17d 100644 --- a/app/views/talks/_talk.html.erb +++ b/app/views/talks/_talk.html.erb @@ -2,11 +2,9 @@