From 00951715f9c15faf0dafa446d2d03b4351650f71 Mon Sep 17 00:00:00 2001
From: Max Lipsky <maxlips@yandex.ru>
Date: Fri, 10 Jan 2020 22:26:21 +0300
Subject: [PATCH] Tab navigation (#4)

* Add tab nav
* Add colors as constants
---
 static/css/components.css |  7 +++++++
 static/js/main.js         | 40 ++++++++++++++++++++++++++++++++-------
 2 files changed, 40 insertions(+), 7 deletions(-)

diff --git a/static/css/components.css b/static/css/components.css
index e3b70cc..58a530d 100644
--- a/static/css/components.css
+++ b/static/css/components.css
@@ -254,6 +254,13 @@
         overflow: hidden;
     }
 
+    .article-title a:focus {
+        background-color: var(--opposite-bg-color);
+        color: var(--opposite-text-color);
+        outline-width: 0;
+        text-decoration: none;
+    }
+
     .article-tooltip {
         display: none;
         position: absolute;
diff --git a/static/js/main.js b/static/js/main.js
index fc8288d..dcae22d 100644
--- a/static/js/main.js
+++ b/static/js/main.js
@@ -19,16 +19,42 @@ function initializeThemeSwitcher() {
     }
 }
 
+function hideTooltip() {
+    let visibleTooltips = document.querySelectorAll(".article-tooltip");
+    for (let i = 0; i < visibleTooltips.length; i++) {
+        if (visibleTooltips[i].style.display !== "none") {
+            visibleTooltips[i].style.display = null;
+        }
+    }
+}
+
 function hideTooltipOnAnyClick() {
     document.body.addEventListener("click", function(e) {
-        const visibleTooltips = document.querySelectorAll(".article-tooltip");
-        for (let i = 0; i < visibleTooltips.length; i++) {
-            if (visibleTooltips[i].style.display !== "none") {
-                visibleTooltips[i].style.display = "none";
-            }
-        }
+        hideTooltip();
     }, true);
 }
 
+function checkKeyPress(e) {
+
+    let tooltip;
+
+    if (e.keyCode == 81) {
+        tooltip = document.activeElement.parentNode.parentNode.querySelector('.article-tooltip');
+        if (tooltip.style.display == "block") {
+            tooltip.style.display = null;
+        } else {
+            tooltip.style.display = "block";
+        }
+    }
+
+    if (e.keyCode == 9) {
+        hideTooltip();
+    }
+}
+
+let body = document.querySelector('body');
+body.addEventListener('keyup', checkKeyPress);
+
+
 initializeThemeSwitcher();
-// hideTooltipOnAnyClick();
+hideTooltipOnAnyClick();