diff options
author | Hugo Hörnquist <hugo@lysator.liu.se> | 2020-07-11 17:39:27 +0200 |
---|---|---|
committer | Hugo Hörnquist <hugo@lysator.liu.se> | 2020-07-11 17:39:27 +0200 |
commit | 55803c4dc76c08eea490c1f46b863b4921f080b7 (patch) | |
tree | 238c910464bdecced76b400e22114e3a8b266fe0 | |
parent | Add (vcomponent build). (diff) | |
download | calp-55803c4dc76c08eea490c1f46b863b4921f080b7.tar.gz calp-55803c4dc76c08eea490c1f46b863b4921f080b7.tar.xz |
HTML Change template code for new events.
-rw-r--r-- | module/output/html.scm | 36 | ||||
-rw-r--r-- | static/script.js | 57 | ||||
-rw-r--r-- | static/style.css | 13 |
3 files changed, 43 insertions, 63 deletions
diff --git a/module/output/html.scm b/module/output/html.scm index fcf69888..feb68795 100644 --- a/module/output/html.scm +++ b/module/output/html.scm @@ -6,6 +6,7 @@ #:use-module (vcomponent) #:use-module (vcomponent group) #:use-module (vcomponent datetime) + #:use-module (vcomponent build) #:use-module (util) #:use-module (util app) #:use-module (util exceptions) @@ -804,25 +805,22 @@ (extract 'DTSTART)) (cdr (stream-car evs)))))) ,@(stream->list (stream-map fmt-day evs)))) - (template (@ (id "popup-template")) - (div (@ (class "popup-container")) - (div (@ (class "popup")) - ;; TODO have dummy calendar for events under creation - (nav (@ (class "popup-control CAL_Calendar")) - ;; TODO why isn't this using the @var{btn} procedure. - (button (@ (title "Stäng") (onclick "") (class "btn close-tooltip")) (div "×"))) - (form - (article (@ (class "eventtext CAL_bg_Calendar")) - (h3 (input (@ (type "text") - (name "summary") - (placeholder "Summary") - (required)))) - (div (div (input (@ (type "time") (name "dtstart") (required))) - " — " - (input (@ (type "time") (name "dtend") (required)))) - (textarea (@ (name "description") - (placeholder "Description"))) - (input (@ (type "submit")))))))))))))) + + ;; 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") (id "event-template")) + ,(let ((cal (vcalendar + name: "Generated" + children: (list (vevent + uid: (uuidgen) + dtstart: (datetime) + dtend: (datetime) + summary: "New Event"))))) + (caddar ; strip <a> tag + (make-block (car (children cal)) + `((class " generated ") + (style " width: calc(100% * var(--editmode)) "))))))))))) ;; file existing but is of wrong type, diff --git a/static/script.js b/static/script.js index e2fe5dc7..19c2d44b 100644 --- a/static/script.js +++ b/static/script.js @@ -85,15 +85,15 @@ function create_event_move (e) { time = round_time(24 * (e.offsetY / this.clientHeight), .25) - event = document.createElement("div"); + + event = document.getElementById("event-template").firstChild.cloneNode(true); + bind_properties(event); + event.style.top = time * 100/24 + "%"; event.dataset.time1 = time; event.dataset.time2 = time; - event.className = "event generated"; event.style.pointerEvents = "none"; - event.style.width = "calc(100% * var(--editmode))"; - event.innerText = "New Event"; event.dataset.date = this.id; @@ -111,21 +111,17 @@ function create_event_move (e) { round_time(24 * (e.offsetY / event.parentElement.clientHeight), .25); time1 = event.dataset.time1; - if (time2 > time1) { - event.style.bottom = (24 - time2) * 100/24 + "%"; - event.style.top = time1 * 100/24 + "%"; - } else { - event.style.top = time2 * 100/24 + "%"; - event.style.bottom = (24 - time1) * 100/24 + "%"; - } + + event.properties.dtstart = + decimal_time_to_date(min(Number(time1), Number(time2))); + event.properties.dtend = + decimal_time_to_date(max(Number(time1), Number(time2))); } function create_event_finisher (callback) { down_on_event = false; // reset return function create_event_up (e) { if (! event) return; - let start = min(Number(event.dataset.time1), Number(event.dataset.time2)); - let end = max(Number(event.dataset.time1), Number(event.dataset.time2)); /* Restore pointer events for all existing events. Allow pointer events on our new event @@ -137,7 +133,7 @@ function create_event_finisher (callback) { let localevent = event; event = null; - callback (localevent, start, end); + callback (localevent); } } @@ -296,37 +292,10 @@ window.onload = function () { c.onmousedown = create_event_down; c.onmousemove = create_event_move; c.onmouseup = create_event_finisher( - function (event, start, end) { - let startstr = decimal_time_to_string(start); - let endstr = decimal_time_to_string(end); - - let popupElement = document - .getElementById("popup-template") - .content - .cloneNode(true) - .firstChild ; - let id = gensym("popup-generated-"); - popupElement.id = id - document.getElementsByClassName("root")[0].appendChild(popupElement); - - popupElement.querySelector('input[name="dtstart"]').value = startstr; - popupElement.querySelector('input[name="dtend"]').value = endstr; - - let form = popupElement.querySelector("form") - form.addEventListener("submit", function (ev) { - ev.preventDefault(); - create_event(event.dataset.date, new FormData(form)); - }); - + function (event) { + let popupElement = event.querySelector(".popup-container"); + /* TODO ensure input elements */ open_popup(popupElement); - - - /* - console.log(event); - - alert("Creating event " + startstr + " - " + endstr); - */ - popupElement.querySelector('input[name="summary"]').focus(); }); } } diff --git a/static/style.css b/static/style.css index 86444fc3..56e3763b 100644 --- a/static/style.css +++ b/static/style.css @@ -745,6 +745,19 @@ along with their colors. z-index: 1; } +/* Other +---------------------------------------- +*/ + +.template { + display: none; +} + + +/* Icalendar +---------------------------------------- +*/ + /* Below is for styling embedded xcalendar components in the xhtml document. I can't find anything about if this is allowed according to any standard, but it seems to work. |