16:32Something else about the Handmade.Network5
@@ -219,49 +222,37 @@ for (var i = 0; i < refTimecodes.length; ++i) {
});
}
-function skipTest(filterMode)
-{
- // 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];
-}
-var filterMedia = filter.querySelectorAll(".filter_media .filter_content");
-var filterMediaNames = [];
-for(var i = 0; i < filterMedia.length; ++i)
-{
- filterMediaNames[i] = filterMedia[i].classList[1];
-}
+var filterState = { "rendering": { "type": "topic", "off": false },
+ "hardware": { "type": "topic", "off": false },
+ "mathematics": { "type": "topic", "off": false },
+ "authored": { "type": "medium", "off": false },
+ "blackboard": { "type": "medium", "off": false },
+ "programming": { "type": "medium", "off": false },
+ "rant": { "type": "medium", "off": false },
+ "research": { "type": "medium", "off": false }};
// Filter Mode Toggle
filterModeElement.addEventListener("click", function(ev) {
+
+ var testMarkers = document.querySelectorAll(".marker");
if(filterMode == "inclusive")
{
filterModeElement.classList.remove("inclusive");
filterModeElement.classList.add("exclusive");
filterMode = "exclusive";
- for(var i = 0; i < filterTopicsNames.length; ++i)
+ for(var i = 0; i < testMarkers.length; ++i)
{
- var testMarkers = document.querySelectorAll(".cat_" + filterTopicsNames[i]);
- for(var j = 0; j < testMarkers.length; ++j)
+ var testCategories = testMarkers[i].classList;
+ for(var j = 0; j < testCategories.length; ++j)
{
- var testCategories = testMarkers[j].querySelectorAll(".category");
- for(var l = 0; l < testCategories.length; ++l)
+ if((testCategories[j].startsWith("off_")) && !testMarkers[i].classList.contains("skip"))
{
- if((testCategories[l].classList.contains("off")) && !testMarkers[j].classList.contains("skip"))
- {
- testMarkers[j].classList.add("skip");
- }
+ testMarkers[i].classList.add("skip");
}
}
}
@@ -272,168 +263,64 @@ filterModeElement.addEventListener("click", function(ev) {
filterModeElement.classList.add("inclusive");
filterMode = "inclusive";
- for(var i = 0; i < filterTopicsNames.length; ++i)
+ for(var i = 0; i < testMarkers.length; ++i)
{
- var testMarkers = document.querySelectorAll(".cat_" + filterTopicsNames[i]);
- for(var j = 0; j < testMarkers.length; ++j)
+ var testCategories = testMarkers[i].classList;
+ for(var j = 0; j < testCategories.length; ++j)
{
- var testCategories = testMarkers[j].querySelectorAll(".category");
- for(var l = 0; l < testCategories.length; ++l)
+ if((testCategories[j] in filterState || testCategories[j].startsWith("cat_")) && testMarkers[i].classList.contains("skip"))
{
- if((!testCategories[l].classList.contains("off")) && testMarkers[j].classList.contains("skip"))
- {
- testMarkers[j].classList.remove("skip");
- }
+ testMarkers[i].classList.remove("skip");
}
}
}
}
});
-/* 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)
+// Filter Toggle
+var filterCategories = document.querySelectorAll(".filter_topics .filter_content,.filter_media .filter_content");
+for(var i = 0; i < filterCategories.length; ++i)
{
- filterTopics[i].addEventListener("click", function(ev) {
-
- var selectedCategory = this.childNodes[1].classList[2];
- var testMarkers = document.querySelectorAll(".cat_" + selectedCategory);
-
- if(!(this.classList.contains("off")))
- {
- this.classList.add("off");
- for(var j = 0; j < testMarkers.length; ++j)
- {
- var Skipping = 1;
- var markerCategories = testMarkers[j].querySelectorAll(".category");
- for(var k = 0; k < markerCategories.length; ++k)
- {
- if(markerCategories[k].classList.contains(selectedCategory))
- {
- markerCategories[k].classList.add("off");
- }
-
- if(filterMode == "exclusive")
- {
- testMarkers[j].classList.add("skip");
- }
- else if(!markerCategories[k].classList.contains("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;
- var markerCategories = testMarkers[j].querySelectorAll(".category");
- for(var k = 0; k < markerCategories.length; ++k)
- {
- if(markerCategories[k].classList.contains(selectedCategory))
- {
- markerCategories[k].classList.remove("off");
- }
-
- if(filterMode == "inclusive")
- {
- testMarkers[j].classList.remove("skip");
- }
- else if(markerCategories[k].classList.contains("off"))
- {
- Skipping = 1;
- }
- }
- if(!Skipping)
- {
- testMarkers[j].classList.remove("skip");
- }
- }
- }
- });
-}
-
-/*
- 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) {
-
+ filterCategories[i].addEventListener("click", function(ev) {
var selectedCategory = this.classList[1];
- var testMarkers = (document.querySelectorAll(".marker." + selectedCategory, ".marker.off_" + selectedCategory));
+ filterState[selectedCategory].off = !filterState[selectedCategory].off;
- if(!(this.classList.contains("off")))
+ if(filterState[selectedCategory].off)
{
this.classList.add("off");
-
+ var testMarkers = document.querySelectorAll(".marker." + selectedCategory + ", .marker.cat_" + selectedCategory);
for(var j = 0; j < testMarkers.length; ++j)
{
- var Skipping = 1;
- for(var k = 0; k < testMarkers[j].classList.length; ++k)
+ if(filterState[selectedCategory].type == "topic")
{
- if(testMarkers[j].classList[k] == selectedCategory)
+ testMarkers[j].classList.remove("cat_" + selectedCategory);
+ testMarkers[j].classList.add("off_" + selectedCategory);
+ var markerCategories = testMarkers[j].querySelectorAll(".category." + selectedCategory);
+ for(var k = 0; k < markerCategories.length; ++k)
{
- testMarkers[j].classList.remove(selectedCategory);
- testMarkers[j].classList.add("off_" + selectedCategory);
+ if(markerCategories[k].classList.contains(selectedCategory))
+ {
+ markerCategories[k].classList.add("off");
+ }
}
}
+ else
+ {
+ testMarkers[j].classList.remove(selectedCategory);
+ testMarkers[j].classList.add("off_" + selectedCategory);
+ }
+ Skipping = 1;
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)
+ var markerClasses = testMarkers[j].classList;
+ for(var k = 0; k < markerClasses.length; ++k)
{
- if(!(testMarkers[j].classList[k] == "marker") ||
- testMarkers[j].classList[k].startsWith("cat_") ||
- testMarkers[j].classList[k].startsWith("off_"))
+ if(markerClasses[k] in filterState || markerClasses[k].replace(/^cat_/, "") in filterState)
{
Skipping = 0;
}
@@ -443,40 +330,45 @@ for(var i = 0; i < filterMedia.length; ++i)
testMarkers[j].classList.add("skip");
}
}
+
}
}
else
{
this.classList.remove("off");
-
+ var testMarkers = document.querySelectorAll(".marker.off_" + selectedCategory);
for(var j = 0; j < testMarkers.length; ++j)
{
- var Skipping = 0;
- for(var k = 0; k < testMarkers[j].classList.length; ++k)
+ if(filterState[selectedCategory].type == "topic")
{
- if(testMarkers[j].classList[k] == "off_" + selectedCategory)
+ testMarkers[j].classList.remove("off_" + selectedCategory);
+ testMarkers[j].classList.add("cat_" + selectedCategory);
+ var markerCategories = testMarkers[j].querySelectorAll(".category." + selectedCategory);
+ for(var k = 0; k < markerCategories.length; ++k)
{
- testMarkers[j].classList.remove("off_" + selectedCategory);
- testMarkers[j].classList.add(selectedCategory);
+ if(markerCategories[k].classList.contains(selectedCategory))
+ {
+ markerCategories[k].classList.remove("off");
+ }
}
}
+ else
+ {
+ testMarkers[j].classList.remove("off_" + selectedCategory);
+ testMarkers[j].classList.add(selectedCategory);
+ }
- //TODO
- //console.log(testMarkers[j].classList);
-
+ Skipping = 0;
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)
+ var markerClasses = testMarkers[j].classList;
+ for(var k = 0; k < markerClasses.length; ++k)
{
- if(testMarkers[j].classList[k].startsWith("off_"))
+ if(markerClasses[k].startsWith("off_"))
{
Skipping = 1;
}
@@ -488,8 +380,8 @@ for(var i = 0; i < filterMedia.length; ++i)
}
}
}
- })
-};
+ });
+}
var refSources = document.querySelectorAll(".refs .ref");
for (var i = 0; i < refSources.length; ++i) {