From 0940394b9e9c492fd06cd9c3107f654f7bd0aa0e Mon Sep 17 00:00:00 2001
From: Florian Fischer <florian.fischer@muhq.space>
Date: Fri, 10 Dec 2021 11:28:38 +0100
Subject: [generatecard_hover_links] fix popups not beeing in the viewport

---
 scripts/generate_card_hover_links.py | 25 +++++++++++++++++++++++--
 1 file changed, 23 insertions(+), 2 deletions(-)

(limited to 'scripts')

diff --git a/scripts/generate_card_hover_links.py b/scripts/generate_card_hover_links.py
index 0a129f37..28b7f017 100755
--- a/scripts/generate_card_hover_links.py
+++ b/scripts/generate_card_hover_links.py
@@ -12,10 +12,31 @@ PATTERN = re.compile('\{\{(?P<card>.*?)\}\}')
 
 CSS_STYLE = 'zindex: 100; position: absolute;'
 
+HOVER_JS = \
+"""var d = document;
+var o=d.getElementById('placeholder-{pid}');
+o.src='{img_target}'; o.width=355; o.height=532;
+var b = o.getBoundingClientRect();
+// make sure the popup image is in the viewport
+var w = window;
+var up = b.bottom - w.innerHeight;
+var left = b.right - w.innerWidth;
+if (up > 0) {{
+    o.style.top = (b.top - up) + w.pageYOffset + 'px';
+}}
+if (left > 0) {{
+    o.style.left = (b.left - left) +  + w.pageXOffset + 'px';
+}}
+"""
+
+RESET_JS = \
+"""var o=document.getElementById('placeholder-{pid}');
+o.src='hover-placeholder.png'; o.width=1; o.height=1;"""
+
 HOVERABLE_LINK = \
 f'''<a href="{{link_target}}"
-  onmouseover="var o=document.getElementById('placeholder-{{pid}}');o.src='{{img_target}}';o.width=355;o.height=532;"
-  onmouseout="var o=document.getElementById('placeholder-{{pid}}');o.src='hover-placeholder.png';o.width=1;o.height=1;"
+  onmouseover="{HOVER_JS}"
+  onmouseout="{RESET_JS}"
 >
 {{link_text}}
 <img src="hover-placeholder.png" id="placeholder-{{pid}}" width=1 height=1 style="{CSS_STYLE}" />
-- 
cgit v1.2.3