mock_filter.html: Try Filter Media Toggle [#21]
This commit is contained in:
parent
352ba4739f
commit
bc45546d19
|
@ -91,12 +91,18 @@
|
||||||
</div>
|
</div>
|
||||||
<div class="filter_media">
|
<div class="filter_media">
|
||||||
<div class="filter_title">Media</div>
|
<div class="filter_title">Media</div>
|
||||||
<div class="filter_content rant">
|
<div class="filter_content authored">
|
||||||
<span class="icon">💢</span><span class="text">rant</span>
|
<span class="icon">🗩</span><span class="text">authored</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="filter_content blackboard">
|
<div class="filter_content blackboard">
|
||||||
<span class="icon">🖌</span><span class="text">blackboard</span>
|
<span class="icon">🖌</span><span class="text">blackboard</span>
|
||||||
</div>
|
</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>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
@ -229,6 +235,14 @@ for(var i = 0; i < filterTopics.length; ++i)
|
||||||
filterTopicsNames[i] = filterTopics[i].classList[1];
|
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) {
|
filterModeElement.addEventListener("click", function(ev) {
|
||||||
if(filterMode == "inclusive")
|
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)
|
for(var i = 0; i < filterTopics.length; ++i)
|
||||||
{
|
{
|
||||||
filterTopics[i].addEventListener("click", function(ev) {
|
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");
|
var refSources = document.querySelectorAll(".refs .ref");
|
||||||
for (var i = 0; i < refSources.length; ++i) {
|
for (var i = 0; i < refSources.length; ++i) {
|
||||||
refSources[i].addEventListener("click", function(ev) {
|
refSources[i].addEventListener("click", function(ev) {
|
||||||
|
|
Loading…
Reference in New Issue