What The Daily WTF Paginator

// ==UserScript==
// @name        What The Daily WTF Paginator
// @namespace   http://example.org/userscripts/tdwtfpaginator
// @include     http://what.thedailywtf.com/t/*
// @version     1
// @grant       none
// ==/UserScript==
jQuery(function () {
  "use strict";

  // Configuration variables
  var postsPerPage = 50;
  var spacerSize = 2;
  var topSpacing = function () { return $('header').height() + 5 };
  var rightSpacing = function () { return 10; };

  // Discourse items that we will use
  var keys = Em.keys(Ember.View.views);
  var views = keys.map(function (key) {
    return Ember.View.views[key]
  });
  var topic = views.filterProperty('renderedName','topic')[0];
  var controller = topic.controller;

  var getUrlForPost = topic.controller.get('urlForPostNumber').bind(topic.controller);

  // Sausage bar loading
  $("head").append("<link rel='stylesheet' type='text/css' href='//christophercliff.com/sausage/lib/sausage.css' />");

  var sausageBar = $('<div />').addClass('sausage-set sausage-set-init');
  $('body').append(sausageBar);

  // Display functions
  var barHeight = 0;
  var sausageHeight = 0;
  var currentPageItem = null;

  function getPageJumper(page) {
    var postId = (page - 1) * postsPerPage + 1;
    return function () {
      console.log(postId);
      Discourse.TopicView.jumpToPost(postId);
    }
  }

  function getUrlForPage(page) {
    var postId = (page - 1) * postsPerPage + 1;
    return getUrlForPost(postId);
  }

  function updateBar(pageCount, currentPage) {
    var currentCount = sausageBar.children().length;
    var heightUpdateNeeded = sausageBar.height() != barHeight;
    barHeight = sausageBar.height();

    if (barHeight == 0) {
      // We are not ready (the CSS is not loaded yet)
    }

    if (currentCount > pageCount) {
      heightUpdateNeeded = true;
      sausageBar.children().slice(pageCount).detach();

    } else if (currentCount < pageCount) {
      heightUpdateNeeded = true;
      for (var i = currentCount + 1 ; i <= pageCount ; i++) {
        $('<a />')
          .addClass('sausage')
          .append($('<div />')
            .addClass('sausage-span')
            .text("Page " + i)
            .width(50)
            .css('left', '-50px')
          )
          .mouseover(function () {
            $(this).addClass('sausage-hover');
          })
          .mouseout(function () {
            $(this).removeClass('sausage-hover');
          })
          .attr('href', getUrlForPage(i))
//          .click(getPageJumper(i)) // Does not work right
          .appendTo(sausageBar);
      }
    }

    if (heightUpdateNeeded) {
      var usedSpacerSize = spacerSize;
      sausageHeight = (barHeight - topSpacing() - spacerSize * (pageCount + 1)) / pageCount;

      if (sausageHeight <= 0) {
        usedSpacerSize = 0;
        sausageHeight = barHeight / pageCount;
      }

      sausageBar.css({
        'top': topSpacing() + 'px',
        'right': rightSpacing() + 'px'
      });

      var position = usedSpacerSize;
      sausageBar.children().each(function () {
        $(this).css({
          'height': sausageHeight + 'px',
          'top': position + 'px',
        });
        position += sausageHeight + usedSpacerSize;
      });
    }

    if (currentPageItem) {
      currentPageItem.removeClass('sausage-current');
    }

    currentPageItem = sausageBar.children(':eq(' + (currentPage - 1) + ')');
    currentPageItem.addClass('sausage-current');
  }

  // Pagination
  var currentPage = -1;
  function updatePagination(force) {
    var currentPost = controller.get('currentPost') - 1;
    var lastPost = controller.get('highest_post_number');
    var newPage = Math.floor(currentPost / postsPerPage) + 1;
    var pageCount = Math.ceil(lastPost / postsPerPage);

    if (newPage == currentPage && !force) {
      return;
    }
    currentPage = newPage;

    updateBar(pageCount, currentPage);
  }

  // Hooking into the Discourse "progress bar"
  var oldUpdateProgressBar = topic._updateProgressBar;

  topic._updateProgressBar = function () {
    oldUpdateProgressBar.apply(this, arguments);
    updatePagination();
  };

  // Wait for CSS to be fully loaded before doing the first update
  var waitTimer = window.setInterval(function () {
    if (sausageBar.height() > 0) {
      window.clearInterval(waitTimer);
      updatePagination();
      $(window).resize(function () { updatePagination(true); });
    }
  }, 50);
});