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

hmml_to_html.c: Mock hiding filtered markers [#21]

This commit is contained in:
Matt Mascarenhas 2017-05-15 23:52:03 +01:00
parent 4f9df6795e
commit 6d812975b2
1 changed files with 52 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

60
hmml_to_html/mock_filter.html
View File

@ -103,13 +103,22 @@
<div class="player_container"> <div class="player_container">
<div class="video_container" data-videoId="ug5WkCROkOk"></div> <div class="video_container" data-videoId="ug5WkCROkOk"></div>
<div class="markers_container riscy"> <div class="markers_container riscy">
<div data-timestamp="60" class="marker authored cat_hardware research" data-ref="https://en.wikipedia.org/wiki/Logic_gate,0-7356-0505-X"> <div data-timestamp="12" class="marker cat_rendering cat_hardware">
<div class="content"><span class="timecode">1:00</span><span class="author" style="color: hsl(257, 87%, 26%);">insofaras</span> Some text referring to <a href="https://handmade.network/m/zilarrezko" target="blank" style="color: hsl(83, 75%, 26%); text-decoration: none">Zilarrezko</a> about this thing<sup>1</sup> regarding circuit design he saw in Code<sup>2</sup><span class="categories"><div class="category hardware"></div></span></div> <div class="content"><span class="timecode">0:12</span>Basic test with a little longer text<span class="categories"><div class="category rendering"></div><div class="category hardware"></div></span></div>
<div class="progress faded"> <div class="progress faded">
<div class="content"><span class="timecode">1:00</span><span class="author" style="color: hsl(257, 87%, 26%);">insofaras</span> Some text referring to <a href="https://handmade.network/m/zilarrezko" target="blank" style="color: hsl(83, 75%, 26%); text-decoration: none">Zilarrezko</a> about this thing<sup>1</sup> regarding circuit design he saw in Code<sup>2</sup><span class="categories"><div class="category hardware"></div></span></div> <div class="content"><span class="timecode">0:12</span>Basic test with a little longer text<span class="categories"><div class="category rendering"></div><div class="category hardware"></div></span></div>
</div> </div>
<div class="progress main"> <div class="progress main">
<div class="content"><span class="timecode">1:00</span><span class="author" style="color: hsl(257, 87%, 26%);">insofaras</span> Some text referring to <a href="https://handmade.network/m/zilarrezko" target="blank" style="color: hsl(83, 75%, 26%); text-decoration: none">Zilarrezko</a> about this thing<sup>1</sup> regarding circuit design he saw in Code<sup>2</sup><span class="categories"><div class="category hardware"></div></span></div> <div class="content"><span class="timecode">0:12</span>Basic test with a little longer text<span class="categories"><div class="category rendering"></div><div class="category hardware"></div></span></div>
</div>
</div>
<div data-timestamp="60" class="marker authored cat_rendering cat_hardware research" data-ref="https://en.wikipedia.org/wiki/Logic_gate,0-7356-0505-X">
<div class="content"><span class="timecode">1:00</span><span class="author" style="color: hsl(257, 87%, 26%);">insofaras</span> Some text referring to <a href="https://handmade.network/m/zilarrezko" target="blank" style="color: hsl(83, 75%, 26%); text-decoration: none">Zilarrezko</a> about this thing<sup>1</sup> regarding circuit design he saw in Code<sup>2</sup><span class="categories"><div class="category rendering"></div><div class="category hardware"></div></span></div>
<div class="progress faded">
<div class="content"><span class="timecode">1:00</span><span class="author" style="color: hsl(257, 87%, 26%);">insofaras</span> Some text referring to <a href="https://handmade.network/m/zilarrezko" target="blank" style="color: hsl(83, 75%, 26%); text-decoration: none">Zilarrezko</a> about this thing<sup>1</sup> regarding circuit design he saw in Code<sup>2</sup><span class="categories"><div class="category rendering"></div><div class="category hardware"></div></span></div>
</div>
<div class="progress main">
<div class="content"><span class="timecode">1:00</span><span class="author" style="color: hsl(257, 87%, 26%);">insofaras</span> Some text referring to <a href="https://handmade.network/m/zilarrezko" target="blank" style="color: hsl(83, 75%, 26%); text-decoration: none">Zilarrezko</a> about this thing<sup>1</sup> regarding circuit design he saw in Code<sup>2</sup><span class="categories"><div class="category rendering"></div><div class="category hardware"></div></span></div>
</div> </div>
</div> </div>
<div data-timestamp="176" class="marker" data-ref="&#945;"> <div data-timestamp="176" class="marker" data-ref="&#945;">
@ -222,34 +231,59 @@ filterModeElement.addEventListener("click", function(ev) {
} }
}); });
var filterTopics = document.querySelectorAll(".filter_topics > .filter_content"); 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) {
// NOTE(matt): Useful test
// if(this.parentNode.className == "filter_topics")
var selectedCategory = this.childNodes[1].classList[2];
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");
for (var j = 0; j < categorisedMarkers.length; ++j)
{
//console.log(categorisedMarkers[j]);
{
//console.log("Disabling %s", selectedCategory);
categorisedMarkers[j].classList.add("off");
}
}
} }
else else
{ {
this.classList.remove("off"); this.classList.remove("off");
for (var j = 0; j < categorisedMarkers.length; ++j)
{
//console.log("Enabling %s", selectedCategory);
categorisedMarkers[j].classList.remove("off");
} }
});
} }
var filterMedia = document.querySelectorAll(".filter_media > .filter_content"); var testMarkers = document.querySelectorAll(".cat_" + selectedCategory);
for (var i = 0; i < filterMedia.length; ++i) for(var k = 0; k < testMarkers.length; ++k)
{ {
filterMedia[i].addEventListener("click", function(ev) { var Skipping = 1;
var testCategories = testMarkers[k].querySelectorAll(".category");
if(!(this.classList.contains("off"))) for(var l = 0; l < testCategories.length; ++l)
{ {
this.classList.add("off"); if(!(testCategories[l].classList.contains("off")))
{
var Skipping = 0;
}
}
if(Skipping)
{
testMarkers[k].classList.add("skip");
} }
else else
{ {
this.classList.remove("off"); testMarkers[k].classList.remove("skip");
}
} }
}); });
} }