From 3924b8f6f69fffbd18193a9e7c0bf82419cf5438 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?David=20B=C3=B6hm?= Date: Sat, 14 Sep 2024 12:59:01 +0200 Subject: [PATCH] Added turbo_stream animations --- app/assets/stylesheets/application.css | 108 ++++++++++++++++++++++ app/javascript/controllers/application.js | 29 ++++++ app/views/jobs/_job_tr.html.erb | 2 +- app/views/operator/jobs/_job_tr.html.erb | 6 +- 4 files changed, 141 insertions(+), 4 deletions(-) diff --git a/app/assets/stylesheets/application.css b/app/assets/stylesheets/application.css index 288b9ab..6bba33f 100644 --- a/app/assets/stylesheets/application.css +++ b/app/assets/stylesheets/application.css @@ -13,3 +13,111 @@ *= require_tree . *= require_self */ + +.animate-job-in { + animation: fade-in 0.25s ease-out, slide-in 0.25s ease-out; +} + +.animate-job-out { + animation: fade-out 0.25s ease-out, slide-out 0.25s ease-out; +} + +.animate-fade-in { + animation: fade-in 0.25s ease-out; +} + +.animate-fade-out { + animation: fade-out 0.25s ease-out; +} + +@keyframes fade-in { + from { + opacity: 0; + } + to { + opacity: 1; + } +} + +@keyframes fade-out { + from { + opacity: 1; + } + to { + opacity: 0; + } +} + +@keyframes slide-in { + from { + transform: translateX(4rem); + } + to { + transform: translateX(0); + } +} + +@keyframes slide-out { + from { + transform: translateX(0); + } + to { + transform: translateX(4rem); + } +} + +.animate-job-item-in { + overflow: hidden; + animation: slide-down 0.5s ease-out; +} + +.animate-job-item-out { + overflow: hidden; + animation: slide-up 0.5s ease-out; +} + +/* "max-height: auto" unfortunately does not work here, so we set + to a fixed height that is greater than the expected height. */ +@keyframes slide-down { + from { + max-height: 0; + } + to { + max-height: 3rem; + } +} + +@keyframes slide-up { + from { + max-height: 3rem; + } + to { + max-height: 0; + } +} + +.animate-flash-increase { + animation: flash-green 0.5s ease-in-out; +} + +.animate-flash-decrease { + animation: flash-red 0.5s ease-in-out; +} + +@keyframes flash-green { + from { + background-color: #a7f3d0; + } + to { + background-color: transparent; + } +} + +@keyframes flash-red { + from { + background-color: #fecaca; + } + to { + background-color: transparent; + } +} diff --git a/app/javascript/controllers/application.js b/app/javascript/controllers/application.js index 1213e85..e703da5 100644 --- a/app/javascript/controllers/application.js +++ b/app/javascript/controllers/application.js @@ -7,3 +7,32 @@ application.debug = false window.Stimulus = application export { application } + +// URL: https://edforshaw.co.uk/hotwire-turbo-stream-animations +// FIXME: data-stream-exit-class not working.. +document.addEventListener("turbo:before-stream-render", function(event) { + // Add a class to an element we are about to add to the page + // as defined by its "data-stream-enter-class" + if (event.target.firstElementChild instanceof HTMLTemplateElement) { + var enterAnimationClass = event.target.templateContent.firstElementChild.dataset.streamEnterClass + if (enterAnimationClass) { + event.target.templateElement.content.firstElementChild.classList.add(enterAnimationClass) + } + } + + // Add a class to an element we are about to remove from the page + // as defined by its "data-stream-exit-class" + var elementToRemove = document.getElementById(event.target.target) + if (elementToRemove) { + var streamExitClass = elementToRemove.dataset.streamExitClass + if (streamExitClass) { + // Intercept the removal of the element + event.preventDefault() + elementToRemove.classList.add(streamExitClass) + // Wait for its animation to end before removing the element + elementToRemove.addEventListener("animationend", function() { + event.target.performAction() + }) + } + } + }) diff --git a/app/views/jobs/_job_tr.html.erb b/app/views/jobs/_job_tr.html.erb index b7cb493..03074ec 100644 --- a/app/views/jobs/_job_tr.html.erb +++ b/app/views/jobs/_job_tr.html.erb @@ -1,4 +1,4 @@ - + <%= job.id %> diff --git a/app/views/operator/jobs/_job_tr.html.erb b/app/views/operator/jobs/_job_tr.html.erb index 4413056..29ba289 100644 --- a/app/views/operator/jobs/_job_tr.html.erb +++ b/app/views/operator/jobs/_job_tr.html.erb @@ -1,4 +1,4 @@ - + <%= link_to operator_job_path(job) do %> @@ -29,7 +29,7 @@ <% if job.printing? %>
- + <%= button_to icon("chevron-up", class: "size-5 inline", title: "erhöhen"), increment_page_operator_job_path(job, din:), method: :patch, form_class: "inline" %> <% end %> @@ -37,7 +37,7 @@ <%= job.public_send("number_of_plans_#{din}") if job.respond_to? "number_of_plans_#{din}" %> <% if job.printing? %> - + <%= button_to icon("chevron-down", class: "size-5 inline", title: "verringern"), decrement_page_operator_job_path(job, din:), method: :patch, form_class: "inline" %>