Handle noscript for the new species face picker

We mark the options as `inert` and `aria-hidden` while the JS is still
loading—and if the `noscript` tag tells us it's never coming, it covers
up the picker with a brief explainer!
This commit is contained in:
Emi Matchu 2024-09-03 13:46:29 -07:00
parent c06c297174
commit a184c75575
3 changed files with 34 additions and 5 deletions

View file

@ -13,3 +13,9 @@ document.addEventListener("click", (e) => {
console.error("Couldn't update species picker: ", error);
}
});
// Now that the face picker is ready to go, mark it as usable.
for (const options of document.querySelectorAll(".species-face-picker-options")) {
options.removeAttribute("inert");
options.removeAttribute("aria-hidden");
}

View file

@ -162,6 +162,8 @@ body.items-show
color: $error-color
.species-face-picker
position: relative
input[type=radio]
position: absolute
left: -10000px
@ -173,6 +175,20 @@ body.items-show
&:not(:checked) + img
opacity: .5
noscript
position: absolute
inset: 0
background: rgba(white, .75)
z-index: 1
display: flex
align-items: center
justify-content: center
text-align: center
&:has(.species-face-picker-options[inert])
cursor: wait
.item-zones-info
margin-top: .5em

View file

@ -34,11 +34,18 @@
= submit_tag "Go", name: nil
%form.species-face-picker
- @preview_pet_type_options.each do |pet_type|
%label
= radio_button_tag "species_face_id", pet_type.species_id,
checked: pet_type == @preview_outfit.pet_type
= pet_type_image pet_type, :happy, :face
%noscript
This fancy species picker requires Javascript, but you can still use the
dropdowns instead!
.species-face-picker-options{
"inert": true, # waits for JS to remove
"aria-hidden": true, # waits for JS to remove
}
- @preview_pet_type_options.each do |pet_type|
%label
= radio_button_tag "species_face_id", pet_type.species_id,
checked: pet_type == @preview_outfit.pet_type
= pet_type_image pet_type, :happy, :face
.item-zones-info
%section