mock_keys.html: Statefulness and filter [#24]
This commit is contained in:
parent
bfc145e8df
commit
e6cf2689a3
|
@ -203,6 +203,47 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<div>
|
||||||
|
<p>Temporary Keybinding Documentation:</p>
|
||||||
|
|
||||||
|
<p>Menu toggling:<br>
|
||||||
|
q = quotes<br>
|
||||||
|
r = references<br>
|
||||||
|
f = filter<br>
|
||||||
|
c = credits<br>
|
||||||
|
|
||||||
|
<p>Global Keys:<br>
|
||||||
|
W,A,P / S,D,N = jump to previous / next marker<br>
|
||||||
|
V = Reset filter<br>
|
||||||
|
z = Toggle filter mode between "inclusive" and "exclusive"<br>
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<p>Quote menu:<br>
|
||||||
|
w,↑ / s,↓ = focus previous / next quote<br>
|
||||||
|
Enter = jump to marker<br>
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<p>Reference menu:<br>
|
||||||
|
w,↑ / s,↓ = focus previous / next reference<br>
|
||||||
|
a,← / d,→ = focus previous / next identifier of current reference<br>
|
||||||
|
Enter = jump to marker<br>
|
||||||
|
o = follow link to current reference<br>
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<p>Filter menu:<br>
|
||||||
|
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>
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<p>Credits menu:<br>
|
||||||
|
w,↑ / s,↓ = focus previous / next credit<br>
|
||||||
|
a,← / d,→ = move left / right between homepage / support urls<br>
|
||||||
|
Enter / o = follow currently focused link<br>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
<script>
|
<script>
|
||||||
|
|
||||||
var quotesMenu = document.querySelector(".quotes_container");
|
var quotesMenu = document.querySelector(".quotes_container");
|
||||||
|
@ -219,8 +260,16 @@ var menuState = {
|
||||||
creditsMenu
|
creditsMenu
|
||||||
};
|
};
|
||||||
|
|
||||||
var focusedElement;
|
var focusedElement = null;
|
||||||
var focusedIdentifier;
|
var focusedIdentifier = null;
|
||||||
|
|
||||||
|
var lastFocusedQuote = null;
|
||||||
|
var lastFocusedReference = null;
|
||||||
|
var lastFocusedIdentifier = null;
|
||||||
|
var lastFocusedCategory = null;
|
||||||
|
var lastFocusedTopic = null;
|
||||||
|
var lastFocusedMedium = null;
|
||||||
|
var lastFocusedCreditItem = null;
|
||||||
|
|
||||||
function toggleMenuVisibility(element) {
|
function toggleMenuVisibility(element) {
|
||||||
if(element.classList.contains("visible"))
|
if(element.classList.contains("visible"))
|
||||||
|
@ -229,45 +278,74 @@ function toggleMenuVisibility(element) {
|
||||||
element.parentNode.classList.remove("visible");
|
element.parentNode.classList.remove("visible");
|
||||||
focusedElement.classList.remove("focused");
|
focusedElement.classList.remove("focused");
|
||||||
focusedElement = null;
|
focusedElement = null;
|
||||||
|
if(focusedIdentifier)
|
||||||
|
{
|
||||||
|
focusedIdentifier.classList.remove("focused");
|
||||||
focusedIdentifier = null;
|
focusedIdentifier = null;
|
||||||
}
|
}
|
||||||
|
}
|
||||||
else
|
else
|
||||||
{
|
{
|
||||||
for(menuIndex in menuState)
|
for(menuIndex in menuState)
|
||||||
{
|
{
|
||||||
menuState[menuIndex].classList.remove("visible");
|
menuState[menuIndex].classList.remove("visible");
|
||||||
menuState[menuIndex].parentNode.classList.remove("visible");
|
menuState[menuIndex].parentNode.classList.remove("visible");
|
||||||
|
if(focusedElement)
|
||||||
|
{
|
||||||
|
focusedElement.classList.remove("focused");
|
||||||
|
}
|
||||||
|
if(focusedIdentifier)
|
||||||
|
{
|
||||||
|
focusedIdentifier.classList.remove("focused");
|
||||||
|
}
|
||||||
}
|
}
|
||||||
element.classList.add("visible");
|
element.classList.add("visible");
|
||||||
element.parentNode.classList.add("visible");
|
element.parentNode.classList.add("visible");
|
||||||
|
|
||||||
if(element.classList.contains("quotes_container"))
|
if(element.classList.contains("quotes_container"))
|
||||||
{
|
{
|
||||||
focusedElement = element.querySelectorAll(".ref")[0];
|
if(!lastFocusedQuote)
|
||||||
|
{
|
||||||
|
lastFocusedQuote = element.querySelectorAll(".ref")[0];
|
||||||
|
}
|
||||||
|
focusedElement = lastFocusedQuote;
|
||||||
focusedElement.classList.add("focused");
|
focusedElement.classList.add("focused");
|
||||||
}
|
}
|
||||||
else if(element.classList.contains("references_container"))
|
else if(element.classList.contains("references_container"))
|
||||||
{
|
{
|
||||||
focusedElement = element.querySelectorAll(".ref")[0];
|
if(!lastFocusedReference || !lastFocusedIdentifier)
|
||||||
|
{
|
||||||
|
lastFocusedReference = element.querySelectorAll(".ref")[0];
|
||||||
|
lastFocusedIdentifier = lastFocusedReference.querySelector(".ref_indices").firstElementChild;
|
||||||
|
}
|
||||||
|
focusedElement = lastFocusedReference;
|
||||||
focusedElement.classList.add("focused");
|
focusedElement.classList.add("focused");
|
||||||
focusedIdentifier = focusedElement.querySelector(".ref_indices").firstElementChild;
|
focusedIdentifier = lastFocusedIdentifier;
|
||||||
focusedIdentifier.classList.add("focused");
|
focusedIdentifier.classList.add("focused");
|
||||||
}
|
}
|
||||||
else if(element.classList.contains("filter_container"))
|
else if(element.classList.contains("filter_container"))
|
||||||
{
|
{
|
||||||
focusedElement = element.querySelectorAll(".filter_content")[0];
|
if(!lastFocusedCategory)
|
||||||
|
{
|
||||||
|
lastFocusedCategory = element.querySelectorAll(".filter_content")[0];
|
||||||
|
}
|
||||||
|
focusedElement = lastFocusedCategory;
|
||||||
focusedElement.classList.add("focused");
|
focusedElement.classList.add("focused");
|
||||||
}
|
}
|
||||||
else if(element.classList.contains("credits_container"))
|
else if(element.classList.contains("credits_container"))
|
||||||
|
{
|
||||||
|
if(!lastFocusedCreditItem)
|
||||||
{
|
{
|
||||||
if(element.querySelectorAll(".credit .support")[0])
|
if(element.querySelectorAll(".credit .support")[0])
|
||||||
{
|
{
|
||||||
focusedElement = element.querySelectorAll(".credit .support")[0];
|
lastFocusedCreditItem = element.querySelectorAll(".credit .support")[0];
|
||||||
}
|
}
|
||||||
else
|
else
|
||||||
{
|
{
|
||||||
focusedElement = element.querySelectorAll(".credit .person")[0];
|
lastFocusedCreditItem = element.querySelectorAll(".credit .person")[0];
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
focusedElement = lastFocusedCreditItem;
|
||||||
focusedElement.classList.add("focused");
|
focusedElement.classList.add("focused");
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -275,6 +353,7 @@ function toggleMenuVisibility(element) {
|
||||||
|
|
||||||
function handleKey(key)
|
function handleKey(key)
|
||||||
{
|
{
|
||||||
|
var gotKey = true;
|
||||||
switch (key) {
|
switch (key) {
|
||||||
case "q": {
|
case "q": {
|
||||||
toggleMenuVisibility(quotesMenu)
|
toggleMenuVisibility(quotesMenu)
|
||||||
|
@ -290,6 +369,8 @@ function handleKey(key)
|
||||||
} break;
|
} break;
|
||||||
|
|
||||||
case "Enter": {
|
case "Enter": {
|
||||||
|
if(focusedElement)
|
||||||
|
{
|
||||||
if(focusedElement.parentNode.classList.contains("quotes_container"))
|
if(focusedElement.parentNode.classList.contains("quotes_container"))
|
||||||
{
|
{
|
||||||
var time = focusedElement.querySelector(".timecode").getAttribute("data-timestamp");
|
var time = focusedElement.querySelector(".timecode").getAttribute("data-timestamp");
|
||||||
|
@ -310,6 +391,7 @@ function handleKey(key)
|
||||||
window.open(url, "_blank");
|
window.open(url, "_blank");
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
}
|
||||||
else
|
else
|
||||||
{
|
{
|
||||||
console.log("TODO(matt): Implement me, perhaps?\n");
|
console.log("TODO(matt): Implement me, perhaps?\n");
|
||||||
|
@ -317,6 +399,8 @@ function handleKey(key)
|
||||||
} break;
|
} break;
|
||||||
|
|
||||||
case "o": {
|
case "o": {
|
||||||
|
if(focusedElement)
|
||||||
|
{
|
||||||
if(focusedElement.parentNode.classList.contains("references_container"))
|
if(focusedElement.parentNode.classList.contains("references_container"))
|
||||||
{
|
{
|
||||||
var url = focusedElement.getAttribute("href");
|
var url = focusedElement.getAttribute("href");
|
||||||
|
@ -330,15 +414,20 @@ function handleKey(key)
|
||||||
window.open(url, "_blank");
|
window.open(url, "_blank");
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
}
|
||||||
} break;
|
} break;
|
||||||
|
|
||||||
case "w": {
|
case "w": case "ArrowUp": {
|
||||||
|
if(focusedElement)
|
||||||
|
{
|
||||||
if(focusedElement.parentNode.classList.contains("quotes_container"))
|
if(focusedElement.parentNode.classList.contains("quotes_container"))
|
||||||
{
|
{
|
||||||
if(focusedElement.previousElementSibling)
|
if(focusedElement.previousElementSibling)
|
||||||
{
|
{
|
||||||
focusedElement.classList.remove("focused");
|
focusedElement.classList.remove("focused");
|
||||||
focusedElement = focusedElement.previousElementSibling;
|
|
||||||
|
lastFocusedQuote = focusedElement.previousElementSibling;
|
||||||
|
focusedElement = lastFocusedQuote;
|
||||||
focusedElement.classList.add("focused");
|
focusedElement.classList.add("focused");
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -348,9 +437,13 @@ function handleKey(key)
|
||||||
{
|
{
|
||||||
focusedElement.classList.remove("focused");
|
focusedElement.classList.remove("focused");
|
||||||
focusedIdentifier.classList.remove("focused");
|
focusedIdentifier.classList.remove("focused");
|
||||||
focusedElement = focusedElement.previousElementSibling;
|
|
||||||
|
lastFocusedReference = focusedElement.previousElementSibling;
|
||||||
|
focusedElement = lastFocusedReference;
|
||||||
focusedElement.classList.add("focused");
|
focusedElement.classList.add("focused");
|
||||||
focusedIdentifier = focusedElement.querySelector(".ref_indices").firstElementChild;
|
|
||||||
|
lastFocusedIdentifier = focusedElement.querySelector(".ref_indices").firstElementChild;
|
||||||
|
focusedIdentifier = lastFocusedIdentifier;
|
||||||
focusedIdentifier.classList.add("focused");
|
focusedIdentifier.classList.add("focused");
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -360,7 +453,9 @@ function handleKey(key)
|
||||||
focusedElement.previousElementSibling.classList.contains("filter_content"))
|
focusedElement.previousElementSibling.classList.contains("filter_content"))
|
||||||
{
|
{
|
||||||
focusedElement.classList.remove("focused");
|
focusedElement.classList.remove("focused");
|
||||||
focusedElement = focusedElement.previousElementSibling;
|
|
||||||
|
lastFocusedCategory = focusedElement.previousElementSibling;
|
||||||
|
focusedElement = lastFocusedCategory;
|
||||||
focusedElement.classList.add("focused");
|
focusedElement.classList.add("focused");
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -372,24 +467,31 @@ function handleKey(key)
|
||||||
if(focusedElement.parentNode.previousElementSibling.querySelector(".support") &&
|
if(focusedElement.parentNode.previousElementSibling.querySelector(".support") &&
|
||||||
focusedElement.classList.contains("support"))
|
focusedElement.classList.contains("support"))
|
||||||
{
|
{
|
||||||
focusedElement = focusedElement.parentNode.previousElementSibling.querySelector(".support");
|
lastFocusedCreditItem = focusedElement.parentNode.previousElementSibling.querySelector(".support");
|
||||||
|
focusedElement = lastFocusedCreditItem;
|
||||||
}
|
}
|
||||||
else
|
else
|
||||||
{
|
{
|
||||||
focusedElement = focusedElement.parentNode.previousElementSibling.querySelector(".person");
|
lastFocusedCreditItem = focusedElement.parentNode.previousElementSibling.querySelector(".person");
|
||||||
|
focusedElement = lastFocusedCreditItem;
|
||||||
}
|
}
|
||||||
focusedElement.classList.add("focused");
|
focusedElement.classList.add("focused");
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
}
|
||||||
} break;
|
} break;
|
||||||
|
|
||||||
case "s": {
|
case "s": case "ArrowDown": {
|
||||||
|
if(focusedElement)
|
||||||
|
{
|
||||||
if(focusedElement.parentNode.classList.contains("quotes_container"))
|
if(focusedElement.parentNode.classList.contains("quotes_container"))
|
||||||
{
|
{
|
||||||
if(focusedElement.nextElementSibling)
|
if(focusedElement.nextElementSibling)
|
||||||
{
|
{
|
||||||
focusedElement.classList.remove("focused");
|
focusedElement.classList.remove("focused");
|
||||||
focusedElement = focusedElement.nextElementSibling;
|
|
||||||
|
lastFocusedQuote = focusedElement.nextElementSibling;
|
||||||
|
focusedElement = lastFocusedQuote;
|
||||||
focusedElement.classList.add("focused");
|
focusedElement.classList.add("focused");
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -399,9 +501,13 @@ function handleKey(key)
|
||||||
{
|
{
|
||||||
focusedElement.classList.remove("focused");
|
focusedElement.classList.remove("focused");
|
||||||
focusedIdentifier.classList.remove("focused");
|
focusedIdentifier.classList.remove("focused");
|
||||||
focusedElement = focusedElement.nextElementSibling;
|
|
||||||
|
lastFocusedReference = focusedElement.nextElementSibling;
|
||||||
|
focusedElement = lastFocusedReference;
|
||||||
focusedElement.classList.add("focused");
|
focusedElement.classList.add("focused");
|
||||||
focusedIdentifier = focusedElement.querySelector(".ref_indices").firstElementChild;
|
|
||||||
|
lastFocusedIdentifier = focusedElement.querySelector(".ref_indices").firstElementChild;
|
||||||
|
focusedIdentifier = lastFocusedIdentifier;
|
||||||
focusedIdentifier.classList.add("focused");
|
focusedIdentifier.classList.add("focused");
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -411,7 +517,9 @@ function handleKey(key)
|
||||||
focusedElement.nextElementSibling.classList.contains("filter_content"))
|
focusedElement.nextElementSibling.classList.contains("filter_content"))
|
||||||
{
|
{
|
||||||
focusedElement.classList.remove("focused");
|
focusedElement.classList.remove("focused");
|
||||||
focusedElement = focusedElement.nextElementSibling;
|
|
||||||
|
lastFocusedCategory = focusedElement.nextElementSibling;
|
||||||
|
focusedElement = lastFocusedCategory;
|
||||||
focusedElement.classList.add("focused");
|
focusedElement.classList.add("focused");
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -423,24 +531,31 @@ function handleKey(key)
|
||||||
if(focusedElement.parentNode.nextElementSibling.querySelector(".support") &&
|
if(focusedElement.parentNode.nextElementSibling.querySelector(".support") &&
|
||||||
focusedElement.classList.contains("support"))
|
focusedElement.classList.contains("support"))
|
||||||
{
|
{
|
||||||
focusedElement = focusedElement.parentNode.nextElementSibling.querySelector(".support");
|
lastFocusedCreditItem = focusedElement.parentNode.nextElementSibling.querySelector(".support");
|
||||||
|
focusedElement = lastFocusedCreditItem;
|
||||||
}
|
}
|
||||||
else
|
else
|
||||||
{
|
{
|
||||||
focusedElement = focusedElement.parentNode.nextElementSibling.querySelector(".person");
|
lastFocusedCreditItem = focusedElement.parentNode.nextElementSibling.querySelector(".person");
|
||||||
|
focusedElement = lastFocusedCreditItem;
|
||||||
}
|
}
|
||||||
focusedElement.classList.add("focused");
|
focusedElement.classList.add("focused");
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
}
|
||||||
} break;
|
} break;
|
||||||
|
|
||||||
case "a": {
|
case "a": case "ArrowLeft": {
|
||||||
|
if(focusedElement)
|
||||||
|
{
|
||||||
if(focusedElement.parentNode.classList.contains("references_container"))
|
if(focusedElement.parentNode.classList.contains("references_container"))
|
||||||
{
|
{
|
||||||
if(focusedIdentifier.previousElementSibling)
|
if(focusedIdentifier.previousElementSibling)
|
||||||
{
|
{
|
||||||
focusedIdentifier.classList.remove("focused");
|
focusedIdentifier.classList.remove("focused");
|
||||||
focusedIdentifier = focusedIdentifier.previousElementSibling;
|
|
||||||
|
lastFocusedIdentifier = focusedIdentifier.previousElementSibling;
|
||||||
|
focusedIdentifier = lastFocusedIdentifier;
|
||||||
focusedIdentifier.classList.add("focused");
|
focusedIdentifier.classList.add("focused");
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -449,7 +564,14 @@ function handleKey(key)
|
||||||
if(focusedElement.parentNode.classList.contains("filter_media"))
|
if(focusedElement.parentNode.classList.contains("filter_media"))
|
||||||
{
|
{
|
||||||
focusedElement.classList.remove("focused");
|
focusedElement.classList.remove("focused");
|
||||||
focusedElement = focusedElement.parentNode.previousElementSibling.children[1];
|
lastFocusedMedium = focusedElement;
|
||||||
|
|
||||||
|
if(!lastFocusedTopic)
|
||||||
|
{
|
||||||
|
lastFocusedTopic = focusedElement.parentNode.previousElementSibling.children[1];
|
||||||
|
}
|
||||||
|
lastFocusedCategory = lastFocusedTopic;
|
||||||
|
focusedElement = lastFocusedCategory;
|
||||||
focusedElement.classList.add("focused");
|
focusedElement.classList.add("focused");
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -458,19 +580,26 @@ function handleKey(key)
|
||||||
if(focusedElement.classList.contains("support"))
|
if(focusedElement.classList.contains("support"))
|
||||||
{
|
{
|
||||||
focusedElement.classList.remove("focused");
|
focusedElement.classList.remove("focused");
|
||||||
focusedElement = focusedElement.previousElementSibling;
|
|
||||||
|
lastFocusedCreditItem = focusedElement.previousElementSibling;
|
||||||
|
focusedElement = lastFocusedCreditItem;
|
||||||
focusedElement.classList.add("focused");
|
focusedElement.classList.add("focused");
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
}
|
||||||
} break;
|
} break;
|
||||||
|
|
||||||
case "d": {
|
case "d": case "ArrowRight": {
|
||||||
|
if(focusedElement)
|
||||||
|
{
|
||||||
if(focusedElement.parentNode.classList.contains("references_container"))
|
if(focusedElement.parentNode.classList.contains("references_container"))
|
||||||
{
|
{
|
||||||
if(focusedIdentifier.nextElementSibling)
|
if(focusedIdentifier.nextElementSibling)
|
||||||
{
|
{
|
||||||
focusedIdentifier.classList.remove("focused");
|
focusedIdentifier.classList.remove("focused");
|
||||||
focusedIdentifier = focusedIdentifier.nextElementSibling;
|
|
||||||
|
lastFocusedIdentifier = focusedIdentifier.nextElementSibling;
|
||||||
|
focusedIdentifier = lastFocusedIdentifier;
|
||||||
focusedIdentifier.classList.add("focused");
|
focusedIdentifier.classList.add("focused");
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -479,7 +608,14 @@ function handleKey(key)
|
||||||
if(focusedElement.parentNode.classList.contains("filter_topics"))
|
if(focusedElement.parentNode.classList.contains("filter_topics"))
|
||||||
{
|
{
|
||||||
focusedElement.classList.remove("focused");
|
focusedElement.classList.remove("focused");
|
||||||
focusedElement = focusedElement.parentNode.nextElementSibling.children[1];
|
lastFocusedTopic = focusedElement;
|
||||||
|
|
||||||
|
if(!lastFocusedMedium)
|
||||||
|
{
|
||||||
|
lastFocusedMedium = focusedElement.parentNode.nextElementSibling.children[1];
|
||||||
|
}
|
||||||
|
lastFocusedCategory = lastFocusedMedium;
|
||||||
|
focusedElement = lastFocusedCategory;
|
||||||
focusedElement.classList.add("focused");
|
focusedElement.classList.add("focused");
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -489,17 +625,19 @@ function handleKey(key)
|
||||||
focusedElement.nextElementSibling)
|
focusedElement.nextElementSibling)
|
||||||
{
|
{
|
||||||
focusedElement.classList.remove("focused");
|
focusedElement.classList.remove("focused");
|
||||||
focusedElement = focusedElement.nextElementSibling;
|
|
||||||
|
lastFocusedCreditItem = focusedElement.nextElementSibling;
|
||||||
|
focusedElement = lastFocusedCreditItem;
|
||||||
focusedElement.classList.add("focused");
|
focusedElement.classList.add("focused");
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
}
|
||||||
} break;
|
} break;
|
||||||
|
|
||||||
case "x": {
|
case "x": {
|
||||||
console.log("TODO(matt): Implement me!\n");
|
if(focusedElement && focusedElement.classList.contains("filter_content"))
|
||||||
if(focusedElement.classList.contains("filter_content"))
|
|
||||||
{
|
{
|
||||||
focusedElement.classList.toggle("off");
|
filterItemToggle(focusedElement);
|
||||||
if(focusedElement.nextElementSibling &&
|
if(focusedElement.nextElementSibling &&
|
||||||
focusedElement.nextElementSibling.classList.contains("filter_content"))
|
focusedElement.nextElementSibling.classList.contains("filter_content"))
|
||||||
{
|
{
|
||||||
|
@ -511,12 +649,9 @@ function handleKey(key)
|
||||||
} break;
|
} break;
|
||||||
|
|
||||||
case "X": {
|
case "X": {
|
||||||
console.log("TODO(matt): Implement me!\n");
|
if(focusedElement && focusedElement.classList.contains("filter_content"))
|
||||||
if(focusedElement.classList.contains("filter_content"))
|
|
||||||
{
|
{
|
||||||
focusedElement.classList.toggle("off");
|
filterItemToggle(focusedElement);
|
||||||
filterState[focusedElement.classList[1]].off = !filterState[focusedElement.classList[1]].off;
|
|
||||||
applyFilter()
|
|
||||||
if(focusedElement.previousElementSibling &&
|
if(focusedElement.previousElementSibling &&
|
||||||
focusedElement.previousElementSibling.classList.contains("filter_content"))
|
focusedElement.previousElementSibling.classList.contains("filter_content"))
|
||||||
{
|
{
|
||||||
|
@ -531,19 +666,15 @@ function handleKey(key)
|
||||||
toggleFilterMode();
|
toggleFilterMode();
|
||||||
} break;
|
} break;
|
||||||
|
|
||||||
|
case "v": {
|
||||||
|
if(focusedElement && focusedElement.classList.contains("filter_content"))
|
||||||
|
{
|
||||||
|
invertFilter(focusedElement)
|
||||||
|
}
|
||||||
|
} break;
|
||||||
|
|
||||||
case "V": {
|
case "V": {
|
||||||
console.log("TODO(matt): Implement me!\n");
|
resetFilter();
|
||||||
for(category in filterState)
|
|
||||||
{
|
|
||||||
filterState[category].off = false;
|
|
||||||
}
|
|
||||||
if(filterMode == "exclusive")
|
|
||||||
{
|
|
||||||
filterModeElement.classList.remove("exclusive");
|
|
||||||
filterModeElement.classList.add("inclusive");
|
|
||||||
filterMode = "inclusive";
|
|
||||||
}
|
|
||||||
applyFilter();
|
|
||||||
} break;
|
} break;
|
||||||
|
|
||||||
case 'N':
|
case 'N':
|
||||||
|
@ -557,13 +688,20 @@ function handleKey(key)
|
||||||
case 'W': {
|
case 'W': {
|
||||||
player.jumpToPrevMarker();
|
player.jumpToPrevMarker();
|
||||||
} break;
|
} break;
|
||||||
|
default: {
|
||||||
|
gotKey = false;
|
||||||
|
} break;
|
||||||
}
|
}
|
||||||
|
return gotKey;
|
||||||
}
|
}
|
||||||
|
|
||||||
var player = new Player(document.querySelector(".player_container"), onRefChanged);
|
var player = new Player(document.querySelector(".player_container"), onRefChanged);
|
||||||
window.addEventListener("resize", function() { player.updateSize(); });
|
window.addEventListener("resize", function() { player.updateSize(); });
|
||||||
document.addEventListener("keypress", function(ev) {
|
document.addEventListener("keypress", function(ev) {
|
||||||
handleKey(ev.key);
|
if(handleKey(ev.key) == true && focusedElement)
|
||||||
|
{
|
||||||
|
ev.preventDefault();
|
||||||
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
var refTimecodes = document.querySelectorAll(".refs .ref .timecode");
|
var refTimecodes = document.querySelectorAll(".refs .ref .timecode");
|
||||||
|
@ -647,17 +785,14 @@ filterModeElement.addEventListener("click", function(ev) {
|
||||||
toggleFilterMode();
|
toggleFilterMode();
|
||||||
});
|
});
|
||||||
|
|
||||||
// Filter Toggle
|
function filterItemToggle(filterItem)
|
||||||
var filterCategories = filter.querySelectorAll(".filter_topics .filter_content,.filter_media .filter_content");
|
|
||||||
for(var i = 0; i < filterCategories.length; ++i)
|
|
||||||
{
|
{
|
||||||
filterCategories[i].addEventListener("click", function(ev) {
|
var selectedCategory = filterItem.classList[1];
|
||||||
var selectedCategory = this.classList[1];
|
|
||||||
filterState[selectedCategory].off = !filterState[selectedCategory].off;
|
filterState[selectedCategory].off = !filterState[selectedCategory].off;
|
||||||
|
|
||||||
if(filterState[selectedCategory].off)
|
if(filterState[selectedCategory].off)
|
||||||
{
|
{
|
||||||
this.classList.add("off");
|
filterItem.classList.add("off");
|
||||||
var testMarkers = document.querySelectorAll(".marker." + selectedCategory + ", .marker.cat_" + selectedCategory);
|
var testMarkers = document.querySelectorAll(".marker." + selectedCategory + ", .marker.cat_" + selectedCategory);
|
||||||
for(var j = 0; j < testMarkers.length; ++j)
|
for(var j = 0; j < testMarkers.length; ++j)
|
||||||
{
|
{
|
||||||
|
@ -705,7 +840,7 @@ for(var i = 0; i < filterCategories.length; ++i)
|
||||||
}
|
}
|
||||||
else
|
else
|
||||||
{
|
{
|
||||||
this.classList.remove("off");
|
filterItem.classList.remove("off");
|
||||||
var testMarkers = document.querySelectorAll(".marker.off_" + selectedCategory);
|
var testMarkers = document.querySelectorAll(".marker.off_" + selectedCategory);
|
||||||
for(var j = 0; j < testMarkers.length; ++j)
|
for(var j = 0; j < testMarkers.length; ++j)
|
||||||
{
|
{
|
||||||
|
@ -750,6 +885,41 @@ for(var i = 0; i < filterCategories.length; ++i)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
var filterCategories = filter.querySelectorAll(".filter_topics .filter_content,.filter_media .filter_content");
|
||||||
|
|
||||||
|
function resetFilter()
|
||||||
|
{
|
||||||
|
for(i in filterCategories)
|
||||||
|
{
|
||||||
|
if(filterCategories[i].classList && filterCategories[i].classList.contains("off"))
|
||||||
|
{
|
||||||
|
filterItemToggle(filterCategories[i]);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
if(filterMode == "exclusive")
|
||||||
|
{
|
||||||
|
toggleFilterMode();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function invertFilter(focusedElement)
|
||||||
|
{
|
||||||
|
var siblings = focusedElement.parentNode.querySelectorAll(".filter_content");
|
||||||
|
for(i in siblings)
|
||||||
|
{
|
||||||
|
if(siblings[i].classList)
|
||||||
|
{
|
||||||
|
filterItemToggle(siblings[i]);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
for(var i = 0; i < filterCategories.length; ++i)
|
||||||
|
{
|
||||||
|
filterCategories[i].addEventListener("click", function(ev) {
|
||||||
|
filterItemToggle(this);
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue