From 61beda7734cd637d784e5cced3e8a5b4deb8205c Mon Sep 17 00:00:00 2001
From: Gesina Schwalbe <gesina.schwalbe@pheerai.de>
Date: Sun, 3 Jan 2021 23:27:51 +0100
Subject: [PATCH] added number conversion in HTML value retrieval
Changes:
- number input fields now return numbers
- range elements removed since they are untested
Additions:
- added min and step specifiers to input fields associated to
item number properties
- added a color hint for invalidity of
item number input fields in actor sheet
---
src/module/actor/actor-sheet.ts | 14 ++++++++++----
src/scss/components/_items.scss | 5 +++++
src/templates/actor/partials/items-overview.hbs | 2 +-
src/templates/item/partials/description.hbs | 2 +-
src/templates/item/partials/details.hbs | 2 +-
5 files changed, 18 insertions(+), 7 deletions(-)
diff --git a/src/module/actor/actor-sheet.ts b/src/module/actor/actor-sheet.ts
index 4b2c69d..51eb9e6 100644
--- a/src/module/actor/actor-sheet.ts
+++ b/src/module/actor/actor-sheet.ts
@@ -131,7 +131,7 @@ export class DS4ActorSheet extends ActorSheet<DS4ActorDataType, DS4Actor, DS4Ite
* The value is parsed to:
* - Checkbox: boolean
* - Text input: string
- * - Number, range input: trimmed string
+ * - Number: number
* @param el the input element to collect the value of
*/
private getValue(el: HTMLFormElement): boolean | string | number {
@@ -148,12 +148,18 @@ export class DS4ActorSheet extends ActorSheet<DS4ActorDataType, DS4Actor, DS4Ite
return value;
}
- // Numbers and ranges:
- else if (["number", "range"].includes(el.type)) {
- const value: string = el.value.trim();
+ // Numbers:
+ else if (el.type === "number") {
+ const value = Number(el.value.trim());
return value;
}
+ // // Ranges:
+ // else if (el.type === "range") {
+ // const value: string = el.value.trim();
+ // return value;
+ // }
+
// // Radio Checkboxes (untested, cf. FormDataExtended.process)
// else if (el.type === "radio") {
// const chosen: HTMLFormElement = el.find((r: HTMLFormElement) => r["checked"]);
diff --git a/src/scss/components/_items.scss b/src/scss/components/_items.scss
index 01358b7..4dd97f7 100644
--- a/src/scss/components/_items.scss
+++ b/src/scss/components/_items.scss
@@ -1,3 +1,5 @@
+@use "sass:color";
+
.items-list {
list-style: none;
margin: 7px 0;
@@ -52,6 +54,9 @@
width: 2.5em;
padding: 0;
}
+ .item-num-val:invalid {
+ background-color: color.mix(lightcoral, $c-light-grey, 25%);
+ }
.item-description {
font-size: 75%;
diff --git a/src/templates/actor/partials/items-overview.hbs b/src/templates/actor/partials/items-overview.hbs
index dac9943..0cc57fa 100644
--- a/src/templates/actor/partials/items-overview.hbs
+++ b/src/templates/actor/partials/items-overview.hbs
@@ -84,7 +84,7 @@
<img src="{{item.img}}" title="{{item.name}}" width="24" height="24" />
</div>
{{!-- amount --}}
- <input class="flex05 item-num-val item-change" type="number" value="{{item.data.data.quantity}}" data-dtype="Number"
+ <input class="flex05 item-num-val item-change" type="number" min="0" step="1" value="{{item.data.data.quantity}}" data-dtype="Number"
data-property="data.quantity" title="{{localize 'DS4.Quantity'}}">
{{!-- name --}}
<input class="flex3 item-name item-change" type="text" value="{{item.name}}" data-dtype="String"
diff --git a/src/templates/item/partials/description.hbs b/src/templates/item/partials/description.hbs
index 96b2410..1776f1f 100644
--- a/src/templates/item/partials/description.hbs
+++ b/src/templates/item/partials/description.hbs
@@ -13,7 +13,7 @@
</div>
<div class="side-property">
<label for="data.quantity">{{localize 'DS4.Quantity'}}</label>
- <input type="number" data-dtype="Number" name="data.quantity" value="{{data.quantity}}" />
+ <input type="number" min="0" step="1" data-dtype="Number" name="data.quantity" value="{{data.quantity}}" />
</div>
<div class="side-property">
<label for="data.storageLocation">{{localize 'DS4.StorageLocation'}}</label>
diff --git a/src/templates/item/partials/details.hbs b/src/templates/item/partials/details.hbs
index 0e57a78..d4cfb91 100644
--- a/src/templates/item/partials/details.hbs
+++ b/src/templates/item/partials/details.hbs
@@ -4,7 +4,7 @@
<div class="side-properties">
<div class="side-property">
<label for="data.price">{{localize "DS4.PriceGold"}}</label>
- <input type="number" data-dtype="Number" name="data.price" value="{{data.price}}" />
+ <input type="number" min="0" data-dtype="Number" name="data.price" value="{{data.price}}" />
</div>
<div class="side-property">
<label for="data.availability">{{localize "DS4.ItemAvailability"}}</label>