Finish adding editing support to the Image app

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

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
};