Raw Source Toggle Dropdown

• Minified Source

ballerburg9005 / Reddit Sidebar

// ==UserScript==
// @name        Reddit Sidebar
// @namespace   reddit-sidebar
// @author      dontknowanymore
// @version     1
// @grant       none
// @match        https://*.reddit.com/*
// @match        https://reddit.com/*
// @match        http://*.reddit.com/*
// @match        http://reddit.com/*
// @grant        none
// @run-at       document-end
// @license      MIT
// @require https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js 
// ==/UserScript==

// This is pretty old from some dude on Reddit, it didn't work I had to fix it - it works mostly, for sure better than nothing


SideBarMan();

function SideBarMan() {
    document.head.innerHTML += (`
        <style type='text/css' id='REE-Sidebars'>
            .sb-off .sidebar {  width: 18px; }
            .sidebar {
                background-color: rgb(30, 30, 30);
                position: absolute;
                height:100%;
                display: flex;
            }
                .sidebar:hover {    z-index:50; }
                .sidebar.sb-right { right:0;    }
                .sb-on .sidebar.sb-right .sb-handle { margin-left:-18px;     order: 0;   }
                .sidebar.sb-left {  left:0; }
                .sidebar.sb-left .sb-handle {   position: relative; order: 1;   }
                .sb-off .sidebar .sb-track {    display: none;  }
                .sidebar .sb-track {    margin-top: 20px;   }
                .sidebar .sb-track .sb-sled {   padding: 3px;   margin:0;   }
                .sidebar .sb-handle:hover { background-color: rgb(92, 82, 82);  cursor: pointer;    }
                .sidebar .sb-handle {
                    position: fixed;
                    min-height: 100%;
                    width:18px;
                    background-color: rgb(63, 58, 58);
                }
            body.with-listing-chooser .listing-chooser {    position: static;   }
            body.with-listing-chooser .sidebar.sb-right .sb-handle {    width: 1px; margin-left: -1px; }
            body.with-listing-chooser.sb-off .sidebar.sb-right {    width: 0;   }
            .sidecontentbox {   white-space: nowrap;    overflow: auto; }
        </style>`);

    SideBarMan.toggle = function (bState) {
        if (bState !== undefined) {
            document.body.classList.toggle('sb-on', !document.body.classList.toggle('sb-off', !bState));
        } else {
            document.body.classList.toggle('sb-on', !document.body.classList.toggle('sb-off'));
        }
        SideBarMan.leftScroller.update();
        SideBarMan.rightScroller.update();
        $('.content, .footer-parent').css({ marginLeft: SideBarMan.leftScroller.sidebar.scrollWidth, marginRight: SideBarMan.rightScroller.sidebar.scrollWidth });
    }

    function Scroller(sled, bRight) {
        if (!(this instanceof Scroller)) { return new Scroller(sled, bRight); }
        this.yprev = this.marginTop = 0;
        this.sled = sled;
        this.sidebar = $(`
            <div class='sidebar ${bRight ? 'sb-right' : 'sb-left'}'>
                <div class='sb-handle' id='sidebartoggggggggg'></div>
                <div class='sb-track'></div>
            </div>`).get(0);
        $(sled).replaceWith(this.sidebar).addClass('sb-sled');

        this.track = this.sidebar.querySelector('.sb-track');
        this.track.append(this.sled);
        this.update = this.sled ? () => this._handleScroll() : () => { };
        if (this.sled) { window.addEventListener('scroll', this.update); }
        return this;
    }
    Scroller.prototype._handleScroll = function handleScroll() {
        var yScroll = window.scrollY;
        var ydiff = yScroll - this.yprev;
        var sledBounds = this.sled.getBoundingClientRect();

        if (yScroll === 0) {    this.marginTop = 0; }
        else if (sledBounds.height > window.innerHeight) {
            var bottomGap = window.innerHeight - sledBounds.bottom;
            var topGap = sledBounds.top - (this.track.getBoundingClientRect().top + yScroll);
            if (bottomGap >= 0) { this.marginTop += bottomGap - (ydiff >= 0 ? 1 : 0); }
            else if (topGap >= 0) { this.marginTop += -topGap - (ydiff >= 0 ? 1 : 0); }
        }
        else { this.marginTop += ydiff; }
        this.sled.style.marginTop = this.marginTop + 'px';
        this.yprev = yScroll;
    }

    $(document).ready(function () {
        $('.listing-chooser .grippy').remove();

        SideBarMan.leftScroller = Scroller(document.querySelector('.listing-chooser .contents'), false);
        SideBarMan.rightScroller = Scroller(document.querySelector('.side'), true);
        SideBarMan.toggle(false);

        document.getElementById ("sidebartoggggggggg").addEventListener("click", function() { SideBarMan.toggle(); });

        $(window).load(function () {
            var header = document.getElementById('header');
            var spacer = document.getElementById('RESPinnedHeaderSpacer');
            if (header && spacer) {
                spacer.style.height = header.scrollHeight + 'px';
                var float = document.getElementById('NREFloat');
                if (float) { float.style.top = spacer.style.height; }

            }
        });
    });
};