From cf989151f152b3634695620ff7959bbd028a9de2 Mon Sep 17 00:00:00 2001
From: Kamron Batman <3953314+kamronbatman@users.noreply.github.com>
Date: Sat, 10 Feb 2024 18:56:45 -0800
Subject: [PATCH] fix: Fixes the tooltip for IOS (#1674)
---
Distribution/Data/commands.html | 80 +++++++++++++++++++++-----------
docs/commands/commands.7z | Bin 11583 -> 11821 bytes
2 files changed, 54 insertions(+), 26 deletions(-)
diff --git a/Distribution/Data/commands.html b/Distribution/Data/commands.html
index 27d5f5a5c3..b7ee025c61 100644
--- a/Distribution/Data/commands.html
+++ b/Distribution/Data/commands.html
@@ -467,31 +467,17 @@ Mode
// Add event listeners to modifiers
const modifiers = document.querySelectorAll(".modifier");
- modifiers.forEach(modNode => {
- modNode.addEventListener("mouseenter", (event) => {
- const mod = allModifiers[modNode.dataset.modifier];
- const command = modNode.dataset.command.toLowerCase()
-
- let aliases = "";
- if (mod.accessors.length > 1) {
- aliases = `
Aliases: ${mod.accessors.slice(1).join(", ")}
`;
- }
-
- const usageParts = (mod.usage || mod.accessors[0]).split(" ");
- const usage = `${usageParts[0]} ${usageParts.slice(1).join(" ")}`
- .replace("", command);
+ modifiers.forEach(el => {
+ el.addEventListener("mouseenter", (event) => {
+ showTooltip(el, event);
+ });
- const content = `
- ${mod.accessors[0]}
- Access Level: ${mod.accessLevel}
- ${aliases}
- Usage: ${usage}
- ${mod.description}
- `;
- showTooltip(event, content);
+ el.addEventListener("touchstart", (event) => {
+ showTooltip(el, event, true);
});
- modNode.addEventListener("mouseleave", hideTooltip);
+ el.addEventListener("mouseleave", hideTooltip);
+ // el.addEventListener('touchend', hideTooltip);
});
}
@@ -506,13 +492,40 @@ Mode
});
}
+ let currentShownEl = null;
+
// Function to show the tooltip
- function showTooltip(event, content) {
+ function showTooltip(el, event, isTouchEvent) {
const tooltip = document.getElementById('tooltip');
- tooltip.innerHTML = content;
+
+ if (el === currentShownEl && (tooltip.classList.contains('invisible') || !tooltip.classList.contains('hidden'))) {
+ event.preventDefault();
+ return;
+ }
+
+ currentShownEl = el;
+ const mod = allModifiers[el.dataset.modifier];
+ const command = el.dataset.command.toLowerCase()
+
+ let aliases = "";
+ if (mod.accessors.length > 1) {
+ aliases = `
Aliases: ${mod.accessors.slice(1).join(", ")}
`;
+ }
+
+ const usageParts = (mod.usage || mod.accessors[0]).split(" ");
+ const usage = `${usageParts[0]} ${usageParts.slice(1).join(" ")}`
+ .replace("", command);
+
+ tooltip.innerHTML = `
+ ${mod.accessors[0]}
+ Access Level: ${mod.accessLevel}
+ ${aliases}
+ Usage: ${usage}
+ ${mod.description}
+ `;
// Make it visible to the DOM so we can get size calculations
- tooltip.style.visibility = 'hidden';
+ tooltip.classList.add('invisible');
tooltip.classList.remove('hidden');
const srcRect = event.target.getBoundingClientRect();
@@ -548,15 +561,30 @@ Mode
// Apply the calculated positions
tooltip.style.left = `${leftPosition}px`;
tooltip.style.top = `${topPosition}px`;
- tooltip.style.visibility = 'visible';
+ tooltip.classList.remove('invisible');
+
+ if (isTouchEvent) {
+ // Delay hiding tooltip to allow it to be seen
+ setTimeout(() => {
+ document.addEventListener('touchstart', hideTooltipOnNextTouch, { passive: false });
+ }, 10);
+ }
}
// Function to hide the tooltip
function hideTooltip() {
+ document.removeEventListener('touchstart', hideTooltipOnNextTouch);
const tooltip = document.getElementById("tooltip");
tooltip.classList.add("hidden");
}
+ function hideTooltipOnNextTouch(event) {
+ // Check if the touch is outside the tooltip, if so, hide the tooltip
+ if (event.target !== currentShownEl && !event.target.matches('#tooltip, #tooltip *')) {
+ hideTooltip();
+ } else { event.preventDefault(); }
+ }
+
initTabs();
diff --git a/docs/commands/commands.7z b/docs/commands/commands.7z
index 9c89829d3381af0a88707a99774d73c8a492fe89..79a0f30208a65b29b6687537cbbd3e5a43fef443 100644
GIT binary patch
delta 1261
zcmV