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
a,← / d,→ = move left / right between topics and media
v = invert topics / media, as per focus
- x = toggle currently focused category and focus next category
- X = toggle currently focused category and focus previous category
+ x,Space = toggle currently focused category and focus next category
+ X,Shift-Space = toggle currently focused category and focus previous category
Credits menu:
@@ -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;
}