Introduce component date-jump.

5 files changed, 59 insertions, 40 deletions

diff --git a/module/calp/html/view/calendar.scm b/module/calp/html/view/calendar.scm
index aef33f36..6945c5d2 100644
--- a/module/calp/html/view/calendar.scm
+++ b/module/calp/html/view/calendar.scm
@@ -186,22 +186,22 @@ window.default_calendar='~a';"
                        ;; Button to go to today
                        ,(_ "Today"))))
 
-              (div (@ (id "jump-to"))
-                   ;; Firefox's accessability complain about each date
-                   ;; component, meaning that it's broken. This label
-                   ;; is for the whole input, which can be enabled
-                   ;; if wanted.
-                   ;; (label (@ (for "date")) "Hoppa till")
-                   (form (@ (action "/today"))
-                         (input (@ (type hidden)
-                                   (name "view")
-                                   (value ,(case intervaltype
-                                             [(month week) => symbol->string]
-                                             [else "month"]))))
-                         (input (@ (type date)
-                                   (name "date")
-                                   (value ,(date->string start-date "~1"))))
-                         ,(btn "➔"))))
+              (date-jump
+               ;; Firefox's accessability complain about each date
+               ;; component, meaning that it's broken. This label
+               ;; is for the whole input, which can be enabled
+               ;; if wanted.
+               ;; (label (@ (for "date")) "Hoppa till")
+               (form (@ (action "/today"))
+                     (input (@ (type hidden)
+                               (name "view")
+                               (value ,(case intervaltype
+                                         [(month week) => symbol->string]
+                                         [else "month"]))))
+                     (input (@ (type date)
+                               (name "date")
+                               (value ,(date->string start-date "~1"))))
+                     ,(btn "➔"))))
 
          (details (@ (open) (style "grid-area: cal"))
                   (summary ,(_ "Month overview"))
diff --git a/static/components/date-jump.ts b/static/components/date-jump.ts
new file mode 100644
index 00000000..fd3908ae
--- /dev/null
+++ b/static/components/date-jump.ts
@@ -0,0 +1,40 @@
+export { DateJump }
+
+/* Replace backend-driven [today] link with frontend, with one that
+    gets correctly set in the frontend. Similarly, update the go to
+    specific date button into a link which updates wheneven the date
+    form updates.
+*/
+class DateJump extends HTMLElement {
+
+    readonly golink: HTMLAnchorElement;
+    readonly input: HTMLInputElement;
+
+    constructor() {
+        super();
+
+        this.golink = document.createElement('a')
+        this.golink.classList.add('btn');
+        this.golink.textContent = "➔"
+        this.input = document.createElement('input')
+        this.input.type = 'date';
+    }
+
+    connectedCallback() {
+
+        /* Form is just here so the css works out */
+        let form = document.createElement('form');
+        form.replaceChildren(this.input, this.golink);
+        this.replaceChildren(form);
+
+        this.input.onchange = () => {
+            let date = this.input.valueAsDate!.format('~Y-~m-~d');
+            this.golink.href = `${date}.html`
+        }
+
+        let now = (new Date).format("~Y-~m-~d")
+        this.input.value = now;
+        /* onchange isn't triggered by manually setting the value */
+        this.golink.href = `${now}.html`
+    }
+}
diff --git a/static/elements.ts b/static/elements.ts
index f714815d..e5fabba6 100644
--- a/static/elements.ts
+++ b/static/elements.ts
@@ -9,6 +9,7 @@ import { EditRRule } from './components/edit-rrule'
 import { TabGroupElement } from './components/tab-group-element'
 import { VEventChangelog } from './components/changelog'
 import { SliderInput } from './components/slider'
+import { DateJump } from './components/date-jump'
 
 export { initialize_components }
 
@@ -30,6 +31,7 @@ function initialize_components() {
     customElements.define('date-time-input', DateTimeInput /*, { extends: 'input' } */)
     customElements.define('input-list', InputList);
     customElements.define('slider-input', SliderInput);
+    customElements.define('date-jump', DateJump);
 
     /* These maybe also require that the global maps are initialized */
     customElements.define('popup-element', PopupElement)
diff --git a/static/script.ts b/static/script.ts
index 895b0081..865c005e 100644
--- a/static/script.ts
+++ b/static/script.ts
@@ -137,29 +137,6 @@ window.addEventListener('load', function() {
         }
     }
 
-
-    /* Replace backend-driven [today] link with frontend, with one that
-       gets correctly set in the frontend. Similarly, update the go to
-       specific date button into a link which updates wheneven the date
-       form updates.
-    */
-
-    let gotodatebtn = document.querySelector("#jump-to .btn")!;
-    let target_href = (new Date).format("~Y-~m-~d") + ".html";
-    let golink = makeElement('a', {
-        className: 'btn',
-        href: target_href,
-        innerHTML: gotodatebtn.innerHTML,
-    }) as HTMLAnchorElement
-    gotodatebtn.replaceWith(golink);
-
-    (document.querySelector("#jump-to input[name='date']") as HTMLInputElement)
-        .onchange = function() {
-            let date = (this as HTMLInputElement).valueAsDate!.format("~Y-~m-~d");
-            console.log(date);
-            golink.href = date + ".html";
-        }
-
     /* ---------------------------------------- */
 
     /* needs to be called AFTER bind_properties, but BEFORE init_input_list
diff --git a/static/style.scss b/static/style.scss
index 799b4647..6b06d5d2 100644
--- a/static/style.scss
+++ b/static/style.scss
@@ -129,7 +129,7 @@ html, body {
     padding-bottom: 1ex;
 }
 
-#jump-to {
+date-jump {
     > form {
         display: flex;
     }