From 255f26030a2712f06722205ad593e4f7df0ed76c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Hugo=20H=C3=B6rnquist?= Date: Wed, 29 Apr 2020 00:11:57 +0200 Subject: Test tooltip library. --- module/output/html.scm | 88 +++++++++++++++++++++++++++++--------------------- static/script.js | 21 +++++++++++- static/style.css | 26 ++++++++------- 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")) + + ;; + ;; + ;; + ,(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: */ -- cgit v1.2.3 From b3fca6966f7a6a3a4291486748802fc694dfbd1a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Hugo=20H=C3=B6rnquist?= Date: Wed, 29 Apr 2020 00:42:48 +0200 Subject: Made code more compatible with popups, improve config. --- module/output/html.scm | 48 ++++++++++++++++++---------------------- static/script.js | 12 +++++++++- static/style.css | 59 +++++++++++--------------------------------------- 3 files changed, 45 insertions(+), 74 deletions(-) diff --git a/module/output/html.scm b/module/output/html.scm index 375cc03b..79a44a41 100644 --- a/module/output/html.scm +++ b/module/output/html.scm @@ -189,29 +189,25 @@ (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)))))))) + `((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 @@ -629,14 +625,12 @@ (content ,(date->string start-date "~s")))) (meta (@ (name end-time) (content ,(date->string (date+ end-date (date day: 1)) "~s")))) + ,(include-css "http://gandalf.adrift.space:8000/tipped/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")) - ;; - ;; - ;; - ,(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")) "") diff --git a/static/script.js b/static/script.js index 91c840e3..4fbf160e 100644 --- a/static/script.js +++ b/static/script.js @@ -261,7 +261,7 @@ window.onload = function () { } $(document).ready(function() { - Tipped.setDefaultSkin('none'); + Tipped.setDefaultSkin("purple"); Tipped.create(".event", { /* no padding, I am the one who styles! */ padding: false, @@ -273,5 +273,15 @@ $(document).ready(function() { 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 8067b3ff..3bedd3e1 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 { @@ -464,8 +467,7 @@ along with their colors. .events .event { width: 100%; - - + overflow: hidden; } .events .event.continuing { @@ -581,59 +583,32 @@ 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 ---------------------------------------- */ +.popup-container { + display: none; +} + + .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; */ - background-color: #dedede; color: black; overflow-y: auto; - max-width: 100ch; + max-width: 60ch; max-height: 60ch; min-width: 40ch; - - /* display: none; */ } .popup article { /* makes the text in the popup scroll, but not the sidebar */ overflow-y: auto; - padding: 1em; + word-break: break-word; } .popup .location { @@ -661,10 +636,8 @@ along with their colors. font-size: 150%; } -.event-inner .body { - overflow: hidden; - width: 100%; - height: 100%; +.tpd-tooltip a, .tpd-tooltip a:hover { + color: blue; } #bar { @@ -675,11 +648,5 @@ along with their colors. left: -1em; } -.popup-container { - /* min-width: 50ch; */ - /* min-height: 50ch; */ - display: none; -} - /* vim:expandtab:softtabstop=4:shiftwidth=4: */ -- cgit v1.2.3 From f0e0549f93bd8f9f83838320eb161e41551ff931 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Hugo=20H=C3=B6rnquist?= Date: Wed, 29 Apr 2020 00:57:52 +0200 Subject: Move overflow: hidden for events. --- static/style.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/static/style.css b/static/style.css index 3bedd3e1..aad9a80c 100644 --- a/static/style.css +++ b/static/style.css @@ -459,6 +459,7 @@ along with their colors. .event { transition: 0.3s; font-size: var(--event-font-size); + overflow: hidden; } .days .event { @@ -467,7 +468,6 @@ along with their colors. .events .event { width: 100%; - overflow: hidden; } .events .event.continuing { -- cgit v1.2.3 From 6d7f57174eb43c79352a8de4be8133ece6c6efca Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Hugo=20H=C3=B6rnquist?= Date: Wed, 29 Apr 2020 01:16:47 +0200 Subject: Note in README about TippedJS. --- README | 10 ++++++++-- README.in | 9 +++++++-- 2 files changed, 15 insertions(+), 4 deletions(-) diff --git a/README b/README index ef1eab18..11eff8b5 100644 --- a/README +++ b/README @@ -24,13 +24,18 @@ repports, and other stuff should be sent to . 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. +- https://tippedjs.com +- JQuery + Building -------- Since guile is primarily a scripting language no explicit @@ -43,3 +48,4 @@ Techical Details ---------------- - Internally all weeks start on sunday, which is repsenented as `0'. + diff --git a/README.in b/README.in index 1b5515bb..a750e0f4 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 . 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. +- https://tippedjs.com +- JQuery + 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,4 @@ 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'. + -- cgit v1.2.3 From ddf6e90fe171130b5497f31faa79978319aa8c92 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Hugo=20H=C3=B6rnquist?= Date: Fri, 1 May 2020 13:52:46 +0200 Subject: Setup local mirroring of frontend libs. --- README | 19 +++++++++++++++---- README.in | 15 ++++++++++++--- download-deps | 10 ++++++++++ module/output/html.scm | 6 +++--- static/.gitignore | 2 ++ 5 files changed, 42 insertions(+), 10 deletions(-) create mode 100755 download-deps create mode 100644 static/.gitignore diff --git a/README b/README index f4b56e57..11892857 100644 --- a/README +++ b/README @@ -24,7 +24,7 @@ repports, and other stuff should be sent to . If you want to contribute something yourself, either see TODO.* for things to do, or run `grep -RE 'TODO|NOTE'. -Requirements & Dependencies +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 @@ -32,9 +32,12 @@ 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. -- https://tippedjs.com -- JQuery +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 -------- @@ -49,3 +52,11 @@ 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 b3726eee..d5e66352 100644 --- a/README.in +++ b/README.in @@ -16,9 +16,9 @@ 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. -- https://tippedjs.com -- JQuery +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 -------- @@ -29,3 +29,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 \ 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 fb771507..ee733ab7 100644 --- a/module/output/html.scm +++ b/module/output/html.scm @@ -626,14 +626,14 @@ (content ,(date->string start-date "~s")))) (meta (@ (name end-time) (content ,(date->string (date+ end-date (date day: 1)) "~s")))) - ,(include-css "http://gandalf.adrift.space:8000/tipped/dist/css/tipped.css") + ,(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 "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/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 }~%~}" 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.* -- cgit v1.2.3 From 555201665e844d9ccbc318c9a2cdc25f591bab38 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Hugo=20H=C3=B6rnquist?= Date: Fri, 1 May 2020 14:36:02 +0200 Subject: Remove old popup code. --- module/output/html.scm | 2 +- static/script.js | 83 -------------------------------------------------- 2 files changed, 1 insertion(+), 84 deletions(-) diff --git a/module/output/html.scm b/module/output/html.scm index ee733ab7..0da52b0b 100644 --- a/module/output/html.scm +++ b/module/output/html.scm @@ -138,7 +138,7 @@ "unknown")))) ,(btn "×" title: "Stäng" - onclick: "close_popup(this)" + onclick: "" class: '("close-tooltip") ) ,(btn "📅" diff --git a/static/script.js b/static/script.js index 6cca186e..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,19 +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")) { -- cgit v1.2.3