Something went wrong. Try again.
[READ-ONLY] Mirror of https://github.com/agbocsardi/bocsardigergely.github.io.
Something went wrong. Try again.
3.9 kB · 120 lines
HTML
at master
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121<!-- That file is not particularly elegant. This will need a refactor at some point. --><style> content a.internal-link { border-color: #8ac561; background-color: #eafddc; }
#tooltip-wrapper { background: white; padding: 1em; border: 1px solid #ddd; border-radius: 4px; overflow: hidden; position: absolute; width: 400px; height: 250px; font-size: 0.8em; box-shadow: 0 5px 10px rgba(0,0,0,0.1); opacity: 0; transition: opacity 100ms; }
#tooltip-wrapper:after { content: ""; position: absolute; z-index: 1; bottom: 0; left: 0; pointer-events: none; background-image: linear-gradient(to bottom, rgba(255,255,255, 0), rgba(255,255,255, 1) 90%); width: 100%; height: 75px; }</style>
<div style="opacity: 0; display: none;" id='tooltip-wrapper'> <div id='tooltip-content'> </div></div>
<iframe style="display: none; height: 0; width: 0;" id='link-preview-iframe' src=""></iframe>
<script> var opacityTimeout; var contentTimeout; var transitionDurationMs = 100;
var iframe = document.getElementById('link-preview-iframe') var tooltipWrapper = document.getElementById('tooltip-wrapper') var tooltipContent = document.getElementById('tooltip-content')
function hideTooltip() { opacityTimeout = setTimeout(function() { tooltipWrapper.style.opacity = 0; contentTimeout = setTimeout(function() { tooltipContent.innerHTML = ''; tooltipWrapper.style.display = 'none'; }, transitionDurationMs + 1); }, transitionDurationMs) }
function showTooltip(event) { var elem = event.target; var elem_props = elem.getClientRects()[elem.getClientRects().length - 1]; var top = window.pageYOffset || document.documentElement.scrollTop
if (event.target.host === window.location.host) { iframe.src = event.target.href iframe.onload = function() { tooltipContentHtml = '' tooltipContentHtml += '<div style="font-weight: bold;">' + iframe.contentWindow.document.querySelector('h1').innerHTML + '</div>' tooltipContentHtml += iframe.contentWindow.document.querySelector('content').innerHTML
tooltipContent.innerHTML = tooltipContentHtml
tooltipWrapper.style.display = 'block'; setTimeout(function() { tooltipWrapper.style.opacity = 1; }, 1) }
tooltipWrapper.style.left = elem_props.left - (tooltipWrapper.offsetWidth / 2) + (elem_props.width / 2) + "px"; if ((window.innerHeight - elem_props.top) < (tooltipWrapper.offsetHeight)) { tooltipWrapper.style.top = elem_props.top + top - tooltipWrapper.offsetHeight - 10 + "px"; } else if ((window.innerHeight - elem_props.top) > (tooltipWrapper.offsetHeight)) { tooltipWrapper.style.top = elem_props.top + top + 35 + "px"; }
if ((elem_props.left + (elem_props.width / 2)) < (tooltipWrapper.offsetWidth / 2)) { tooltipWrapper.style.left = "10px"; } else if ((document.body.clientWidth - elem_props.left - (elem_props.width / 2)) < (tooltipWrapper.offsetWidth / 2)) { tooltipWrapper.style.left = document.body.clientWidth - tooltipWrapper.offsetWidth - 20 + "px"; } } }
function setupListeners(linkElement) { linkElement.addEventListener('mouseleave', function(_event) { hideTooltip(); });
tooltipWrapper.addEventListener('mouseleave', function(_event) { hideTooltip(); });
linkElement.addEventListener('mouseenter', function(event) { clearTimeout(opacityTimeout); clearTimeout(contentTimeout); showTooltip(event); });
tooltipWrapper.addEventListener('mouseenter', function(event) { clearTimeout(opacityTimeout); clearTimeout(contentTimeout); }); }
document.querySelectorAll('{{ include.wrapperQuerySelector }} a').forEach(setupListeners);</script>