Foundry/image-tagger
0
0
Fork 0
Code Issues 13 Pull requests Releases 2 Activity Actions

Finish adding editing support to the Image app

Browse source
This commit is contained in:
Oliver 2026-01-19 22:42:55 -07:00
parent d61ece5be1
commit 2d46160053
2 changed files with 47 additions and 15 deletions
Download patch file Download diff file Expand all files Collapse all files

31
module/apps/Image.mjs
View file

@ -33,7 +33,9 @@ export class ImageApp extends
submitOnChange: false,
closeOnSubmit: true,
},
actions: {},
actions: {
removeEditingImage: this.#removeEditingImage,
},
};
static PARTS = {
@ -68,11 +70,15 @@ export class ImageApp extends
if (this._doc?.name) {
this._updateFrame({ window: { title: this.title } });
};
};
this.element.querySelector(`input[type="file"]`)?.addEventListener(
`change`,
this.#changeImage.bind(this),
);
_onRender(context, options) {
if (options.parts?.includes(`header`)) {
this.element.querySelector(`input[type="file"]`)?.addEventListener(
`change`,
this.#changeImage.bind(this),
);
};
};
/** @this {ImageApp} */
@ -147,6 +153,7 @@ export class ImageApp extends
imageURL: this._doc.path.startsWith(`blob`)
? this._doc.path
: filePath(this._doc.path),
docID: this._docID,
image: this._doc,
artists: this.#artistCache,
};
@ -166,10 +173,11 @@ export class ImageApp extends
URL.revokeObjectURL(this._doc.path);
if (!file) {
this.#file = null;
this._docID = null;
this._doc = { path: ``, artists: [], tags: [] };
this._updateFrame({ window: { title: this.title } });
await this.render({ parts: [`preview`, `form`] });
await this.render({ parts: [`header`, `preview`, `form`] });
return;
};
@ -183,7 +191,7 @@ export class ImageApp extends
this._doc.hash = hash;
await this._fetchDocument();
this._updateFrame({ window: { title: this.title } });
await this.render({ parts: [`preview`, `form`] });
await this.render({ parts: [`header`, `preview`, `form`] });
return;
};
@ -193,5 +201,14 @@ export class ImageApp extends
this._doc.hash = hash;
await this.render({ parts: [`preview`] });
};
/** @this {ImageApp} */
static async #removeEditingImage() {
this.#file = null;
this._docID = null;
this._doc = { path: ``, artists: [], tags: [] };
this._updateFrame({ window: { title: this.title } });
await this.render({ parts: [`header`, `preview`, `form`] });
};
// #endregion Actions
};

31
templates/ImageApp/header.hbs
View file

@ -1,14 +1,29 @@
<header>
<div class="row">
<label for="{{meta.idp}}-image">
Image File
Image
</label>
{{!-- TODO: when adding support for editing, make this readonly --}}
<input
type="file"
id="{{meta.idp}}-image"
accept="{{imageTypes}}"
name="file"
>
{{#if docID}}
<input
type="text"
id="{{meta.idp}}-image"
value="{{imageURL}}"
disabled
readonly
>
<button
type="button"
data-action="removeEditingImage"
>
Clear
</button>
{{else}}
<input
type="file"
id="{{meta.idp}}-image"
accept="{{imageTypes}}"
name="file"
>
{{/if}}
</div>
</header>