8kun Baker tools v0.2.0

 /*
  8Kun Baker Tools
  Version 0.2.0

  Features:
  ========
  Notables
    * Highlight posts that are marked notable (I.E. someone has replied and said notable) in Yellow
    * Highlight nominating posts in Pink
    * Higlight nominating posts in posts mentions in Green
    * Filter to only nominating and notable posts
    * Generate notables post

  Comfyness
    * Highlight PB links
    * Thread stats overlay with
      * color coded reply count that goes from green to red as bread ages
      * UID Count
      * Jump To Bottom Link
      * Jump To Bottom Top link

  Version History:
  https://pastebin.com/eNmTtzdi 0.1.0
  */
(function ($) {
  'use strict';

  var BAKER_TOOLS_WINDOW_ID = "baker-tools-window";

  /**
   * Wrapper for 8kun active_page variable to determine the type of page the user is on.
   */
  class ActivePage {
    static Index = "index"
    static Catalog = "catalog"
    static Thread = "thread"

    static isIndex() {
      return window.active_page == ActivePage.Index;
    }

    static isCatalog() {
      return window.active_page == ActivePage.Catalog;
    }

    static isThread() {
      console.log(window.active_page == ActivePage.Thread);
      return window.active_page == ActivePage.Thread;
    }
  }

  //TODO: Create Dough?
  //TODO: Highlight/filter yous - when they actually work for me again
  //TODO: Nominate notable template
  //
  //TODO: Highlight q posts
  //TODO: Q's Trip-code: Q !!Hs1Jq13jV6 in op
  //    TODO:  highlight q in shortlinks

  /******************************
  * Initialization
  ******************************/

  /**
  * Sets styles for notable, nominator, nominator in mentions and baker tools window
  */
  function setupStyles() {
    var sheet = window.document.styleSheets[0];

    sheet.insertRule(`div.post.${ResearchBread.NOTABLE_CLASS} { background-color: #FFFFCC; }`, sheet.cssRules.length);
    sheet.insertRule(`div.post.${ResearchBread.NOMINATOR_CLASS} { background-color: #FFCCE5;  }`, sheet.cssRules.length);
    sheet.insertRule(`div.post.reply .mentioned .${ResearchBread.NOMINATOR_CLASS} { color: #00CC00; font-weight: bold; font-size: 1.5em}`, sheet.cssRules.length);
    sheet.insertRule(`#${BAKER_TOOLS_WINDOW_ID} { width: 300px; background-color: rgb(214, 218, 240); padding: 5px;
      position: fixed; z-index: 100; float: right; right:28.25px}`, sheet.cssRules.length);
    sheet.insertRule(`#baker-tools-stats { padding: 5px; position: fixed; z-index: 100; float: right; right:28.25px; bottom: 28.25px}`, sheet.cssRules.length);
    sheet.insertRule(`div.post.reply div.body a.previousBread { color: #8B0000; }`, sheet.cssRules.length);
    sheet.insertRule(`a.previousBread::after { content: " (pb)"; }`, sheet.cssRules.length);
  }

  /**
   * Listens for "new_post" event and checks for notable nominations
   */
  function setupEventListeners() {
      $(document).on("new_post", function(e, post) {
        var postBody = post.querySelector('.body')
        $(post).removeAttr("style")

        if (ResearchBread.isNominatingPost(post)) {
          ResearchBread.markAsNominator(post);
          var [postNumber, notable] = ResearchBread.getNotableFromNominator(post)
          ResearchBread.markAsNotable(notable)
          ResearchBread.markNominatorInMentions(notable, post);
        }
      });
  }


  /*****************************
   * Research Bread Class
   ****************************/
  class ResearchBread {
    static OP_SUBJECT_SELECTOR = ".post.op > p > label > span.subject";
    static POST_BODY_SELECTOR = ".post > .body";
    static POST_SELECTOR = ".post";
    static NOMINATING_REGEX = /notable/i;
    static REPLY_REGEX = /highlightReply\('(.+?)'/;
    static DOUGH_POSTS_REGEX = /^(Welcome To Q Research General|Global Announcements|War Room|QPosts Archives).*/;

    static NOMINATOR_CLASS = "notable-nominator";
    static NOTABLE_CLASS = "notable";

    /**
     * Get an array of post bodies with dough posts filtered out
     * @returns NodeList of .post elements
     */
    static getPostsWithoutDough() {
      var posts = Array.from(document.querySelectorAll(ResearchBread.POST_SELECTOR));
      var filteredPosts = posts.filter(function(post){
        return !post.querySelector('.body').innerText.match(ResearchBread.DOUGH_POSTS_REGEX);
      })
      return filteredPosts;
    }

    /**
     * Determine what the bread number is
     */
    static getBreadNumber() {
      var breadNumberRegex = /#(.+?) /;
      return document.querySelector(ResearchBread.OP_SUBJECT_SELECTOR)
                      .innerText
                          .match(breadNumberRegex)[1] || "COULD NOT FIND BREAD NUMBER";
    }

    /**
     * Is the post nominating a notable
     * @arg Element .post
     */
    static isNominatingPost(post) {
      return post.textContent.search(ResearchBread.NOMINATING_REGEX) != -1 && //User declared something notable
             post.querySelector('.body').innerHTML.match(ResearchBread.REPLY_REGEX); // Link to the notable
    }

    /**
     * @arg post .post
     * @return RegexMatch Capture 1 is the number
     */
    static getFirstReplyLink(post) {
        var match = post.querySelector('.body').innerHTML.match(ResearchBread.REPLY_REGEX);
        return match && match[1] || null;
    }

    /**
     * Finds posts that are being tagged as notable.
     *
     * I.E. Finding any post that has been replied to by a post with the string "notable" in it.
     * Maybe at somepoint this can be smarter.  Q give me some dwave snow white tech!
     *
     * Highlights notable posts in yellow
     * Highlights nominating posts in pink <3
     * Highlights nominating posts in mentions
     * Add nominee count to post
     */
    static findNominatedNotables() {
      var postsWithoutDough = ResearchBread.getPostsWithoutDough();

      //^s to ignore notables review posts
      var nominatingPosts = postsWithoutDough.filter(post => ResearchBread.isNominatingPost(post));
      var notables = [];

      nominatingPosts.forEach(function(nominatingPost) {
        var [postNumber, notable] = ResearchBread.getNotableFromNominator(nominatingPost);

        if (postNumber) {
          ResearchBread.markAsNominator(nominatingPost);

          if (postNumber in notables) {
            var nominatedPost =  notables[postNumber];
            nominatedPost.nominatingPosts.push(nominatingPost);
          } else {

            var description = '[DESCRIPTION]'
            // Post is in this bread.
            // TODO: What to do for lb/pb?
            if (notable)  {
              ResearchBread.markAsNotable(notable);
              description = notable.querySelector('.body').innerText.replace(/\n/g,' ');
            }

            notables[postNumber] = {
              nominatingPosts: [nominatingPost],
              shortLink: ">>" + postNumber,
              postNumber: postNumber,
              description: description,
              post: notable,
            };
          }

          ResearchBread.markNominatorInMentions(notable, nominatingPost);
        }
      });
      console.log(notables)
      return notables;
    }

    static getNotableFromNominator(nominatingPost) {
      var postNumber = ResearchBread.getFirstReplyLink(nominatingPost);
      var nominatedPost = document.querySelector("#reply_" + postNumber);
      return [postNumber, nominatedPost]
    }

    /**
     * @arg post .post
     */
    static markAsNotable(post) {
      console.info(`Mark as notable: ${post}`)
      post.classList.add(ResearchBread.NOTABLE_CLASS);
    }

    /**
     * @arg post .post
     */
    static markAsNominator(post) {
        console.info(`Mark as nominator: ${post}`)
        post.classList.add(ResearchBread.NOMINATOR_CLASS);
    }

    static markNominatorInMentions(notablePost, nominatingPost) {
          console.info(`Mark as nominator in mentions.  Notable: ${notablePost}, Nominating Post: ${nominatingPost}`)
          if (!notablePost) {
            console.info(`Notable post is null - possible pb/lb`)
            return;
          }
          var nominatingPostId = nominatingPost.id.replace("reply_","");
          $(notablePost).find('.mentioned-'+nominatingPostId).addClass(ResearchBread.NOMINATOR_CLASS);
    }

    /**
     * Toggle whether only the notable/nominee posts are shown or not
     * @arg onlyShowNotables boolean If true, only show notables/nominators, else show all
     */
    static setOnlyShowNotables(onlyShowNotables) {
      var notableOrNominationPostsSelector = `div.post.${ResearchBread.NOTABLE_CLASS}, div.post.${ResearchBread.NOMINATOR_CLASS}`
      var notableOrNominationPostBreaksSelector = `div.post.${ResearchBread.NOTABLE_CLASS}+br,div.post.${ResearchBread.NOMINATOR_CLASS}+br`;

      if (onlyShowNotables){
        $(`<style id='baker-tools-hide-non-notable' type='text/css'>
          div.reply:not(.post-hover), div.post+br {display: none !important; visibility: hidden !important;}
          ${notableOrNominationPostsSelector}, ${notableOrNominationPostBreaksSelector}
          { display: inline-block !important; visibility: visible !important; }
          </style>`).appendTo("head")
      } else {
         $("#baker-tools-hide-non-notable").remove();
        // For whatever reason, when the non notable posts are filtered and new posts come through the auto_update,
        // the posts are created with style="display:block" which messes up display.  Remove style attr
         $(ResearchBread.POST_SELECTOR).removeAttr("style")
      }
    }


  }


/*****************************
 * UI
 * ***************************/

  /**
   * Creates the Baker Tools link in the top bar (right next to 8kun options)
   */
  function createBakersToolsLink() {
    var bakerToolsLink = document.createElement("a");
    bakerToolsLink.textContent = "[Baker Tools]"
    bakerToolsLink.style.cssText = "float: right;"
    bakerToolsLink.title = "Baker Tools"
    bakerToolsLink.href = "javascript:void(0)"
    document.querySelector('.boardlist').appendChild(bakerToolsLink)

    bakerToolsLink.onclick = function() {
      if($(`#${BAKER_TOOLS_WINDOW_ID}`).is(':visible') ) {
        $(`#${BAKER_TOOLS_WINDOW_ID}`).hide();
      } else {
        $(`#${BAKER_TOOLS_WINDOW_ID}`).css({"top": 15});
        $(`#${BAKER_TOOLS_WINDOW_ID}`).show();
      }
    };
  }

  function createBakerWindow() {
      var bakerWindow = document.createElement("div");
      bakerWindow.id = BAKER_TOOLS_WINDOW_ID;

      bakerWindow.innerHTML = `
      <h2>Baker Tools</h2>
      <label for="baker-show-only-notable">Only Show Notable/Nomination Posts</label>
      <input type="checkbox" id="baker-show-only-notable" />
      <button id="baker-create-notable-post">Create Notable Post</button>
      <textarea id="baker-notable-controls"></textarea>
      `
      document.body.appendChild(bakerWindow);

      $('#baker-show-only-notable').change(function(e) {
        ResearchBread.setOnlyShowNotables(e.target.checked)
      });
      $('#baker-create-notable-post').click(function() {
        if($('#baker-notable-controls').val()) {
          if (!confirm("If you continue, any changes you made will be overwritten!")) {
            return;
          }
        }
        $('#baker-notable-controls').val(createNotablesPost());
      })
      $(bakerWindow).draggable();
      $(bakerWindow).hide();
  }


  /**
   * Create the notables post for review
   */
  function createNotablesPost() {
    var notables = ResearchBread.findNominatedNotables();
    var breadNumber = ResearchBread.getBreadNumber();
    var post = `'''#${breadNumber}'''\n\n`;

    notables.forEach(function(notable) {
      post += `${notable.shortLink} ${notable.description}\n\n`;
    });

    return post;
  }

  function createBreadStatsOverlay() {
      var statsOverlay = document.createElement("div");
      statsOverlay.id = "baker-tools-stats";

      statsOverlay.innerHTML = `
      Posts: <span id="baker-tools-stats-post-count" ></span> UIDS: <span id="baker-tools-stats-uid-count"></span>
        <a href="#bottom" alt="to-bottom">⏬</a> <a href="#top" alt="to-top">⏫</a>
      `

      var UpdateStats = function() {
        var postCount = $("#thread_stats_posts").text()
        var maxPosts = 750
        var progress = postCount/maxPosts

        var postColor = "green";
        if (progress >= .87) {  // ~ 650 posts (100 posts left)
          postColor = "red";
        } else if (progress >= .5) {
          postColor = "goldenrod";
        }
        $("#baker-tools-stats-post-count").text(postCount).css({'color': postColor})
        $("#baker-tools-stats-uid-count").text($("#thread_stats_uids").text())
      }

      document.body.appendChild(statsOverlay);
      UpdateStats();
      $(document).on("new_post", function(e, post) { UpdateStats() });
  }

  /**
   * Loop through post links and mark those that link to breads other than this one.
   * Setup event listener for new post
   */
  function markPreviousBreadLinksInit() {
    var breadFileName = document.location.pathname.split('/').slice(-1)[0];

    var linkSelector = "div.body > p.body-line.ltr > a"
    var links = $(linkSelector).filter("[onClick]");

    var markLinkIfPreviousBread = function(link) {
       var linkFileName = link.href.split('/').slice(-1)[0].split("#")[0];
       if ($(link).attr('onclick').search(ResearchBread.REPLY_REGEX) !=1 &&
             breadFileName != linkFileName) {
           $(link).addClass('previousBread');
       }
    }

    links.each((index,link) => markLinkIfPreviousBread(link));

    $(document).on("new_post", function(e, post) {
      $(post).find(linkSelector).each((index,link) => markLinkIfPreviousBread(link));
    });
  };



  //Only setup the tools if we are on a thread
  if (ActivePage.isThread()) {
    setupStyles();

    $(document).ready(function() {
      createBakerWindow();
      createBakersToolsLink();
      createBreadStatsOverlay();
      ResearchBread.findNominatedNotables();
      markPreviousBreadLinksInit();
      setupEventListeners();
    });
  }


})(window.jQuery);