Habitica Tag Visibility Userscript

habitica-tags-userscript.js

// ==UserScript==
// @name         Habitica Tag Visibility
// @namespace    tobek-habitica
// @version      0.1
// @description  Makes tags visible in the name of the task, without having to hover over the tags icon. Tags are shown as "[tag1][tag2][...] Task name...". This is a total hack and would be much better as part of official Habitica codebase but that's more work and discussion than the 10m I spent on this.
// @author       Tobek
// @match        https://habitica.com/*
// @grant        none
// ==/UserScript==

(function() {
  'use strict';

  var interval;
  var hiddenProp = 'hidden';

  if (hiddenProp in document)
    document.addEventListener('visibilitychange', visChange);
  else if ((hiddenProp = 'mozHidden') in document)
    document.addEventListener('mozvisibilitychange', visChange);
  else if ((hiddenProp = 'webkitHidden') in document)
    document.addEventListener('webkitvisibilitychange', visChange);
  else if ((hiddenProp = 'msHidden') in document)
    document.addEventListener('msvisibilitychange', visChange);

  function visChange() {
    if (interval) {
      clearInterval(interval);
    }

    if (! document[hiddenProp]) {
      tagStuff();

      // @TODO Maybe should use MutationObserver instead?
      interval = setInterval(tagStuff, 5000);
    }
  }


  function tagStuff() {
    // console.time('ran tag stuff in');

    var tagTooltip, tagString, $this;
    $('.task').each(function() {
      $this = $(this);
      tagTooltip = $(this).find('.glyphicon-tags').attr('tooltip');

      $this.find('.toby-tag-string').remove();

      if  (! tagTooltip) {
        return;
      }

      tagString = '<b class="toby-tag-string">[' + tagTooltip.split(', ').join('][') + ']</b>';

      $this.find('.task-text p').html(tagString + ' ' + $this.find('.task-text p').html());
    });

    // console.timeEnd('ran tag stuff in');
  }


  if (window.jQuery) {
    $(visChange);
  }
  else {
    var jQueryWaitInterval = setInterval(function() {
      if (window.jQuery) {
        clearInterval(jQueryWaitInterval);
        $(visChange);
      }
    }, 100);
  }

})();