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:
parent
c06c297174
commit
a184c75575
3 changed files with 34 additions and 5 deletions
|
@ -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");
|
||||
}
|
||||
|
|
|
@ -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
|
||||
|
||||
|
|
|
@ -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
|
||||
|
|
Loading…
Reference in a new issue