mock_filter.html: Fully enable filtering [#21]
Next up is generating it
This commit is contained in:
Matt Mascarenhas
parent
bc45546d19
commit
42835373c1
|
|
@ -92,16 +92,19 @@
|
|||
<div class="filter_media">
|
||||
<div class="filter_title">Media</div>
|
||||
<div class="filter_content authored">
|
||||
<span class="icon">🗩</span><span class="text">authored</span>
|
||||
<span class="icon">🗪</span><span class="text">authored</span>
|
||||
</div>
|
||||
<div class="filter_content blackboard">
|
||||
<span class="icon">🖌</span><span class="text">blackboard</span>
|
||||
</div>
|
||||
<div class="filter_content programming">
|
||||
<span class="icon">🖮</span><span class="text">programming</span>
|
||||
</div>
|
||||
<div class="filter_content rant">
|
||||
<span class="icon">💢</span><span class="text">rant</span>
|
||||
</div>
|
||||
<div class="filter_content research">
|
||||
<span class="icon">💡</span><span class="text">research</span>
|
||||
<span class="icon">📖</span><span class="text">research</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -112,7 +115,7 @@
|
|||
<div class="player_container">
|
||||
<div class="video_container" data-videoId="ug5WkCROkOk"></div>
|
||||
<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="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>
|
||||
|
|
@ -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>
|
||||
</div>
|
||||
<div data-timestamp="176" class="marker" data-ref="α">
|
||||
<div data-timestamp="176" class="marker programming" data-ref="α">
|
||||
<div class="content"><span class="timecode">2:56</span>“Stay RISCY, everyone”<sup>α</sup></div>
|
||||
<div class="progress faded">
|
||||
<div class="content"><span class="timecode">2:56</span>“Stay RISCY, everyone”<sup>α</sup></div>
|
||||
|
|
@ -148,7 +151,7 @@
|
|||
<div class="content"><span class="timecode">5:12</span>Matrix multiplication<sup>β</sup><span class="categories"><div class="category mathematics"></div></span></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="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>
|
||||
|
|
@ -166,7 +169,7 @@
|
|||
<div class="content"><span class="timecode">10:42</span>Some text. Simples!</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="progress faded">
|
||||
<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>
|
||||
</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="progress faded">
|
||||
<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 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];
|
||||
}
|
||||
|
||||
var filterMedia = filter.querySelectorAll(".filter_media .filter_content");
|
||||
var filterMediaNames = [];
|
||||
for(var i = 0; i < filterMedia.length; ++i)
|
||||
{
|
||||
filterMediaNames[i] = filterMedia[i].classList[1];
|
||||
}
|
||||
var filterState = { "rendering": { "type": "topic", "off": false },
|
||||
"hardware": { "type": "topic", "off": false },
|
||||
"mathematics": { "type": "topic", "off": false },
|
||||
"authored": { "type": "medium", "off": false },
|
||||
"blackboard": { "type": "medium", "off": false },
|
||||
"programming": { "type": "medium", "off": false },
|
||||
"rant": { "type": "medium", "off": false },
|
||||
"research": { "type": "medium", "off": false }};
|
||||
|
||||
// Filter Mode Toggle
|
||||
filterModeElement.addEventListener("click", function(ev) {
|
||||
|
||||
var testMarkers = document.querySelectorAll(".marker");
|
||||
if(filterMode == "inclusive")
|
||||
{
|
||||
filterModeElement.classList.remove("inclusive");
|
||||
filterModeElement.classList.add("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]);
|
||||
for(var j = 0; j < testMarkers.length; ++j)
|
||||
var testCategories = testMarkers[i].classList;
|
||||
for(var j = 0; j < testCategories.length; ++j)
|
||||
{
|
||||
var testCategories = testMarkers[j].querySelectorAll(".category");
|
||||
for(var l = 0; l < testCategories.length; ++l)
|
||||
if((testCategories[j].startsWith("off_")) && !testMarkers[i].classList.contains("skip"))
|
||||
{
|
||||
if((testCategories[l].classList.contains("off")) && !testMarkers[j].classList.contains("skip"))
|
||||
{
|
||||
testMarkers[j].classList.add("skip");
|
||||
}
|
||||
testMarkers[i].classList.add("skip");
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -272,80 +263,64 @@ filterModeElement.addEventListener("click", function(ev) {
|
|||
filterModeElement.classList.add("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]);
|
||||
for(var j = 0; j < testMarkers.length; ++j)
|
||||
var testCategories = testMarkers[i].classList;
|
||||
for(var j = 0; j < testCategories.length; ++j)
|
||||
{
|
||||
var testCategories = testMarkers[j].querySelectorAll(".category");
|
||||
for(var l = 0; l < testCategories.length; ++l)
|
||||
if((testCategories[j] in filterState || testCategories[j].startsWith("cat_")) && testMarkers[i].classList.contains("skip"))
|
||||
{
|
||||
if((!testCategories[l].classList.contains("off")) && testMarkers[j].classList.contains("skip"))
|
||||
{
|
||||
testMarkers[j].classList.remove("skip");
|
||||
}
|
||||
testMarkers[i].classList.remove("skip");
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
/* NOTE(matt):
|
||||
The only difference between the topics and the media is that the topics occur in a .category div as dots and in the .marker
|
||||
div as cat_${TOPIC}, while the media occur in the .marker div as $MEDIUM
|
||||
|
||||
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)
|
||||
// Filter Toggle
|
||||
var filterCategories = document.querySelectorAll(".filter_topics .filter_content,.filter_media .filter_content");
|
||||
for(var i = 0; i < filterCategories.length; ++i)
|
||||
{
|
||||
filterTopics[i].addEventListener("click", function(ev) {
|
||||
filterCategories[i].addEventListener("click", function(ev) {
|
||||
var selectedCategory = this.classList[1];
|
||||
filterState[selectedCategory].off = !filterState[selectedCategory].off;
|
||||
|
||||
var selectedCategory = this.childNodes[1].classList[2];
|
||||
var testMarkers = document.querySelectorAll(".cat_" + selectedCategory);
|
||||
|
||||
if(!(this.classList.contains("off")))
|
||||
if(filterState[selectedCategory].off)
|
||||
{
|
||||
this.classList.add("off");
|
||||
var testMarkers = document.querySelectorAll(".marker." + selectedCategory + ", .marker.cat_" + selectedCategory);
|
||||
for(var j = 0; j < testMarkers.length; ++j)
|
||||
{
|
||||
var Skipping = 1;
|
||||
var markerCategories = testMarkers[j].querySelectorAll(".category");
|
||||
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)
|
||||
{
|
||||
if(markerCategories[k].classList.contains(selectedCategory))
|
||||
{
|
||||
markerCategories[k].classList.add("off");
|
||||
}
|
||||
}
|
||||
}
|
||||
else
|
||||
{
|
||||
testMarkers[j].classList.remove(selectedCategory);
|
||||
testMarkers[j].classList.add("off_" + selectedCategory);
|
||||
}
|
||||
|
||||
Skipping = 1;
|
||||
if(filterMode == "exclusive")
|
||||
{
|
||||
testMarkers[j].classList.add("skip");
|
||||
}
|
||||
else if(!markerCategories[k].classList.contains("off"))
|
||||
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;
|
||||
}
|
||||
|
|
@ -355,26 +330,45 @@ for(var i = 0; i < filterTopics.length; ++i)
|
|||
testMarkers[j].classList.add("skip");
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
else
|
||||
{
|
||||
this.classList.remove("off");
|
||||
var testMarkers = document.querySelectorAll(".marker.off_" + selectedCategory);
|
||||
for(var j = 0; j < testMarkers.length; ++j)
|
||||
{
|
||||
var Skipping = 0;
|
||||
var markerCategories = testMarkers[j].querySelectorAll(".category");
|
||||
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)
|
||||
{
|
||||
if(markerCategories[k].classList.contains(selectedCategory))
|
||||
{
|
||||
markerCategories[k].classList.remove("off");
|
||||
}
|
||||
}
|
||||
}
|
||||
else
|
||||
{
|
||||
testMarkers[j].classList.remove("off_" + selectedCategory);
|
||||
testMarkers[j].classList.add(selectedCategory);
|
||||
}
|
||||
|
||||
Skipping = 0;
|
||||
if(filterMode == "inclusive")
|
||||
{
|
||||
testMarkers[j].classList.remove("skip");
|
||||
}
|
||||
else if(markerCategories[k].classList.contains("off"))
|
||||
else
|
||||
{
|
||||
var markerClasses = testMarkers[j].classList;
|
||||
for(var k = 0; k < markerClasses.length; ++k)
|
||||
{
|
||||
if(markerClasses[k].startsWith("off_"))
|
||||
{
|
||||
Skipping = 1;
|
||||
}
|
||||
|
|
@ -385,112 +379,10 @@ for(var i = 0; i < filterTopics.length; ++i)
|
|||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/*
|
||||
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 testMarkers = (document.querySelectorAll(".marker." + selectedCategory, ".marker.off_" + selectedCategory));
|
||||
|
||||
if(!(this.classList.contains("off")))
|
||||
{
|
||||
this.classList.add("off");
|
||||
|
||||
for(var j = 0; j < testMarkers.length; ++j)
|
||||
{
|
||||
var Skipping = 1;
|
||||
for(var k = 0; k < testMarkers[j].classList.length; ++k)
|
||||
{
|
||||
if(testMarkers[j].classList[k] == selectedCategory)
|
||||
{
|
||||
testMarkers[j].classList.remove(selectedCategory);
|
||||
testMarkers[j].classList.add("off_" + selectedCategory);
|
||||
}
|
||||
}
|
||||
|
||||
if(filterMode == "exclusive")
|
||||
{
|
||||
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
|
||||
{
|
||||
|
||||
for(var k = 0; k < testMarkers[j].classList.length; ++k)
|
||||
{
|
||||
if(!(testMarkers[j].classList[k] == "marker") ||
|
||||
testMarkers[j].classList[k].startsWith("cat_") ||
|
||||
testMarkers[j].classList[k].startsWith("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;
|
||||
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(selectedCategory);
|
||||
}
|
||||
}
|
||||
|
||||
//TODO
|
||||
//console.log(testMarkers[j].classList);
|
||||
|
||||
if(filterMode == "inclusive")
|
||||
{
|
||||
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
|
||||
{
|
||||
|
||||
for(var k = 0; k < testMarkers[j].classList.length; ++k)
|
||||
{
|
||||
if(testMarkers[j].classList[k].startsWith("off_"))
|
||||
{
|
||||
Skipping = 1;
|
||||
}
|
||||
}
|
||||
if(!Skipping)
|
||||
{
|
||||
testMarkers[j].classList.remove("skip");
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
};
|
||||
|
||||
var refSources = document.querySelectorAll(".refs .ref");
|
||||
for (var i = 0; i < refSources.length; ++i) {
|
||||
refSources[i].addEventListener("click", function(ev) {
|
||||
|
|
|
|||
Loading…
Reference in New Issue