When an error occurs in Rails, I think that it is a common method to use flash and display a message at the top of the page. Basically, the flash stays at the top unless you reload the page or go to another page. Program this display to fade out without changing pages.
Set the basic flash and place it in the view. Specify the class attribute, set the timer with javascript, add a new class, and load css.
By the way, jQuery has a method called fadeout (), which you can also use (it's easy to write). However, after fading out, the page suddenly rises to the top by the range of the displayed flash, so I thought that it would be a problem from the user's point of view. (Example: The moment you try to click, or the page moves suddenly while reading an article, etc.) I tried to fade out in a different way, including the meaning of studying.
It is assumed that flash settings, javascript settings, etc. have been made in the controller.
~html.erb
<body>
<% if flash.notice %>
<p class="fadeoutTarget"><%= flash.notice %></p>
<% end %>
</body>
Set "fadeoutTarget" in the class attribute to the p tag that surrounds flash.notice. Of course, the name can be set arbitrarily.
app/assets/javascripts/script.js
$(document).on(turbolinks:load, function() {
/*Select an element with a class called fadeoutTarget*/
const fadeoutElement = document.querySelector(".fadeoutTarget");
/*Add a class called fade out after a certain period of time*/
function flashFadeout() {
setTimeout(function() {
fadeoutElement.classList.add("fadeout");
}, 5000);
}
/*Execute if there is a document with an element called fadeoutTarget*/
if (fadeoutElement != null) {
window.onload = flashFadeout();
}
Select an element with any class attribute with .querySelector (). In this case, it is set to retrieve the flash element in the p tag. It will be a program that executes the function after a certain period of time with setTimeout (). The number part can be set arbitrarily. It works without the last if statement, but in terms of processing, when there is no fadeoutElement (when there is no flash: notice), the error "There is no fadeoutElement!" Is displayed, so if statement like this It is surrounded by.
app/assets/stylesheets/application.scss
p.fadeoutTarget.fadeout {
opacity: 0;
transition: 1s;
}
When the javascript in the previous section works, css will be applied and faded out. Strictly speaking, it becomes transparent on the spot, so the page does not move suddenly after fading out.
There are many ways to fade out an element, so I want to be able to handle it the way I need it each time. In this case, there is no sudden scrolling of the page, but it may look a little unattractive because there is a flash margin at the top.
Personally, I think it fits in a convincing way. It was also a good opportunity to study javascript.