From 4eb2f8af1c979509f16e79f8b2355d66e2ffa4d4 Mon Sep 17 00:00:00 2001
From: Matt Mascarenhas <matt@handmadedev.org>
Date: Tue, 30 May 2017 01:07:13 +0100
Subject: [PATCH] mock_keys.html: Keyboard and mouse together [#24]

---
 hmml_to_html/mock_keys.html | 172 ++++++++++++++++++++++++++++++++++--
 hmml_to_html/riscy.css      |  17 ++--
 hmml_to_html/style.css      |   8 +-
 3 files changed, 179 insertions(+), 18 deletions(-)

diff --git a/hmml_to_html/mock_keys.html b/hmml_to_html/mock_keys.html
index cc81210..75d3afb 100644
--- a/hmml_to_html/mock_keys.html
+++ b/hmml_to_html/mock_keys.html
@@ -234,8 +234,8 @@
                     w,↑ / s,↓ = focus previous / next category<br>
                     a,← / d,→ = move left / right between topics and media<br>
                     v = invert topics / media, as per focus<br>
-                    x = toggle currently focused category and focus next category<br>
-                    X = toggle currently focused category and focus previous category<br>
+                    x,Space = toggle currently focused category and focus next category<br>
+                    X,Shift-Space = toggle currently focused category and focus previous category<br>
                 </p>
 
                 <p>Credits menu:<br>
@@ -634,7 +634,7 @@ function handleKey(key)
             }
         } break;
 
