From bc45546d1903fc780c6d9c07acfa8e7bb5a378bc Mon Sep 17 00:00:00 2001 From: Matt Mascarenhas Date: Thu, 18 May 2017 01:44:57 +0100 Subject: [PATCH] mock_filter.html: Try Filter Media Toggle [#21] --- hmml_to_html/mock_filter.html | 151 +++++++++++++++++++++++++++++++++- 1 file changed, 149 insertions(+), 2 deletions(-) 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 @@
Media
-
- 💢rant +
+ 🗩authored
🖌blackboard
+
+ 💢rant +
+
+ 💡research +
@@ -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) {