diff options
Diffstat (limited to 'scripts')
| -rwxr-xr-x | scripts/generate_card_hover_links.py | 25 |
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}" /> |