Popups more or less fixed, now with animations.

2 files changed, 30 insertions, 11 deletions

diff --git a/static/script.js b/static/script.js
index f76af3d7..45a8c8d0 100644
--- a/static/script.js
+++ b/static/script.js
@@ -125,6 +125,9 @@ function max(a, b) {
     a > b ? a : b;
 }
 
+/*
+https://stackoverflow.com/questions/21064101/understanding-offsetwidth-clientwidth-scrollwidth-and-height-respectively
+*/
 function new_popup () {
 
     popup = this.children[0].children[0]
@@ -133,10 +136,11 @@ function new_popup () {
     /* x-axis fix */
 
     /* Popup should neven be wider than viewport */
-    popup.style.width = min(popup.style.offsetWidth, days.offsetWidth - 10)
+    popup.style.width = min(popup.style.offsetWidth, days.clientWidth - 10) + "px"
 
-    /* find left edge of source element */
-    here_x = this.offsetParent.offsetLeft - days.scrollLeft + this.offsetLeft;
+    /* 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"
@@ -144,9 +148,17 @@ function new_popup () {
     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.offsetWidth
+    overflow_x = (here_x + popup.offsetWidth) - days.clientWidth
     if (overflow_x > 0) {
-        popup.style.left = "" + ((- overflow_x) - 10) + "px";
+        /* 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 */
@@ -180,11 +192,11 @@ window.onload = function () {
     //     e.onclick = toggle_event_pupup;
     // }
 
-    for (let e of document.getElementsByClassName("event")) {
+    days = document.getElementsByClassName("days")[0]
+    for (let e of days.getElementsByClassName("event")) {
         e.onclick = new_popup;
     }
 
-    days = document.getElementsByClassName("days")[0]
     // days.scrollLeft == 0
     // days.offsetWidth == viewable width
     // days.offsetHeight == viewable height
diff --git a/static/style.css b/static/style.css
index bd74a239..e7a51a6e 100644
--- a/static/style.css
+++ b/static/style.css
@@ -494,10 +494,16 @@ Find color between gray and lightgray
 */
 
 .event-inner .popup {
-    visibility: hidden;
+    /* visibility: hidden; */
     position: absolute;
-    left: 10%;
-    bottom: 125%;
+    display: block;
+    /* 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;
 
     background-color: #dedede;
@@ -543,7 +549,8 @@ Find color between gray and lightgray
 }
 
 .popup.show {
-    visibility: visible;
+    /* visibility: visible; */
+    transform: scale(100%);
 }
 
 .event-inner .body {