OpenNeo/impress
OpenNeo/impress
1
0
Fork 1
Code Pull requests Activity

[WV2] Simplify canceling outfit renaming

Browse source 
Don't need a button anymore, with focusout and escape doing it
This commit is contained in:
Emi Matchu 2026-02-05 22:01:45 -08:00
parent d7c561f91d
commit f5ad5d2b17
3 changed files with 15 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

23
app/assets/javascripts/outfit-rename-field.js
View file

@ -5,7 +5,7 @@
* - Shows a static text header with a pencil icon button * - Shows a static text header with a pencil icon button
* - Pencil appears on hover/focus of the container * - Pencil appears on hover/focus of the container
* - Clicking pencil switches to the editable form * - Clicking pencil switches to the editable form
* - Enter submits, Escape or Cancel reverts to static display * - Enter submits, Escape/blur reverts to static display
* *
* State is managed via the `editing` attribute, which CSS uses to toggle * State is managed via the `editing` attribute, which CSS uses to toggle
* visibility. Turbo morphs naturally reset this attribute (since it's not in * visibility. Turbo morphs naturally reset this attribute (since it's not in
@ -14,9 +14,8 @@
class OutfitRenameField extends HTMLElement { class OutfitRenameField extends HTMLElement {
connectedCallback() { connectedCallback() {
const pencil = this.querySelector(".outfit-rename-pencil"); const pencil = this.querySelector(".outfit-rename-pencil");
const cancel = this.querySelector(".outfit-rename-cancel");
const input = this.querySelector("input[type=text]"); const input = this.querySelector("input[type=text]");
if (!pencil || !cancel || !input) return; if (!pencil || !input) return;
pencil.addEventListener("click", () => { pencil.addEventListener("click", () => {
this.dataset.originalValue = input.value; this.dataset.originalValue = input.value;
@ -25,17 +24,23 @@ class OutfitRenameField extends HTMLElement {
input.select(); input.select();
}); });
cancel.addEventListener("click", () => {
input.value = this.dataset.originalValue ?? input.value;
this.removeAttribute("editing");
});
this.addEventListener("keydown", (e) => { this.addEventListener("keydown", (e) => {
if (e.key === "Escape" && this.hasAttribute("editing")) { if (e.key === "Escape" && this.hasAttribute("editing")) {
e.preventDefault(); e.preventDefault();
cancel.click(); this.#cancelEditing(input);
} }
}); });
this.addEventListener("focusout", (e) => {
if (this.hasAttribute("editing") && !this.contains(e.relatedTarget)) {
this.#cancelEditing(input);
}
});
}
#cancelEditing(input) {
input.value = this.dataset.originalValue ?? input.value;
this.removeAttribute("editing");
} }
} }

4
app/assets/stylesheets/wardrobe/show.css
View file

@ -981,10 +981,6 @@ outfit-rename-field[editing] .outfit-name-form {
opacity: 1; opacity: 1;
} }
.outfit-rename-cancel {
margin-left: 0.5rem;
}
/* Hide save button when rename is in editing state */ /* Hide save button when rename is in editing state */
.outfit-header:has(outfit-rename-field[editing]) .outfit-save-form, .outfit-header:has(outfit-rename-field[editing]) .outfit-save-form,
.outfit-header:has(outfit-rename-field[editing]) .outfit-save-button:disabled { .outfit-header:has(outfit-rename-field[editing]) .outfit-save-button:disabled {

2
app/views/wardrobe/_outfit_rename_field.html.haml
View file

@ -19,4 +19,4 @@
class: "outfit-name-input", placeholder: "Untitled outfit", class: "outfit-name-input", placeholder: "Untitled outfit",
"aria-label": "Outfit name" "aria-label": "Outfit name"
= f.submit "Rename", name: nil, class: "outfit-name-submit" = f.submit "Rename", name: nil, class: "outfit-name-submit"
%button.outfit-rename-cancel{type: "button"} Cancel