Skip to content

Commit bc5d4fe

Browse files
mrgarris0nmrgarris0n
authored
Tooltip remains open in some cases #9 (#12)
Fixes: #9
2 parents de6febd + 650f091 commit bc5d4fe

File tree

3 files changed

+161
-118
lines changed

3 files changed

+161
-118
lines changed

‎_js/_main.js

Lines changed: 0 additions & 63 deletions
Original file line numberDiff line numberDiff line change
@@ -6,31 +6,6 @@ $(function () {
66
// FitVids init
77
$("#main").fitVids();
88

9-
// -------------
10-
// Sticky sidebar
11-
// -------------
12-
13-
var initiallySticky = $(".sidebar").hasClass("sticky");
14-
var stickySideBar = function () {
15-
var show =
16-
$(".author__urls-wrapper").find("button").length === 0
17-
? $(window).width() > 1024 // width should match $large Sass variable
18-
: !$(".author__urls-wrapper").find("button").is(":visible");
19-
if (show) {
20-
if (initiallySticky) {
21-
$(".sidebar").addClass("sticky");
22-
}
23-
} else {
24-
$(".sidebar").removeClass("sticky");
25-
}
26-
};
27-
28-
stickySideBar();
29-
30-
$(window).resize(function () {
31-
stickySideBar();
32-
});
33-
349
// -------------
3510
// Follow menu drop down
3611
// -------------
@@ -40,44 +15,6 @@ $(function () {
4015
$(".author__urls-wrapper").find("button").toggleClass("open");
4116
});
4217

43-
// -------------
44-
// Search
45-
// -------------
46-
47-
// Close search screen with Esc key or toggle with predefined hotKey
48-
$(document).keyup(function (event) {
49-
// Define the desired hotkey (in this case, Ctrl + Shift + F)
50-
var searchHotkey = { ctrlKey: true, shiftKey: true, key: 'F' };
51-
52-
if (event.keyCode === 27) {
53-
if ($(".initial-content").hasClass("is--hidden"))
54-
toggleSearch();
55-
}
56-
else if (event.ctrlKey === searchHotkey.ctrlKey &&
57-
event.shiftKey === searchHotkey.shiftKey &&
58-
event.key === searchHotkey.key) {
59-
toggleSearch();
60-
}
61-
});
62-
63-
function toggleSearch() {
64-
$(".search-content").toggleClass("is--visible");
65-
$(".initial-content").toggleClass("is--hidden");
66-
67-
if ($(".initial-content").hasClass("is--hidden")) {
68-
// set focus on input
69-
setTimeout(function () {
70-
$(".search-content").find("input").focus();
71-
}, 400);
72-
}
73-
else {
74-
// set focus back to the initial content otherwise the focus will not get back to the search input once again
75-
$(".initial-content").find("input").focus();
76-
}
77-
}
78-
79-
$(".search__toggle").on("click", toggleSearch);
80-
8118
// -------------
8219
// Magnific-Popup
8320
// -------------

‎_js/custom/navigation.js

Lines changed: 119 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
/* ==========================================================================
2-
Sidebar navigation and visualization helper scripts
2+
Sidebar, page, etc. navigation and visualization helper scripts
33
========================================================================== */
44

55
$(function () {
@@ -68,28 +68,9 @@ $(function () {
6868
}
6969
}
7070

71-
// Function to apply all of our custom modifications on the self loaded pages
72-
function finalizeContent(anchorId) {
73-
// Sync the sidebar with the current page url, migth be out of sync when the page is loaded initially from an inner url
74-
adjustSidebars();
75-
// There might be nav-links in the loaded new content as well (e.g.Next / Prev buttons
76-
// so, handle the links here as the last action
77-
updateNavLinks();
78-
// Add page heading anchors
79-
addPageAnchors();
80-
// Add toc to anchor scrolling
81-
addTOCScrolling();
82-
// Add code block enhancements
83-
if (ClipboardJS.isSupported())
84-
addCodeBlocksTitle();
85-
// Add content tooltips
86-
addContentTooltips();
87-
// Try to scroll to a giben anchor, if any
88-
if (anchorId)
89-
scrollToAnchor(anchorId);
90-
}
91-
71+
// -------------
9272
// Function to load content based on relative URL
73+
// -------------
9374
function loadContentFromUrl(url, onSuccess, onError) {
9475
fetch(url)
9576
.then(response => {
@@ -133,6 +114,27 @@ $(function () {
133114
return anchorId;
134115
}
135116

117+
// Function to apply all of our custom modifications on the self loaded pages
118+
function finalizeContent(anchorId) {
119+
// Sync the sidebar with the current page url, migth be out of sync when the page is loaded initially from an inner url
120+
adjustSidebars();
121+
// There might be nav-links in the loaded new content as well (e.g.Next / Prev buttons
122+
// so, handle the links here as the last action
123+
updateNavLinks();
124+
// Add page heading anchors
125+
addPageAnchors();
126+
// Add toc to anchor scrolling
127+
addTOCScrolling();
128+
// Add code block enhancements
129+
if (ClipboardJS.isSupported())
130+
addCodeBlocksTitle();
131+
// Add content tooltips
132+
addContentTooltips();
133+
// Try to scroll to a giben anchor, if any
134+
if (anchorId)
135+
scrollToAnchor(anchorId);
136+
}
137+
136138
function updateContentFromUrl(url) {
137139
var currContent = document.querySelector(contentID);
138140

@@ -168,6 +170,9 @@ $(function () {
168170
);
169171
}
170172

173+
// -------------
174+
// Functions to handle link clicks
175+
// -------------
171176
function getCollectionFromDocPath(url) {
172177
var parts = url.href.split('/');
173178
var docIndex = parts.indexOf(docRootName);
@@ -187,7 +192,6 @@ $(function () {
187192
return collection1 === collection2;
188193
}
189194

190-
// Function to handle link clicks
191195
function handleNavLinkClick(event) {
192196
if (!event.shiftKey && !event.ctrlKey && !event.altKey && !event.metaKey) {
193197
var updated = false;
@@ -232,6 +236,9 @@ $(function () {
232236
});
233237
}
234238

239+
// -------------
240+
// TOC smooth scrolling
241+
// -------------
235242
const smoothScrollTopOffset = 100;
236243
var smoothScroll = new SmoothScroll('a[href*="#"]', {
237244
offset: smoothScrollTopOffset,
@@ -240,7 +247,6 @@ $(function () {
240247
durationMax: 500
241248
});
242249

243-
// TOC smooth scrolling
244250
function addTOCScrolling() {
245251
// Gumshoe scroll spy init
246252
if ($("nav.toc a").length > 0) {
@@ -263,7 +269,9 @@ $(function () {
263269
}
264270
}
265271

272+
// -------------
266273
// Add anchors for headings
274+
// -------------
267275
function addPageAnchors() {
268276
// FIXME: This magic 6 must be maintained together now with generate_links.rb (and other places ?!)
269277
$('.page__content').find('h1, h2, h3, h4, h5, h6').each(function () {
@@ -333,10 +341,13 @@ $(function () {
333341
);
334342
}
335343

344+
// -------------
336345
// Tooltip generation and handling
346+
// -------------
337347
const toolTipArrowSize = 10;
338348
var tooltip = null;
339349
var tooltipTarget = null;
350+
var elementUnderCursor = null;
340351
var shouldShowTooltip = false;
341352
var showTimeoutFuncID;
342353
var hideTimeoutFuncID;
@@ -452,15 +463,98 @@ $(function () {
452463
document.addEventListener('mousemove', (event) => {
453464
if (shouldHideTooltip(event.target)) {
454465
if (tooltipTarget)
455-
hideTooltip(true)
466+
hideTooltip(true);
456467
}
457468
else {
458469
clearTimeout(hideTimeoutFuncID);
459470
shouldShowTooltip = true;
460471
}
461472
});
473+
474+
document.addEventListener('scroll', (event) => {
475+
if (elementUnderCursor == null || shouldHideTooltip(elementUnderCursor)) {
476+
if (tooltipTarget)
477+
hideTooltip(true);
478+
}
479+
});
480+
481+
document.addEventListener("mouseover", function (event) {
482+
elementUnderCursor = event.target;
483+
});
484+
}
485+
486+
// -------------
487+
// Sticky sidebar
488+
// -------------
489+
490+
var initiallySticky = $(".sidebar").hasClass("sticky");
491+
var stickySideBar = function () {
492+
var show =
493+
$(".author__urls-wrapper").find("button").length === 0
494+
? $(window).width() > 1024 // width should match $large Sass variable
495+
: !$(".author__urls-wrapper").find("button").is(":visible");
496+
if (show) {
497+
if (initiallySticky) {
498+
$(".sidebar").addClass("sticky");
499+
}
500+
} else {
501+
$(".sidebar").removeClass("sticky");
502+
}
503+
};
504+
505+
$(window).on("resize", function () {
506+
stickySideBar();
507+
});
508+
509+
// -------------
510+
// Search
511+
// -------------
512+
513+
// Close search screen with Esc key or toggle with predefined hotKey
514+
$(document).on("keyup", function (event) {
515+
// Define the desired hotkey (in this case, Ctrl + Shift + F)
516+
var searchHotkey = { ctrlKey: true, shiftKey: true, key: 'F' };
517+
518+
if (event.keyCode === 27) {
519+
if ($(".initial-content").hasClass("is--hidden"))
520+
toggleSearch();
521+
}
522+
else if (event.ctrlKey === searchHotkey.ctrlKey &&
523+
event.shiftKey === searchHotkey.shiftKey &&
524+
event.key === searchHotkey.key) {
525+
toggleSearch();
526+
}
527+
});
528+
529+
function toggleSearch() {
530+
$(".search-content").toggleClass("is--visible");
531+
$(".initial-content").toggleClass("is--hidden");
532+
533+
if ($(".initial-content").hasClass("is--hidden")) {
534+
// set focus on input
535+
setTimeout(function () {
536+
var input = $(".search-content").find("input");
537+
input.trigger("focus");
538+
input.trigger("select");
539+
}, 250);
540+
}
541+
else {
542+
// set focus back to the initial content otherwise the focus will not get back to the search input once again
543+
$(".initial-content").find("input").focus();
544+
}
545+
546+
if (tooltipTarget)
547+
hideTooltip(true);
462548
}
463549

550+
$(".search__toggle").on("click", toggleSearch);
551+
552+
// -------------
553+
// Startup
554+
// -------------
555+
556+
stickySideBar();
557+
464558
// Make sure everything is initialized correctly on an initial load as well
465559
// (e.g. when an inner embedded page link is opened directly in a new tab, not via the internal navigational links)
466560
finalizeContent();

0 commit comments

Comments
 (0)