Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Nate's flash setup
add_flash_types :primary, :secondary, :success, :danger, :warning, :info, :light, :dark
<div id="flash" class="container">
<% flash.each do |type, message| %>
<%= tag.div message, class: "alert alert-#{type} shadow-lg",
data: { controller: "flash", action: "animationend->flash#next click->flash#hide" } %>
<% end %>
</div>
import ApplicationController from './application_controller'
document.addEventListener('turbolinks:before-cache', () =>
document.getElementById('flash').remove()
)
export default class extends ApplicationController {
connect () {
this.duration = 3500
this.showClassName = 'animate__headShake'
this.hideClassName = 'animate__zoomOut'
this.show()
}
next () {
if (this.hidden) return this.element.remove()
this.hideSlow()
}
show () {
this.element.classList.add(
'animate__animated',
'animate__faster',
this.showClassName
)
}
hideSlow () {
this.element.classList.remove(this.showClassName)
setTimeout(this.hide.bind(this), this.duration)
}
hide () {
this.element.classList.remove(this.showClassName)
this.element.classList.add(this.hideClassName)
}
get hidden () {
return this.element.classList.contains(this.hideClassName)
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment