filters: negation, styling

lib/filters/filtergui.js

@@ -2,9 +2,10 @@ define([], function () {
   return function (distributor) {
     var container = document.createElement("ul")
     container.classList.add("filters")
+    var div = document.createElement("div")
 
     function render(el) {
-      el.appendChild(container)
+      el.appendChild(div)
     }
 
     function filtersChanged(filters) {
@@ -25,6 +26,11 @@ define([], function () {
         }
         li.appendChild(button)
       })
+
+      if (container.parentNode === div && filters.length === 0)
+        div.removeChild(container)
+      else if (filters.length > 0)
+        div.appendChild(container)
     }
 
     return { render: render,

lib/filters/genericnode.js

@@ -1,15 +1,26 @@
 define(["filters/nodefilter"], function (nodefilter) {
   return function (name, key, value, f) {
+    var negate = false
+    var refresh
+
     function run(d) {
       var o = dictGet(d, key.slice(0))
 
       if (f)
         o = f(o)
 
-      return o === value
+      return o === value ? !negate : negate
     }
 
-    function setRefresh() {
+    function setRefresh(f) {
+      refresh = f
+    }
+
+    function draw(el) {
+      if (negate)
+        el.parentNode.classList.add("not")
+      else
+        el.parentNode.classList.remove("not")
     }
 
     function render(el) {
@@ -19,7 +30,17 @@ define(["filters/nodefilter"], function (nodefilter) {
       var strong = document.createElement("strong")
       strong.textContent = value
 
+      draw(el)
+
       label.appendChild(strong)
+      label.onclick = function () {
+        negate = !negate
+
+        draw(el)
+
+        if (refresh)
+          refresh()
+      }
 
       el.appendChild(label)
     }