☰

GitHub top bar enhancement

Fix and Auto Hide GitHub Top Bar w/ Ocototree caused headerbar displacement fix

Pada tanggal 08 Februari 2018. Lihat %(latest_version_link).

// ==UserScript==
// @name         GitHub top bar enhancement
// @namespace    https://ccoooss.com/
// @version      0.1.12
// @description  Fix and Auto Hide GitHub Top Bar w/ Ocototree caused headerbar displacement fix
// @author       Yukino Song
// @match        https://github.com
// @match        https://github.com/*/*
// @match        https://gist.github.com/*
// @grant        none
// ==/UserScript==

const style = `
body {
	padding-top: 54px;
}
.Header {
	position: fixed;
	width: 100%;
	min-width: 1020px;
	top: 0;
	left: 0;
	z-index: 50;
	transform: translate3d(0, 0, 0);
	transition: transform .3s;
}

.Header.hidden {
	transform: translate3d(0, -54px, 0);
}

.dropdown-details[open]>summary::before {
	height: 100vh;
}

@media screen and (max-width: 1480px) {
    .octotree-show .Header {
        min-width: 1246px;
    	padding-left: 226px;
    }

    .octotree-show .Header .container-lg {
        margin-left: 0;
    }
}
`;

function getScrollHeight() {
    return window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;
}

(function() {
    'use strict';
    // Your code here...
    // Inject style
    var topBar = document.querySelector('.Header');
    if (!topBar) return;

    document.querySelector('head').insertAdjacentHTML('beforeend', `<style>${style}</style>`);

    var previousHeight = getScrollHeight();

    function updateScroll() {
        const prev = previousHeight;
        const height = getScrollHeight();
        previousHeight = height;

        // Always show on top
        if (height < 54) {
            topBar.classList.remove('hidden');
            return;
        }

        if (height > prev) topBar.classList.add('hidden');
        else topBar.classList.remove('hidden');
    }

    function smoothScrollTop() {
        // Use native smooth scrolling method (Chrome >= 61, Firefox >= 36)
        window.scroll({
            top: 0,
            behavior: 'smooth'
        });
    }

    window.addEventListener('scroll', updateScroll);
    topBar.addEventListener('dblclick', smoothScrollTop);
})();