diff options
Diffstat (limited to '')
-rw-r--r-- | module/calp/html/view/calendar.scm | 32 | ||||
-rw-r--r-- | static/components/date-jump.ts | 40 | ||||
-rw-r--r-- | static/elements.ts | 2 | ||||
-rw-r--r-- | static/script.ts | 23 | ||||
-rw-r--r-- | static/style.scss | 2 |
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; } |