diff options
author | Hugo Hörnquist <hugo@lysator.liu.se> | 2020-08-06 18:46:51 +0200 |
---|---|---|
committer | Hugo Hörnquist <hugo@lysator.liu.se> | 2020-08-06 18:46:51 +0200 |
commit | cc969c39128bf3bdff5e8f45b283da1bb7a2b300 (patch) | |
tree | 450417e838d1b30894661555502e1a63fc00898b | |
parent | Add favicon. (diff) | |
download | calp-cc969c39128bf3bdff5e8f45b283da1bb7a2b300.tar.gz calp-cc969c39128bf3bdff5e8f45b283da1bb7a2b300.tar.xz |
Fix most of event creation problems in week.
Diffstat (limited to '')
-rw-r--r-- | module/output/html.scm | 78 | ||||
-rw-r--r-- | static/script.js | 25 |
2 files changed, 52 insertions, 51 deletions
diff --git a/module/output/html.scm b/module/output/html.scm index b70b5f56..4fc08d3b 100644 --- a/module/output/html.scm +++ b/module/output/html.scm @@ -74,6 +74,7 @@ (date->string date "~Y-~m-~d")) ;; Generate an html id for an event. +;; TODO? same event placed multiple times, when spanning multiple cells (define (html-id ev) (or (prop ev '-HTML-ID) (set/r! (prop ev '-HTML-ID) @@ -152,22 +153,11 @@ (ul (li (a (@ (href "/calendar/" ,(prop ev 'UID) ".ics")) "som iCal")) (li (a (@ (href "/calendar/" ,(prop ev 'UID) ".xcs")) - "som xCal")))))) - ;; Only display sxml when in debug mode. See below for other case - (when (debug) - `(("</>" - ,((@ (output xcal) ns-wrap) - ((@ (output xcal) vcomponent->sxcal) - ev))))))) + "som xCal")))))))) (div (@ (style "display:none !important;")) - ;; NOTE This can be limited to only when edit-mode is enabled but debug - ;; mode is not. That would however require a few more cases for the - ;; javascript to work. - ,(when (and (not (debug)) ; (edit-mode) - ) - ((@ (output xcal) ns-wrap) - ((@ (output xcal) vcomponent->sxcal) - ev))))))) + ,((@ (output xcal) ns-wrap) + ((@ (output xcal) vcomponent->sxcal) + ev)))))) @@ -199,9 +189,7 @@ (inner (+ x w) (left-subtree tree)) (inner x (right-subtree tree)))))) -(define* (make-block ev optional: (extra-attributes '()) - key: - (popup-id (symbol->string (gensym "popup")))) +(define* (make-block ev optional: (extra-attributes '())) `((a (@ (href "#" ,(html-id ev)) (class "hidelink")) @@ -214,12 +202,12 @@ (eq? 'TENTATIVE (prop ev 'PARTSTAT))) " tentative")) ; (onclick "toggle_child_popup(this)") - (onclick ,(format #f "toggle_popup(document.getElementById('~a'))" + (onclick ,(format #f "toggle_popup('~a')" (string-append "popup" (html-id ev)))) ))) ;; Inner div to prevent overflow. Previously "overflow: none" ;; was set on the surounding div, but the popup /needs/ to - ;; overflow. + ;; overflow (for the tabs?). (div (@ (class "event-body")) ,(when (prop ev 'RRULE) `(span (@ (class "repeating")) "↺")) @@ -229,9 +217,10 @@ `(span (@ (class "location")) ,(string-map (lambda (c) (if (char=? c #\,) #\newline c)) (prop ev 'LOCATION))))) - #; - ,(popup ev (string-append "popup" (html-id ev)) #; popup-id - ))))) + (div (@ (style "display:none !important;")) + ,((@ (output xcal) ns-wrap) + ((@ (output xcal) vcomponent->sxcal) + ev))))))) ;; Format single event for graphical display (define (create-block date ev) @@ -540,7 +529,7 @@ (define day-date (car group)) (define events (cdr group)) `(div (@ (style "grid-area:short " ,i) - (class "cal-cell cal-cell-short -event-container") + (class "cal-cell cal-cell-short event-container") (data-start ,(date->string day-date)) (data-end ,(date->string (add-day day-date)))) (div (@ (style "overflow-y:auto;")) @@ -731,10 +720,10 @@ next-start: next-start prev-start: prev-start ) + ,@(for event in (stream->list (events-between pre-start post-end events)) - (popup event (string-append "popup" (html-id event)) #; popup-id - ))) + (popup event (string-append "popup" (html-id event))))) ;; Page footer (footer @@ -860,24 +849,25 @@ ;; This would idealy be a <template> element, but there is some ;; form of special case with those in xhtml, but I can't find ;; the documentation for it. - (div (@ (class "template event-container") (id "event-template") - ;; Only needed to create a duration. So actual dates - ;; dosen't matter - (data-start "2020-01-01") - (data-end "2020-01-02")) - ,(let ((cal (vcalendar - name: "Generated" - children: (list (vevent - ;; The event template SHOULD lack - ;; a UID, to stop potential problems - ;; with conflicts when multiple it's - ;; cloned mulitple times. - dtstart: (datetime) - dtend: (datetime) - summary: "New Event"))))) - (caddar ; strip <a> tag - (make-block (car (children cal)) - `((class " generated "))))))))))) + ,@(let* ((cal (vcalendar + name: "Generated" + children: (list (vevent + ;; The event template SHOULD lack + ;; a UID, to stop potential problems + ;; with conflicts when multiple it's + ;; cloned mulitple times. + dtstart: (datetime) + dtend: (datetime) + summary: "New Event")))) + (event (car (children cal)))) + `((div (@ (class "template event-container") (id "event-template") + ;; Only needed to create a duration. So actual dates + ;; dosen't matter + (data-start "2020-01-01") + (data-end "2020-01-02")) + ,(caddar ; strip <a> tag + (make-block event `((class " generated "))))) + ,(popup event (string-append "popup" (html-id event)))))))))) diff --git a/static/script.js b/static/script.js index f7f46c99..1bd0bb95 100644 --- a/static/script.js +++ b/static/script.js @@ -364,8 +364,9 @@ async function create_event (event) { } function place_in_edit_mode (event) { + let popup = document.getElementById("popup" + event.id) function replace_with_time_input(fieldname, event) { - let field = event.getElementsByClassName(fieldname)[0]; + let field = popup.getElementsByClassName(fieldname)[0]; let input = makeElement ('input', { type: "time", @@ -385,6 +386,7 @@ function place_in_edit_mode (event) { let slot = event.properties["_slot_" + fieldname] let idx = slot.findIndex(e => e[0] === field); slot.splice(idx, 1, [input, (s, v) => s.value = v.format("%H:%M")]) + field.replaceWith(input); } @@ -395,7 +397,7 @@ function place_in_edit_mode (event) { /* ---------------------------------------- */ - let summary = event.getElementsByClassName("summary")[1]; + let summary = popup.getElementsByClassName("summary")[0]; let input = makeElement('input', { name: "dtstart", placeholder: summary.innerText, @@ -419,7 +421,7 @@ function place_in_edit_mode (event) { value: 'Skapa event', }); - let article = event.getElementsByTagName("article")[0]; + let article = popup.getElementsByTagName("article")[0]; article.appendChild(submit); @@ -453,7 +455,7 @@ window.onload = function () { ); c.onmouseup = eventCreator.create_event_finisher( function (event) { - let popupElement = event.querySelector(".popup-container"); + let popupElement = document.getElementById("popup" + event.id); open_popup(popupElement); popupElement.querySelector("input[name='dtstart']").focus(); @@ -573,17 +575,16 @@ function open_popup(popup) { let root = document.body; let offsetX = 0, offsetY = 0; while (element !== root) { - console.log(element); offsetX += element.offsetLeft; offsetY += element.offsetTop; element = element.offsetParent; } - console.table({offsetX, offsetY}) popup.style.left = offsetX + "px"; popup.style.top = offsetY + "px"; } -function toggle_popup(popup) { +function toggle_popup(popup_id) { + let popup = document.getElementById(popup_id); // popup.classList.toggle("visible"); if (popup.classList.contains("visible")) { close_popup(popup); @@ -643,6 +644,7 @@ Date.prototype.format = function (str) { return format_date (this, str); } */ function bind_properties (el, wide_event=false) { el.properties = {} + let popup = document.getElementById("popup" + el.id); let children = el.getElementsByTagName("properties")[0].children; for (let child of children) { @@ -654,6 +656,11 @@ function bind_properties (el, wide_event=false) { let f = ((s, v) => s.innerHTML = v.format(s.dataset && s.dataset.fmt)); lst.push([s, f]); } + for (let s of popup.getElementsByClassName(field)) { + let f = ((s, v) => s.innerHTML = v.format(s.dataset && s.dataset.fmt)); + lst.push([s, f]); + } + for (let s of el.querySelectorAll(field + " > :not(parameters)")) { switch (s.tagName) { case 'date': @@ -682,6 +689,10 @@ function bind_properties (el, wide_event=false) { } let container = el.closest(".event-container"); + if (container === null) { + console.log("No enclosing event container for", el); + return; + } let start = parseDate(container.dataset.start); let end = parseDate(container.dataset.end); |