Tumblr notes filtering, autoloading & counts

Allows filtering of Tumblr notes by type (with counts) & autoloading of all notes

Voor het installeren van scripts heb je een extensie nodig, zoals Tampermonkey, Greasemonkey of Violentmonkey.

Voor het installeren van scripts heb je een extensie nodig, zoals Tampermonkey of Violentmonkey.

Voor het installeren van scripts heb je een extensie nodig, zoals Tampermonkey of Violentmonkey.

Voor het installeren van scripts heb je een extensie nodig, zoals Tampermonkey of Userscripts.

Voor het installeren van scripts heb je een extensie nodig, zoals {tampermonkey_link:Tampermonkey}.

Voor het installeren van scripts heb je een gebruikersscriptbeheerder nodig.

(Ik heb al een user script manager, laat me het downloaden!)

Voor het installeren van gebruikersstijlen heb je een extensie nodig, zoals {stylus_link:Stylus}.

Voor het installeren van gebruikersstijlen heb je een extensie nodig, zoals {stylus_link:Stylus}.

Voor het installeren van gebruikersstijlen heb je een extensie nodig, zoals {stylus_link:Stylus}.

Voor het installeren van gebruikersstijlen heb je een gebruikersstijlbeheerder nodig.

Voor het installeren van gebruikersstijlen heb je een gebruikersstijlbeheerder nodig.

Voor het installeren van gebruikersstijlen heb je een gebruikersstijlbeheerder nodig.

(Ik heb al een beheerder - laat me doorgaan met de installatie!)

// ==UserScript==
// @name          Tumblr notes filtering, autoloading & counts
// @include       http://*tumblr.com/post/*
// @description   Allows filtering of Tumblr notes by type (with counts) & autoloading of all notes
// @version       1.3
// @author        JesseW
// @contributor   wOxxOm
// @license       MIT License
// @run-at        document-start
// @grant         none
// @namespace https://greasyfork.org/users/2423
// ==/UserScript==

// The original code for autoloading came from wOxxOm's script,
//available at: https://greasyfork.org/en/scripts/8157-tumblr-notes-autoload

window.addEventListener('DOMContentLoaded', function () {
  filterWhenLoadingMoreNotes();
  document.querySelector('.notes') .insertAdjacentHTML(
    'beforebegin', 
    '<div style="border: 2px black ridge">'
    + '<input checked id="with_commentary_checkbox" type="checkbox"/>Reblogs with commentary (<span id="with_commentary_count"></span>)'
    + '<br/><input checked id="reply_checkbox" type="checkbox"/>Replies (<span id="reply_count"></span>)'
    + '<br/><input checked id="reblog_checkbox" type="checkbox"/>Reblogs without commentary  (<span id="reblog_count"></span>)'
    + '<br/><input checked id="like_checkbox" type="checkbox">Likes  (<span id="like_count"></span>)'
    + '<br/><button id="loadallBtn">Load all notes</button></div>')
  document.getElementById('loadallBtn').addEventListener('click', clickMore);
  document.getElementById('with_commentary_checkbox').addEventListener('change', filterNotes);
  document.getElementById('reply_checkbox').addEventListener('change', filterNotes);
  document.getElementById('reblog_checkbox').addEventListener('change', filterNotes);
  document.getElementById('like_checkbox').addEventListener('change', filterNotes);
});

function filterWhenLoadingMoreNotes() {
    var more = document.querySelector('.more_notes_link');
  more.addEventListener('click', filterWhenLoadingMoreNotes);
  if (more) {
      var ob = new MutationObserver(function (mutations) {
      ob.disconnect();
        filterNotes();
        filterWhenLoadingMoreNotes()
    });
    ob.observe(more.parentNode.parentNode, {
      subtree: true,
      childList: true
    });
  }
}

function shouldFilter(note) {
  if (note.classList.contains('more_notes_link_container') ||
     (document.getElementById('with_commentary_checkbox').checked &&
      note.classList.contains('with_commentary')) || 
     (document.getElementById('reply_checkbox').checked &&
      note.classList.contains('reply')) ||
     (document.getElementById('reblog_checkbox').checked &&
      note.classList.contains('reblog') &&
      note.classList.contains('without_commentary')) ||
     (document.getElementById('like_checkbox').checked &&
      note.classList.contains('like'))) {
      return false;
  }
  return true;
}

function filterNotes() {
  var notes = document.querySelectorAll('.note');
  var counts = {'commentary': 0, 'reply': 0, 'reblog': 0, 'like': 0};
  for (var i = 0; i < notes.length; ++i) {
    notes[i].hidden = shouldFilter(notes[i]);
    if (notes[i].classList.contains('with_commentary')) {
      counts['commentary'] += 1
    } else if (notes[i].classList.contains('reply')) {
      counts['reply'] += 1
    } else if (notes[i].classList.contains('reblog') &&
              notes[i].classList.contains('without_commentary')) {
      counts['reblog'] += 1
    } else if (notes[i].classList.contains('like')) {
      counts['like'] += 1
    }
  }
  document.getElementById('with_commentary_count').textContent = counts['commentary'];
  document.getElementById('reply_count').textContent = counts['reply'];
  document.getElementById('reblog_count').textContent = counts['reblog'];
  document.getElementById('like_count').textContent = counts['like'];
}

function clickMore() {
  filterNotes();
  var more = document.querySelector('.more_notes_link');
  if (more) {
    more.click();
    var ob = new MutationObserver(function (mutations) {
      ob.disconnect();
      setTimeout(function () {
        clickMore()
      }, 200);
    });
    ob.observe(more.parentNode.parentNode, {
      subtree: true,
      childList: true
    });
  }
}