image: implement removing

1 files changed, 23 insertions, 1 deletions

diff --git a/static/widgets/image/index.js b/static/widgets/image/index.js
index ad77c4e..7111ec7 100644
--- a/static/widgets/image/index.js
+++ b/static/widgets/image/index.js
@@ -1,11 +1,15 @@
 import * as sfw from 'sfw';
 const { Div, Img } = sfw.element.native;
 
+import * as api from '../../api/index.js';
+
 const css = await sfw.css(import.meta.url, './index.css')
 
 export default class Image extends sfw.element.Container {
 	#container
 	#image
+	#menu
+	#id
 
 	constructor() {
 		super ({ css })
@@ -17,13 +21,31 @@ export default class Image extends sfw.element.Container {
 					this.#image = Img.new({
 						onload: () => this.#container.classList.add('loaded'),
 					}),
-					Div.new({ id: 'loading' })
+					Div.new({ id: 'loading' }),
+					this.#menu = Div.new({
+						id: 'menu',
+						children: [
+							Div.new({
+								id: 'delete',
+								innerText: 'Delete',
+								onclick: () => {
+									api.images.remove(this.#id);
+									this.parentNode.removeChild(this);
+								}
+							}),
+						]
+					})
 				],
+				oncontextmenu: (e) => {
+					this.#menu.classList.toggle('open');
+					e.preventDefault();
+				}
 			})
 		);
 	}
 
 	set id(id) {
+		this.#id = id;
 		this.#container.classList.remove('loaded');
 		this.#image.src = `/api/image/load/${id}`;
 	}