mock_keys.html: Statefulness and filter [#24]

This commit is contained in:
Matt Mascarenhas 2017-05-27 23:04:33 +01:00
parent bfc145e8df
commit e6cf2689a3
1 changed files with 431 additions and 261 deletions

View File

@ -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,7 +278,11 @@ 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;
focusedIdentifier = null; if(focusedIdentifier)
{
focusedIdentifier.classList.remove("focused");
focusedIdentifier = null;
}
} }
else else
{ {
@ -237,37 +290,62 @@ function toggleMenuVisibility(element) {
{ {
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(element.querySelectorAll(".credit .support")[0]) if(!lastFocusedCreditItem)
{ {
focusedElement = element.querySelectorAll(".credit .support")[0]; if(element.querySelectorAll(".credit .support")[0])
} {
else lastFocusedCreditItem = element.querySelectorAll(".credit .support")[0];
{ }
focusedElement = element.querySelectorAll(".credit .person")[0]; else
{
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,24 +369,27 @@ function handleKey(key)
} break; } break;
case "Enter": { case "Enter": {
if(focusedElement.parentNode.classList.contains("quotes_container")) if(focusedElement)
{ {
var time = focusedElement.querySelector(".timecode").getAttribute("data-timestamp"); if(focusedElement.parentNode.classList.contains("quotes_container"))
player.setTime(parseInt(time, 10));
player.play();
}
else if(focusedElement.parentNode.classList.contains("references_container"))
{
var time = focusedIdentifier.getAttribute("data-timestamp");
player.setTime(parseInt(time, 10));
player.play();
}
else if(focusedElement.parentNode.classList.contains("credit"))
{
if(focusedElement.hasAttribute)
{ {
var url = focusedElement.getAttribute("href"); var time = focusedElement.querySelector(".timecode").getAttribute("data-timestamp");
window.open(url, "_blank"); player.setTime(parseInt(time, 10));
player.play();
}
else if(focusedElement.parentNode.classList.contains("references_container"))
{
var time = focusedIdentifier.getAttribute("data-timestamp");
player.setTime(parseInt(time, 10));
player.play();
}
else if(focusedElement.parentNode.classList.contains("credit"))
{
if(focusedElement.hasAttribute)
{
var url = focusedElement.getAttribute("href");
window.open(url, "_blank");
}
} }
} }
else else
@ -317,189 +399,245 @@ function handleKey(key)
} break; } break;
case "o": { case "o": {
if(focusedElement.parentNode.classList.contains("references_container")) if(focusedElement)
{ {
var url = focusedElement.getAttribute("href"); if(focusedElement.parentNode.classList.contains("references_container"))
window.open(url, "_blank");
}
else if(focusedElement.parentNode.classList.contains("credit"))
{
if(focusedElement.hasAttribute("href"))
{ {
var url = focusedElement.getAttribute("href"); var url = focusedElement.getAttribute("href");
window.open(url, "_blank"); window.open(url, "_blank");
} }
} else if(focusedElement.parentNode.classList.contains("credit"))
} break;
case "w": {
if(focusedElement.parentNode.classList.contains("quotes_container"))
{
if(focusedElement.previousElementSibling)
{ {
focusedElement.classList.remove("focused"); if(focusedElement.hasAttribute("href"))
focusedElement = focusedElement.previousElementSibling;
focusedElement.classList.add("focused");
}
}
else if(focusedElement.parentNode.classList.contains("references_container"))
{
if(focusedElement.previousElementSibling)
{
focusedElement.classList.remove("focused");
focusedIdentifier.classList.remove("focused");
focusedElement = focusedElement.previousElementSibling;
focusedElement.classList.add("focused");
focusedIdentifier = focusedElement.querySelector(".ref_indices").firstElementChild;
focusedIdentifier.classList.add("focused");
}
}
else if(focusedElement.parentNode.parentNode.classList.contains("filters"))
{
if(focusedElement.previousElementSibling &&
focusedElement.previousElementSibling.classList.contains("filter_content"))
{
focusedElement.classList.remove("focused");
focusedElement = focusedElement.previousElementSibling;
focusedElement.classList.add("focused");
}
}
else if(focusedElement.parentNode.classList.contains("credit"))
{
if(focusedElement.parentNode.previousElementSibling)
{
focusedElement.classList.remove("focused");
if(focusedElement.parentNode.previousElementSibling.querySelector(".support") &&
focusedElement.classList.contains("support"))
{ {
focusedElement = focusedElement.parentNode.previousElementSibling.querySelector(".support"); var url = focusedElement.getAttribute("href");
window.open(url, "_blank");
} }
else
{
focusedElement = focusedElement.parentNode.previousElementSibling.querySelector(".person");
}
focusedElement.classList.add("focused");
} }
} }
} break; } break;
case "s": { case "w": case "ArrowUp": {
if(focusedElement.parentNode.classList.contains("quotes_container")) if(focusedElement)
{ {
if(focusedElement.nextElementSibling) if(focusedElement.parentNode.classList.contains("quotes_container"))
{ {
focusedElement.classList.remove("focused"); if(focusedElement.previousElementSibling)
focusedElement = focusedElement.nextElementSibling;
focusedElement.classList.add("focused");
}
}
else if(focusedElement.parentNode.classList.contains("references_container"))
{
if(focusedElement.nextElementSibling)
{
focusedElement.classList.remove("focused");
focusedIdentifier.classList.remove("focused");
focusedElement = focusedElement.nextElementSibling;
focusedElement.classList.add("focused");
focusedIdentifier = focusedElement.querySelector(".ref_indices").firstElementChild;
focusedIdentifier.classList.add("focused");
}
}
else if(focusedElement.parentNode.parentNode.classList.contains("filters"))
{
if(focusedElement.nextElementSibling &&
focusedElement.nextElementSibling.classList.contains("filter_content"))
{
focusedElement.classList.remove("focused");
focusedElement = focusedElement.nextElementSibling;
focusedElement.classList.add("focused");
}
}
else if(focusedElement.parentNode.classList.contains("credit"))
{
if(focusedElement.parentNode.nextElementSibling)
{
focusedElement.classList.remove("focused");
if(focusedElement.parentNode.nextElementSibling.querySelector(".support") &&
focusedElement.classList.contains("support"))
{ {
focusedElement = focusedElement.parentNode.nextElementSibling.querySelector(".support"); focusedElement.classList.remove("focused");
lastFocusedQuote = focusedElement.previousElementSibling;
focusedElement = lastFocusedQuote;
focusedElement.classList.add("focused");
} }
else }
else if(focusedElement.parentNode.classList.contains("references_container"))
{
if(focusedElement.previousElementSibling)
{ {
focusedElement = focusedElement.parentNode.nextElementSibling.querySelector(".person"); focusedElement.classList.remove("focused");
focusedIdentifier.classList.remove("focused");
lastFocusedReference = focusedElement.previousElementSibling;
focusedElement = lastFocusedReference;
focusedElement.classList.add("focused");
lastFocusedIdentifier = focusedElement.querySelector(".ref_indices").firstElementChild;
focusedIdentifier = lastFocusedIdentifier;
focusedIdentifier.classList.add("focused");
}
}
else if(focusedElement.parentNode.parentNode.classList.contains("filters"))
{
if(focusedElement.previousElementSibling &&
focusedElement.previousElementSibling.classList.contains("filter_content"))
{
focusedElement.classList.remove("focused");
lastFocusedCategory = focusedElement.previousElementSibling;
focusedElement = lastFocusedCategory;
focusedElement.classList.add("focused");
}
}
else if(focusedElement.parentNode.classList.contains("credit"))
{
if(focusedElement.parentNode.previousElementSibling)
{
focusedElement.classList.remove("focused");
if(focusedElement.parentNode.previousElementSibling.querySelector(".support") &&
focusedElement.classList.contains("support"))
{
lastFocusedCreditItem = focusedElement.parentNode.previousElementSibling.querySelector(".support");
focusedElement = lastFocusedCreditItem;
}
else
{
lastFocusedCreditItem = focusedElement.parentNode.previousElementSibling.querySelector(".person");
focusedElement = lastFocusedCreditItem;
}
focusedElement.classList.add("focused");
} }
focusedElement.classList.add("focused");
} }
} }
} break; } break;
case "a": { case "s": case "ArrowDown": {
if(focusedElement.parentNode.classList.contains("references_container")) if(focusedElement)
{ {
if(focusedIdentifier.previousElementSibling) if(focusedElement.parentNode.classList.contains("quotes_container"))
{ {
focusedIdentifier.classList.remove("focused"); if(focusedElement.nextElementSibling)
focusedIdentifier = focusedIdentifier.previousElementSibling; {
focusedIdentifier.classList.add("focused"); focusedElement.classList.remove("focused");
lastFocusedQuote = focusedElement.nextElementSibling;
focusedElement = lastFocusedQuote;
focusedElement.classList.add("focused");
}
} }
} else if(focusedElement.parentNode.classList.contains("references_container"))
else if(focusedElement.classList.contains("filter_content"))
{
if(focusedElement.parentNode.classList.contains("filter_media"))
{ {
focusedElement.classList.remove("focused"); if(focusedElement.nextElementSibling)
focusedElement = focusedElement.parentNode.previousElementSibling.children[1]; {
focusedElement.classList.add("focused"); focusedElement.classList.remove("focused");
focusedIdentifier.classList.remove("focused");
lastFocusedReference = focusedElement.nextElementSibling;
focusedElement = lastFocusedReference;
focusedElement.classList.add("focused");
lastFocusedIdentifier = focusedElement.querySelector(".ref_indices").firstElementChild;
focusedIdentifier = lastFocusedIdentifier;
focusedIdentifier.classList.add("focused");
}
} }
} else if(focusedElement.parentNode.parentNode.classList.contains("filters"))
else if(focusedElement.parentNode.classList.contains("credit"))
{
if(focusedElement.classList.contains("support"))
{ {
focusedElement.classList.remove("focused"); if(focusedElement.nextElementSibling &&
focusedElement = focusedElement.previousElementSibling; focusedElement.nextElementSibling.classList.contains("filter_content"))
focusedElement.classList.add("focused"); {
focusedElement.classList.remove("focused");
lastFocusedCategory = focusedElement.nextElementSibling;
focusedElement = lastFocusedCategory;
focusedElement.classList.add("focused");
}
}
else if(focusedElement.parentNode.classList.contains("credit"))
{
if(focusedElement.parentNode.nextElementSibling)
{
focusedElement.classList.remove("focused");
if(focusedElement.parentNode.nextElementSibling.querySelector(".support") &&
focusedElement.classList.contains("support"))
{
lastFocusedCreditItem = focusedElement.parentNode.nextElementSibling.querySelector(".support");
focusedElement = lastFocusedCreditItem;
}
else
{
lastFocusedCreditItem = focusedElement.parentNode.nextElementSibling.querySelector(".person");
focusedElement = lastFocusedCreditItem;
}
focusedElement.classList.add("focused");
}
} }
} }
} break; } break;
case "d": { case "a": case "ArrowLeft": {
if(focusedElement.parentNode.classList.contains("references_container")) if(focusedElement)
{ {
if(focusedIdentifier.nextElementSibling) if(focusedElement.parentNode.classList.contains("references_container"))
{ {
focusedIdentifier.classList.remove("focused"); if(focusedIdentifier.previousElementSibling)
focusedIdentifier = focusedIdentifier.nextElementSibling; {
focusedIdentifier.classList.add("focused"); focusedIdentifier.classList.remove("focused");
lastFocusedIdentifier = focusedIdentifier.previousElementSibling;
focusedIdentifier = lastFocusedIdentifier;
focusedIdentifier.classList.add("focused");
}
}
else if(focusedElement.classList.contains("filter_content"))
{
if(focusedElement.parentNode.classList.contains("filter_media"))
{
focusedElement.classList.remove("focused");
lastFocusedMedium = focusedElement;
if(!lastFocusedTopic)
{
lastFocusedTopic = focusedElement.parentNode.previousElementSibling.children[1];
}
lastFocusedCategory = lastFocusedTopic;
focusedElement = lastFocusedCategory;
focusedElement.classList.add("focused");
}
}
else if(focusedElement.parentNode.classList.contains("credit"))
{
if(focusedElement.classList.contains("support"))
{
focusedElement.classList.remove("focused");
lastFocusedCreditItem = focusedElement.previousElementSibling;
focusedElement = lastFocusedCreditItem;
focusedElement.classList.add("focused");
}
} }
} }
else if(focusedElement.classList.contains("filter_content")) } break;
case "d": case "ArrowRight": {
if(focusedElement)
{ {
if(focusedElement.parentNode.classList.contains("filter_topics")) if(focusedElement.parentNode.classList.contains("references_container"))
{ {
focusedElement.classList.remove("focused"); if(focusedIdentifier.nextElementSibling)
focusedElement = focusedElement.parentNode.nextElementSibling.children[1]; {
focusedElement.classList.add("focused"); focusedIdentifier.classList.remove("focused");
lastFocusedIdentifier = focusedIdentifier.nextElementSibling;
focusedIdentifier = lastFocusedIdentifier;
focusedIdentifier.classList.add("focused");
}
} }
} else if(focusedElement.classList.contains("filter_content"))
else if(focusedElement.parentNode.classList.contains("credit"))
{
if(focusedElement.classList.contains("person") &&
focusedElement.nextElementSibling)
{ {
focusedElement.classList.remove("focused"); if(focusedElement.parentNode.classList.contains("filter_topics"))
focusedElement = focusedElement.nextElementSibling; {
focusedElement.classList.add("focused"); focusedElement.classList.remove("focused");
lastFocusedTopic = focusedElement;
if(!lastFocusedMedium)
{
lastFocusedMedium = focusedElement.parentNode.nextElementSibling.children[1];
}
lastFocusedCategory = lastFocusedMedium;
focusedElement = lastFocusedCategory;
focusedElement.classList.add("focused");
}
}
else if(focusedElement.parentNode.classList.contains("credit"))
{
if(focusedElement.classList.contains("person") &&
focusedElement.nextElementSibling)
{
focusedElement.classList.remove("focused");
lastFocusedCreditItem = focusedElement.nextElementSibling;
focusedElement = lastFocusedCreditItem;
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,109 +785,141 @@ 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)
{
filterItem.classList.add("off");
var testMarkers = document.querySelectorAll(".marker." + selectedCategory + ", .marker.cat_" + selectedCategory);
for(var j = 0; j < testMarkers.length; ++j)
{ {
this.classList.add("off"); if(filterState[selectedCategory].type == "topic")
var testMarkers = document.querySelectorAll(".marker." + selectedCategory + ", .marker.cat_" + selectedCategory);
for(var j = 0; j < testMarkers.length; ++j)
{ {
if(filterState[selectedCategory].type == "topic") testMarkers[j].classList.remove("cat_" + selectedCategory);
testMarkers[j].classList.add("off_" + selectedCategory);
var markerCategories = testMarkers[j].querySelectorAll(".category." + selectedCategory);
for(var k = 0; k < markerCategories.length; ++k)
{ {
testMarkers[j].classList.remove("cat_" + selectedCategory); if(markerCategories[k].classList.contains(selectedCategory))
testMarkers[j].classList.add("off_" + selectedCategory);
var markerCategories = testMarkers[j].querySelectorAll(".category." + selectedCategory);
for(var k = 0; k < markerCategories.length; ++k)
{ {
if(markerCategories[k].classList.contains(selectedCategory)) markerCategories[k].classList.add("off");
{
markerCategories[k].classList.add("off");
}
} }
} }
else }
{ else
testMarkers[j].classList.remove(selectedCategory); {
testMarkers[j].classList.add("off_" + selectedCategory); testMarkers[j].classList.remove(selectedCategory);
} testMarkers[j].classList.add("off_" + selectedCategory);
}
Skipping = 1; Skipping = 1;
if(filterMode == "exclusive") if(filterMode == "exclusive")
{
testMarkers[j].classList.add("skip");
}
else
{
var markerClasses = testMarkers[j].classList;
for(var k = 0; k < markerClasses.length; ++k)
{
if(markerClasses[k] in filterState || markerClasses[k].replace(/^cat_/, "") in filterState)
{
Skipping = 0;
}
}
if(Skipping)
{ {
testMarkers[j].classList.add("skip"); testMarkers[j].classList.add("skip");
} }
else
{
var markerClasses = testMarkers[j].classList;
for(var k = 0; k < markerClasses.length; ++k)
{
if(markerClasses[k] in filterState || markerClasses[k].replace(/^cat_/, "") in filterState)
{
Skipping = 0;
}
}
if(Skipping)
{
testMarkers[j].classList.add("skip");
}
}
} }
} }
else }
else
{
filterItem.classList.remove("off");
var testMarkers = document.querySelectorAll(".marker.off_" + selectedCategory);
for(var j = 0; j < testMarkers.length; ++j)
{ {
this.classList.remove("off"); if(filterState[selectedCategory].type == "topic")
var testMarkers = document.querySelectorAll(".marker.off_" + selectedCategory);
for(var j = 0; j < testMarkers.length; ++j)
{ {
if(filterState[selectedCategory].type == "topic") testMarkers[j].classList.remove("off_" + selectedCategory);
testMarkers[j].classList.add("cat_" + selectedCategory);
var markerCategories = testMarkers[j].querySelectorAll(".category." + selectedCategory);
for(var k = 0; k < markerCategories.length; ++k)
{ {
testMarkers[j].classList.remove("off_" + selectedCategory); if(markerCategories[k].classList.contains(selectedCategory))
testMarkers[j].classList.add("cat_" + selectedCategory);
var markerCategories = testMarkers[j].querySelectorAll(".category." + selectedCategory);
for(var k = 0; k < markerCategories.length; ++k)
{ {
if(markerCategories[k].classList.contains(selectedCategory)) markerCategories[k].classList.remove("off");
{
markerCategories[k].classList.remove("off");
}
} }
} }
else }
{ else
testMarkers[j].classList.remove("off_" + selectedCategory); {
testMarkers[j].classList.add(selectedCategory); testMarkers[j].classList.remove("off_" + selectedCategory);
} testMarkers[j].classList.add(selectedCategory);
}
Skipping = 0; Skipping = 0;
if(filterMode == "inclusive") if(filterMode == "inclusive")
{
testMarkers[j].classList.remove("skip");
}
else
{
var markerClasses = testMarkers[j].classList;
for(var k = 0; k < markerClasses.length; ++k)
{
if(markerClasses[k].startsWith("off_"))
{
Skipping = 1;
}
}
if(!Skipping)
{ {
testMarkers[j].classList.remove("skip"); testMarkers[j].classList.remove("skip");
} }
else
{
var markerClasses = testMarkers[j].classList;
for(var k = 0; k < markerClasses.length; ++k)
{
if(markerClasses[k].startsWith("off_"))
{
Skipping = 1;
}
}
if(!Skipping)
{
testMarkers[j].classList.remove("skip");
}
}
} }
} }
}
}
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);
}); });
} }