add download button

1 files changed, 36 insertions, 11 deletions

diff --git a/static/widgets/image/index.js b/static/widgets/image/index.js
index e9e1507..76419ea 100644
--- a/static/widgets/image/index.js
+++ b/static/widgets/image/index.js
@@ -1,7 +1,7 @@
 import * as api from 'api';
 import * as sfw from 'sfw';
 import Month from '../../month.js';
-const { Div, Img } = sfw.element.native;
+const { Div, Img, A: Link } = sfw.element.native;
 
 const css = await sfw.css(import.meta.url, './index.css')
 
@@ -12,6 +12,7 @@ export default class Image extends sfw.element.Container {
 	#id
 	#month
 	#date
+	#id_element
 
 	constructor() {
 		super ({ css })
@@ -27,7 +28,31 @@ export default class Image extends sfw.element.Container {
 					this.#menu = Div.new({
 						id: 'menu',
 						children: [
-							this.#date = Div.new({ id: 'date' }),
+							Div.new({
+								id: 'label',
+								children: [
+									Div.new({ id: 'title', innerText: 'Id' }),
+									this.#id_element = Div.new({ className: 'element id' }),
+								],
+							}),
+							Div.new({
+								id: 'label',
+								children: [
+									Div.new({ id: 'title', innerText: 'Date' }),
+									this.#date = Div.new({ className: 'element' }),
+								],
+							}),
+							Div.new({
+								id: 'download',
+								innerText: 'Download',
+								onclick: () => {
+									const a = Link.new({
+										href: `/api/image/load/${this.#id}`,
+										download: `${this.#id}.jpeg`
+									})
+									a.click()
+								}
+							}),
 							Div.new({
 								id: 'delete',
 								innerText: 'Delete',
@@ -36,13 +61,14 @@ export default class Image extends sfw.element.Container {
 									this.parentNode.removeChild(this);
 								}
 							}),
-						]
+						],
+						ondblclick: (e) => {
+							if (e.target != this.#menu) {
+								e.stopPropagation();
+							}
+						}
 					})
 				],
-				oncontextmenu: (e) => {
-					this.#menu.classList.toggle('open');
-					e.preventDefault();
-				},
 				ondblclick: (e) => {
 					this.#menu.classList.toggle('open');
 					e.preventDefault();
@@ -56,13 +82,12 @@ export default class Image extends sfw.element.Container {
 		this.#id = image.id;
 		this.#month = Month.from_unix(image.timestamp);
 		this.#container.classList.remove('loaded');
-		this.#date.innerText = date.toLocaleDateString()
+		this.#date.innerText = date.toLocaleString();
+		this.#id_element.innerText = image.id;
 	}
 
 	load() {
-		if (!this.#image.src) {
-			this.#image.src = `/api/image/load/${this.#id}`;
-		}
+		this.#image.src = `/api/image/load/${this.#id}`;
 	}
 
 	get month() {