Athemis/ds4
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

data binding for owned item properties

Browse source 
Additions:
- now also text, number, and range input fields of owned items can
  be bound to HTML (input) elements of the char sheet

Changes:
- moved prototype handle for checkboxes to own function
- replaced some static HTML elements in item list with input fields
- item-num-val HTML elements (e.g. item quantity) now have a max-width
This commit is contained in:
Gesina Schwalbe 2021-01-01 19:26:52 +01:00
parent 5d83e26e81
commit d8423ce364
3 changed files with 100 additions and 33 deletions
Download patch file Download diff file Expand all files Collapse all files

68
src/module/actor/actor-sheet.ts
View file

@ -62,12 +62,7 @@ export class DS4ActorSheet extends ActorSheet<DS4ActorDataType, DS4Actor, DS4Ite
li.slideUp(200, () => this.render(false));
});
html.find(".item-equip").on("click", (ev) => {
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
setProperty(item, "data.equipped", !getProperty(item, "data.equipped")); // TODO: use "."" accessors instead, once typing has been fixed
this.actor.updateOwnedItem(item);
});
html.find(".item-change").on("change", this._onItemChange.bind(this));
// Rollable abilities.
html.find(".rollable").click(this._onRoll.bind(this));
@ -102,6 +97,67 @@ export class DS4ActorSheet extends ActorSheet<DS4ActorDataType, DS4Actor, DS4Ite
return this.actor.createOwnedItem(itemData);
}
/**
* Handle changes to properties of an Owned Item from within character sheet.
* Can currently properly bind: checkboxes, text/number/range input.
* Assumes the item property is given as the value of the HTML element property 'data-property'.
* @param {Event} ev The originating change event
* @private
*/
private _onItemChange(ev: JQuery.ChangeEvent<HTMLFormElement>): void {
ev.preventDefault();
console.log("Current target:", $(ev.currentTarget).get(0)["name"]);
const el: HTMLFormElement = $(ev.currentTarget).get(0);
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 property: string = $(ev.currentTarget).data("property");
let newValue;
// Early return:
// Disabled => do nothing
if (el.disabled || el.getAttribute("disabled")) return;
// name not given => raise
if (property === undefined) {
throw TypeError("HTML element does not provide 'data-property' attribute");
}
// One needs to differentiate between e.g. checkboxes (value="on") and select boxes etc.
// Checkbox:
if (el.type === "checkbox") {
newValue = el.checked; //!getProperty(item, property);
}
// Text input:
else if (el.type === "text") {
newValue = el.value;
}
// Numbers and ranges:
else if (["number", "range"].includes(el.type)) {
newValue = el.value.trim();
}
// // Radio Checkboxes (untested, cf. FormDataExtended.process)
// else if (el.type === "radio") {
// const chosen: HTMLFormElement = el.find((r: HTMLFormElement) => r["checked"]);
// newValue = chosen ? chosen.value : null;
// }
// // Multi-Select (untested, cf. FormDataExtended.process)
// else if (el.type === "select-multiple") {
// newValue = [];
// el.options.array.forEach((opt: HTMLOptionElement) => {
// if (opt.selected) newValue.push(opt.value);
// });
// unsupported:
else {
throw TypeError("Binding of item property to this type of HTML element not supported; given: " + el);
}
setProperty(item, property, newValue);
this.actor.updateOwnedItem(item);
}
/**
* Handle clickable rolls.
* @param {Event} event The originating click event