From ab00ca2d69c220da3cae6f02fe4c9a629ed26629 Mon Sep 17 00:00:00 2001
From: Vasily Zubarev <vzubarev@anaconda.com>
Date: Thu, 26 Mar 2020 13:53:04 +0100
Subject: [PATCH] Show tooltip on click on mobile, not on hover

---
 static/js/main.js    | 34 ++++++++++++++++++++++++++++++++++
 templates/board.html |  2 +-
 2 files changed, 35 insertions(+), 1 deletion(-)

diff --git a/static/js/main.js b/static/js/main.js
index 912d7ba..954d156 100644
--- a/static/js/main.js
+++ b/static/js/main.js
@@ -94,8 +94,42 @@ function useSmartTooltipPositioning() {
     }
 }
 
+function showTooltipOnClickOnMobile() {
+    function isMobile() {
+        const userAgent = navigator.userAgent || navigator.vendor || window.opera;
+
+        // Windows Phone must come first because its UA also contains "Android"
+        if (/windows phone/i.test(userAgent)) {
+            return true;
+        }
+
+        if (/android/i.test(userAgent)) {
+            return true;
+        }
+
+        // iOS detection from: http://stackoverflow.com/a/9039885/177710
+        if (/iPad|iPhone|iPod/.test(userAgent) && !window.MSStream) {
+            return true;
+        }
+
+        return false;
+    }
+
+    if (isMobile()) {
+        let articleLinks = document.querySelectorAll(".article-link");
+        for (let i = 0; i < articleLinks.length; i++) {
+            articleLinks[i].addEventListener("click", function(e) {
+                e.preventDefault(); // do not open the link
+                let tooltip = e.target.parentElement.querySelector(".article-tooltip");
+                tooltip.style.visibility = "visible";
+            });
+        }
+    }
+}
+
 
 initializeThemeSwitcher();
+showTooltipOnClickOnMobile();
 hideTooltipOnAnyClick();
 useSmartTooltipPositioning();
 addWeirdLogicThatSomeGeeksWillUseOnceAndForget();
diff --git a/templates/board.html b/templates/board.html
index fc1b5a2..2919e5f 100644
--- a/templates/board.html
+++ b/templates/board.html
@@ -68,7 +68,7 @@
                                     <div class="articles feed-articles">
                                         {% for article in articles %}
                                             <div class="article {% if article.is_fresh %}is-article-fresh{% endif %}">
-                                                <div class="article-title">{{ article.icon|safe }}<a href="{{ article.url }}" target="_blank">{{ article.title|bleach }}</a></div>
+                                                <div class="article-title">{{ article.icon|safe }}<a href="{{ article.url }}" target="_blank" class="article-link">{{ article.title|bleach }}</a></div>
                                                 <a href="{{ article.url }}" class="article-tooltip" target="_blank">
                                                     {% if article.image %}
                                                         <img src="{{ article.image }}" alt="{{ article.title|striptags }}" class="article-tooltip-image">