diff --git a/hmml_to_html/mock_filter.html b/hmml_to_html/mock_filter.html
index 200b85b..79d1fe5 100644
--- a/hmml_to_html/mock_filter.html
+++ b/hmml_to_html/mock_filter.html
@@ -91,12 +91,18 @@
@@ -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) {