Add a barebones list view implementation
This commit is contained in:
parent
2fdcdf062c
commit
0fb2bd796d
7 changed files with 105 additions and 4 deletions
|
|
@ -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;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue