Add a barebones list view implementation

This commit is contained in:
Oliver 2026-02-01 15:28:41 -07:00
parent 2fdcdf062c
commit 0fb2bd796d
7 changed files with 105 additions and 4 deletions

View file

@ -35,6 +35,7 @@ export class ArtBrowser extends HandlebarsApplicationMixin(ApplicationV2) {
template: filePath(`templates/ArtBrowser/images.hbs`),
templates: [
filePath(`templates/ArtBrowser/image/grid.hbs`),
filePath(`templates/ArtBrowser/image/list.hbs`),
],
},
};
@ -44,16 +45,23 @@ export class ArtBrowser extends HandlebarsApplicationMixin(ApplicationV2) {
#page = 1;
#selectCount = 0;
#onSubmit = null;
#layout = `grid`;
filters = {
name: ``,
tags: [],
artists: [],
};
constructor({ selectCount = 0, onSubmit = null, ...opts } = {}) {
constructor({
selectCount = 0,
onSubmit = null,
layout = `grid`,
...opts
} = {}) {
super(opts);
this.#selectCount = selectCount;
this.#onSubmit = onSubmit;
this.#layout = layout;
};
async setPage(page) {
@ -65,6 +73,15 @@ export class ArtBrowser extends HandlebarsApplicationMixin(ApplicationV2) {
return;
};
async changeLayout(layout) {
console.log(`changing layout to:`, layout)
if (![`grid`, `list`].includes(layout)) {
throw `Cannot set layout to: ${layout}`;
};
this.#layout = layout;
await this.render({ parts: [`images`] });
};
get selectMode() {
if (this.#selectCount === 0) {
return `view`;
@ -132,6 +149,11 @@ export class ArtBrowser extends HandlebarsApplicationMixin(ApplicationV2) {
if (options.parts?.includes(`images`)) {
this._updateSelectedCount();
const layoutTypeInputs = this.element.querySelectorAll(`input[name="layoutType"]`);
for (const element of layoutTypeInputs) {
element.addEventListener(`change`, this.#onLayoutChange.bind(this));
};
};
};
@ -178,9 +200,10 @@ export class ArtBrowser extends HandlebarsApplicationMixin(ApplicationV2) {
idp: this.id,
},
is: {
multi: this.selectMode === `multi`,
single: this.selectMode === `single`,
multi: this.#selectCount > 1,
single: this.#selectCount === 1,
},
layout: this.#layout,
can: {
upload: true,
},
@ -270,6 +293,13 @@ export class ArtBrowser extends HandlebarsApplicationMixin(ApplicationV2) {
this.render({ parts: [`images`] });
};
async #onLayoutChange(event) {
event.preventDefault();
event.stopPropagation();
const newLayout = event.target.value;
await this.changeLayout(newLayout);
};
/** @this {ArtBrowser} */
static async #nextPage() {
this.#page += 1;