moved input el value retrieval to helper func
This commit is contained in:
parent
e2e9bca5fd
commit
944907deb7
1 changed files with 27 additions and 10 deletions
|
@ -99,7 +99,7 @@ export class DS4ActorSheet extends ActorSheet<DS4ActorDataType, DS4Actor, DS4Ite
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Handle changes to properties of an Owned Item from within character sheet.
|
* Handle changes to properties of an Owned Item from within character sheet.
|
||||||
* Can currently properly bind: checkboxes, text/number/range input.
|
* Can currently properly bind: see getValue().
|
||||||
* Assumes the item property is given as the value of the HTML element property 'data-property'.
|
* Assumes the item property is given as the value of the HTML element property 'data-property'.
|
||||||
* @param {JQuery.ChangeEvent<HTMLFormElement>} ev The originating change event
|
* @param {JQuery.ChangeEvent<HTMLFormElement>} ev The originating change event
|
||||||
* @private
|
* @private
|
||||||
|
@ -111,7 +111,6 @@ export class DS4ActorSheet extends ActorSheet<DS4ActorDataType, DS4Actor, DS4Ite
|
||||||
const id = $(ev.currentTarget).parents(".item").data("itemId");
|
const id = $(ev.currentTarget).parents(".item").data("itemId");
|
||||||
const item = duplicate(this.actor.getOwnedItem(id)); // getOwnedItem is typed incorrectly, it actually returns a ItemData<DS4ItemDataType>, not an Item
|
const item = duplicate(this.actor.getOwnedItem(id)); // getOwnedItem is typed incorrectly, it actually returns a ItemData<DS4ItemDataType>, not an Item
|
||||||
const property: string = $(ev.currentTarget).data("property");
|
const property: string = $(ev.currentTarget).data("property");
|
||||||
let newValue;
|
|
||||||
|
|
||||||
// Early return:
|
// Early return:
|
||||||
// Disabled => do nothing
|
// Disabled => do nothing
|
||||||
|
@ -121,41 +120,59 @@ export class DS4ActorSheet extends ActorSheet<DS4ActorDataType, DS4Actor, DS4Ite
|
||||||
throw TypeError("HTML element does not provide 'data-property' attribute");
|
throw TypeError("HTML element does not provide 'data-property' attribute");
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Set new value
|
||||||
|
const newValue = this.getValue(el);
|
||||||
|
setProperty(item, property, newValue);
|
||||||
|
this.actor.updateOwnedItem(item);
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Collect the value of a form element depending on the element's type
|
||||||
|
* The value is parsed to:
|
||||||
|
* - Checkbox: boolean
|
||||||
|
* - Text input: string
|
||||||
|
* - Number, range input: trimmed string
|
||||||
|
* @param el the input element to collect the value of
|
||||||
|
*/
|
||||||
|
private getValue(el: HTMLFormElement): boolean | string | number {
|
||||||
// One needs to differentiate between e.g. checkboxes (value="on") and select boxes etc.
|
// One needs to differentiate between e.g. checkboxes (value="on") and select boxes etc.
|
||||||
// Checkbox:
|
// Checkbox:
|
||||||
if (el.type === "checkbox") {
|
if (el.type === "checkbox") {
|
||||||
newValue = el.checked; //!getProperty(item, property);
|
const value: boolean = el.checked;
|
||||||
|
return value;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Text input:
|
// Text input:
|
||||||
else if (el.type === "text") {
|
else if (el.type === "text") {
|
||||||
newValue = el.value;
|
const value: string = el.value;
|
||||||
|
return value;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Numbers and ranges:
|
// Numbers and ranges:
|
||||||
else if (["number", "range"].includes(el.type)) {
|
else if (["number", "range"].includes(el.type)) {
|
||||||
newValue = el.value.trim();
|
const value: string = el.value.trim();
|
||||||
|
return value;
|
||||||
}
|
}
|
||||||
|
|
||||||
// // Radio Checkboxes (untested, cf. FormDataExtended.process)
|
// // Radio Checkboxes (untested, cf. FormDataExtended.process)
|
||||||
// else if (el.type === "radio") {
|
// else if (el.type === "radio") {
|
||||||
// const chosen: HTMLFormElement = el.find((r: HTMLFormElement) => r["checked"]);
|
// const chosen: HTMLFormElement = el.find((r: HTMLFormElement) => r["checked"]);
|
||||||
// newValue = chosen ? chosen.value : null;
|
// const value: string = chosen ? chosen.value : null;
|
||||||
|
// return value;
|
||||||
// }
|
// }
|
||||||
|
|
||||||
// // Multi-Select (untested, cf. FormDataExtended.process)
|
// // Multi-Select (untested, cf. FormDataExtended.process)
|
||||||
// else if (el.type === "select-multiple") {
|
// else if (el.type === "select-multiple") {
|
||||||
// newValue = [];
|
// const value: Array<string> = [];
|
||||||
// el.options.array.forEach((opt: HTMLOptionElement) => {
|
// el.options.array.forEach((opt: HTMLOptionElement) => {
|
||||||
// if (opt.selected) newValue.push(opt.value);
|
// if (opt.selected) value.push(opt.value);
|
||||||
// });
|
// });
|
||||||
|
// return value;
|
||||||
|
|
||||||
// unsupported:
|
// unsupported:
|
||||||
else {
|
else {
|
||||||
throw TypeError("Binding of item property to this type of HTML element not supported; given: " + el);
|
throw TypeError("Binding of item property to this type of HTML element not supported; given: " + el);
|
||||||
}
|
}
|
||||||
setProperty(item, property, newValue);
|
|
||||||
this.actor.updateOwnedItem(item);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|
Loading…
Reference in a new issue