Improve the multi-select behaviour/appearance and display how many selections are made/required
This commit is contained in:
parent
0381df035e
commit
812583f33c
7 changed files with 75 additions and 20 deletions
|
|
@ -8,7 +8,7 @@ const { HandlebarsApplicationMixin, ApplicationV2 } = foundry.applications.api;
|
|||
const { FormDataExtended } = foundry.applications.ux;
|
||||
const { deepClone } = foundry.utils;
|
||||
|
||||
const PAGE_SIZE = 52;
|
||||
const PAGE_SIZE = 8;
|
||||
|
||||
export class ArtBrowser extends HandlebarsApplicationMixin(ApplicationV2) {
|
||||
// #region Options
|
||||
|
|
@ -129,6 +129,26 @@ export class ArtBrowser extends HandlebarsApplicationMixin(ApplicationV2) {
|
|||
this.#onFilterSubmit.bind(this),
|
||||
);
|
||||
};
|
||||
|
||||
if (options.parts?.includes(`images`)) {
|
||||
this._updateSelectedCount();
|
||||
};
|
||||
};
|
||||
|
||||
_updateSelectedCount() {
|
||||
if (!this.rendered || this.selectMode === `single`) return;
|
||||
|
||||
const element = this.element.querySelector(`.selected-count`);
|
||||
if (element) {
|
||||
element.innerText = `${this.#selected.size} Selected`;
|
||||
element.innerText = _loc(
|
||||
`TB.apps.ArtBrowser.selected`,
|
||||
{
|
||||
current: this.#selected.size,
|
||||
required: this.#selectCount,
|
||||
},
|
||||
);
|
||||
};
|
||||
};
|
||||
|
||||
async close(options) {
|
||||
|
|
@ -157,7 +177,13 @@ export class ArtBrowser extends HandlebarsApplicationMixin(ApplicationV2) {
|
|||
meta: {
|
||||
idp: this.id,
|
||||
},
|
||||
selectMode: this.selectMode,
|
||||
is: {
|
||||
multi: this.selectMode === `multi`,
|
||||
single: this.selectMode === `single`,
|
||||
},
|
||||
can: {
|
||||
upload: true,
|
||||
},
|
||||
};
|
||||
};
|
||||
|
||||
|
|
@ -194,8 +220,6 @@ export class ArtBrowser extends HandlebarsApplicationMixin(ApplicationV2) {
|
|||
|
||||
const images = [];
|
||||
for (const [id, image] of allImages) {
|
||||
image.id = id;
|
||||
|
||||
// Check if it matches the required filters
|
||||
if (this.filters.name && !image.name.includes(this.filters.name)) {
|
||||
continue;
|
||||
|
|
@ -206,6 +230,10 @@ export class ArtBrowser extends HandlebarsApplicationMixin(ApplicationV2) {
|
|||
const hasAllTags = this.filters.tags.every(tag => image.tags.includes(tag));
|
||||
if ((!hasAnArtist && hasArtistFilter) || !hasAllTags) { continue };
|
||||
|
||||
// Populate ephemeral data for rendering
|
||||
image.id = id;
|
||||
image.selected = this.#selected.has(imagePath(image));
|
||||
|
||||
// Convert all of the artist IDs into the actual data
|
||||
image.artists = image.artists
|
||||
.map(artistID => {
|
||||
|
|
@ -271,15 +299,15 @@ export class ArtBrowser extends HandlebarsApplicationMixin(ApplicationV2) {
|
|||
|
||||
const path = imagePath(image);
|
||||
if (this.#selectCount > 1) {
|
||||
if (this.#selected.has(path)) {
|
||||
target.ariaPressed = false;
|
||||
if (!target.checked) {
|
||||
this.#selected.delete(path);
|
||||
} else {
|
||||
target.ariaPressed = true;
|
||||
this.#selected.add(path);
|
||||
};
|
||||
if (this.#selected.size >= this.#selectCount) {
|
||||
await this.#submit(Array.from(this.#selected));
|
||||
} else {
|
||||
this._updateSelectedCount();
|
||||
};
|
||||
} else {
|
||||
await this.#submit(path);
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue