mock_filter.html: Try Filter Media Toggle [#21]

hmml_to_html/mock_filter.html

@@ -91,12 +91,18 @@
                         </div>
                         <div class="filter_media">
                             <div class="filter_title">Media</div>
-                            <div class="filter_content rant">
+                            <div class="filter_content authored">
-                                <span class="icon">&#128162;</span><span class="text">rant</span>
+                                <span class="icon">&#128489;</span><span class="text">authored</span>
                             </div>
                             <div class="filter_content blackboard">
                                 <span class="icon">&#128396;</span><span class="text">blackboard</span>
                             </div>
+                            <div class="filter_content rant">
+                                <span class="icon">&#128162;</span><span class="text">rant</span>
+                            </div>
+                            <div class="filter_content research">
+                                <span class="icon">&#128161;</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) {