GitHub Issue Show Status

A userscript that adds an obvious indicator showing if an issue or pull request is open or closed

Per 29-01-2019. Zie de nieuwste versie.

Voor het installeren van scripts heb je een extensie nodig, zoals Tampermonkey, Greasemonkey of Violentmonkey.

Voor het installeren van scripts heb je een extensie nodig, zoals {tampermonkey_link:Tampermonkey}.

Voor het installeren van scripts heb je een extensie nodig, zoals Tampermonkey of Violentmonkey.

Voor het installeren van scripts heb je een extensie nodig, zoals Tampermonkey of Userscripts.

Voor het installeren van scripts heb je een extensie nodig, zoals {tampermonkey_link:Tampermonkey}.

Voor het installeren van scripts heb je een gebruikersscriptbeheerder nodig.

(Ik heb al een user script manager, laat me het downloaden!)

Voor het installeren van gebruikersstijlen heb je een extensie nodig, zoals {stylus_link:Stylus}.

Voor het installeren van gebruikersstijlen heb je een extensie nodig, zoals {stylus_link:Stylus}.

Voor het installeren van gebruikersstijlen heb je een extensie nodig, zoals {stylus_link:Stylus}.

Voor het installeren van gebruikersstijlen heb je een gebruikersstijlbeheerder nodig.

Voor het installeren van gebruikersstijlen heb je een gebruikersstijlbeheerder nodig.

Voor het installeren van gebruikersstijlen heb je een gebruikersstijlbeheerder nodig.

(Ik heb al een beheerder - laat me doorgaan met de installatie!)

// ==UserScript==
// @name        GitHub Issue Show Status
// @version     1.0.5
// @description A userscript that adds an obvious indicator showing if an issue or pull request is open or closed
// @license     MIT
// @author      Rob Garrison
// @namespace   https://github.com/Mottie
// @include     https://github.com/*
// @run-at      document-end
// @grant       GM_addStyle
// @require     https://greasyfork.org/scripts/28721-mutations/code/mutations.js?version=666427
// @icon        https://assets-cdn.github.com/pinned-octocat.svg
// ==/UserScript==
(() => {
	"use strict";

	// classes added to the body in case you want to add extra styling
	// via a userstyle
	const bodyClasses = [
			"github-issue-status-open",
			"github-issue-status-closed",
			"github-issue-status-merged"
		],
		// class names applied to the issue status label
		states = {
			"State--red": "Closed",
			"State--purple": "Merged",
			"State--green": "Open"
		};

	/* Make the sidebar sticky;
	 * support: http://caniuse.com/#search=sticky
	 */
	GM_addStyle(`
		.discussion-sidebar {
			position: sticky;
		}
		.github-issue-show-status {
			width:100%;
			margin-top:5px;
		}
	`);

	function getStatus() {
		const statusElm = $("#partial-discussion-header .gh-header-meta .State"),
			status = statusElm.className.match(/(State--\w+)/);
		return status && status[0] || "";
	}

	function addLabel(status) {
		$("body").classList.remove(...bodyClasses);
		const sidebar = $(".discussion-sidebar");
		let el = $(".github-issue-show-status", sidebar),
			txt = states[status] || "";
		// remove previous indicator, just in case this function is called
		// multiple times
		if (el) {
			el.parentNode.removeChild(el);
		}
		if (status && sidebar) {
			el = document.createElement("div");
			el.className = "github-issue-show-status State " + status;
			el.textContent = txt;
			sidebar.insertBefore(el, sidebar.childNodes[0]);
			$("body").classList.add("github-issue-status-" + txt.toLowerCase());
		}
	}

	function checkPage() {
		if ($("#partial-discussion-header")) {
			const status = getStatus();
			addLabel(status);
		}
	}

	function $(str, el) {
		return (el || document).querySelector(str);
	}

	document.addEventListener("ghmo:container", checkPage);
	// needed in case the issue is closed while the issue is shown in the browser
	document.addEventListener("ghmo:comments", checkPage);
	checkPage();
})();