The bmannconsulting.com website
bmann.ca
1<!-- That file is not particularly elegant. This will need a refactor at some point. -->
2<style>
3
4 {% comment %}
5 content a.internal-link:before {
6 position: relative;
7 content: "[[ ";
8 color: #aaaaaa;
9 }
10
11 content a.internal-link:after {
12 position: relative;
13 content: " ]]";
14 color: #aaaaaa;
15 }
16 {% endcomment %}
17
18 #tooltip-wrapper {
19 background: white;
20 padding: 1em;
21 border: 1px solid #ddd;
22 border-radius: 4px;
23 overflow: hidden;
24 position: absolute;
25 width: 400px;
26 height: 250px;
27 font-size: 0.8em;
28 box-shadow: 0 5px 10px rgba(0,0,0,0.1);
29 opacity: 0;
30 transition: opacity 100ms;
31 }
32
33 #tooltip-wrapper:after {
34 content: "";
35 position: absolute;
36 z-index: 1;
37 bottom: 0;
38 left: 0;
39 pointer-events: none;
40 background-image: linear-gradient(to bottom, rgba(255,255,255, 0), rgba(255,255,255, 1) 90%);
41 width: 100%;
42 height: 75px;
43 }
44</style>
45
46<div style="opacity: 0; display: none;" id='tooltip-wrapper'>
47 <div id='tooltip-content'>
48 </div>
49</div>
50
51<iframe style="display: none; height: 0; width: 0;" id='link-preview-iframe' src="">
52</iframe>
53
54<script>
55 var opacityTimeout;
56 var contentTimeout;
57 var transitionDurationMs = 100;
58
59 var iframe = document.getElementById('link-preview-iframe')
60 var tooltipWrapper = document.getElementById('tooltip-wrapper')
61 var tooltipContent = document.getElementById('tooltip-content')
62
63 var linkHistories = {};
64
65 function hideTooltip() {
66 opacityTimeout = setTimeout(function() {
67 tooltipWrapper.style.opacity = 0;
68 contentTimeout = setTimeout(function() {
69 tooltipContent.innerHTML = '';
70 tooltipWrapper.style.display = 'none';
71 }, transitionDurationMs + 1);
72 }, transitionDurationMs)
73 }
74
75 function showTooltip(event) {
76 var elem = event.target;
77 var elem_props = elem.getClientRects()[elem.getClientRects().length - 1];
78 var top = window.pageYOffset || document.documentElement.scrollTop
79
80 if (event.target.host === window.location.host) {
81 if (!linkHistories[event.target.href]) {
82 iframe.src = event.target.href
83 iframe.onload = function() {
84 tooltipContentHtml = ''
85 tooltipContentHtml += '<div style="font-weight: bold;">' + iframe.contentWindow.document.querySelector('h1').innerHTML + '</div>'
86 tooltipContentHtml += iframe.contentWindow.document.querySelector('content').innerHTML
87
88 tooltipContent.innerHTML = tooltipContentHtml
89 linkHistories[event.target.href] = tooltipContentHtml
90
91 tooltipWrapper.style.display = 'block';
92 setTimeout(function() {
93 tooltipWrapper.style.opacity = 1;
94 }, 1)
95 }
96 } else {
97 tooltipContent.innerHTML = linkHistories[event.target.href]
98 tooltipWrapper.style.display = 'block';
99 setTimeout(function() {
100 tooltipWrapper.style.opacity = 1;
101 }, 1)
102 }
103
104
105 tooltipWrapper.style.left = elem_props.left - (tooltipWrapper.offsetWidth / 2) + (elem_props.width / 2) + "px";
106 if ((window.innerHeight - elem_props.top) < (tooltipWrapper.offsetHeight)) {
107 tooltipWrapper.style.top = elem_props.top + top - tooltipWrapper.offsetHeight - 10 + "px";
108 } else if ((window.innerHeight - elem_props.top) > (tooltipWrapper.offsetHeight)) {
109 tooltipWrapper.style.top = elem_props.top + top + 35 + "px";
110 }
111
112 if ((elem_props.left + (elem_props.width / 2)) < (tooltipWrapper.offsetWidth / 2)) {
113 tooltipWrapper.style.left = "10px";
114 } else if ((document.body.clientWidth - elem_props.left - (elem_props.width / 2)) < (tooltipWrapper.offsetWidth / 2)) {
115 tooltipWrapper.style.left = document.body.clientWidth - tooltipWrapper.offsetWidth - 20 + "px";
116 }
117 }
118 }
119
120 function setupListeners(linkElement) {
121 linkElement.addEventListener('mouseleave', function(_event) {
122 hideTooltip();
123 });
124
125 tooltipWrapper.addEventListener('mouseleave', function(_event) {
126 hideTooltip();
127 });
128
129 linkElement.addEventListener('touchend', function(_event) {
130 hideTooltip();
131 });
132
133 tooltipWrapper.addEventListener('touchend', function(_event) {
134 hideTooltip();
135 });
136
137 linkElement.addEventListener('mouseenter', function(event) {
138 clearTimeout(opacityTimeout);
139 clearTimeout(contentTimeout);
140 showTooltip(event);
141 });
142
143 tooltipWrapper.addEventListener('mouseenter', function(event) {
144 clearTimeout(opacityTimeout);
145 clearTimeout(contentTimeout);
146 });
147 }
148
149 document.querySelectorAll('{{ include.wrapperQuerySelector }} a').forEach(setupListeners);
150</script>