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

mock_filter.html: Fully enable filtering [#21] 

Next up is generating it
This commit is contained in:
Matt Mascarenhas 2017-05-18 22:58:41 +01:00
parent bc45546d19
commit 42835373c1
1 changed files with 77 additions and 185 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

262
hmml_to_html/mock_filter.html
View File

@ -92,16 +92,19 @@
<div class="filter_media"> <div class="filter_media">
<div class="filter_title">Media</div> <div class="filter_title">Media</div>
<div class="filter_content authored"> <div class="filter_content authored">
<span class="icon">&#128489;</span><span class="text">authored</span> <span class="icon">&#128490;</span><span class="text">authored</span>
</div> </div>
<div class="filter_content blackboard"> <div class="filter_content blackboard">
<span class="icon">&#128396;</span><span class="text">blackboard</span> <span class="icon">&#128396;</span><span class="text">blackboard</span>
</div> </div>
<div class="filter_content programming">
<span class="icon">&#128430;</span><span class="text">programming</span>
</div>
<div class="filter_content rant"> <div class="filter_content rant">
<span class="icon">&#128162;</span><span class="text">rant</span> <span class="icon">&#128162;</span><span class="text">rant</span>
</div> </div>
<div class="filter_content research"> <div class="filter_content research">
<span class="icon">&#128161;</span><span class="text">research</span> <span class="icon">&#128214;</span><span class="text">research</span>
</div> </div>
</div> </div>
</div> </div>
@ -112,7 +115,7 @@
<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="12" class="marker cat_rendering cat_hardware"> <div data-timestamp="12" class="marker programming cat_rendering cat_hardware">
<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="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">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="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>
@ -130,7 +133,7 @@
<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="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 programming" data-ref="&#945;">
<div class="content"><span class="timecode">2:56</span>&#8220;Stay RISCY, everyone&#8221;<sup>&#945;</sup></div> <div class="content"><span class="timecode">2:56</span>&#8220;Stay RISCY, everyone&#8221;<sup>&#945;</sup></div>
<div class="progress faded"> <div class="progress faded">
<div class="content"><span class="timecode">2:56</span>&#8220;Stay RISCY, everyone&#8221;<sup>&#945;</sup></div> <div class="content"><span class="timecode">2:56</span>&#8220;Stay RISCY, everyone&#8221;<sup>&#945;</sup></div>
@ -148,7 +151,7 @@
<div class="content"><span class="timecode">5:12</span>Matrix multiplication<sup>&#946;</sup><span class="categories"><div class="category mathematics"></div></span></div> <div class="content"><span class="timecode">5:12</span>Matrix multiplication<sup>&#946;</sup><span class="categories"><div class="category mathematics"></div></span></div>
</div> </div>
</div> </div>
<div data-timestamp="624" class="marker" data-ref="https://en.wikipedia.org/wiki/Logic_gate"> <div data-timestamp="624" class="marker programming" data-ref="https://en.wikipedia.org/wiki/Logic_gate">
<div class="content"><span class="timecode">10:24</span>More stuff referring to the <a href="https://milton.handmade.network/" target="blank" style="color: hsl(26, 83%, 26%); text-decoration: none">milton</a> forum post<sup>3</sup></div> <div class="content"><span class="timecode">10:24</span>More stuff referring to the <a href="https://milton.handmade.network/" target="blank" style="color: hsl(26, 83%, 26%); text-decoration: none">milton</a> forum post<sup>3</sup></div>
<div class="progress faded"> <div class="progress faded">
<div class="content"><span class="timecode">10:24</span>More stuff referring to the <a href="https://milton.handmade.network/" target="blank" style="color: hsl(26, 83%, 26%); text-decoration: none">milton</a> forum post<sup>3</sup></div> <div class="content"><span class="timecode">10:24</span>More stuff referring to the <a href="https://milton.handmade.network/" target="blank" style="color: hsl(26, 83%, 26%); text-decoration: none">milton</a> forum post<sup>3</sup></div>
@ -166,7 +169,7 @@
<div class="content"><span class="timecode">10:42</span>Some text. Simples!</div> <div class="content"><span class="timecode">10:42</span>Some text. Simples!</div>
</div> </div>
</div> </div>
<div data-timestamp="754" class="marker" data-ref="https://handmade.network/"> <div data-timestamp="754" class="marker programming" data-ref="https://handmade.network/">
<div class="content"><span class="timecode">12:34</span>Something about the Handmade.Network<sup>4</sup></div> <div class="content"><span class="timecode">12:34</span>Something about the Handmade.Network<sup>4</sup></div>
<div class="progress faded"> <div class="progress faded">
<div class="content"><span class="timecode">12:34</span>Something about the Handmade.Network<sup>4</sup></div> <div class="content"><span class="timecode">12:34</span>Something about the Handmade.Network<sup>4</sup></div>
@ -175,7 +178,7 @@
<div class="content"><span class="timecode">12:34</span>Something about the Handmade.Network<sup>4</sup></div> <div class="content"><span class="timecode">12:34</span>Something about the Handmade.Network<sup>4</sup></div>
</div> </div>
</div> </div>
<div data-timestamp="992" class="marker" data-ref="https://handmade.network/"> <div data-timestamp="992" class="marker programming" data-ref="https://handmade.network/">
<div class="content"><span class="timecode">16:32</span>Something else about the Handmade.Network<sup>5</sup></div> <div class="content"><span class="timecode">16:32</span>Something else about the Handmade.Network<sup>5</sup></div>
<div class="progress faded"> <div class="progress faded">
<div class="content"><span class="timecode">16:32</span>Something else about the Handmade.Network<sup>5</sup></div> <div class="content"><span class="timecode">16:32</span>Something else about the Handmade.Network<sup>5</sup></div>
@ -219,49 +222,37 @@ for (var i = 0; i < refTimecodes.length; ++i) {
}); });
} }
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 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];
}
var filterMedia = filter.querySelectorAll(".filter_media .filter_content"); var filterState = { "rendering": { "type": "topic", "off": false },
var filterMediaNames = []; "hardware": { "type": "topic", "off": false },
for(var i = 0; i < filterMedia.length; ++i) "mathematics": { "type": "topic", "off": false },
{ "authored": { "type": "medium", "off": false },
filterMediaNames[i] = filterMedia[i].classList[1]; "blackboard": { "type": "medium", "off": false },
} "programming": { "type": "medium", "off": false },
"rant": { "type": "medium", "off": false },
"research": { "type": "medium", "off": false }};
// Filter Mode Toggle // Filter Mode Toggle
filterModeElement.addEventListener("click", function(ev) { filterModeElement.addEventListener("click", function(ev) {
var testMarkers = document.querySelectorAll(".marker");
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) for(var i = 0; i < testMarkers.length; ++i)
{ {
var testMarkers = document.querySelectorAll(".cat_" + filterTopicsNames[i]); var testCategories = testMarkers[i].classList;
for(var j = 0; j < testMarkers.length; ++j) for(var j = 0; j < testCategories.length; ++j)
{ {
var testCategories = testMarkers[j].querySelectorAll(".category"); if((testCategories[j].startsWith("off_")) && !testMarkers[i].classList.contains("skip"))
for(var l = 0; l < testCategories.length; ++l)
{ {
if((testCategories[l].classList.contains("off")) && !testMarkers[j].classList.contains("skip")) testMarkers[i].classList.add("skip");
{
testMarkers[j].classList.add("skip");
}
} }
} }
} }
@ -272,168 +263,64 @@ filterModeElement.addEventListener("click", function(ev) {
filterModeElement.classList.add("inclusive"); filterModeElement.classList.add("inclusive");
filterMode = "inclusive"; filterMode = "inclusive";
for(var i = 0; i < filterTopicsNames.length; ++i) for(var i = 0; i < testMarkers.length; ++i)
{ {
var testMarkers = document.querySelectorAll(".cat_" + filterTopicsNames[i]); var testCategories = testMarkers[i].classList;
for(var j = 0; j < testMarkers.length; ++j) for(var j = 0; j < testCategories.length; ++j)
{ {
var testCategories = testMarkers[j].querySelectorAll(".category"); if((testCategories[j] in filterState || testCategories[j].startsWith("cat_")) && testMarkers[i].classList.contains("skip"))
for(var l = 0; l < testCategories.length; ++l)
{ {
if((!testCategories[l].classList.contains("off")) && testMarkers[j].classList.contains("skip")) testMarkers[i].classList.remove("skip");
{
testMarkers[j].classList.remove("skip");
}
} }
} }
} }
} }
}); });
/* NOTE(matt): // Filter Toggle
The only difference between the topics and the media is that the topics occur in a .category div as dots and in the .marker var filterCategories = document.querySelectorAll(".filter_topics .filter_content,.filter_media .filter_content");
div as cat_${TOPIC}, while the media occur in the .marker div as $MEDIUM for(var i = 0; i < filterCategories.length; ++i)
I can distinguish between enabled and disabled topics by making the dots' background transparent and applying .off
Since the media styles apply to the whole marker, and that there can be multiple, each individually filterable, I will need
some way to distinguish between them
The media are a closed set, so it would be reasonable to create two styles for each, enabled and disabled, possibly that
simply renders transparent whatever they contribute to the style: e.g. for .rant, make the text transparent; for
.blackboard.riscy make the graph paper lines transparent
In order to determine whether to skip the marker, though, we'll need to be able to loop over each medium to check its state.
At the moment, we could query for marker, then loop over all the classes that don't match "marker" or "cat_*". Once we know
those, we could specify that off media are prefixed off_ (could we?) while on media are just called their usual thing. We
then loop over these guys directly, determining their state from their prefix, and apply the relevent {in,ex}clusive logic
in order to apply or remove the skip class from their marker
Another possible idea is to use a kind of "state table" containing medium names and their state (on or off). As we
(de)select filter elements / toggle the filter mode, we first update the table and then loop through the markers, compare
their topics' state(s) with the state table, and apply the relevent {in,ex}clusive logic in order to apply or remove the
skip class from their marker
The state table alone, however, will not enable us to distinguish visually between the media's states, whereas the off_
prefix would, while also providing the ability to skip the marker! So I think the prefix is the way to go.
Will this work in conjunction with the topics, though?
*/
// Filter Topics Toggle
for(var i = 0; i < filterTopics.length; ++i)
{ {
filterTopics[i].addEventListener("click", function(ev) { filterCategories[i].addEventListener("click", function(ev) {
var selectedCategory = this.childNodes[1].classList[2];
var testMarkers = document.querySelectorAll(".cat_" + selectedCategory);
if(!(this.classList.contains("off")))
{
this.classList.add("off");
for(var j = 0; j < testMarkers.length; ++j)
{
var Skipping = 1;
var markerCategories = testMarkers[j].querySelectorAll(".category");
for(var k = 0; k < markerCategories.length; ++k)
{
if(markerCategories[k].classList.contains(selectedCategory))
{
markerCategories[k].classList.add("off");
}
if(filterMode == "exclusive")
{
testMarkers[j].classList.add("skip");
}
else if(!markerCategories[k].classList.contains("off"))
{
Skipping = 0;
}
}
if(Skipping)
{
testMarkers[j].classList.add("skip");
}
}
}
else
{
this.classList.remove("off");
for(var j = 0; j < testMarkers.length; ++j)
{
var Skipping = 0;
var markerCategories = testMarkers[j].querySelectorAll(".category");
for(var k = 0; k < markerCategories.length; ++k)
{
if(markerCategories[k].classList.contains(selectedCategory))
{
markerCategories[k].classList.remove("off");
}
if(filterMode == "inclusive")
{
testMarkers[j].classList.remove("skip");
}
else if(markerCategories[k].classList.contains("off"))
{
Skipping = 1;
}
}
if(!Skipping)
{
testMarkers[j].classList.remove("skip");
}
}
}
});
}
/*
Compare the states of each annotations topics/media against the state of those in the filter menu
When clicking on a topic, its state in the filter menu and in all annotations with which it is associated is toggled
*/
// TODO(matt): Implement me! This is broken, possibly subtly, possibly catastophically
// Filter Media Toggle
for(var i = 0; i < filterMedia.length; ++i)
{
filterMedia[i].addEventListener("click", function(ev) {
var selectedCategory = this.classList[1]; var selectedCategory = this.classList[1];
var testMarkers = (document.querySelectorAll(".marker." + selectedCategory, ".marker.off_" + selectedCategory)); filterState[selectedCategory].off = !filterState[selectedCategory].off;
if(!(this.classList.contains("off"))) if(filterState[selectedCategory].off)
{ {
this.classList.add("off"); this.classList.add("off");
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)
{ {
var Skipping = 1; if(filterState[selectedCategory].type == "topic")
for(var k = 0; k < testMarkers[j].classList.length; ++k)
{ {
if(testMarkers[j].classList[k] == selectedCategory) 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(selectedCategory); if(markerCategories[k].classList.contains(selectedCategory))
testMarkers[j].classList.add("off_" + selectedCategory); {
markerCategories[k].classList.add("off");
}
} }
} }
else
{
testMarkers[j].classList.remove(selectedCategory);
testMarkers[j].classList.add("off_" + selectedCategory);
}
Skipping = 1;
if(filterMode == "exclusive") if(filterMode == "exclusive")
{ {
testMarkers[j].classList.add("skip"); testMarkers[j].classList.add("skip");
} }
// This is going to go wrong, but let's try and at least get it working, before combining it with the topics
// The test is, if there's a match with anything other than "marker", "cat_" or "off_"
// This would mean that there is a medium which is not off_
else else
{ {
var markerClasses = testMarkers[j].classList;
for(var k = 0; k < testMarkers[j].classList.length; ++k) for(var k = 0; k < markerClasses.length; ++k)
{ {
if(!(testMarkers[j].classList[k] == "marker") || if(markerClasses[k] in filterState || markerClasses[k].replace(/^cat_/, "") in filterState)
testMarkers[j].classList[k].startsWith("cat_") ||
testMarkers[j].classList[k].startsWith("off_"))
{ {
Skipping = 0; Skipping = 0;
} }
@ -443,40 +330,45 @@ for(var i = 0; i < filterMedia.length; ++i)
testMarkers[j].classList.add("skip"); testMarkers[j].classList.add("skip");
} }
} }
} }
} }
else else
{ {
this.classList.remove("off"); this.classList.remove("off");
var testMarkers = document.querySelectorAll(".marker.off_" + selectedCategory);
for(var j = 0; j < testMarkers.length; ++j) for(var j = 0; j < testMarkers.length; ++j)
{ {
var Skipping = 0; if(filterState[selectedCategory].type == "topic")
for(var k = 0; k < testMarkers[j].classList.length; ++k)
{ {
if(testMarkers[j].classList[k] == "off_" + selectedCategory) 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(selectedCategory); {
markerCategories[k].classList.remove("off");
}
} }
} }
else
{
testMarkers[j].classList.remove("off_" + selectedCategory);
testMarkers[j].classList.add(selectedCategory);
}
//TODO Skipping = 0;
//console.log(testMarkers[j].classList);
if(filterMode == "inclusive") if(filterMode == "inclusive")
{ {
testMarkers[j].classList.remove("skip"); testMarkers[j].classList.remove("skip");
} }
// This is going to go wrong, but let's try and at least get it working, before combining it with the topics
// The test is, if there's a match with anything other than "marker", "cat_" or "off_"
// This would mean that there is a medium which is not off_
else else
{ {
var markerClasses = testMarkers[j].classList;
for(var k = 0; k < testMarkers[j].classList.length; ++k) for(var k = 0; k < markerClasses.length; ++k)
{ {
if(testMarkers[j].classList[k].startsWith("off_")) if(markerClasses[k].startsWith("off_"))
{ {
Skipping = 1; Skipping = 1;
} }
@ -488,8 +380,8 @@ for(var i = 0; i < filterMedia.length; ++i)
} }
} }
} }
}) });
}; }
var refSources = document.querySelectorAll(".refs .ref"); var refSources = document.querySelectorAll(".refs .ref");
for (var i = 0; i < refSources.length; ++i) { for (var i = 0; i < refSources.length; ++i) {