Merge branch 'tooltip'

7 files changed, 134 insertions, 166 deletions

diff --git a/README b/README
index d958cc27..11892857 100644
--- a/README
+++ b/README
@@ -24,13 +24,21 @@ repports,  and other  stuff should  be sent  to <hugo@lysator.liu.se>.
 If you want to contribute  something yourself,  either see  TODO.* for
 things to do, or run `grep -RE 'TODO|NOTE'.
 
-Requirements
-------------
+Requirements & Dependencies 
+---------------------------
 For  basic  functionallity  guile-2.2  or  greater  should  be  enough
 (tested to work with guile-3.0). You  do however  need to  supply your
 own calendar files. I recommend vdirsyncer  for fetching  local copies
 from all over the internet.
 
+For  popups  to  work  the  JS  library Tipped  is also  needed, which
+brings a transitive dependency on  JQuery. The  script `download-deps'
+fetches both into "good"  places in  the static  sub-directory. Tipped
+[TIPPED]  is  used  under Creative  Commons BY  4.0 [CCBY],  © staaky.
+JQuery is used in accordance to their license [JQUERY].
+
+The zoneinfo data [TZ] is in the public domain [TZLIC].
+
 Building
 --------
 Since   guile   is  primarily   a  scripting   language  no   explicit
@@ -43,3 +51,12 @@ Techical Details
 ----------------
 - Internally all weeks start on sunday, which is repsenented as `0'.
 
+
+References
+----------
+
+[TIPPED] https://github.com/staaky/tipped
+[CCBY] https://creativecommons.org/licenses/by/4.0/
+[JQUERY] https://github.com/jquery/jquery/blob/master/LICENSE.txt
+[TZ] https://github.com/eggert/tz
+[TZLIC] https://github.com/eggert/tz/blob/master/LICENSE
diff --git a/README.in b/README.in
index f00fa796..d5e66352 100644
--- a/README.in
+++ b/README.in
@@ -12,10 +12,14 @@ Contributing
 ------------
 Contributions are more than welcome. Patches, feature requests, bug repports, and other stuff should be sent to <hugo@lysator.liu.se>. If you want to contribute something yourself, either see TODO.* for things to do, or run `grep -RE 'TODO|NOTE'.
 
-Requirements
-------------
+Requirements & Dependencies
+---------------------------
 For basic functionallity guile-2.2 or greater should be enough (tested to work with guile-3.0). You do however need to supply your own calendar files. I recommend vdirsyncer for fetching local copies from all over the internet.
 
+For popups to work the JS library Tipped is also needed, which brings a transitive dependency on JQuery. The script `download-deps' fetches both into "good" places in the static sub-directory. Tipped [TIPPED] is used under Creative Commons BY 4.0 [CCBY], © staaky. JQuery is used in accordance to their license [JQUERY].
+
+The zoneinfo data [TZ] is in the public domain [TZLIC].
+
 Building
 --------
 Since guile is primarily a scripting language no explicit compilation step is required. Just run module/main.scm and the appropriate modules will be compiled (guile will tell you what it's doing). For building this README, run
@@ -24,3 +28,13 @@ Since guile is primarily a scripting language no explicit compilation step is re
 Techical Details
 ----------------
 - Internally all weeks start on sunday, which is repsenented as `0'.
+
+
+References
+----------
+
+[TIPPED] https://github.com/staaky/tipped
+[CCBY] https://creativecommons.org/licenses/by/4.0/
+[JQUERY] https://github.com/jquery/jquery/blob/master/LICENSE.txt
+[TZ] https://github.com/eggert/tz
+[TZLIC] https://github.com/eggert/tz/blob/master/LICENSE
\ No newline at end of file
diff --git a/download-deps b/download-deps
new file mode 100755
index 00000000..7cb06d1b
--- /dev/null
+++ b/download-deps
@@ -0,0 +1,10 @@
+#!/bin/bash
+
+test -f v4.7.0.tar.gz || curl -sOL https://github.com/staaky/tipped/archive/v4.7.0.tar.gz
+test -d static/tipped-4.7.0/ || tar xf v4.7.0.tar.gz  -C static  tipped-4.7.0/dist/
+
+jquery="jquery-3.1.1.min.js"
+test -f "static/$jquery" || {
+	cd static
+	curl -sOL "https://code.jquery.com/$jquery"
+}
diff --git a/module/output/html.scm b/module/output/html.scm
index 702d229d..0da52b0b 100644
--- a/module/output/html.scm
+++ b/module/output/html.scm
@@ -103,7 +103,7 @@
 
 
 
