forked from OpenNeo/impress
Auto-submit the species color picker on change, for new item previews
This commit is contained in:
parent
2ea8f16e43
commit
2e48376c5a
3 changed files with 61 additions and 20 deletions
|
@ -3,17 +3,36 @@ document.addEventListener("change", (e) => {
|
||||||
if (!e.target.matches("species-face-picker")) return;
|
if (!e.target.matches("species-face-picker")) return;
|
||||||
|
|
||||||
try {
|
try {
|
||||||
const mainPicker = document.querySelector("#item-preview .species-color-picker");
|
const mainPickerForm = document.querySelector(
|
||||||
|
"#item-preview species-color-picker form");
|
||||||
const mainSpeciesField =
|
const mainSpeciesField =
|
||||||
mainPicker.querySelector("[name='preview[species_id]']");
|
mainPickerForm.querySelector("[name='preview[species_id]']");
|
||||||
mainSpeciesField.value = e.target.value;
|
mainSpeciesField.value = e.target.value;
|
||||||
mainPicker.requestSubmit(); // `submit` doesn't get captured by Turbo!
|
mainPickerForm.requestSubmit(); // `submit` doesn't get captured by Turbo!
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
e.preventDefault();
|
|
||||||
console.error("Couldn't update species picker: ", error);
|
console.error("Couldn't update species picker: ", error);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
|
class SpeciesColorPicker extends HTMLElement {
|
||||||
|
#internals;
|
||||||
|
|
||||||
|
constructor() {
|
||||||
|
super();
|
||||||
|
this.#internals = this.attachInternals();
|
||||||
|
}
|
||||||
|
|
||||||
|
connectedCallback() {
|
||||||
|
// Listen for changes to auto-submit the form, then tell CSS about it!
|
||||||
|
this.addEventListener("change", this.#handleChange);
|
||||||
|
this.#internals.states.add("auto-loading");
|
||||||
|
}
|
||||||
|
|
||||||
|
#handleChange(e) {
|
||||||
|
this.querySelector("form").requestSubmit();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
class SpeciesFacePicker extends HTMLElement {
|
class SpeciesFacePicker extends HTMLElement {
|
||||||
connectedCallback() {
|
connectedCallback() {
|
||||||
this.addEventListener("click", this.#handleClick);
|
this.addEventListener("click", this.#handleClick);
|
||||||
|
@ -52,5 +71,6 @@ class SpeciesFacePickerOptions extends HTMLElement {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
customElements.define("species-color-picker", SpeciesColorPicker);
|
||||||
customElements.define("species-face-picker", SpeciesFacePicker);
|
customElements.define("species-face-picker", SpeciesFacePicker);
|
||||||
customElements.define("species-face-picker-options", SpeciesFacePickerOptions);
|
customElements.define("species-face-picker-options", SpeciesFacePickerOptions);
|
||||||
|
|
|
@ -151,16 +151,31 @@ body.items-show
|
||||||
.error-indicator
|
.error-indicator
|
||||||
display: block
|
display: block
|
||||||
|
|
||||||
.species-color-picker
|
species-color-picker
|
||||||
.error-icon
|
.error-icon
|
||||||
cursor: help
|
cursor: help
|
||||||
margin-right: .25em
|
margin-right: .25em
|
||||||
|
|
||||||
&[data-is-valid="false"]
|
form[data-is-valid="false"]
|
||||||
select
|
select
|
||||||
border-color: $error-border-color
|
border-color: $error-border-color
|
||||||
color: $error-color
|
color: $error-color
|
||||||
|
|
||||||
|
// If JS is enabled, but auto-loading isn't ready yet (script loading or
|
||||||
|
// failed?), hide the submit button for .75sec, to give it time to load.
|
||||||
|
@media (scripting: enabled)
|
||||||
|
input[type=submit]
|
||||||
|
position: absolute
|
||||||
|
margin-left: .5em
|
||||||
|
opacity: 0
|
||||||
|
animation: fade-in .25s forwards
|
||||||
|
animation-delay: .75s
|
||||||
|
|
||||||
|
// Once the auto-loading behavior is ready, remove the submit button.
|
||||||
|
&:state(auto-loading)
|
||||||
|
input[type=submit]
|
||||||
|
display: none
|
||||||
|
|
||||||
species-face-picker
|
species-face-picker
|
||||||
display: block
|
display: block
|
||||||
position: relative
|
position: relative
|
||||||
|
@ -280,7 +295,7 @@ body.items-show
|
||||||
width: 350px
|
width: 350px
|
||||||
height: 350px
|
height: 350px
|
||||||
|
|
||||||
.species-color-picker
|
species-color-picker
|
||||||
grid-area: picker
|
grid-area: picker
|
||||||
|
|
||||||
species-face-picker
|
species-face-picker
|
||||||
|
@ -290,3 +305,9 @@ body.items-show
|
||||||
|
|
||||||
.item-zones-info
|
.item-zones-info
|
||||||
grid-area: zones
|
grid-area: zones
|
||||||
|
|
||||||
|
@keyframes fade-in
|
||||||
|
from
|
||||||
|
opacity: 0
|
||||||
|
to
|
||||||
|
opacity: 1
|
||||||
|
|
|
@ -19,20 +19,20 @@
|
||||||
.error-indicator
|
.error-indicator
|
||||||
💥 We couldn't load all of this outfit. Try again?
|
💥 We couldn't load all of this outfit. Try again?
|
||||||
|
|
||||||
= form_for item_path(@item), method: :get, class: "species-color-picker",
|
%species-color-picker
|
||||||
data: {"is-valid": @preview_error.nil?} do |f|
|
= form_for item_path(@item), method: :get, data: {"is-valid": @preview_error.nil?} do |f|
|
||||||
- if @preview_error == :pet_type_does_not_exist
|
- if @preview_error == :pet_type_does_not_exist
|
||||||
%span.error-icon{title: "We haven't seen this kind of pet before."} ⚠️
|
%span.error-icon{title: "We haven't seen this kind of pet before."} ⚠️
|
||||||
- elsif @preview_error == :no_item_data
|
- elsif @preview_error == :no_item_data
|
||||||
%span.error-icon{title: "We haven't seen this item on this pet before."} ⚠️
|
%span.error-icon{title: "We haven't seen this item on this pet before."} ⚠️
|
||||||
|
|
||||||
= select_tag "preview[color_id]",
|
= select_tag "preview[color_id]",
|
||||||
options_from_collection_for_select(Color.funny.alphabetical,
|
options_from_collection_for_select(Color.funny.alphabetical,
|
||||||
"id", "human_name", @selected_preview_pet_type.color_id)
|
"id", "human_name", @selected_preview_pet_type.color_id)
|
||||||
= select_tag "preview[species_id]",
|
= select_tag "preview[species_id]",
|
||||||
options_from_collection_for_select(Species.alphabetical,
|
options_from_collection_for_select(Species.alphabetical,
|
||||||
"id", "human_name", @selected_preview_pet_type.species_id)
|
"id", "human_name", @selected_preview_pet_type.species_id)
|
||||||
= submit_tag "Go", name: nil
|
= submit_tag "Go", name: nil
|
||||||
|
|
||||||
%species-face-picker
|
%species-face-picker
|
||||||
%noscript
|
%noscript
|
||||||
|
|
Loading…
Reference in a new issue