reddit styles

reddit themes for the common folk

You will need to install an extension such as Tampermonkey, Greasemonkey or Violentmonkey to install this script.

You will need to install an extension such as Tampermonkey or Violentmonkey to install this script.

You will need to install an extension such as Tampermonkey or Violentmonkey to install this script.

You will need to install an extension such as Tampermonkey or Userscripts to install this script.

You will need to install an extension such as Tampermonkey to install this script.

You will need to install a user script manager extension to install this script.

(I already have a user script manager, let me install it!)

You will need to install an extension such as Stylus to install this style.

You will need to install an extension such as Stylus to install this style.

You will need to install an extension such as Stylus to install this style.

You will need to install a user style manager extension to install this style.

You will need to install a user style manager extension to install this style.

You will need to install a user style manager extension to install this style.

(I already have a user style manager, let me install it!)

// ==UserScript==
// @name        reddit styles
// @namespace   http://nucular.github.io
// @version     0.6.1
// @description reddit themes for the common folk
// @copyright   2015, nucular
// @license     MIT License
// @include     http://www.reddit.com/*
// @include     https://www.reddit.com/*
// @run-at      document-start
// @grant       GM_getValue
// @grant       GM_setValue
// @require     https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js
// ==/UserScript==

var featured = [
    "NautClassic",
    "serene",
    "carbon",
    "edurne",
    "mindashq"
];

var activated = GM_getValue("activated", false);
var subreddit = GM_getValue("subreddit", "");
var excluded = GM_getValue("excluded", "").split(",");
var otherpages = GM_getValue("otherpages", true);
var dontoverride = GM_getValue("dontoverride", false);

function setActivated(a) {
    activated = a;
    GM_setValue("activated", a);
}

function setOtherPages(a) {
    otherpages = a;
    GM_setValue("otherpages", a);
}

function setDontOverride(a) {
    dontoverride = a;
    GM_setValue("dontoverride", a);
}

function setSubreddit(s) {
    var sane = s.replace(/\/r\/|[^\w]/g, "");
    subreddit = sane;
    if ($("#styles_subreddit").length > 0)
        $("#styles_subreddit").val(sane);
    GM_setValue("subreddit", sane);
}

function setExcluded(e) {
    var split = e.split(",");
    var sane = [];
    for (var i = 0; i < split.length; i++) {
        var v = split[i].replace(/\/r\/|[^\w*?+]/g, "");
        if (v)
            sane.push(v);
    }
    excluded = sane;
    sane = sane.join(",");
    if ($("#styles_excluded").length > 0)
        $("#styles_excluded").val(sane);
    GM_setValue("excluded", sane);
}

function loadStyle() {
    if (subreddit == "") {
        return;
    }
    // jQuery may not be loaded yet here
    var links = document.getElementsByTagName("link");
    var href = "https://www.reddit.com/r/" + subreddit + "/stylesheet/";
    
    var done = false;
    for (var i = 0; i < links.length; i++) {
        if (links[i].title == "applied_subreddit_stylesheet") {
            if (links[i].href != href)
                links[i].href = href;
            done = true;
        }
    }
    if (!done) {
        // Assume we're on another page
        var link = document.createElement("link");
        link.title = "applied_subreddit_stylesheet";
        link.rel = "stylesheet";
        link.href = href;
        document.head.appendChild(link);
    }
}

function loadPrefs() {
    document.addEventListener("DOMContentLoaded", function() {
        $("<tr><th>reddit styles</th><td class='prefright'>"
         + "<input name='styles_activated' id='styles_activated' type='checkbox'>"
         + "<label class='' for='styles_activated'>activate <a href='https://greasyfork.org/en/scripts/9451-reddit-styles'>reddit styles</a></label> "
         + "<span class='details'>use the custom theme of any subreddit everywhere</span>"
         + "<br>"
         + "use theme from /r/<input name='styles_subreddit' id='styles_subreddit' type='text' style='width: 150px'> "
         + "<span class='details' id='styles_featured'>e.g.&nbsp;</span>"
         + "<br>"
         + "exclude subreddits <input name='styles_excluded' id='styles_excluded' type='text' style='width: 150px'> "
         + "<span class='details'>separated by commas, use * and ? as wildcards</span>"
         + "<br>"
         + "<input name='styles_otherpages' id='styles_otherpages' type='checkbox'>"
         + "<label class='' for='styles_otherpages'>style other pages too (if available)</label> "
         + "<span class='details'>e.g the front, subreddits, compose/messages and explore pages</span>"
         + "<br>"
         + "<input name='styles_dontoverride' id='styles_dontoverride' type='checkbox'>"
         + "<label class='' for='styles_dontoverride'>don't override if a subreddit already has a custom theme</label> "
         + "<span class='details'>this will delay the loading of your custom stylesheet though</span>"
         + "</tr></td>").prependTo(".content.preftable > tbody");
    
        for (var i = 0; i < featured.length; i++) {
            $("<a></a>")
                .attr("href", "https://www.reddit.com/r/" + featured[i])
                .text(featured[i])
                .appendTo("#styles_featured")
                .on("click", function(e) {
                    e.preventDefault();
                    setSubreddit($(this).text());
                });
            if (i < featured.length-1)
                $("<span>,</span>").appendTo("#styles_featured");
        }
    
        $("#styles_activated")
            .on("change", function(e) {
                setActivated(this.checked);
            })[0].checked = activated;
        $("#styles_otherpages")
            .on("change", function(e) {
                setOtherPages(this.checked);
            })[0].checked = otherpages;
        $("#styles_dontoverride")
            .on("change", function(e) {
                setDontOverride(this.checked);
            })[0].checked = dontoverride;
        $("#styles_subreddit")
            .val(subreddit)
            .on("change", function(e) {
                setSubreddit($(this).val());
            });
        $("#styles_excluded")
            .val(excluded.join(","))
            .on("change", function(e) {
                setExcluded($(this).val());
            });
    });
}


var page = window.location.pathname.match(/^(\/\w+)/);
if (!page) page = "/";
else page = page[1];

if (activated) {
    // Subreddits
    if (page == "/r") {
        var sub = window.location.pathname.match(/^\/r\/([\w+]+)/)[1];
        // First check if the sub is excluded
        for (var i = 0; i < excluded.length; i++) {
            if (sub.match(new RegExp("^" + excluded[i].replace(/([\*\?])/g, ".$1") + "$")))
                return;
        }
        // Gotta poke the server about this, sadly
        if (dontoverride) {
            var http = new XMLHttpRequest();
            http.open("HEAD", "https://www.reddit.com/r/" + sub + "/stylesheet/");
            http.onreadystatechange = function() {
                if (this.readyState == this.HEADERS_RECEIVED) {
                    if (this.status == 403 || this.status == 404) { // 403 = banned/private, 404 = no style
                        loadStyle();
                        setInterval(loadStyle, 300);
                    }
                }
            };
            http.send();
        } else {
            loadStyle();
            setInterval(loadStyle, 300);
        }
    }
    
    // Other areas
    else if (otherpages && page != "/prefs") { //(page == "/" || page == "/compose" || page == "/subreddits" || page == "/messages" || page == "/explore")) {
        loadStyle();
        setInterval(loadStyle, 300);
    }
}
// Preferences
if (page == "/prefs") {
    loadPrefs();
}