Add a key event listener to open Preview pane on GitHub comments

Use Apple-Option-P to open the preview pane and toggle it closed.

GitHub uses Apple-Shift-P by default to toggle the Preview pane. I need
this new shortcut because Firefox uses Apple-Shift-P to open new private
browsing windows, shadowing it from GitHub.

This is the initial working version of this script. It doesn't currently
support comment fields that are added to the page after page load.

1 files changed, 48 insertions, 0 deletions

diff --git a/github-apple-option-p-to-preview.user.js b/github-apple-option-p-to-preview.user.js
new file mode 100644
index 0000000..72e40a4
--- /dev/null
+++ b/github-apple-option-p-to-preview.user.js
@@ -0,0 +1,48 @@
+// ==UserScript==
+// @name        GitHub Apple-Option-P to Preview
+// @namespace   com.teddywing
+// @description Enables Apple-Option-P to toggle the Preview pane
+// @version     0.0.1
+// @match       https://*.github.com/*
+// @grant       none
+// ==/UserScript==
+
+var KEY_CODE_P = 80;
+
+
+var comment_textareas = document.querySelectorAll('textarea.js-comment-field');
+
+for (var i = 0; i < comment_textareas.length; i++) {
+	comment_textareas[i].onkeydown = function(e) {
+		if (e.metaKey && e.altKey && e.keyCode == KEY_CODE_P) {
+			show_preview_pane(this);
+
+			var write_tab = this
+				.closest('.js-previewable-comment-form')
+				.querySelector('.js-write-tab');
+			window.setTimeout(function() {
+				register_pane_toggle_shortcut(write_tab);
+			});
+		}
+	};
+}
+
+
+function show_preview_pane (node) {
+	node
+		.closest('.js-previewable-comment-form')
+		.querySelector('.js-preview-tab')
+		.click();
+}
+
+function register_pane_toggle_shortcut (write_tab) {
+	document.body.addEventListener('keydown', toggle_write_pane);
+
+	function toggle_write_pane (e) {
+		if (e.metaKey && e.altKey && e.keyCode == KEY_CODE_P) {
+			write_tab.click();
+
+			document.body.removeEventListener('keydown', toggle_write_pane);
+		}
+	}
+}