added options

foltor/foltor.coffee

@@ -11,10 +11,14 @@ $$: (selector, root) ->
     result: root.querySelectorAll(selector)
     #magic that turns the results object into an array:
     node for node in result
+inBefore: (root, el) ->
+    root.parentNode.insertBefore(el, root)
 tag: (el) ->
     document.createElement(el)
 text: (s) ->
     document.createTextNode(s)
+remove: (root) ->
+    root.parentNode.removeChild(root)
 position: (el) ->
     id: el.id
     if left: GM_getValue("${id}Left", '0px')
@@ -90,38 +94,38 @@ if typeof GM_deleteValue == 'undefined'
 
 
 GM_addStyle('
-    #filter {
+    #box, #box_options {
         position: fixed;
         text-align: right;
         border: 1px solid;
     }
-    #filter.autohide:not(:hover){
+    #box.autohide:not(:hover){
         background: rgba(0,0,0,0);
         border: none;
     }
-    #filter.autohide:not(:hover) > div {
+    #box.autohide:not(:hover) > div {
         display: none;
     }
-    #filter.autohide:not(:hover) > div.top {
+    #box.autohide:not(:hover) > div.top {
         display: block;
         padding: 0;
     }
-    #filter.autohide a:last-child {
+    #box.autohide a:last-child {
         font-weight: bold;
     }
-    #filter > div {
+    #box > div {
         padding: 0 5px 0 5px;
     }
-    #filter > .top {
+    #box > .top {
         padding: 5px 5px 0 5px;
     }
-    #filter > .bottom {
+    #box > .bottom {
     padding: 0 5px 5px 5px;
     }
     .move {
         cursor: move;
     }
