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);
|
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
|
color: $error-color
|
||||||
|
|
||||||
.species-face-picker
|
.species-face-picker
|
||||||
|
position: relative
|
||||||
|
|
||||||
input[type=radio]
|
input[type=radio]
|
||||||
position: absolute
|
position: absolute
|
||||||
left: -10000px
|
left: -10000px
|
||||||
|
@ -173,6 +175,20 @@ body.items-show
|
||||||
&:not(:checked) + img
|
&:not(:checked) + img
|
||||||
opacity: .5
|
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
|
.item-zones-info
|
||||||
margin-top: .5em
|
margin-top: .5em
|
||||||
|
|
||||||
|
|
|
@ -34,6 +34,13 @@
|
||||||
= submit_tag "Go", name: nil
|
= submit_tag "Go", name: nil
|
||||||
|
|
||||||
%form.species-face-picker
|
%form.species-face-picker
|
||||||
|
%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|
|
- @preview_pet_type_options.each do |pet_type|
|
||||||
%label
|
%label
|
||||||
= radio_button_tag "species_face_id", pet_type.species_id,
|
= radio_button_tag "species_face_id", pet_type.species_id,
|
||||||
|
|
Loading…
Reference in a new issue