Move back to own popup system.

JQuery apparently doesn't handle xhtml, so the old system goes bust.

Currently it's replaced with a barebones popup system, which works
almost as well as the dependency. However; current problems include:
- Wrong mouse cursor on events
- Bad size on some browsers
- Close button broken
- Sometimes placed outside intended area, stretching it (since I *need*
  scroll on it).
- ...

2 files changed, 9 insertions, 52 deletions

diff --git a/static/script.js b/static/script.js
index 5024ea67..e7076f81 100644
--- a/static/script.js
+++ b/static/script.js
@@ -406,49 +406,9 @@ window.onload = function () {
     serializer.serializeToString(xml);
     */
 
-    /* Pretty prints the xcal contents in each popup.
-       Done here since guile produces compact xml.
-
-       element.innerText should still be valid xcal xml.
-    */
-
-    let parser = new DOMParser();
-    for (let el of document.querySelectorAll("[type='application/calendar+xml']")) {
-        let xml = parser.parseFromString(el.innerText, "text/xml");
-        el.outerHTML = "<pre class='xcal'>"
-            + pretty_print_xml(xml.documentElement, 0)
-            + "</pre>";
-
-
-    }
 }
 
-
-let tipped_args = {
-    /* 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',
+function toggle_child_popup(el) {
+    let popup = el.getElementsByClassName("popup-container")[0];
+    popup.classList.toggle("visible");
 }
-
-$(document).ready(function() {
-    Tipped.setDefaultSkin("purple");
-    Tipped.create(".event", tipped_args);
-});
-
diff --git a/static/style.css b/static/style.css
index f4a076fa..6cb62b11 100644
--- a/static/style.css
+++ b/static/style.css
@@ -488,7 +488,7 @@ along with their colors.
 .event {
     transition: 0.3s;
     font-size: var(--event-font-size);
-    overflow: hidden;
+    overflow: visible;
 }
 
 .days .event {
@@ -628,8 +628,13 @@ along with their colors.
 
 .popup-container {
     display: none;
+    position: absolute;
+    z-index: 10;
 }
 
+.popup-container.visible {
+    display: block;
+}
 
 .popup {
     display: flex;
@@ -677,10 +682,6 @@ along with their colors.
     font-size: 150%;
 }
 
-.tpd-tooltip a, .tpd-tooltip a:hover {
-    color: blue;
-}
-
 #bar {
     width: calc(100% + 2em);
     height: 4px;
@@ -735,10 +736,6 @@ along with their colors.
     resize: both;
 }
 
-.tpd-content-wrapper {
-    overflow: visible;
-}
-
 
 .tab [type=radio]:checked ~ label {
     z-index: 1;