Improve asset input copy and Enter-key UX
Label is now just "Assets", button says "Add another". Pressing Enter
in any asset name field adds a new input and focuses it instead of
submitting the form.
diff --git a/lib/views/capture.rb b/lib/views/capture.rb
index 81006b3..d5a85ae 100644
--- a/lib/views/capture.rb
+++ b/lib/views/capture.rb
@@ -120,13 +120,14 @@ module Domus
div(class: "save-form") do
div(class: "asset-inputs") do
- p(class: "asset-inputs-label") { plain "Create assets (optional)" }
+ p(class: "asset-inputs-label") { plain "Assets" }
template("x-for": "(_, i) in assetNames", ":key": "i") do
div(class: "asset-input-row") do
input(
type: "text",
name: "asset_names[]",
placeholder: "Asset name",
+ "@keydown.enter.prevent": "addAsset()",
"@input": "assetNames[i] = $event.target.value"
)
button(
@@ -139,8 +140,8 @@ module Domus
button(
type: "button",
class: "asset-add-btn",
- "@click": "assetNames.push('')"
- ) { plain "+ Add asset" }
+ "@click": "addAsset()"
+ ) { plain "Add another" }
end
div(class: "btn-row") do
diff --git a/public/capture.js b/public/capture.js
index 132e2a7..a76ae34 100644
--- a/public/capture.js
+++ b/public/capture.js
@@ -25,6 +25,14 @@ function captureApp() {
}
},
+ addAsset() {
+ this.assetNames.push('');
+ this.$nextTick(() => {
+ const inputs = document.querySelectorAll('input[name="asset_names[]"]');
+ inputs[inputs.length - 1]?.focus();
+ });
+ },
+
onSubmit() {
const inactive = this.activeRef === 'cameraInput' ? this.$refs.fileInput : this.$refs.cameraInput;
inactive.disabled = true;