darkred darkred - 3 months ago 18
Javascript Question

Userscript for creating a confirmation popup whenever submitting an issue or posting a comment via pressing Ctrl+Enter(the built-in hotkey) in GitHub

Test URL: https://github.com/darkred/test/issues/new

GitHub allows in the issues area for a public repo:


  • submitting a new issue with just 1 character as title and no body, and

  • posting a comment with just 1 character .



The above happens to me quite a lot because the build-in hotkey for 'submiting an issue or comment' is Ctrl + Enter: I accidentally press that keyboard shortcut before my issue/comment text is ready.



So, I'm trying to make a script (using Greasemonkey) that would show a confirmation popup whenever I try to:


  • submit a new issue, or

  • post a comment



via pressing Ctrl + Enter:

if user presses Ok in the popup, then the script to allow the submit,

but if the user presses Cancel in the popup, then the script to stop the submit.



I've come across these two approaches:

After the helpful comment by Brock Adams I have the following code:

var targArea_1 = document.querySelector('#issue_body'); // New issue textarea
var targArea_2 = document.querySelector('#new_comment_field'); // New comment textarea

function manageKeyEvents (zEvent) {
if (zEvent.ctrlKey && zEvent.keyCode == 13) { // If Ctrl+Enter is pressed
if (confirm('Are you sure?') == false) { // If the user presses Cancel in the popup
zEvent.stopPropagation(); // then it stops propagation of the event
zEvent.preventDefault(); // and cancels/stops the submit submit action bound to Ctrl+Enter
}
}
}

if (targArea_1 !== null) {targArea_1.addEventListener('keydown', manageKeyEvents);}
if (targArea_2 !== null) {targArea_2.addEventListener('keydown', manageKeyEvents);}


Now the popup appears ok whenever I press Ctrl + Enter.

The problem is that the issue/comment is not submitted when pressing Ok in the popup (even if I haven't pressed Cancel in the popup before, at all). How to fix this?

And, how to re-allow the issue/comment submit after I have pressed Cancel in the popup once?

In other words: how to re-enable default after preventDefault() ?

Answer

Based on the help by user trespassersW here (I thank him a lot)
i.e. that my code was missing an else branch:

if (confirm('Are you sure?') == false) {
    // ...
} else {
    var btn = document.querySelector("#partial-new-comment-form-actions button");
    if (btn) btn.click();
}

and that's because the confirm messagebox clears keyboard events queue.
(therefore the click 'Ok' action must be done by the script).

Here is a full working script:

// ==UserScript==
// @nameGitHub Confirm Create and Close issues
// @include https://github.com/*
// @grant   none
// ==/UserScript==


(function () {      // Self-Invoking function

    function init() {

        // For submitting issues in issue body textarea via Ctrl+Enter
        var targArea1 = document.querySelector('#issue_body');  // New issue textarea
        function manageKeyEvents1(zEvent) {
            if (zEvent.ctrlKey && zEvent.keyCode === 13) {
                if (confirm('Are you sure?') === false) {
                    zEvent.stopPropagation();
                    zEvent.preventDefault();
                } else {
                    var btn1 = document.querySelector('.btn-primary');
                    if (btn1) {btn1.click();}
                }
            }
        }
        if (targArea1 !== null) { targArea1.addEventListener('keydown', manageKeyEvents1); }

        // ------------------------------------------------------------------------------------------------
        // For submitting issues in new comment textarea via Ctrl+Enter
        var targArea2 = document.querySelector('#new_comment_field');   // New comment textarea
        function manageKeyEvents2(zEvent) {
            if (zEvent.ctrlKey && zEvent.keyCode === 13) {
                if (confirm('Are you sure?') === false) {
                    zEvent.stopPropagation();
                    zEvent.preventDefault();
                } else {
                    var btn2 = document.querySelector('#partial-new-comment-form-actions button');
                    if (btn2) {btn2.click();}
                }
            }
        }
        if (targArea2 !== null) { targArea2.addEventListener('keydown', manageKeyEvents2); }

    }

    // Page load
    init();

    // On pjax (because GitHub uses the History API)
    document.addEventListener('pjax:end', init);

})();