Sha256: 965fc145d71881c4465e49dd4829f27a36cffbc532bfe183bd077cfc3775ffbd
Contents?: true
Size: 1.85 KB
Versions: 1880
Compression:
Stored size: 1.85 KB
Contents
<%= pb_rails("flex") do %>
<%= pb_rails("flex/flex_item", props: {fixed_size: "250px"}) do %>
<%= pb_rails("select", props: {
id: "transition-dropdown",
label: "",
blank_selection: "Select a Transition...",
options: [
{
value: 'fade',
},
{
value: 'blur',
},
{
value: 'scale',
},
]
}) %>
<% end %>
<%= pb_rails("flex/flex_item") do %>
<%= pb_rails("button", props: {classname: "button", text: "Load Image", margin_left: "sm", margin_top: "xs", disabled: true }) %>
<% end %>
<% end %>
<%= pb_rails("image", props: { classname: "transition-image", alt: "picture of a misty forest", url: "", on_error: "this.style.display = 'none'" }) %>
<script>
window.addEventListener('DOMContentLoaded', () => {
const button = document.querySelector(".button")
const transitionDropdown = document.querySelector("#transition-dropdown")
var option = ''
transitionDropdown.addEventListener('change', function() {
if (this.value === '') {
button.className = button.className + ' _disabled'
} else {
button.removeAttribute("disabled");
button.className = button.className.replace(/\_disabled/gi, '')
option = this.value
}
});
const updateTransition = (transition) => {
const imageTransition = document.querySelector('.transition-image')
imageTransition.removeAttribute("style")
imageTransition.classList.remove("fade", "blur", "scale", "lazyloaded")
imageTransition.classList.add(transition, "lazyload")
imageTransition.src = "https://unsplash.it/500/400/?image=634"
}
button.addEventListener('click', function() {
updateTransition(option)
})
});
</script>
Version data entries
1,880 entries across 1,880 versions & 2 rubygems