mock_filter.html: Try Filter Media Toggle [#21]
This commit is contained in:
Matt Mascarenhas
parent
352ba4739f
commit
bc45546d19
|
|
@ -91,12 +91,18 @@
|
|||
</div>
|
||||
<div class="filter_media">
|
||||
<div class="filter_title">Media</div>
|
||||
<div class="filter_content rant">
|
||||
<span class="icon">💢</span><span class="text">rant</span>
|
||||
<div class="filter_content authored">
|
||||
<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 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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -229,6 +235,14 @@ 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];
|
||||
}
|
||||
|
||||
// Filter Mode Toggle
|
||||
filterModeElement.addEventListener("click", function(ev) {
|
||||
if(filterMode == "inclusive")
|
||||
{
|
||||
|
|
@ -276,6 +290,36 @@ filterModeElement.addEventListener("click", function(ev) {
|
|||
}
|
||||
});
|
||||
|
||||
/* 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)
|
||||
{
|
||||
filterTopics[i].addEventListener("click", function(ev) {
|
||||
|
|
@ -344,6 +388,109 @@ 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