add jump-to month

3 files changed, 29 insertions, 2 deletions

diff --git a/static/widgets/image/index.js b/static/widgets/image/index.js
index 4c25988..291cf23 100644
--- a/static/widgets/image/index.js
+++ b/static/widgets/image/index.js
@@ -1,5 +1,6 @@
 import * as api from 'api';
 import * as sfw from 'sfw';
+import Month from '../../month.js';
 const { Div, Img } = sfw.element.native;
 
 const css = await sfw.css(import.meta.url, './index.css')
@@ -9,6 +10,7 @@ export default class Image extends sfw.element.Container {
 	#image
 	#menu
 	#id
+	#month
 
 	constructor() {
 		super ({ css })
@@ -43,8 +45,9 @@ export default class Image extends sfw.element.Container {
 		);
 	}
 
-	set id(id) {
-		this.#id = id;
+	set metadata(image) {
+		this.#id = image.id;
+		this.#month = Month.from_unix(image.timestamp);
 		this.#container.classList.remove('loaded');
 	}
 
@@ -53,4 +56,8 @@ export default class Image extends sfw.element.Container {
 			this.#image.src = `/api/image/load/${this.#id}`;
 		}
 	}
+
+	get month() {
+		return this.#month;
+	}
 }
diff --git a/static/widgets/month-select/index.css b/static/widgets/month-select/index.css
index 95a87b0..25ed5d2 100644
--- a/static/widgets/month-select/index.css
+++ b/static/widgets/month-select/index.css
@@ -56,6 +56,10 @@
 	position: relative;
 }
 
+.month-item.none {
+	font-style: italic;
+}
+
 .month-item:before {
 	content: '';
 	display: block;
@@ -84,6 +88,11 @@
 	height: 27px;
 }
 
+.month-item.none:before {
+	top: 0;
+	height: 20px;
+}
+
 .month-item:hover {
 	background: var(--primary);
 	color: var(--fg-primary);
diff --git a/static/widgets/month-select/index.js b/static/widgets/month-select/index.js
index 6ffbac2..63caf70 100644
--- a/static/widgets/month-select/index.js
+++ b/static/widgets/month-select/index.js
@@ -70,5 +70,16 @@ export default class MonthSelect extends sfw.element.Container {
 
 			last = month;
 		}
+
+		this.#month_container.append(
+			Div.new({
+				className: 'month-item none',
+				innerText: 'No Date',
+				onclick: () => {
+					this.hide();
+					this.onmonth(null);
+				}
+			})
+		);
 	}
 }