2021-03-11 03:31:16 +00:00
|
|
|
|
<!doctype html>
|
|
|
|
|
|
<html lang="en"><head>
|
|
|
|
|
|
<meta charset="utf-8">
|
|
|
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
|
|
|
|
<title>Digital Garden</title>
|
|
|
|
|
|
<meta name="description" content="A digital garden or public notebook for The Bentway’s Digital and/as Public Space Micro-Residency.">
|
|
|
|
|
|
<link rel="stylesheet" href="/assets/css/style.css"><link type="application/atom+xml" rel="alternate" href="/feed.xml" title="Digital Garden" /></head><body class="dark-green garamond links-dark-green bg-washed-green"><header class="f-6 flex"><a class="no-underline-hover" rel="author" href="/">Digital Garden</a><nav>, <a class="no-underline-hover" href="/about/">About</a></nav></header><main aria-label="Content">
|
|
|
|
|
|
<ul>
|
|
|
|
|
|
|
|
|
|
|
|
<li>
|
2021-03-11 03:38:02 +00:00
|
|
|
|
<a href="/2021/03/01/initial-seeds/">Initial Seeds</a>
|
2021-03-11 03:31:16 +00:00
|
|
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
</ul>
|
|
|
|
|
|
|
|
|
|
|
|
<section>
|
|
|
|
|
|
|
|
|
|
|
|
<div class="post_excerpt">
|
|
|
|
|
|
<article>
|
|
|
|
|
|
<h2 itemprop="headline">
|
2021-03-11 03:38:02 +00:00
|
|
|
|
<a href="/2021/03/01/initial-seeds/" rel="permalink">Initial Seeds</a>
|
2021-03-11 03:31:16 +00:00
|
|
|
|
</h2>
|
|
|
|
|
|
<p class="excerpt" itemprop="description"><em>
|
|
|
|
|
|
Set of areas that guide our reveries?
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
The history of hypertext, rss+adjacent protocols and standards.
|
|
|
|
|
|
The act of publishing as “making something public” → publicness → hybrid public space.
|
|
|
|
|
|
The possibilities for the infrastructural (maintenance/repair) to draw from the past to rethink the present through co-operative approaches.
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</em></p>
|
|
|
|
|
|
</article>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
</section>
|
|
|
|
|
|
|
|
|
|
|
|
</main><footer>
|
|
|
|
|
|
|
2021-03-11 03:38:02 +00:00
|
|
|
|
</footer><!-- That file is not particularly elegant. This will need a refactor at some point. -->
|
|
|
|
|
|
<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('content a').forEach(setupListeners);
|
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
|
|
<script src="/assets/js/scripts.js" async></script>
|
2021-03-11 03:31:16 +00:00
|
|
|
|
</body>
|
|
|
|
|
|
</html>
|
