autonomic-cooperative/kcl-digital-humanities-garden
0
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

move link preview

Browse Source
This commit is contained in:
Garry Ing 2021-03-11 20:58:04 -05:00
parent 4a20a26a55
commit 8537c86963
No known key found for this signature in database
GPG Key ID: 3B379B1F2193CC3E
4 changed files with 81 additions and 87 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

78
_includes/link-previews.html
View File

@ -6,81 +6,3 @@
<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>

9
_layouts/default.html
View File

@ -1,18 +1,13 @@
<!doctype html>
<html lang="{{ page.lang | default: site.lang | default: "en" }}">
{%- include head.html -%}
<body class="dark-green garamond links-dark-green bg-washed-green">
{%- include header.html -%}
<main aria-label="Content">
{{ content }}
</main>
{%- include footer.html -%}
{% include link-previews.html wrapperQuerySelector="content" %}
<script src="{{ "/assets/js/scripts.js" | relative_url }}" async></script>
{% include link-previews.html %}
<script src="{{ "/assets/js/scripts.js" | relative_url }}" async></script>
</body>
</html>

4
_layouts/note.html
View File

@ -12,9 +12,9 @@ layout: default
</div>
<div id="notes-entry-container">
<content>
<div class="note-contents">
{{ content }}
</content>
</div>
<side style="font-size: 0.9em">
<h3 style="margin-bottom: 1em">Notes mentioning this note</h3>

77
assets/js/scripts.js
View File

@ -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 += '<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)