Annotation-Pushers
/
Annotation-System
1
Fork 0
Code Issues 1 Pull Requests Projects Releases Wiki Activity

mock_keys.html: Keyboard and mouse together [#24]

This commit is contained in:
Matt Mascarenhas 2017-05-30 01:07:13 +01:00
parent e6cf2689a3
commit 4eb2f8af1c
3 changed files with 179 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

172
hmml_to_html/mock_keys.html
View File

@ -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) {

17
hmml_to_html/riscy.css
View File

@ -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);
}

8
hmml_to_html/style.css
View File

@ -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;
}