Backport 'Profile tooltip expansion on mobile' to v0.29 (decidim#13751)

Co-authored-by: Tom Greenwood <101816158+greenwoodt@users.noreply.github.com>
Co-authored-by: Andrés Pereira de Lucena <andreslucena@users.noreply.github.com>

.github/actions/spelling/expect.txt

@@ -541,6 +541,7 @@ misogi
 mlat
 mlon
 Moby
+Mobi
 modals
 modernizr
 modernizrrc

decidim-core/app/packs/src/decidim/toggle.js

@@ -9,7 +9,7 @@ export default function createToggle(component) {
   const { toggle } = component.dataset
 
   if (!component.id) {
-    // when component has no id, we enforce to have it one
+    // when component has no id, we enforce it to have one
     component.id = `toggle-${Math.random().toString(36).substring(7)}`
   }
 

decidim-core/app/packs/src/decidim/tooltips.js

@@ -63,9 +63,32 @@ export default function(node) {
   // append to dom hidden, to apply css transitions
   tooltip.setAttribute("aria-hidden", true)
 
-  const append = () => {
-    // do nothing if the tooltip is already present at the DOM
+  // used to detect if the user is on a mobile device by checking the user agent
+  const useMobile = (/Mobi|Android/i).test(navigator.userAgent);
+
+  // used not to collapse tooltip
+  let removeTooltip = () => {
+    tooltip.setAttribute("aria-hidden", "true");
+  }
+
+  // used to allow clicks outside the tooltip to take place on the page or device
+  const OutsideClick = (event) => {
+    if (!tooltip.contains(event.target) && event.target !== node) {
+      removeTooltip();
+    }
+  }
+
+  // function called again to allow clicks outside the tooltip to collapse the tooltip
+  removeTooltip = () => {
+    tooltip.setAttribute("aria-hidden", "true");
+    document.removeEventListener("click", OutsideClick)
+  }
+
+  const toggleTooltip = (event) => {
+    event.preventDefault();
+    // if the tooltip is visible in the DOM, hide it otherwise display
     if (tooltip.getAttribute("aria-hidden") === "false") {
+      tooltip.setAttribute("aria-hidden", "true");
       return
     }
 
@@ -106,27 +129,24 @@ export default function(node) {
     tooltip.style.left = `${positionX}px`
 
     tooltip.setAttribute("aria-hidden", false)
-  }
-
-  // in order to revoke the remove event when the mouse is over the trigger/tooltip
-  let cancelRemove = false
 
-  const remove = () => {
-    cancelRemove = false
-    // give some sleep time before hiding the element from the DOM
-    setTimeout(() => !cancelRemove && tooltip.setAttribute("aria-hidden", true), 500);
+    // sleep time before hiding the element from the DOM
+    setTimeout(() => document.addEventListener("click", OutsideClick))
   }
 
-  // keyboard listener is at root-level
-  window.addEventListener("keydown", (event) => event.key === "Escape" && remove())
-
-  node.addEventListener("mouseenter", append)
-  node.addEventListener("mouseleave", remove)
-  node.addEventListener("focus", append)
-  node.addEventListener("blur", remove)
-  tooltip.addEventListener("mouseenter", () => tooltip.setAttribute("aria-hidden", false))
-  tooltip.addEventListener("mouseleave", remove)
-
-  node.addEventListener("mouseover", () => (cancelRemove = true))
-  tooltip.addEventListener("mouseover", () => (cancelRemove = true))
+  if (useMobile) {
+    // mobile use to click and toggle the tooltip
+    node.addEventListener("click", toggleTooltip);
+    window.addEventListener("keydown", (event) => event.key === "Escape" && removeTooltip())
+  } else {
+    // desktop use for hover and blur over tooltip
+    node.addEventListener("mouseenter", toggleTooltip)
+    node.addEventListener("mouseleave", removeTooltip)
+    node.addEventListener("focus", toggleTooltip)
+    node.addEventListener("blur", removeTooltip)
+
+    // tooltip hover listeners to prevent hiding when hovered
+    tooltip.addEventListener("mouseenter", () => tooltip.setAttribute("aria-hidden", false))
+    tooltip.addEventListener("mouseleave", removeTooltip)
+  }
 }