diff --git a/Distribution/Data/commands.html b/Distribution/Data/commands.html index 27d5f5a5c..b7ee025c6 100644 --- a/Distribution/Data/commands.html +++ b/Distribution/Data/commands.html @@ -467,31 +467,17 @@ // 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("${mod.accessors[0]}
-Access Level: ${mod.accessLevel}
- ${aliases} -Usage: ${usage}
-${mod.description}
- `; - showTooltip(event, content); + modifiers.forEach(el => { + el.addEventListener("mouseenter", (event) => { + showTooltip(el, event); }); - modNode.addEventListener("mouseleave", hideTooltip); + el.addEventListener("touchstart", (event) => { + showTooltip(el, event, true); + }); + + el.addEventListener("mouseleave", hideTooltip); + // el.addEventListener('touchend', hideTooltip); }); } @@ -506,13 +492,40 @@ }); } + 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("${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 @@ // 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();