Test tooltip library.

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:
  */