Use BEM for item-list styling and add support for drag & drop of items (between sheets and for sorting)
This commit is contained in:
parent
226156f960
commit
aac4b014b0
6 changed files with 116 additions and 107 deletions
|
@ -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);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue