diff --git a/reddit-hide-sidebar/index.js b/reddit-hide-sidebar/index.js index 8c912d670364c8f8b07684dc6cb0044f806170f0..ef218a9247c8fbc6a1c7d02cd9ae361134cf99b5 100644 --- a/reddit-hide-sidebar/index.js +++ b/reddit-hide-sidebar/index.js @@ -1,60 +1,56 @@ // ==UserScript== // @name old.reddit hide sidebar // @namespace http://hugo.hornquist.se -// @version 1.0.3 +// @version 1.1.0 // @description Adds toggle to hide Reddit sidebar // @author hugo@lysator.liu.se // @match https://*.reddit.com/* // @match https://old.reddit.com/* // @match https://www.reddit.com/r/*/wiki/* // @match https://np.reddit.com/* -// @grant GM_addStyle // @updateURL https://git.lysator.liu.se/hugo/web-monkey-scripts/raw/master/reddit-hide-sidebar/index.js // @downloadURL https://git.lysator.liu.se/hugo/web-monkey-scripts/raw/master/reddit-hide-sidebar/index.js -// @require https://code.jquery.com/jquery-3.3.1.min.js // ==/UserScript== (function() { - 'use strict'; - - var visible = true; - - let btn = $("<button>></button>"); - let div = $("<div class='sidebar-toggle'></div>") - - div.append(btn) - $("#header").append(div); - - let sidebar = $(".side"); - let speed = 500; - var active = false; - - btn.click(function(ev) { - if (active) return; - active = true; - if (visible) { - sidebar.hide(speed, function () { - active = false; - btn.text("<"); - }); - } else { - sidebar.show(speed, function () { - active = false; - btn.text(">"); - }); - } - visible = !visible; - }); - - GM_addStyle(" \ -.sidebar-toggle { \ - position: absolute; \ - z-index: 100; \ - right: 0; \ - bottom: 0; \ -} \ -.sidebar-toggle > button { \ - width: 25px; \ - height: 25px; \ -}"); + 'use strict'; + + let btn = document.createElement('button'); + let div = document.createElement('div'); + div.className = 'sidebar-toggle'; + div.appendChild(btn); + + let sidebar = document.getElementsByClassName('side')[0]; + sidebar.appendChild(div); + + btn.onclick = () => sidebar.classList.toggle('hidden'); + + let style = document.createElement('style'); + + style.innerText = ` +.sidebar-toggle { + position: absolute; + z-index: 100; + left: -2em; + width: 2em; + height: 2em; + display: grid; + top: 0; +} +.side { + transition: 0.5s; + position: relative; +} +.side.hidden { + width: 0px; +} +.side.hidden button::before { + content: '<'; +} +.side:not(.hidden) button::before { + content: '>'; +}`; + + document.getElementsByTagName('head')[0].appendChild(style); })(); +