daboh/plottservice
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fixed turbo_stream animation hook and added some URL source

Browse Source
This commit is contained in:
David Böhm
2024-09-15 01:55:38 +02:00
parent 8da2ffdf38
commit 121674e379
3 changed files with 32 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

45
app/javascript/controllers/application.js
View File

@@ -8,9 +8,23 @@ window.Stimulus = application
export { application } export { application }
// Transition for turbo_frames
// URL: https://dev.to/nejremeslnici/how-to-use-view-transitions-in-hotwire-turbo-1kdi
// Alternative turbo_stream URL: https://evilmartians.com/chronicles/the-future-of-full-stack-rails-turbo-view-transitions
addEventListener("turbo:before-frame-render", (event) => {
if (document.startViewTransition) {
const originalRender = event.detail.render
event.detail.render = (currentElement, newElement) => {
document.startViewTransition(()=> originalRender(currentElement, newElement))
}
}
})
// URL: https://edforshaw.co.uk/hotwire-turbo-stream-animations // URL: https://edforshaw.co.uk/hotwire-turbo-stream-animations
// FIXME: data-stream-exit-class not working.. // Alternative Hotwire Animate (Wrapper for Animate.css)
document.addEventListener("turbo:before-stream-render", function(event) { // URL: https://railshackathon.com/entries/12 https://yozu.co.uk/tech-blog-turbocharged-animations-introducing-hotwire-animate/
// Discussion about hotwire animation: https://discuss.hotwired.dev/t/are-transitions-and-animations-on-hotwire-roadmap/1547/10
document.addEventListener("turbo:before-stream-render", (event) => {
// Add a class to an element we are about to add to the page // Add a class to an element we are about to add to the page
// as defined by its "data-stream-enter-class" // as defined by its "data-stream-enter-class"
if (event.target.firstElementChild instanceof HTMLTemplateElement) { if (event.target.firstElementChild instanceof HTMLTemplateElement) {
@@ -22,17 +36,18 @@ document.addEventListener("turbo:before-stream-render", function(event) {
// Add a class to an element we are about to remove from the page // Add a class to an element we are about to remove from the page
// as defined by its "data-stream-exit-class" // as defined by its "data-stream-exit-class"
// var elementToRemove = document.getElementById(event.target.target) var elementToRemove = document.getElementById(event.target.target)
// if (elementToRemove) { if (elementToRemove) {
// var streamExitClass = elementToRemove.dataset.streamExitClass var streamExitClass = elementToRemove.dataset.streamExitClass
// if (streamExitClass) { if (streamExitClass) {
// // Intercept the removal of the element // Intercept the removal of the element
// event.preventDefault() event.preventDefault()
// elementToRemove.classList.add(streamExitClass) elementToRemove.classList.remove(elementToRemove.dataset.streamEnterClass)
// // Wait for its animation to end before removing the element elementToRemove.classList.add(streamExitClass)
// elementToRemove.addEventListener("animationend", function() { // Wait for its animation to end before removing the element
// event.target.performAction() elementToRemove.addEventListener("animationend", function() {
// }) event.target.performAction()
// } })
// } }
}
}) })

2
app/views/jobs/_job_tr.html.erb
View File

@@ -1,4 +1,4 @@
<tr id="<%= dom_id job %>" class="bg-status-<%= job.status %>-light odd:bg-opacity-20 even:bg-opacity-15 text-hsrm-gray whitespace-nowrap hover:bg-opacity-30" data-stream-enter-class="animate-flash-increase" data-stram-exit-class="animate-job-item-out"> <tr id="<%= dom_id job %>" class="bg-status-<%= job.status %>-light odd:bg-opacity-20 even:bg-opacity-15 text-hsrm-gray whitespace-nowrap hover:bg-opacity-30" data-stream-enter-class="animate-flash-increase">
<td class="p-2 py-3 text-center"> <td class="p-2 py-3 text-center">
<span class="badge badge-xl text-status-<%= job.status %> bg-status-<%= job.status %>-light rounded-lg shadow"> <span class="badge badge-xl text-status-<%= job.status %> bg-status-<%= job.status %>-light rounded-lg shadow">
<%= job.id %> <%= job.id %>

2
app/views/operator/jobs/_job_tr.html.erb
View File

@@ -1,4 +1,4 @@
<tr id="<%= dom_id job %>" class="bg-status-<%= job.status %>-light odd:bg-opacity-20 even:bg-opacity-10 text-hsrm-gray whitespace-nowrap hover:bg-opacity-30" data-stream-enter-class="animate-flash-increase" data-stream-exit-class="animate-fade-out"> <tr id="<%= dom_id job %>" class="bg-status-<%= job.status %>-light odd:bg-opacity-20 even:bg-opacity-10 text-hsrm-gray whitespace-nowrap hover:bg-opacity-30" data-stream-enter-class="animate-job-in">
<td class="p-2 py-3 text-center"> <td class="p-2 py-3 text-center">
<%= link_to operator_job_path(job) do %> <%= link_to operator_job_path(job) do %>
<span class="badge badge-xl text-status-<%= job.status %> bg-status-<%= job.status %>-light"> <span class="badge badge-xl text-status-<%= job.status %> bg-status-<%= job.status %>-light">