-(define* (btn key: onclick href
+(define* (btn key: onclick href (class '())
               allow-other-keys:
               rest: args)
   (when (and onclick href)
@@ -115,7 +115,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))
@@ -131,19 +131,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: ""
+                        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
@@ -185,29 +187,29 @@
         (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")))
+
+  `((a (@ (href "#" ,(UID ev))
+          (class "hidelink"))
+       (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))))
+            ,(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)
@@ -624,9 +626,15 @@
                     (content ,(date->string start-date "~s"))))
            (meta (@ (name end-time)
                     (content ,(date->string  (date+ end-date (date day: 1)) "~s"))))
+           ,(include-css "/static/tipped-4.7.0/dist/css/tipped.css")
+
            ,(include-css "/static/style.css")
            ,(include-alt-css "/static/dark.css"  '(title "Dark"))
            ,(include-alt-css "/static/light.css" '(title "Light"))
+
+           (script (@ (src "/static/jquery-3.1.1.min.js")) "")
+           (script (@ (src "/static/tipped-4.7.0/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/.gitignore b/static/.gitignore
new file mode 100644
index 00000000..b99de213
--- /dev/null
+++ b/static/.gitignore
@@ -0,0 +1,2 @@
+tipped-4.7.0
+jquery-3.*
diff --git a/static/script.js b/static/script.js
index 8617159a..b9b6a5ba 100644
--- a/static/script.js
+++ b/static/script.js
@@ -140,11 +140,6 @@ function update_current_time_bar () {
     current_cell.style.border = "1px solid black";
 }
 
-function toggle_event_pupup () {
-    console.log(this);
-    this.getElementsByClassName("popup")[0].classList.toggle("show");
-}
-
 function min(a, b) {
     return a < b ? a : b;
 }
@@ -153,71 +148,6 @@ function max(a, b) {
     return a > b ? a : b;
 }
 
-function close_popup (btn) {
-    o = { class: "popup" }
-    var popup = parents_until (btn, o);
-    popup.classList.toggle("show");
-}
-
-/*
-https://stackoverflow.com/questions/21064101/understanding-offsetwidth-clientwidth-scrollwidth-and-height-respectively
-*/
-function new_popup (event) {
-
-    let days = document.getElementsByClassName("days")[0]
-
-    console.log(event.target);
-    console.log(this);
-    // if (event.target !== this) return;
-
-    /* popup = this.children[0].children[0] */
-    let ev = parents_until(this, {class: "event"})
-    popup = ev.getElementsByClassName("popup")[0];
-    popup.classList.toggle("show")
-
-    return;
-
-    /* x-axis fix */
-
-    /* Popup should neven be wider than viewport */
-    popup.style.width = min(popup.style.offsetWidth, days.clientWidth - 10) + "px"
-
-    /* find left edge of source element in viewport */
-    here_x = (this.offsetParent.offsetLeft + this.offsetLeft) - days.scrollLeft;
-    console.log(here_x)
-
-    /* Align popup with source */
-    popup.style.left = "0px"
-    /* move it if it would partially render outside */
-    if (here_x < 0) {
-        popup.style.left = "" + ((- here_x) + 10) + "px";
-    }
-    // overflow_x = (here_x + popup.offsetWidth) - days.offsetWidth
-    overflow_x = (here_x + popup.offsetWidth) - days.clientWidth
-    if (overflow_x > 0) {
-        /* NOTE
-           Setting the style.left field changes the offsetWidth
-           of the object.
-           TODO
-           Get the popup to actually be inside the viewport!
-           */
-        // console.log(overflow_x)
-        popup.style.left = "-" + (overflow_x + 10) + "px";
-    }
-
-    /* y-axis fix */
-    popup.style.height = min(popup.style.offsetHeight, days.offsetHeight)
-    popup.style.bottom = "calc(100% + 2em)";
-
-    here_y = this.offsetParent.offsetTop + this.offsetTop;
-
-    overflow_y = here_y - popup.offsetHeight;
-    if (overflow_y < 0) {
-        popup.style.bottom = "calc(100% - " + ((- overflow_y) + 10) + "px)";
-    }
-
-}
-
 function setVar(str, val) {
 	document.documentElement.style.setProperty("--" + str, val);
 }
@@ -251,16 +181,6 @@ 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.onkeydown = function (evt) {
 		evt = evt || window.event;
 		if (evt.key.startsWith("Esc")) {
@@ -269,3 +189,29 @@ window.onload = function () {
 	}
 
 }
+
+$(document).ready(function() {
+    Tipped.setDefaultSkin("purple");
+    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',
+
+        /* makes popups relative our scrolling days view */
+        container: '.days',
+
+        /* Ensures that the popups stay within the given area,
+           and don't strectch the container */
+        containment: {
+            selector: '.days',
+        },
+        behaviour: 'sticky',
+    });
+});
diff --git a/static/style.css b/static/style.css
index ac490322..aad9a80c 100644
--- a/static/style.css
+++ b/static/style.css
@@ -396,6 +396,9 @@ along with their colors.
     height: 100%;
     padding: 0;
     overflow-x: scroll;
+
+    /* allow for popup placement */
+    position: relative;
 }
 
 .events {
@@ -456,6 +459,7 @@ along with their colors.
 .event {
     transition: 0.3s;
     font-size: var(--event-font-size);
+    overflow: hidden;
 }
 
 .days .event {
@@ -464,8 +468,6 @@ along with their colors.
 
 .events .event {
     width: 100%;
-
-
 }
 
 .events .event.continuing {
@@ -581,60 +583,35 @@ along with their colors.
 .clock-22 { top: calc(100%/24 * 22); }
 .clock-24 { top: calc(100%/24 * 24); }
 
-.event-inner {
-    /* Makes the popup's "position: absolute" be relative the event.
-        unset, initial, and inherit all seem to work */
-    position: unset;
-    width: 100%;
-    height: 100%;
-}
 
 /* Popups
 ----------------------------------------
 */
 
-.event-inner .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
-       - event for week view, and
-       - body for month view.
-       This has the effect that top and left attributes become relative the offset
-       parent (even though without them the element is positioned relative to it's
-       direct event parent (except not in month view if the day is scrolled)).
-
-       I think it's something here which stops popups in the month view from going
-       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;
-    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;
+.popup-container {
+    display: none;
+}
+
 
+.popup {
+    display: flex;
     background-color: #dedede;
     color: black;
 
     overflow-y: auto;
-    max-width: 100ch;
+    max-width: 60ch;
     max-height: 60ch;
     min-width: 40ch;
 }
 
-.event-inner .popup article {
+.popup article {
     /* makes the text in the popup scroll, but not the sidebar */
     overflow-y: auto;
-
     padding: 1em;
+    word-break: break-word;
 }
 
-.event-inner .popup .location {
+.popup .location {
     font-style: initial;
 }
 
@@ -659,14 +636,8 @@ along with their colors.
     font-size: 150%;
 }
 
-.popup.show {
-    transform: scale(1);
-}
-
-.event-inner .body {
-    overflow: hidden;
-    width: 100%;
-    height: 100%;
+.tpd-tooltip a, .tpd-tooltip a:hover {
+    color: blue;
 }
 
 #bar {