-        case "x": {
+        case "x": case " ": {
             if(focusedElement && focusedElement.classList.contains("filter_content"))
             {
                 filterItemToggle(focusedElement);
@@ -648,7 +648,7 @@ function handleKey(key)
             }
         } break;
 
-        case "X": {
+        case "X": case "capitalSpace": {
             if(focusedElement && focusedElement.classList.contains("filter_content"))
             {
                 filterItemToggle(focusedElement);
@@ -697,13 +697,173 @@ function handleKey(key)
 
 var player = new Player(document.querySelector(".player_container"), onRefChanged);
 window.addEventListener("resize", function() { player.updateSize(); });
-document.addEventListener("keypress", function(ev) {
-    if(handleKey(ev.key) == true && focusedElement)
+document.addEventListener("keydown", function(ev) {
+    var key = ev.key;
+    if(ev.getModifierState("Shift") && key == " ")
+    {
+        key = "capitalSpace";
+    }
+
+    if(handleKey(key) == true && focusedElement)
     {
         ev.preventDefault();
     }
 });
 
+var menuButtons = document.querySelectorAll(".menu");
+
+for(var i = 0; i < menuButtons.length; ++i)
+{
+    menuButtons[i].addEventListener("mouseenter", function(ev) {
+        {
+            if(!this.classList.contains("visible"))
+            {
+                if(this.classList.contains("quotes"))
+                {
+                    toggleMenuVisibility(quotesMenu);
+                }
+                else if(this.classList.contains("references"))
+                {
+                    toggleMenuVisibility(referencesMenu);
+                }
+                else if(this.classList.contains("filter"))
+                {
+                    toggleMenuVisibility(filterMenu);
+                }
+                else if(this.classList.contains("credits"))
+                {
+                    toggleMenuVisibility(creditsMenu);
+                }
+            }
+        }
+    })
+};
+
+for(var i = 0; i < menuButtons.length; ++i)
+{
+    menuButtons[i].addEventListener("mouseleave", function(ev) {
+        {
+            if(this.classList.contains("visible"))
+            {
+                if(this.classList.contains("quotes"))
+                {
+                    toggleMenuVisibility(quotesMenu);
+                }
+                else if(this.classList.contains("references"))
+                {
+                    toggleMenuVisibility(referencesMenu);
+                }
+                else if(this.classList.contains("filter"))
+                {
+                    toggleMenuVisibility(filterMenu);
+                }
+                else if(this.classList.contains("credits"))
+                {
+                    toggleMenuVisibility(creditsMenu);
+                }
+            }
+        }
+    })
+};
+
+for(var i = 0; i < quoteItems.length; ++i)
+{
+    quoteItems[i].addEventListener("mouseenter", function(ev) {
+        {
+            if(focusedElement && this != lastFocusedQuote)
+            {
+                focusedElement.classList.remove("focused");
+                lastFocusedQuote = this;
+                focusedElement = lastFocusedQuote;
+                focusedElement.classList.add("focused");
+            }
+        }
+    })
+};
+
+referenceItems = referencesMenu.querySelectorAll(".ref");
+for(var i = 0; i < referenceItems.length; ++i)
+{
+    referenceItems[i].addEventListener("mouseenter", function(ev) {
+        {
+            if(focusedElement && this != lastFocusedReference)
+            {
+                focusedElement.classList.remove("focused")
+                lastFocusedReference = this;
+            }
+            focusedElement = lastFocusedReference;
+            focusedElement.classList.add("focused");
+
+            var ourIdentifiers = this.querySelector(".ref_indices").children;
+            weWereLastFocused = false;
+            for(var k = 0; k < ourIdentifiers.length; ++k)
+            {
+                if(ourIdentifiers[k] == lastFocusedIdentifier)
+                {
+                    weWereLastFocused = true;
+                }
+            }
+            if(!weWereLastFocused)
+            {
+                lastFocusedIdentifier.classList.remove("focused");
+                lastFocusedIdentifier = this.querySelector(".ref_indices").firstElementChild;
+            }
+            focusedIdentifer = lastFocusedIdentifier;
+            focusedIdentifer.classList.add("focused");
+
+            for(var l = 0; l < ourIdentifiers.length; ++l)
+            {
+                ourIdentifiers[l].addEventListener("mouseenter", function(ev) {
+                    if(this != lastFocusedIdentifier)
+                    {
+                        lastFocusedIdentifier.classList.remove("focused");
+                        lastFocusedIdentifier = this;
+                        lastFocusedIdentifier.classList.add("focused");
+                    }
+                })
+            }
+
+        }
+    })
+};
+
+var filterItems = filterMenu.querySelectorAll(".filter_content");
+for(var i = 0; i < filterItems.length; ++i)
+{
+    filterItems[i].addEventListener("mouseenter", function(ev) {
+        if(this != lastFocusedCategory)
+        {
+            lastFocusedCategory.classList.remove("focused");
+            if(this.parentNode.classList.contains("filter_topics"))
+            {
+                lastFocusedTopic = this;
+                lastFocusedCategory = lastFocusedTopic;
+            }
+            else
+            {
+                lastFocusedMedium = this;
+                lastFocusedCategory = lastFocusedMedium;
+            }
+            focusedElement = lastFocusedCategory;
+            focusedElement.classList.add("focused");
+        }
+    })
+};
+
+var creditItems = creditsMenu.querySelectorAll(".person, .support");
+for(var i = 0; i < creditItems.length; ++i)
+{
+    creditItems[i].addEventListener("mouseenter", function(ev) {
+        if(this != lastFocusedCreditItem)
+        {
+           lastFocusedCreditItem.classList.remove("focused");
+           lastFocusedCreditItem = this;
+           focusedElement = lastFocusedCreditItem;
+           focusedElement.classList.add("focused");
+        }
+    })
+}
+
 var refTimecodes = document.querySelectorAll(".refs .ref .timecode");
 for (var i = 0; i < refTimecodes.length; ++i) {
     refTimecodes[i].addEventListener("click", function(ev) {
diff --git a/hmml_to_html/riscy.css b/hmml_to_html/riscy.css
index 3ff6b59..1cd74ea 100644
--- a/hmml_to_html/riscy.css
+++ b/hmml_to_html/riscy.css
@@ -13,7 +13,8 @@
 
 .title.riscy,
 .title.riscy > .menu > .refs .ref,
-.title.riscy > .menu > .refs .ref .timecode:hover::before,
+/*.title.riscy > .menu > .refs .ref .timecode:hover:before,*/
+.title.riscy > .menu > .refs .ref .timecode.focused:before,
 .title.riscy > .menu > .credits_container .credit .name,
 .markers_container.riscy > .marker > .content {
     color: #000;
@@ -28,7 +29,7 @@
     box-shadow: inset 0px 0px 30px #2A3172;
 }
 
-.title.riscy > .menu > .refs .ref .ref_indices .timecode:hover,
+/*.title.riscy > .menu > .refs .ref .ref_indices .timecode:hover,*/
 .title.riscy > .menu > .refs .ref .ref_indices .timecode.focused,
 .markers_container.riscy > .marker.current > .content {
     color: #2A3172;
@@ -38,18 +39,18 @@
 color: rgb(246, 178, 26);
 }
 
-.title.riscy > .menu:hover,
+/*.title.riscy > .menu:hover,*/
 .title.riscy > .menu.visible,
 
-.title.riscy > .menu > .refs .ref:hover,
+/*.title.riscy > .menu > .refs .ref:hover,*/
 .title.riscy > .menu > .quotes_container .ref.focused,
 .title.riscy > .menu > .references_container .ref.focused,
 
 .title.riscy > .menu > .filter_container .filter_mode:hover,
-.title.riscy > .menu > .filter_container .filter_content:hover,
+/*.title.riscy > .menu > .filter_container .filter_content:hover,*/
 .title.riscy > .menu > .filter_container .filter_content.focused,
 
-.title.riscy > .menu > .credits_container .credit *:hover,
+/*.title.riscy > .menu > .credits_container .credit *:hover,*/
 .title.riscy > .menu > .credits_container .credit *.focused,
 
 .markers_container.riscy > .marker:hover > .content {
@@ -63,7 +64,7 @@ color: rgb(246, 178, 26);
 }
 
 .title.riscy > .menu > .refs .ref.current,
-.title.riscy > .menu > .refs .ref.current .timecode:hover::before,
+/*.title.riscy > .menu > .refs .ref.current .timecode:hover:before,*/
 .markers_container.riscy > .marker > .progress .content {
     color: #FFF;
 }
@@ -73,7 +74,7 @@ color: rgb(246, 178, 26);
     background-color: rgb(42, 49, 114);
 }
 
-.title.riscy > .menu > .refs .ref.current:hover,
+/*.title.riscy > .menu > .refs .ref.current:hover,*/
 .markers_container.riscy > .marker:hover > .faded .content {
     background-color: rgba(42, 49, 114, 0.7);
 }
diff --git a/hmml_to_html/style.css b/hmml_to_html/style.css
index 25dc0b7..8f3b19d 100644
--- a/hmml_to_html/style.css
+++ b/hmml_to_html/style.css
@@ -63,13 +63,13 @@
     min-width: 240px;
 }
 
-.title > .menu:hover .refs,
+/*.title > .menu:hover .refs,*/
 .title > .menu.quotes .refs.visible,
 .title > .menu.references .refs.visible,
-.title > .menu:hover .filter_container,
+/*.title > .menu:hover .filter_container,*/
 .title > .menu.filter .filter_container.visible,
-.title > .menu.credits .credits_container.visible,
-.title > .menu:hover .credits_container {
+.title > .menu.credits .credits_container.visible {
+/*.title > .menu:hover .credits_container {*/
     display: block;
 }