[generatecard_hover_links] fix popups not beeing in the viewport

1 files changed, 23 insertions, 2 deletions

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}" />