Raw Source
GamingWolf / BadReadrScript

// ==UserScript==
// @name         BadReadrScript
// @namespace    http://tampermonkey.net/
// @version      1.0.8
// @description  Makes reading texts on reddit esier. Hopefully.
// @author       /u/GamingWolfie
// @match        *.reddit.com/r/*/comments/*
// @updateURL    https://raw.githubusercontent.com/GamingWolf/BadReadrScript/master/BadReadrScript.user.js
// @license      MIT; https://opensource.org/licenses/MIT
// @grant        none
// ==/UserScript==

(function () {
  'use strict';

  var reading = false,
    hotkey = 113, // 113 == F2. Use http://keycode.info/ to customise hotkey
    backgroundColour = "#161616", //Replace with any hex color code
    textColour = "#EFEFEF"; //Replace with any hex color code

  jQuery.fn.center = function () {
    this.css("margin", "0 auto");
    this.css("width", "100%");
    this.css("padding", "10px");
    return this;
  };

  jQuery.fn.formatContent = function () {
    this.css("font-family", "Arial");
    this.css("font-size", "19px");
    this.css("color", textColour);
    this.css("text-align", "justify");
    return this;
  };

  jQuery.fn.formatButton = function () {
    this.css("cursor", "pointer");
    this.css("font-size", "50px");
    this.css("text-align", "center");
    this.css("z-index", "2147483647");
    this.css("display", "block");
    return this;
  };

  jQuery.fn.formatWrapper = function () {
    this.css("position", "absolute");
    this.css("width", "100%");
    this.css("background-color", backgroundColour);
    this.css("z-index", "2147483646");
    return this;
  };

  jQuery.fn.formatHeader = function () {
    $("time:not(.readHidden)").remove();
    $("span:not(.readHidden)").remove();
    $("img:not(.readHidden)").remove();
    this.css("font-family", "Arial");
    this.css("color", textColour);
    this.css("text-align", "center");
    this.css("font-size", "70px");
    this.css("padding", "0px");
    $(".tagline:not(.readHidden)").css("font-size", "25px");
    return this;
  };

  function restore() {
    $('#readContent').remove();
  }

  function readMode() {
    var readContentHandler = $('<div id="readContentHandler"></div>');
    var readContent = $('<div id="readContent"></div>');
    var readBtn2 = $('<a id="readBtn2" title="Done reading? Go Back!"> Done </a>');
    $('body').prepend(readContentHandler);
    $('body').prepend(readContent);
    $('#siteTable').contents().clone().appendTo('#readContentHandler');
    $(document).find('*').not('html, body, #readContentHandler, #readContent').addClass('readHidden');
    $('#readContentHandler').find('*').removeClass('readHidden');
    //$('.readHidden').hide();
    $('.top-matter:not(.readHidden)').appendTo('#readContent');
    $('.md:not(.readHidden)').appendTo('#readContent');
    $('#readContent').find('.md').append(readBtn2);
    $('#readContentHandler').remove();
    $(window).scrollTop(0);
    $('#readContent').formatWrapper();
    $('.top-matter:not(.readHidden)').center().formatHeader();
    $('.md:not(.readHidden)').center().formatContent();
    $('#readBtn2').formatButton();
    $('.res-show-link').remove();
    $('#readContent > *').addClass('readStuff');
    $(document).find('*').removeClass('readHidden');
    scrollStop();
  }

  function scrollStop() {
    var eTop = $("#readContent").offset().top;
    var eHeight = $("#readContent").height();
    var eBottom = eTop + eHeight - $(window).height();
    $(document).on("scroll", function (e) {
      if (reading) {
        var windowScrollTop = $(window).scrollTop();
        if (windowScrollTop < eTop) {
          console.log("not allowed");
          $(document).scrollTop(eTop);
        }
        else if (windowScrollTop > eBottom) {
          $(document).scrollTop(eBottom);
        }
        else {
          console.log("allowed");
        }
      }
    });
  }

  $(document).ready(function () {
    var readBtn = $('<li> <a id="readBtn" title="Format for better reading!" style="cursor: pointer;"> Read Mode </a> </li>');
    $("#siteTable .entry > ul").append(readBtn);
  });

  $(document).keydown(function (e) {
    if (e.keyCode == hotkey && !reading) {
      reading = true;
      readMode();
    }
    else if (e.keyCode == hotkey && reading) {
      reading = false;
      restore();
    }
  });

  $("#readBtn").click(function () {
    reading = true;
    readMode();
  });

  $(document).on("click", "#readBtn2", function () {
    reading = false;
    restore();
  });
})();