-    .pointer {
+    .pointer, #box a, #box_options a {
         cursor: pointer;
     }
     .hide {
@@ -130,9 +134,9 @@ GM_addStyle('
 ')
 
 
-filterSingle: (table, regex) ->
+filterSingle: (table, filter) ->
-    for family of regex
+    for field of filter
-        switch family
+        switch field
             when 'Name'
                 s: $('span.commentpostername', table).textContent
             when 'Tripcode'
@@ -145,32 +149,33 @@ filterSingle: (table, regex) ->
                 s: $('blockquote', table).textContent
             when 'File'
                 s: $('span.filesize', table)?.textContent || ''
-        if regex[family].test(s)
+        if filter[field].test(s)
             return true
 
 
 filterAll: ->
-    regex: {}
+    filter: {}
-    inputs: $$('input', filter)
+    inputs: $$('input', box)
     for input in inputs
-        value: input.value
+        if value: input.value
-        GM_setValue(input.name, value)
+            filter[input.name]: value
-        if value
+    filters[select.value]: filter
-            regex[input.name]: new RegExp(value, 'i')
+    GM_setValue('filters', JSON.stringify(filters))
 
-    hideCount: 0
+    #so ugly
-    tables: $$('form[name="delform"] table')
+    compiled: filters
-    tables.pop()
+    for filter of compiled
-    tables.pop()
+        for field of compiled[filter]
+            compiled[filter][field]: new RegExp(compiled[filter][field], 'i')
+
+    tables: reset()
     for table in tables
-        if filterSingle(table, regex)
+        for filter of compiled
-            table.className: 'hide'
+            if filterSingle(table, compiled[filter])
-            hideCount++
+                table.className: filter
-        else
-            table.className: ''
 
-    images: $$('img[md5]')
+    imagesCount: $$('img[md5]').length
-    filter.firstChild.textContent: "Images: ${images.length} Replies: ${tables.length} / $hideCount"
+    box.firstChild.textContent: "Images: $imagesCount Replies: ${tables.length}"
 
 
 keydown: (e) ->
@@ -178,32 +183,112 @@ keydown: (e) ->
         filterAll()
 
 
-resetF: ->
+reset: ->
     tables: $$('form[name="delform"] table')
     tables.pop()
     tables.pop()
     for table in tables
         table.className: ''
+    return tables
 
 
-autoHideF: ->
+autoHide: ->
-    if filter.className is 'reply'
+    if box.className is 'reply'
-        filter.className: 'reply autohide'
+        box.className: 'reply autohide'
     else
-        filter.className: 'reply'
+        box.className: 'reply'
-    GM_setValue('className', filter.className)
+    GM_setValue('className', box.className)
 
 
-filter: tag('div')
+save: ->
-filter.id: 'filter'
+    div: this.parentNode.parentNode
-filter.className: GM_getValue('className', 'reply')
+    inputs: $$('input:enabled', div)
-position(filter)
+    for input in inputs
+        if value: input.value
+            filters[value]: {}
+    GM_setValue('filters', JSON.stringify(filters))
+    remove(div)
+
+
+cancel: ->
+    div: this.parentNode.parentNode
+    remove(div)
+
+
+addClass: ->
+    div: tag('div')
+    input: tag('input')
+    div.appendChild(input)
+    inBefore(this, div)
+    input.focus()
+
+
+options: ->
+    if opt: $('#box_options')
+        remove(opt)
+    else
+        opt: tag('div')
+        opt.id: 'box_options'
+        opt.className: 'reply'
+        position(opt)
+        bar: tag('div')
+        bar.textContent: 'Options'
+        bar.className: 'move'
+        bar.addEventListener('mousedown', mousedown, true)
+        opt.appendChild(bar)
+
+        filters: JSON.parse(GM_getValue('filters', '{ "hide": {} }'))
+        for filter of filters
+            div: tag('div')
+            input: tag('input')
+            input.value: filter
+            input.disabled: true
+            div.appendChild(input)
+            opt.appendChild(div)
+
+        div: tag('div')
+        a: tag('a')
+        a.textContent: 'Add Class'
+        a.addEventListener('click', addClass, true)
+        div.appendChild(a)
+        opt.appendChild(div)
+
+        div: tag('div')
+        a: tag('a')
+        a.textContent: 'save'
+        a.addEventListener('click', save, true)
+        div.appendChild(a)
+        div.appendChild(text(' '))
+        a: tag('a')
+        a.textContent: 'cancel'
+        a.addEventListener('click', cancel, true)
+        div.appendChild(a)
+        opt.appendChild(div)
+
+        document.body.appendChild(opt)
+
+
+box: tag('div')
+box.id: 'box'
+box.className: GM_getValue('className', 'reply')
+position(box)
 
 bar: tag('div')
 bar.className: 'move top'
 bar.addEventListener('mousedown', mousedown, true)
-filter.appendChild(bar)
+box.appendChild(bar)
 
+select: tag('select')
+filters: JSON.parse(GM_getValue('filters', '{ "hide": {} }'))
+for filter of filters
+    option: tag('option')
+    option.textContent: filter
+    select.appendChild(option)
+box.appendChild(select)
+
+
+#currently displayed filter
+filter: filters[select.value]
 fields: [
     'Name',
     'Tripcode',
@@ -215,34 +300,28 @@ fields: [
 for field in fields
     div: tag('div')
     label: tag('label')
-    label.appendChild(text(field))
+    label.textContent: field
     input: tag('input')
-    input.value: GM_getValue(field, '')
+    input.value: filter[field] || ''
     input.name: field
     input.addEventListener('keydown', keydown, true)
     label.appendChild(input)
     div.appendChild(label)
-    filter.appendChild(div)
+    box.appendChild(div)
 
-apply: tag('a')
-apply.textContent: 'apply'
-apply.className: 'pointer'
-apply.addEventListener('click', filterAll, true)
-reset: tag('a')
-reset.textContent: 'reset'
-reset.className: 'pointer'
-reset.addEventListener('click', resetF, true)
-autoHide: tag('a')
-autoHide.textContent: 'autohide'
-autoHide.className: 'pointer'
-autoHide.addEventListener('click', autoHideF, true)
 div: tag('div')
 div.className: 'bottom'
-div.appendChild(apply)
+for name in ['apply', 'reset', 'options', 'autohide']
-div.appendChild(text(' '))
+    a: tag('a')
-div.appendChild(reset)
+    a.textContent: name
-div.appendChild(text(' '))
+    switch name
-div.appendChild(autoHide)
+        when 'apply'    then f: filterAll
-filter.appendChild(div)
+        when 'reset'    then f: reset
-document.body.appendChild(filter)
+        when 'options'  then f: options
+        when 'autohide' then f: autoHide
+    a.addEventListener('click', f, true)
+    div.appendChild(a)
+    div.appendChild(text(' '))
+box.appendChild(div)
+document.body.appendChild(box)
 filterAll()

foltor/foltor.js

@@ -1,5 +1,5 @@
 (function(){
-  var $, $$, _a, _b, _c, apply, autoHide, autoHideF, bar, div, field, fields, filter, filterAll, filterSingle, input, keydown, label, mousedown, mousemove, mouseup, move, position, reset, resetF, tag, text, x;
+  var $, $$, _a, _b, _c, _d, _e, _f, _g, a, addClass, autoHide, bar, box, cancel, div, f, field, fields, filter, filterAll, filterSingle, filters, inBefore, input, keydown, label, mousedown, mousemove, mouseup, move, name, option, options, position, remove, reset, save, select, tag, text, x;
   var __hasProp = Object.prototype.hasOwnProperty;
   x = function x(path, root) {
     root = root || document.body;
@@ -21,12 +21,18 @@
     }
     return _a;
   };
+  inBefore = function inBefore(root, el) {
+    return root.parentNode.insertBefore(el, root);
+  };
   tag = function tag(el) {
     return document.createElement(el);
   };
   text = function text(s) {
     return document.createTextNode(s);
   };
+  remove = function remove(root) {
+    return root.parentNode.removeChild(root);
+  };
   position = function position(el) {
     var id, left, top;
     id = el.id;
@@ -117,94 +123,98 @@
     };
   }
   GM_addStyle(' \
-#filter { \
+#box, #box_options { \
 position: fixed; \
 text-align: right; \
 border: 1px solid; \
 } \
-#filter.autohide:not(:hover){ \
+#box.autohide:not(:hover){ \
 background: rgba(0,0,0,0); \
 border: none; \
 } \
-#filter.autohide:not(:hover) > div { \
+#box.autohide:not(:hover) > div { \
 display: none; \
 } \
-#filter.autohide:not(:hover) > div.top { \
+#box.autohide:not(:hover) > div.top { \
 display: block; \
 padding: 0; \
 } \
-#filter.autohide a:last-child { \
+#box.autohide a:last-child { \
 font-weight: bold; \
 } \
-#filter > div { \
+#box > div { \
 padding: 0 5px 0 5px; \
 } \
-#filter > .top { \
+#box > .top { \
 padding: 5px 5px 0 5px; \
 } \
-#filter > .bottom { \
+#box > .bottom { \
 padding: 0 5px 5px 5px; \
 } \
 .move { \
 cursor: move; \
 } \
-.pointer { \
+.pointer, #box a, #box_options a { \
 cursor: pointer; \
 } \
 .hide { \
 display: none; \
 } \
 ');
-  filterSingle = function filterSingle(table, regex) {
+  filterSingle = function filterSingle(table, filter) {
-    var _a, _b, _c, _d, _e, family, s;
+    var _a, _b, _c, _d, _e, field, s;
-    _a = regex;
+    _a = filter;
-    for (family in _a) { if (__hasProp.call(_a, family)) {
+    for (field in _a) { if (__hasProp.call(_a, field)) {
-      if (family === 'Name') {
+      if (field === 'Name') {
         s = $('span.commentpostername', table).textContent;
-      } else if (family === 'Tripcode') {
+      } else if (field === 'Tripcode') {
         s = ((_b = $('span.postertrip', table)) == undefined ? undefined : _b.textContent) || '';
-      } else if (family === 'Email') {
+      } else if (field === 'Email') {
         s = (_c = $('a.linkmail', table)) == undefined ? undefined : _c.href.slice(7) || '';
-      } else if (family === 'Subject') {
+      } else if (field === 'Subject') {
         s = ((_d = $('span.filetitle', table)) == undefined ? undefined : _d.textContent) || '';
-      } else if (family === 'Comment') {
+      } else if (field === 'Comment') {
         s = $('blockquote', table).textContent;
-      } else if (family === 'File') {
+      } else if (field === 'File') {
         s = ((_e = $('span.filesize', table)) == undefined ? undefined : _e.textContent) || '';
       }
-      if (regex[family].test(s)) {
+      if (filter[field].test(s)) {
         return true;
       }
     }}
   };
   filterAll = function filterAll() {
-    var _a, _b, _c, _d, _e, _f, hideCount, images, input, inputs, regex, table, tables, value;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _i, compiled, field, filter, imagesCount, input, inputs, table, tables, value;
-    regex = {};
+    filter = {};
-    inputs = $$('input', filter);
+    inputs = $$('input', box);
     _b = inputs;
     for (_a = 0, _c = _b.length; _a < _c; _a++) {
       input = _b[_a];
-      value = input.value;
+      (value = input.value) ? (filter[input.name] = value) : null;
-      GM_setValue(input.name, value);
-      value ? (regex[input.name] = new RegExp(value, 'i')) : null;
     }
-    hideCount = 0;
+    filters[select.value] = filter;
-    tables = $$('form[name="delform"] table');
+    GM_setValue('filters', JSON.stringify(filters));
-    tables.pop();
+    //so ugly
-    tables.pop();
+    compiled = filters;
-    _e = tables;
+    _d = compiled;
-    for (_d = 0, _f = _e.length; _d < _f; _d++) {
+    for (filter in _d) { if (__hasProp.call(_d, filter)) {
-      table = _e[_d];
+      _e = compiled[filter];
-      if (filterSingle(table, regex)) {
+      for (field in _e) { if (__hasProp.call(_e, field)) {
-        table.className = 'hide';
+        compiled[filter][field] = new RegExp(compiled[filter][field], 'i');
-        hideCount++;
+      }}
-      } else {
+    }}
-        table.className = '';
+    tables = reset();
-      }
+    _g = tables;
+    for (_f = 0, _h = _g.length; _f < _h; _f++) {
+      table = _g[_f];
+      _i = compiled;
+      for (filter in _i) { if (__hasProp.call(_i, filter)) {
+        filterSingle(table, compiled[filter]) ? (table.className = filter) : null;
+      }}
     }
-    images = $$('img[md5]');
+    imagesCount = $$('img[md5]').length;
-    filter.firstChild.textContent = ("Images: " + (images.length) + " Replies: " + (tables.length) + " / " + hideCount);
+    box.firstChild.textContent = ("Images: " + imagesCount + " Replies: " + (tables.length));
-    return filter.firstChild.textContent;
+    return box.firstChild.textContent;
   };
   keydown = function keydown(e) {
     if (e.keyCode === 13) {
@@ -212,65 +222,146 @@ display: none; \
       return filterAll();
     }
   };
-  resetF = function resetF() {
+  reset = function reset() {
-    var _a, _b, _c, _d, table, tables;
+    var _a, _b, _c, table, tables;
     tables = $$('form[name="delform"] table');
     tables.pop();
     tables.pop();
-    _a = []; _c = tables;
+    _b = tables;
-    for (_b = 0, _d = _c.length; _b < _d; _b++) {
+    for (_a = 0, _c = _b.length; _a < _c; _a++) {
-      table = _c[_b];
+      table = _b[_a];
-      _a.push((table.className = ''));
+      table.className = '';
     }
-    return _a;
+    return tables;
   };
-  autoHideF = function autoHideF() {
+  autoHide = function autoHide() {
-    filter.className === 'reply' ? (filter.className = 'reply autohide') : (filter.className = 'reply');
+    box.className === 'reply' ? (box.className = 'reply autohide') : (box.className = 'reply');
-    return GM_setValue('className', filter.className);
+    return GM_setValue('className', box.className);
   };
-  filter = tag('div');
+  save = function save() {
-  filter.id = 'filter';
+    var _a, _b, _c, div, input, inputs, value;
-  filter.className = GM_getValue('className', 'reply');
+    div = this.parentNode.parentNode;
-  position(filter);
+    inputs = $$('input:enabled', div);
+    _b = inputs;
+    for (_a = 0, _c = _b.length; _a < _c; _a++) {
+      input = _b[_a];
+      (value = input.value) ? (filters[value] = {}) : null;
+    }
+    GM_setValue('filters', JSON.stringify(filters));
+    return remove(div);
+  };
+  cancel = function cancel() {
+    var div;
+    div = this.parentNode.parentNode;
+    return remove(div);
+  };
+  addClass = function addClass() {
+    var div, input;
+    div = tag('div');
+    input = tag('input');
+    div.appendChild(input);
+    inBefore(this, div);
+    return input.focus();
+  };
+  options = function options() {
+    var _a, a, bar, div, filter, filters, input, opt;
+    if ((opt = $('#box_options'))) {
+      return remove(opt);
+    } else {
+      opt = tag('div');
+      opt.id = 'box_options';
+      opt.className = 'reply';
+      position(opt);
+      bar = tag('div');
+      bar.textContent = 'Options';
+      bar.className = 'move';
+      bar.addEventListener('mousedown', mousedown, true);
+      opt.appendChild(bar);
+      filters = JSON.parse(GM_getValue('filters', '{ "hide": {} }'));
+      _a = filters;
+      for (filter in _a) { if (__hasProp.call(_a, filter)) {
+        div = tag('div');
+        input = tag('input');
+        input.value = filter;
+        input.disabled = true;
+        div.appendChild(input);
+        opt.appendChild(div);
+      }}
+      div = tag('div');
+      a = tag('a');
+      a.textContent = 'Add Class';
+      a.addEventListener('click', addClass, true);
+      div.appendChild(a);
+      opt.appendChild(div);
+      div = tag('div');
+      a = tag('a');
+      a.textContent = 'save';
+      a.addEventListener('click', save, true);
+      div.appendChild(a);
+      div.appendChild(text(' '));
+      a = tag('a');
+      a.textContent = 'cancel';
+      a.addEventListener('click', cancel, true);
+      div.appendChild(a);
+      opt.appendChild(div);
+      return document.body.appendChild(opt);
+    }
+  };
+  box = tag('div');
+  box.id = 'box';
+  box.className = GM_getValue('className', 'reply');
+  position(box);
   bar = tag('div');
   bar.className = 'move top';
   bar.addEventListener('mousedown', mousedown, true);
-  filter.appendChild(bar);
+  box.appendChild(bar);
+  select = tag('select');
+  filters = JSON.parse(GM_getValue('filters', '{ "hide": {} }'));
+  _a = filters;
+  for (filter in _a) { if (__hasProp.call(_a, filter)) {
+    option = tag('option');
+    option.textContent = filter;
+    select.appendChild(option);
+  }}
+  box.appendChild(select);
+  //currently displayed filter
+  filter = filters[select.value];
   fields = ['Name', 'Tripcode', 'Email', 'Subject', 'Comment', 'File'];
-  _b = fields;
+  _c = fields;
-  for (_a = 0, _c = _b.length; _a < _c; _a++) {
+  for (_b = 0, _d = _c.length; _b < _d; _b++) {
-    field = _b[_a];
+    field = _c[_b];
     div = tag('div');
     label = tag('label');
-    label.appendChild(text(field));
+    label.textContent = field;
     input = tag('input');
-    input.value = GM_getValue(field, '');
+    input.value = filter[field] || '';
     input.name = field;
     input.addEventListener('keydown', keydown, true);
     label.appendChild(input);
     div.appendChild(label);
-    filter.appendChild(div);
+    box.appendChild(div);
   }
-  apply = tag('a');
-  apply.textContent = 'apply';
-  apply.className = 'pointer';
-  apply.addEventListener('click', filterAll, true);
-  reset = tag('a');
-  reset.textContent = 'reset';
-  reset.className = 'pointer';
-  reset.addEventListener('click', resetF, true);
-  autoHide = tag('a');
-  autoHide.textContent = 'autohide';
-  autoHide.className = 'pointer';
-  autoHide.addEventListener('click', autoHideF, true);
   div = tag('div');
   div.className = 'bottom';
-  div.appendChild(apply);
+  _f = ['apply', 'reset', 'options', 'autohide'];
-  div.appendChild(text(' '));
+  for (_e = 0, _g = _f.length; _e < _g; _e++) {
-  div.appendChild(reset);
+    name = _f[_e];
-  div.appendChild(text(' '));
+    a = tag('a');
-  div.appendChild(autoHide);
+    a.textContent = name;
-  filter.appendChild(div);
+    if (name === 'apply') {
-  document.body.appendChild(filter);
+      f = filterAll;
+    } else if (name === 'reset') {
+      f = reset;
+    } else if (name === 'options') {
+      f = options;
+    } else if (name === 'autohide') {
+      f = autoHide;
+    }
+    a.addEventListener('click', f, true);
+    div.appendChild(a);
+    div.appendChild(text(' '));
+  }
+  box.appendChild(div);
+  document.body.appendChild(box);
   filterAll();
 })();