mock_filter.html: Enable mode-switching [#21]

Unfortunately this breaks the toggling of the topic filters
This commit is contained in:
Matt Mascarenhas 2017-05-17 01:28:38 +01:00
parent 6d3c2ea785
commit 73d7e996e5
1 changed files with 83 additions and 32 deletions

View File

@ -79,13 +79,13 @@
<div class="filters"> <div class="filters">
<div class="filter_topics"> <div class="filter_topics">
<div class="filter_title">Topics</div> <div class="filter_title">Topics</div>
<div class="filter_content"> <div class="filter_content rendering">
<span class="icon category rendering"></span><span class="text">rendering</span> <span class="icon category rendering"></span><span class="text">rendering</span>
</div> </div>
<div class="filter_content"> <div class="filter_content hardware">
<span class="icon category hardware"></span><span class="text">hardware</span> <span class="icon category hardware"></span><span class="text">hardware</span>
</div> </div>
<div class="filter_content"> <div class="filter_content mathematics">
<span class="icon category mathematics"></span><span class="text">mathematics</span> <span class="icon category mathematics"></span><span class="text">mathematics</span>
</div> </div>
</div> </div>
@ -213,29 +213,69 @@ for (var i = 0; i < refTimecodes.length; ++i) {
}); });
} }
/* function skipTest(filterMode)
NOTE(matt): The filter system will need to know whether we are inclusive or exclusive, which it gets / sets from that classList {
*/ // This must be called whenever you toggle a filter or the filter mode
// Unfortunately, when you toggle the mode, you'll have to go through and check the state of all the categories
}
var filter = document.querySelector(".filter"); var filter = document.querySelector(".filter");
var filterModeElement = filter.querySelector(".filter_mode"); var filterModeElement = filter.querySelector(".filter_mode");
var filterMode = filterModeElement.classList[1]; var filterMode = filterModeElement.classList[1];
var filterTopics = filter.querySelectorAll(".filter_topics .filter_content");
var filterTopicsNames = [];
for(var i = 0; i < filterTopics.length; ++i)
{
filterTopicsNames[i] = filterTopics[i].classList[1];
}
filterModeElement.addEventListener("click", function(ev) { filterModeElement.addEventListener("click", function(ev) {
if(filterMode == "inclusive") if(filterMode == "inclusive")
{ {
filterModeElement.classList.remove("inclusive"); filterModeElement.classList.remove("inclusive");
filterModeElement.classList.add("exclusive"); filterModeElement.classList.add("exclusive");
filterMode = "exclusive"; filterMode = "exclusive";
for(var i = 0; i < filterTopicsNames.length; ++i)
{
var testMarkers = document.querySelectorAll(".cat_" + filterTopicsNames[i]);
for(var j = 0; j < testMarkers.length; ++j)
{
var testCategories = testMarkers[j].querySelectorAll(".category");
for(var l = 0; l < testCategories.length; ++l)
{
if((testCategories[l].classList.contains("off")) && !testMarkers[j].classList.contains("skip"))
{
testMarkers[j].classList.add("skip");
}
}
}
}
} }
else else
{ {
filterModeElement.classList.remove("exclusive"); filterModeElement.classList.remove("exclusive");
filterModeElement.classList.add("inclusive"); filterModeElement.classList.add("inclusive");
filterMode = "inclusive"; filterMode = "inclusive";
for(var i = 0; i < filterTopicsNames.length; ++i)
{
var testMarkers = document.querySelectorAll(".cat_" + filterTopicsNames[i]);
for(var j = 0; j < testMarkers.length; ++j)
{
var testCategories = testMarkers[j].querySelectorAll(".category");
for(var l = 0; l < testCategories.length; ++l)
{
if((!testCategories[l].classList.contains("off")) && testMarkers[j].classList.contains("skip"))
{
testMarkers[j].classList.remove("skip");
}
}
}
}
} }
}); });
var filterTopics = document.querySelectorAll(".filter_content");
for (var i = 0; i < filterTopics.length; ++i) for (var i = 0; i < filterTopics.length; ++i)
{ {
filterTopics[i].addEventListener("click", function(ev) { filterTopics[i].addEventListener("click", function(ev) {
@ -244,49 +284,60 @@ for (var i = 0; i < filterTopics.length; ++i)
var selectedCategory = this.childNodes[1].classList[2]; var selectedCategory = this.childNodes[1].classList[2];
// TODO(matt): Fix this routine! off seems to work, but not skip
var categorisedMarkers = document.querySelectorAll("." + selectedCategory); var categorisedMarkers = document.querySelectorAll("." + selectedCategory);
if(!(this.classList.contains("off"))) if(!(this.classList.contains("off")))
{ {
//console.log(this);
this.classList.add("off"); this.classList.add("off");
var Skipping = 1;
for (var j = 0; j < categorisedMarkers.length; ++j) for (var j = 0; j < categorisedMarkers.length; ++j)
{ {
//console.log(categorisedMarkers[j]); categorisedMarkers[j].classList.add("off");
if(filterMode == "exclusive")
{ {
//console.log("Disabling %s", selectedCategory); categorisedMarkers[j].parentNode.classList.add("skip");
categorisedMarkers[j].classList.add("off"); }
else
{
for(var k = 0; k < categorisedMarkers[j].parentNode.childNodes.length; ++k)
{
if(!categorisedMarkers[j].parentNode.childNodes[k].contains == "off")
{
Skipping = 0;
}
}
if(Skipping)
{
categorisedMarkers[j].parentNode.classList.add("skip");
}
} }
} }
} }
else else
{ {
this.classList.remove("off"); this.classList.remove("off");
var Skipping = 0;
for (var j = 0; j < categorisedMarkers.length; ++j) for (var j = 0; j < categorisedMarkers.length; ++j)
{ {
//console.log("Enabling %s", selectedCategory);
categorisedMarkers[j].classList.remove("off"); categorisedMarkers[j].classList.remove("off");
} if(filterMode == "inclusive")
}
var testMarkers = document.querySelectorAll(".cat_" + selectedCategory);
for(var k = 0; k < testMarkers.length; ++k)
{
var Skipping = 1;
var testCategories = testMarkers[k].querySelectorAll(".category");
for(var l = 0; l < testCategories.length; ++l)
{
if(!(testCategories[l].classList.contains("off")))
{ {
var Skipping = 0; categorisedMarkers[j].parentNode.classList.remove("skip");
}
else
{
for(var k = 0; k < categorisedMarkers[j].parentNode.childNodes.length; ++k)
{
if(categorisedMarkers[j].parentNode.childNodes[k].contains == "off")
{
Skipping = 1;
}
}
if(Skipping)
{
categorisedMarkers[j].parentNode.classList.add("skip");
}
} }
}
if(Skipping)
{
testMarkers[k].classList.add("skip");
}
else
{
testMarkers[k].classList.remove("skip");
} }
} }
}); });