diff options
author | Hugo Hörnquist <hugo@lysator.liu.se> | 2020-04-29 00:11:57 +0200 |
---|---|---|
committer | Hugo Hörnquist <hugo@lysator.liu.se> | 2020-04-29 00:48:50 +0200 |
commit | 255f26030a2712f06722205ad593e4f7df0ed76c (patch) | |
tree | 86caa8e5af231e3a18ce19e1fdc9cb3f80b678ca | |
parent | Add TODO to HTML. (diff) | |
download | calp-255f26030a2712f06722205ad593e4f7df0ed76c.tar.gz calp-255f26030a2712f06722205ad593e4f7df0ed76c.tar.xz |
Test tooltip library.
-rw-r--r-- | module/output/html.scm | 88 | ||||
-rw-r--r-- | static/script.js | 21 | ||||
-rw-r--r-- | static/style.css | 26 |
3 files changed, 86 insertions, 49 deletions
diff --git a/module/output/html.scm b/module/output/html.scm index 8a932fd0..375cc03b 100644 --- a/module/output/html.scm +++ b/module/output/html.scm @@ -102,7 +102,7 @@ -(define* (btn key: onclick href +(define* (btn key: onclick href (class '()) allow-other-keys: rest: args) (when (and onclick href) @@ -114,7 +114,7 @@ (let ((body #f)) `(,(cond [onclick 'button] [href 'a]) - (@ (class "btn") + (@ (class ,(string-join (cons "btn" class) " ")) ,(cond [onclick `(onclick ,onclick)] [href `(href ,href)]) ,@(let loop ((rem args)) @@ -130,19 +130,21 @@ (div ,body)))) -(define (popup ev) - `(div (@ (class "popup")) - (nav (@ (class "popup-control CAL_" ,(html-attr (or (attr (parent ev) 'NAME) - "unknown")))) - ,(btn "×" - title: "Stäng" - onclick: "close_popup(this)" - ) - ,(btn "📅" - title: "Ladda ner" - href: (string-append "/calendar/" (attr ev 'UID) ".ics"))) +(define (popup ev id) + `(div (@ (class "popup-container") (id ,id)) + (div (@ (class "popup")) + (nav (@ (class "popup-control CAL_" ,(html-attr (or (attr (parent ev) 'NAME) + "unknown")))) + ,(btn "×" + title: "Stäng" + onclick: "close_popup(this)" + class: '("close-tooltip") + ) + ,(btn "📅" + title: "Ladda ner" + href: (string-append "/calendar/" (attr ev 'UID) ".ics"))) - ,(fmt-single-event ev))) + ,(fmt-single-event ev)))) (define (data-attributes event) (hash-map->list @@ -184,29 +186,33 @@ (inner x (right-subtree tree)))))) (define* (make-block ev optional: (extra-attributes '())) - `(div (@ ,@(assq-merge - extra-attributes - `((class "event CAL_" ,(html-attr (or (attr (parent ev) 'NAME) - "unknown")) - ,(when (and (attr ev 'PARTSTAT) - (string= "TENTATIVE" (attr ev 'PARTSTAT))) - " tentative")) - ;; TODO only if in debug mode? - ,@(data-attributes ev)))) - (div (@ (class "event-inner")) - ;; NOTE These popup's are far from good. Main problem being that - ;; the often render off-screen for events high up on the screen. - ,(popup ev) - (a (@ (href "#" ,(UID ev)) - (class "hidelink")) - (div (@ (class "body")) - ,(when (attr ev 'RRULE) - `(span (@ (class "repeating")) "↺")) - ,((get-config 'summary-filter) ev (attr ev 'SUMMARY)) - ,(when (attr ev 'LOCATION) - `(span (@ (class "location")) - ,(string-map (lambda (c) (if (char=? c #\,) #\newline c)) - (attr ev 'LOCATION))))))))) + + (define popup-id (symbol->string (gensym "popup"))) + + `((div (@ ,@(assq-merge + extra-attributes + `((class "event CAL_" ,(html-attr (or (attr (parent ev) 'NAME) + "unknown")) + ,(when (and (attr ev 'PARTSTAT) + (string= "TENTATIVE" (attr ev 'PARTSTAT))) + " tentative")) + (data-tipped-options ,(format #f "inline: '~a'" popup-id)) + ;; TODO only if in debug mode? + ,@(data-attributes ev)))) + (div (@ (class "event-inner")) + ;; NOTE These popup's are far from good. Main problem being that + ;; the often render off-screen for events high up on the screen. + (a (@ (href "#" ,(UID ev)) + (class "hidelink")) + (div (@ (class "body")) + ,(when (attr ev 'RRULE) + `(span (@ (class "repeating")) "↺")) + ,((get-config 'summary-filter) ev (attr ev 'SUMMARY)) + ,(when (attr ev 'LOCATION) + `(span (@ (class "location")) + ,(string-map (lambda (c) (if (char=? c #\,) #\newline c)) + (attr ev 'LOCATION)))))))) + ,(popup ev popup-id))) ;; Format single event for graphical display (define (create-block date ev) @@ -626,6 +632,14 @@ ,(include-css "/static/style.css") ,(include-alt-css "/static/dark.css" '(title "Dark")) ,(include-alt-css "/static/light.css" '(title "Light")) + + ;; <script type="text/javascript" src="https://code.jquery.com/jquery-3.1.1.min.js"></script> + ;; <script type="text/javascript" src="tipped/dist/js/tipped.min.js"></script> + ;; <link rel="stylesheet" type="text/css" href="tipped/dist/css/tipped.css"/> + ,(include-css "http://gandalf.adrift.space:8000/tipped/dist/css/tipped.css") + (script (@ (src "https://code.jquery.com/jquery-3.1.1.min.js")) "") + (script (@ (src "http://gandalf.adrift.space:8000/tipped/dist/js/tipped.min.js")) "") + (script (@ (src "/static/script.js")) "") (style ,(format #f "~:{.CAL_~a { background-color: ~a; color: ~a }~%.CAL_bg_~a { border-color: ~a }~%~}" (map (lambda (c) diff --git a/static/script.js b/static/script.js index b94e8f06..91c840e3 100644 --- a/static/script.js +++ b/static/script.js @@ -245,14 +245,33 @@ window.onload = function () { } } + /* for (let popup of document.getElementsByClassName("popup")) { ev = parents_until(popup, {class: "event"}) e = ev.getElementsByClassName("body")[0] e.onclick = new_popup; /* disable scroll to element in side list if popups are available. - */ + * / e.parentElement.removeAttribute("href"); } + */ + } + +$(document).ready(function() { + Tipped.setDefaultSkin('none'); + Tipped.create(".event", { + /* no padding, I am the one who styles! */ + padding: false, + /* Don't remove from DOM when hiding */ + detach: false, + + /* click element to toggle. + Elements with class "close-tooltip" also + acts as close buttons */ + showOn: 'click', + hideOn: 'click', + }); +}); diff --git a/static/style.css b/static/style.css index ac490322..8067b3ff 100644 --- a/static/style.css +++ b/static/style.css @@ -593,7 +593,7 @@ along with their colors. ---------------------------------------- */ -.event-inner .popup { +.popup { /* TODO & NOTE If I understand it correctly this is absolute to the nearest offset parent. since .event-inner has a position: unset the offset parent becomes @@ -607,16 +607,16 @@ along with their colors. of the edge of the screen. I just want the same thing to be true for the week view, since it's REALY ugly when a popup makes the calendar wider. */ - position: absolute; + /* position: absolute; */ display: flex; /* A scale(0%) is chosen for hiding the element for the following reasons: - visibility: hidden still reserves space, which causes unwanted scroll- bars since the final position of the popup is calculated at runtime - Easier animation */ - transform: scale(0); - transition: transform 0.3s cubic-bezier(0.33, 1, 0.68, 1); - z-index: 100; + /* transform: scale(0); */ + /* transition: transform 0.3s cubic-bezier(0.33, 1, 0.68, 1); */ + /* z-index: 100; */ background-color: #dedede; color: black; @@ -625,16 +625,18 @@ along with their colors. max-width: 100ch; max-height: 60ch; min-width: 40ch; + + /* display: none; */ } -.event-inner .popup article { +.popup article { /* makes the text in the popup scroll, but not the sidebar */ overflow-y: auto; padding: 1em; } -.event-inner .popup .location { +.popup .location { font-style: initial; } @@ -659,10 +661,6 @@ along with their colors. font-size: 150%; } -.popup.show { - transform: scale(1); -} - .event-inner .body { overflow: hidden; width: 100%; @@ -677,5 +675,11 @@ along with their colors. left: -1em; } +.popup-container { + /* min-width: 50ch; */ + /* min-height: 50ch; */ + display: none; +} + /* vim:expandtab:softtabstop=4:shiftwidth=4: */ |