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

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

115
hmml_to_html/mock_filter.html
View File

@ -79,13 +79,13 @@
<div class="filters">
<div class="filter_topics">
<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>
</div>
<div class="filter_content">
<div class="filter_content hardware">
<span class="icon category hardware"></span><span class="text">hardware</span>
</div>
<div class="filter_content">
<div class="filter_content mathematics">
<span class="icon category mathematics"></span><span class="text">mathematics</span>
</div>
</div>
@ -213,29 +213,69 @@ for (var i = 0; i < refTimecodes.length; ++i) {
});
}
/*
NOTE(matt): The filter system will need to know whether we are inclusive or exclusive, which it gets / sets from that classList
*/
function skipTest(filterMode)
{
// 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 filterModeElement = filter.querySelector(".filter_mode");
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) {
if(filterMode == "inclusive")
{
filterModeElement.classList.remove("inclusive");
filterModeElement.classList.add("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
{
filterModeElement.classList.remove("exclusive");
filterModeElement.classList.add("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)
{
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];
// TODO(matt): Fix this routine! off seems to work, but not skip
var categorisedMarkers = document.querySelectorAll("." + selectedCategory);
if(!(this.classList.contains("off")))
{
//console.log(this);
this.classList.add("off");
var Skipping = 1;
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].classList.add("off");
categorisedMarkers[j].parentNode.classList.add("skip");
}
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
{
this.classList.remove("off");
var Skipping = 0;
for (var j = 0; j < categorisedMarkers.length; ++j)
{
//console.log("Enabling %s", selectedCategory);
categorisedMarkers[j].classList.remove("off");
}
}
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")))
if(filterMode == "inclusive")
{
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");
}
}
});