Something went wrong. Try again.
The bmannconsulting.com website
Something went wrong. Try again.
4.6 kB · 150 lines
HTML
at commit 94de6376
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151<!-- That file is not particularly elegant. This will need a refactor at some point. --><style>
{% comment %} content a.internal-link:before { position: relative; content: "[[ "; color: #aaaaaa; }
content a.internal-link:after { position: relative; content: " ]]"; color: #aaaaaa; } {% endcomment %}
#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')
var linkHistories = {};
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) { if (!linkHistories[event.target.href]) { 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 linkHistories[event.target.href] = tooltipContentHtml
tooltipWrapper.style.display = 'block'; setTimeout(function() { tooltipWrapper.style.opacity = 1; }, 1) } } else { tooltipContent.innerHTML = linkHistories[event.target.href] 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('touchend', function(_event) { hideTooltip(); });
tooltipWrapper.addEventListener('touchend', 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>