mock_filter.html: Enable mode-switching [#21]

Unfortunately this breaks the toggling of the topic filters

hmml_to_html/mock_filter.html

@@ -79,13 +79,13 @@
                     <div class="filters">
                         <div class="filter_topics">
                             <div class="filter_title">Topics</div>
-                            <div class="filter_content">
+                            <div class="filter_content rendering">
                                 <span class="icon category rendering"></span><span class="text">rendering</span>
                             </div>
-                            <div class="filter_content">
+                            <div class="filter_content hardware">
                                 <span class="icon category hardware"></span><span class="text">hardware</span>
                             </div>
-                            <div class="filter_content">
+                            <div class="filter_content mathematics">
                                 <span class="icon category mathematics"></span><span class="text">mathematics</span>
                             </div>
                         </div>
@@ -213,29 +213,69 @@ for (var i = 0; i < refTimecodes.length; ++i) {
     });
 }
 
-/*
+function skipTest(filterMode)
-    NOTE(matt): The filter system will need to know whether we are inclusive or exclusive, which it gets / sets from that classList
+{
-*/
+    // 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];
+}
+
 filterModeElement.addEventListener("click", function(ev) {
     if(filterMode == "inclusive")
     {
         filterModeElement.classList.remove("inclusive");
         filterModeElement.classList.add("exclusive");
         filterMode = "exclusive";
+
+        for(var i = 0; i < filterTopicsNames.length; ++i)
+        {
+            var testMarkers = document.querySelectorAll(".cat_" + filterTopicsNames[i]);
+            for(var j = 0; j < testMarkers.length; ++j)
+            {
+                var testCategories = testMarkers[j].querySelectorAll(".category");
+                for(var l = 0; l < testCategories.length; ++l)
+                {
+                    if((testCategories[l].classList.contains("off")) && !testMarkers[j].classList.contains("skip"))
+                    {
+                        testMarkers[j].classList.add("skip");
+                    }
+                }
+            }
+        }
     }
     else
     {
         filterModeElement.classList.remove("exclusive");
         filterModeElement.classList.add("inclusive");
         filterMode = "inclusive";
+
+        for(var i = 0; i < filterTopicsNames.length; ++i)
+        {
+            var testMarkers = document.querySelectorAll(".cat_" + filterTopicsNames[i]);
+            for(var j = 0; j < testMarkers.length; ++j)
+            {
+                var testCategories = testMarkers[j].querySelectorAll(".category");
+                for(var l = 0; l < testCategories.length; ++l)
+                {
+                    if((!testCategories[l].classList.contains("off")) && testMarkers[j].classList.contains("skip"))
+                    {
+                        testMarkers[j].classList.remove("skip");
+                    }
+                }
+            }
+        }
     }
 });
 
-var filterTopics = document.querySelectorAll(".filter_content");
 for (var i = 0; i < filterTopics.length; ++i)
 {
     filterTopics[i].addEventListener("click", function(ev) {
@@ -244,49 +284,60 @@ for (var i = 0; i < filterTopics.length; ++i)
 
         var selectedCategory = this.childNodes[1].classList[2];
 
+        // TODO(matt): Fix this routine! off seems to work, but not skip
         var categorisedMarkers = document.querySelectorAll("." + selectedCategory);
         if(!(this.classList.contains("off")))
         {
-            //console.log(this);
             this.classList.add("off");
+            var Skipping = 1;
             for (var j = 0; j < categorisedMarkers.length; ++j)
             {
-                //console.log(categorisedMarkers[j]);
+                categorisedMarkers[j].classList.add("off");
+                if(filterMode == "exclusive")
                 {
-                    //console.log("Disabling %s", selectedCategory);
+                    categorisedMarkers[j].parentNode.classList.add("skip");
-                    categorisedMarkers[j].classList.add("off");
+                }
+                else
+                {
+                    for(var k = 0; k < categorisedMarkers[j].parentNode.childNodes.length; ++k)
+                    {
+                        if(!categorisedMarkers[j].parentNode.childNodes[k].contains == "off")
+                        {
+                            Skipping = 0;
+                        }
+                    }
+                    if(Skipping)
+                    {
+                        categorisedMarkers[j].parentNode.classList.add("skip");
+                    }
                 }
             }
         }
         else
         {
             this.classList.remove("off");
+            var Skipping = 0;
             for (var j = 0; j < categorisedMarkers.length; ++j)
             {
-                //console.log("Enabling %s", selectedCategory);
                 categorisedMarkers[j].classList.remove("off");
-            }
+                if(filterMode == "inclusive")
-        }
-
-        var testMarkers = document.querySelectorAll(".cat_" + selectedCategory);
-        for(var k = 0; k < testMarkers.length; ++k)
-        {
-            var Skipping = 1;
-            var testCategories = testMarkers[k].querySelectorAll(".category");
-            for(var l = 0; l < testCategories.length; ++l)
-            {
-                if(!(testCategories[l].classList.contains("off")))
                 {
-                    var Skipping = 0;
+                    categorisedMarkers[j].parentNode.classList.remove("skip");
+                }
+                else
+                {
+                    for(var k = 0; k < categorisedMarkers[j].parentNode.childNodes.length; ++k)
+                    {
+                        if(categorisedMarkers[j].parentNode.childNodes[k].contains == "off")
+                        {
+                            Skipping = 1;
+                        }
+                    }
+                    if(Skipping)
+                    {
+                        categorisedMarkers[j].parentNode.classList.add("skip");
+                    }
                 }
-            }
-            if(Skipping)
-            {
-                testMarkers[k].classList.add("skip");
-            }
-            else
-            {
-                testMarkers[k].classList.remove("skip");
             }
         }
     });