From 8537c86963ad32d300af96c2a4b6e3c8ef123b82 Mon Sep 17 00:00:00 2001 From: Garry Ing Date: Thu, 11 Mar 2021 20:58:04 -0500 Subject: [PATCH] move link preview --- _includes/link-previews.html | 78 ------------------------------------ _layouts/default.html | 9 +---- _layouts/note.html | 4 +- assets/js/scripts.js | 77 +++++++++++++++++++++++++++++++++++ 4 files changed, 81 insertions(+), 87 deletions(-) diff --git a/_includes/link-previews.html b/_includes/link-previews.html index eb22c0e..8f91fd1 100644 --- a/_includes/link-previews.html +++ b/_includes/link-previews.html @@ -6,81 +6,3 @@ - - diff --git a/_layouts/default.html b/_layouts/default.html index e49b53c..fac7961 100644 --- a/_layouts/default.html +++ b/_layouts/default.html @@ -1,18 +1,13 @@ - {%- include head.html -%} - - {%- include header.html -%} -
{{ content }}
- {%- include footer.html -%} - {% include link-previews.html wrapperQuerySelector="content" %} - + {% include link-previews.html %} + \ No newline at end of file diff --git a/_layouts/note.html b/_layouts/note.html index b8cdb91..0da7972 100644 --- a/_layouts/note.html +++ b/_layouts/note.html @@ -12,9 +12,9 @@ layout: default
- +
{{ content }} - +

Notes mentioning this note

diff --git a/assets/js/scripts.js b/assets/js/scripts.js index e69de29..a7800db 100644 --- a/assets/js/scripts.js +++ b/assets/js/scripts.js @@ -0,0 +1,77 @@ +// Link preview + +let opacityTimeout +let contentTimeout +const transitionDurationMs = 100 + +const iframe = document.getElementById('link-preview-iframe') +const tooltipWrapper = document.getElementById('tooltip-wrapper') +const 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) { + const elem = event.target + const elemProps = elem.getClientRects()[elem.getClientRects().length - 1] + const top = window.pageYOffset || document.documentElement.scrollTop + + if (event.target.host === window.location.host) { + iframe.src = event.target.href + iframe.onload = function () { + let tooltipContentHtml = '' + tooltipContentHtml += '
' + iframe.contentWindow.document.querySelector('h1').innerHTML + '
' + tooltipContentHtml += iframe.contentWindow.document.querySelector('.note-contents').innerHTML + + tooltipContent.innerHTML = tooltipContentHtml + + tooltipWrapper.style.display = 'block' + setTimeout(function () { + tooltipWrapper.style.opacity = 1 + }, 1) + } + + tooltipWrapper.style.left = elemProps.left - (tooltipWrapper.offsetWidth / 2) + (elemProps.width / 2) + 'px' + if ((window.innerHeight - elemProps.top) < (tooltipWrapper.offsetHeight)) { + tooltipWrapper.style.top = elemProps.top + top - tooltipWrapper.offsetHeight - 10 + 'px' + } else if ((window.innerHeight - elemProps.top) > (tooltipWrapper.offsetHeight)) { + tooltipWrapper.style.top = elemProps.top + top + 35 + 'px' + } + + if ((elemProps.left + (elemProps.width / 2)) < (tooltipWrapper.offsetWidth / 2)) { + tooltipWrapper.style.left = '10px' + } else if ((document.body.clientWidth - elemProps.left - (elemProps.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('.note-contents a').forEach(setupListeners)