Userscript : Pantip White Theme

pantip.user.js

/*
Tampermonkey script for pantip.com
This is my white theme for pantip topic page. Useful for me while reading it.

## How to use?
1. Install tampermonkey chrome extension (https://chrome.google.com/webstore/detail/tampermonkey/dhdgffkkebhmkfjojejmpbldmpobfkfo)
2. Refresh this page
3. Open any pantip topic page
*/

// ==UserScript==
// @name       Pantip White Theme
// @namespace  https://gist.github.com/adkdev/8c76d842fde05432b3dd
// @version    1.1
// @description  My Pantip white theme
// @match      *://pantip.com/topic/*
// @match      *://m.pantip.com/topic/*
// @copyright  2015+, adkdev
// ==/UserScript==

(function() {
    // configs
    var bgColor = '#fff';
    var bgColorAuthor = '#efefef';
    var fontColor = '#222';
    var linkColor = '#666';
    var isM = (location.href.indexOf('m.') > 0);
    var i=0;
    var el = null;
    var isHideAds = true;
    // main script
    if (isM) {
        $('body').style.backgroundColor = bgColor;
        $('.inner-wrap').setAttribute("style", "margin-bottom: 2em;"); // inner-wrap
        $('.tab-bar').style.backgroundColor = bgColor;
        $('.m-post-owner').style.backgroundColor = bgColor; // first box
        $('.review-section').style.backgroundColor = bgColor;

        // changeCommentBoxes
        el = $$('.m-post-comment-owner');
        if (typeof el != 'undefined') {
            for (i=0; i<el.length; i++) {
                el[i].style.backgroundColor = bgColorAuthor;
                $('.m-display-post-story', el[i]).style.color = fontColor;
            }
        }
        el = $$('.m-display-post-wrapper-inner-owner');
        if (typeof el != 'undefined') {
            for (i=0; i<el.length; i++) {
                el[i].style.backgroundColor = bgColorAuthor;
                $('.m-display-post-story', el[i]).style.color = fontColor;
            }
        }
        el = $$('.m-post-comment');
        if (typeof el != 'undefined') {
            for (i=0; i<el.length; i++) {
                el[i].style.backgroundColor = bgColor;
                $('.m-display-post-story', el[i]).style.color = fontColor;
                $('.down-button', el[i]).style.backgroundColor = bgColor; // reply button
            }
        }

        // another ajax box
        unsafeWindow.$('body').ajaxSuccess (
            function (event, requestData) {
                doPostBox();
            }
        );

        // relate
        $('.m-block').style.backgroundColor = bgColor;
        $('.m-block-title').style.backgroundColor = bgColor;
        // remove text ads
        el = $$('a', $('.m-block'));
        if (typeof el != 'undefined') {
            for (i=0; i<el.length; i++) {
                if (el[i].href.indexOf('ads.') !== -1)
                    el[i].parentNode.removeChild(el[i]);
            }
        }
        el = $$('.m-thumb');
        if (typeof el != 'undefined') {
            for (i=0; i<el.length; i++) {
                el[i].style.backgroundColor = bgColor;
                $('a', el[i]).style.color = linkColor;
                // $('.subject', el[i]).style.color = linkColor;
            }
        }
        el = $$('.m-block-inner');
        if (typeof el != 'undefined') {
            for (i=0; i<el.length; i++) {
                el[i].style.backgroundColor = bgColor;
                $('.m-post-pick-title', el[i]).style.backgroundColor = bgColor;
                $('.alert-box-interesting-post', el[i]).style.backgroundColor = bgColor;
                $('a', $('.alert-box-interesting-post', el[i])).style.color = linkColor;
            }
        }
        // resize relate images
        var img = $$('img', $('.m-block'));
        // https://carlo.zottmann.org/2013/04/14/google-image-resizer/
        var baseURL = 'https://images1-focus-opensocial.googleusercontent.com/gadgets/proxy?url=IMG_URL&container=focus&resize_w=247&refresh=2592000'; // &resize_h=79
        if (typeof img != 'undefined') {
            for (i=1; i<img.length; i++) { // skip heart image
                img[i].style.maxHeight = "none";
                img[i].src = baseURL.replace('IMG_URL', encodeURIComponent(img[i].src));
                img[i].parentNode.style.overflow = 'hidden';
                img[i].parentNode.style.height = '79px';
            }
        }

        $('.wrap-comment').parentNode.removeChild($('.wrap-comment'));
        $('.wrap-social-banner').parentNode.removeChild($('.wrap-social-banner'));
        $('.m-footer').parentNode.removeChild($('.m-footer'));
        $('.m-wrap-sticky-footer').parentNode.removeChild($('.m-wrap-sticky-footer'));
    } else { // desktop version
        // set bg and font color
        $('body').style.backgroundColor = bgColor;
        $('.main-post').style.backgroundColor = bgColor; // first box
        $('.display-post-story').style.color = fontColor;

        // relate
        el = $$('.related-topic-interest');
        if (typeof el != 'undefined') {
            for (i=0; i<el.length; i++) {
                el[i].style.backgroundColor = bgColor;
                $('a', el[i]).style.color = linkColor;
                $('.post-pick-title', el[i]).style.color = linkColor;
            }
        }
        // post box
        doPostBox();

        // another ajax box
        unsafeWindow.$('body').ajaxSuccess (
            function (event, requestData) {
                doPostBox();
                $('#jump_paging').style.display = 'none'; // fixed footer
                $('.footer').style.display = 'none'; // footer
                // clear up
                $('.content').setAttribute("style", "margin-bottom: 0px;"); // footer
            }
        );
        $('.related-block-title').style.backgroundColor = bgColor;
        $('.comment-box-remark').style.backgroundColor = bgColor;

        $('.fixed-header').remove();
        // hide
        $('.header').style.background = "none";
        $('.search-wrap').style.display = 'none';
        $('.comment-box-color').style.display = 'none'; // comment box
        $('.post-pick-ad').style.display = 'none'; // ads in relate

        // hide ads
        if (isHideAds) {
            $('.ads-leaderboard').setAttribute("display", "none");
            $('.ads-topbillboard').setAttribute("display", "none");
            $('#ads-topbillboard').setAttribute("display", "none");
        }
    }
    function doPostBox() {
        var el = $$('.display-post-wrapper-inner');
        if (typeof el != 'undefined') {
            for (i=0; i<el.length; i++) {
                el[i].style.backgroundColor = ( el[i].parentElement.className.split(' ').indexOf('altcolor05') !==-1 ) ? bgColorAuthor : bgColor;
                $('.display-post-story', el[i]).style.color = fontColor;
            }
        }
        el = $$('.emotion-vote-list');
        if (typeof el != 'undefined') {
            for (i=0; i<el.length; i++) {
                el[i].style.backgroundColor = '#efefef';
                el[i].style.color = '#666';
            }
        }
    }
    function $ (selector, el) {
        if (!el) {el = document;}
        return el.querySelector(selector);
    }
    function $$ (selector, el) {
        if (!el) {el = document;}
        return el.querySelectorAll(selector);
    }
})();