Use BEM for item-list styling and add support for drag & drop of items (between sheets and for sorting)

This commit is contained in:
Johannes Loher 2021-02-25 19:07:25 +01:00
parent 226156f960
commit aac4b014b0
6 changed files with 116 additions and 107 deletions

View file

@ -58,12 +58,17 @@ export class DS4ActorSheet extends ActorSheet<ActorSheet.Data<DS4Actor>> {
* @returns The data fed to the template of the actor sheet
*/
async getData(): Promise<ActorSheet.Data<DS4Actor>> {
const itemsByType = Object.fromEntries(
Object.entries(this.actor.itemTypes).map(([itemType, items]) => {
return [itemType, items.map((item) => item.data).sort((a, b) => (a.sort || 0) - (b.sort || 0))];
}),
);
const data = {
...this._addTooltipsToData(await super.getData()),
// Add the localization config to the data:
config: DS4,
// Add the items explicitly sorted by type to the data:
itemsByType: this.actor.itemTypes,
itemsByType,
};
return data;
}
@ -98,7 +103,7 @@ export class DS4ActorSheet extends ActorSheet<ActorSheet.Data<DS4Actor>> {
// Update Inventory Item
html.find(".item-edit").on("click", (ev) => {
const li = $(ev.currentTarget).parents(".item-row");
const li = $(ev.currentTarget).parents(".item");
const id = li.data("itemId");
const item = this.actor.getOwnedItem(id);
if (!item) {
@ -112,7 +117,7 @@ export class DS4ActorSheet extends ActorSheet<ActorSheet.Data<DS4Actor>> {
// Delete Inventory Item
html.find(".item-delete").on("click", (ev) => {
const li = $(ev.currentTarget).parents(".item-row");
const li = $(ev.currentTarget).parents(".item");
this.actor.deleteOwnedItem(li.data("itemId"));
li.slideUp(200, () => this.render(false));
});
@ -155,7 +160,7 @@ export class DS4ActorSheet extends ActorSheet<ActorSheet.Data<DS4Actor>> {
protected _onItemChange(ev: JQuery.ChangeEvent): void {
ev.preventDefault();
const el: HTMLFormElement = $(ev.currentTarget).get(0);
const id = $(ev.currentTarget).parents(".item-row").data("itemId");
const id = $(ev.currentTarget).parents(".item").data("itemId");
const item = duplicate<DS4Item, "lenient">(this.actor.getOwnedItem(id));
const property: string | undefined = $(ev.currentTarget).data("property");
@ -224,7 +229,7 @@ export class DS4ActorSheet extends ActorSheet<ActorSheet.Data<DS4Actor>> {
// unsupported:
else {
throw TypeError("Binding of item property to this type of HTML element not supported; given: " + el);
throw new TypeError("Binding of item property to this type of HTML element not supported; given: " + el);
}
}