78 lines
2.7 KiB
JavaScript
78 lines
2.7 KiB
JavaScript
// 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 += '<div class="b">' + iframe.contentWindow.document.querySelector('h1').innerHTML + '</div>'
|
|
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)
|