From c508fc902b765d5aae66a55ae359e549ac3ee257 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Hugo=20H=C3=B6rnquist?= Date: Fri, 10 Jul 2020 00:08:19 +0200 Subject: 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). - ... --- download-deps | 10 ---------- module/output/html.scm | 13 +++++-------- static/script.js | 46 +++------------------------------------------- static/style.css | 15 ++++++--------- 4 files changed, 14 insertions(+), 70 deletions(-) delete mode 100755 download-deps diff --git a/download-deps b/download-deps deleted file mode 100755 index 7cb06d1b..00000000 --- a/download-deps +++ /dev/null @@ -1,10 +0,0 @@ -#!/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 734e201b..0c30c9be 100644 --- a/module/output/html.scm +++ b/module/output/html.scm @@ -157,7 +157,8 @@ (div (@ (class "content")) ,body))))) (define (popup ev id) - `(div (@ (class "popup-container") (id ,id)) + `(div (@ (class "popup-container") (id ,id) + (onclick "event.stopPropagation()")) (div (@ (class "popup")) (nav (@ (class "popup-control CAL_" ,(html-attr (or (prop (parent ev) 'NAME) "unknown")))) @@ -229,15 +230,15 @@ ,(when (and (prop ev 'PARTSTAT) (eq? 'TENTATIVE (prop ev 'PARTSTAT))) " tentative")) - (data-tipped-options ,(format #f "inline: '~a'" popup-id))))) + (onclick "toggle_child_popup(this)")))) ,(when (prop ev 'RRULE) `(span (@ (class "repeating")) "↺")) ,((get-config 'summary-filter) ev (prop ev 'SUMMARY)) ,(when (prop ev 'LOCATION) `(span (@ (class "location")) ,(string-map (lambda (c) (if (char=? c #\,) #\newline c)) - (prop ev 'LOCATION)))))) - ,(popup ev popup-id))) + (prop ev 'LOCATION)))) + ,(popup ev popup-id))))) ;; Format single event for graphical display (define (create-block date ev) @@ -648,15 +649,11 @@ (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 (@ (defer) (src "/static/jquery-3.1.1.min.js"))) - (script (@ (defer) (src "/static/tipped-4.7.0/dist/js/tipped.min.js"))) - (script (@ (defer) (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 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 = "
"
-            + pretty_print_xml(xml.documentElement, 0)
-            + "
"; - - - } } - -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; -- cgit v1.2.3