From c65ceab16332de5449c0814ce1e569a7907f53b0 Mon Sep 17 00:00:00 2001 From: Jens Ravens Date: Wed, 16 Oct 2024 14:46:23 +0200 Subject: [PATCH] add view transitions for sorting --- Gemfile.lock | 21 ++++++++++----------- app/javascript/application.ts | 1 + app/javascript/sprinkles/view_transition.js | 13 +++++++++++++ app/views/users/_user.html.slim | 7 +++++-- package.json | 2 +- yarn.lock | 18 +++++++++--------- 6 files changed, 39 insertions(+), 23 deletions(-) create mode 100644 app/javascript/sprinkles/view_transition.js diff --git a/Gemfile.lock b/Gemfile.lock index a9bb1ea5..1f00cade 100644 --- a/Gemfile.lock +++ b/Gemfile.lock @@ -133,7 +133,7 @@ GEM chunky_png (1.4.0) coercible (1.0.0) descendants_tracker (~> 0.0.1) - concurrent-ruby (1.3.3) + concurrent-ruby (1.3.4) connection_pool (2.4.1) countries (6.0.1) unaccent (~> 0.3) @@ -194,7 +194,7 @@ GEM csv mini_mime (>= 1.0.0) multi_xml (>= 0.5.2) - i18n (1.14.5) + i18n (1.14.6) concurrent-ruby (~> 1.0) i18n-tasks (1.0.14) activesupport (>= 4.0.2) @@ -218,7 +218,7 @@ GEM activesupport (>= 6.0.0) railties (>= 6.0.0) io-console (0.7.2) - irb (1.14.0) + irb (1.14.1) rdoc (>= 4.0.0) reline (>= 0.4.2) jmespath (1.6.2) @@ -261,7 +261,7 @@ GEM mime-types-data (3.2024.0604) mini_magick (4.13.1) mini_mime (1.1.5) - minitest (5.24.1) + minitest (5.25.1) mission_control-jobs (0.2.1) importmap-rails rails (~> 7.1) @@ -321,7 +321,7 @@ GEM rspec-support (~> 3.12) raabro (1.4.0) racc (1.8.1) - rack (3.1.7) + rack (3.1.8) rack-proxy (0.7.7) rack rack-session (2.0.0) @@ -377,7 +377,7 @@ GEM psych (>= 4.0.0) redcarpet (3.6.0) regexp_parser (2.9.2) - reline (0.5.9) + reline (0.5.10) io-console (~> 0.5) responders (3.1.1) actionpack (>= 5.2) @@ -488,7 +488,7 @@ GEM temple (0.10.3) terminal-table (3.0.2) unicode-display_width (>= 1.1.1, < 3) - thor (1.3.1) + thor (1.3.2) thread_safe (0.3.6) tilt (2.3.0) time_will_tell (0.1.0) @@ -501,9 +501,8 @@ GEM launchy netrc thor - turbo-rails (2.0.6) + turbo-rails (2.0.11) actionpack (>= 6.0.0) - activejob (>= 6.0.0) railties (>= 6.0.0) tzinfo (2.0.6) concurrent-ruby (~> 1.0) @@ -532,14 +531,14 @@ GEM addressable (>= 2.8.0) crack (>= 0.3.2) hashdiff (>= 0.4.0, < 2.0.0) - webrick (1.8.1) + webrick (1.8.2) websocket-driver (0.7.6) websocket-extensions (>= 0.1.0) websocket-extensions (0.1.5) xpath (3.2.0) nokogiri (~> 1.8) yael (0.0.3) - zeitwerk (2.6.17) + zeitwerk (2.7.0) PLATFORMS aarch64-linux diff --git a/app/javascript/application.ts b/app/javascript/application.ts index 854cfcb8..a3f613a8 100644 --- a/app/javascript/application.ts +++ b/app/javascript/application.ts @@ -3,6 +3,7 @@ import { start } from '@nerdgeschoss/shimmer'; import { Application } from '@hotwired/stimulus'; import { registerControllers } from 'stimulus-vite-helpers'; import 'chartkick/chart.js'; +import './sprinkles/view_transition'; const application = Application.start(); const controllers = import.meta.glob('./controllers/**/*_controller.ts', { diff --git a/app/javascript/sprinkles/view_transition.js b/app/javascript/sprinkles/view_transition.js new file mode 100644 index 00000000..a9435af0 --- /dev/null +++ b/app/javascript/sprinkles/view_transition.js @@ -0,0 +1,13 @@ +addEventListener('turbo:before-render', (event) => { + if (document.startViewTransition) { + const originalRender = event.detail.render; + event.detail.render = (currentElement, newElement) => { + const isErrorPage = !!newElement.querySelector('#console'); + if (isErrorPage) return originalRender(currentElement, newElement); + + document.startViewTransition(() => + originalRender(currentElement, newElement) + ); + }; + } +}); diff --git a/app/views/users/_user.html.slim b/app/views/users/_user.html.slim index d9e49b3f..d56a827d 100644 --- a/app/views/users/_user.html.slim +++ b/app/views/users/_user.html.slim @@ -1,9 +1,12 @@ - salary = user.current_salary -.card +.card style="view-transition-name: user-card-#{user.id}" .card__header .card__icon: img src=user.avatar_image(size: 80) .card__header-content - a.card__title href=user_path(user) = user.display_name + a.card__title href=user_path(user) + = user.full_name + - if user.nick_name.present? + = " (#{user.nick_name})" .card__subtitle = t(".days_of_holidays_remaining",days: user.remaining_holidays) - if user.unpaid_holidays_this_year_total.positive? diff --git a/package.json b/package.json index bd791e10..a1bc6195 100644 --- a/package.json +++ b/package.json @@ -12,7 +12,7 @@ "license": "MIT", "dependencies": { "@hotwired/stimulus": "^3.2.2", - "@hotwired/turbo-rails": "^8.0.5", + "@hotwired/turbo-rails": "^8.0.12", "@nerdgeschoss/shimmer": "^0.0.10", "chart.js": "^3.7.0", "chartkick": "^4.1.1", diff --git a/yarn.lock b/yarn.lock index 2dd92a34..fc2bc13b 100644 --- a/yarn.lock +++ b/yarn.lock @@ -142,18 +142,18 @@ resolved "https://registry.yarnpkg.com/@hotwired/stimulus/-/stimulus-3.2.2.tgz#071aab59c600fed95b97939e605ff261a4251608" integrity sha512-eGeIqNOQpXoPAIP7tC1+1Yc1yl1xnwYqg+3mzqxyrbE5pg5YFBZcA6YoTiByJB6DKAEsiWtl6tjTJS4IYtbB7A== -"@hotwired/turbo-rails@^8.0.5": - version "8.0.5" - resolved "https://registry.yarnpkg.com/@hotwired/turbo-rails/-/turbo-rails-8.0.5.tgz#18c2f0e4f7f952307650308590edf5eb9544b0d3" - integrity sha512-1A9G9u28IRAl0C57z8Ka3AhNPyJdwfOrbjr+ABZk2ZEUw2QO7cJ0pgs77asUj2E/tzn1PgrxrSVu24W+1Q5uBA== +"@hotwired/turbo-rails@^8.0.12": + version "8.0.12" + resolved "https://registry.yarnpkg.com/@hotwired/turbo-rails/-/turbo-rails-8.0.12.tgz#6f1a2661122c0a2bf717f3bc68b5106638798c89" + integrity sha512-ZXwu9ez+Gd4RQNeHIitqOQgi/LyqY8J4JqsUN0nnYiZDBRq7IreeFdMbz29VdJpIsmYqwooE4cFzPU7QvJkQkA== dependencies: - "@hotwired/turbo" "^8.0.5" + "@hotwired/turbo" "^8.0.12" "@rails/actioncable" "^7.0" -"@hotwired/turbo@^8.0.5": - version "8.0.5" - resolved "https://registry.yarnpkg.com/@hotwired/turbo/-/turbo-8.0.5.tgz#abae6dad018a891e4286e87fa0959217e3866d5a" - integrity sha512-TdZDA7fxVQ2ZycygvpnzjGPmFq4sO/E2QVg+2em/sJ3YTSsIWVEis8HmWlumz+c9DjWcUkcCuB+muF08TInpAQ== +"@hotwired/turbo@^8.0.12": + version "8.0.12" + resolved "https://registry.yarnpkg.com/@hotwired/turbo/-/turbo-8.0.12.tgz#50aa8345d7f62402680c6d2d9814660761837001" + integrity sha512-l3BiQRkD7qrnQv6ms6sqPLczvwbQpXt5iAVwjDvX0iumrz6yEonQkNAzNjeDX25/OJMFDTxpHjkJZHGpM9ikWw== "@humanwhocodes/config-array@^0.9.2": version "0.9.2"