darkred darkred - 3 months ago 7
Javascript Question

Userscript for creating a confirmation popup whenever pressing Ctrl+Enter(not just Enter) in the title textbox of a new issue page in GitHub

(In continuance of this answer)

I've been trying to make a script (using Greasemonkey) that would show a confirmation popup whenever I attempt to:


  • submit a new issue, or

  • post a new 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.

The script in the answer above works ok in these cases.




I've noticed that, there's an additional way to submit an issue:

press Enter or Ctrl+Enter while having focus on the issue title textbox .

I'd like to cover this with the script, too.

Below is my code.

(If I change the 1st
if
in my code into
zEvent.keyCode === 13)
(i.e. press Enter in that textbox) then the script works ok, as well)
.

Also, if I just open the new issue page (https://github.com/darkred/test/issues/new) in a new tab (i.e. not via single-page application workflow, aka the History API)), then the script also works when pressing Ctrl+Enter.

The only problem is that if I navigate to the new issue page via following the
New issue
button (i.e. via the History API), then if I press Ctrl+Enter in the textbox, the popup appears momentarily but the submit is not blocked
.

(function () {
function init() {
var targArea = document.querySelector('#issue_title'); // New issue title
function manageKeyEvents(zEvent) {
if (zEvent.ctrlKey && zEvent.keyCode === 13) { // and the focused element is the issue title textbox
if (confirm('Are you sure?') === false) {
zEvent.stopPropagation();
zEvent.preventDefault();
// } else {
// var btn = document.querySelector('.btn-primary'); // 'Submit new issue' button
// btn.click();
}
}
}
if (targArea !== null) {targArea.addEventListener('keydown', manageKeyEvents);}
}
init();
document.addEventListener('pjax:end', init); // for the History API
})();


STR:


  • open https://github.com/darkred/test/issues,

  • click the
    New Issue
    button (you'll get redirected via the History API to https://github.com/darkred/test/issues/new,

  • (You'll notice the focus now is on the issue title textbox)

    type 123 as issue title and keep the focus on the issue title textbox (leave the issue body empty) ,

  • press Ctrl+Enter,

  • notice now that the confirmation popup will appear momentarily,

    but the submit won't be blocked.



What's wrong with my script?




For reference here is a list of the GitHub's keyboard shortcuts list: screenshot,

that appears when you press ? in the new issue page.

Answer

I managed to make the script work simply by using blur()(=unfocus) and focus() on the issue title textbox.
When you open the New issue page, the focus is on the issue title textbox. The script for some reason wouldn't block the submit.
But, if you cause an unfocus and re-focus of that element, then the script works ok.

Here is the full script (always // @run-at document-end)

(function () {
    function init() {
        var targArea = document.querySelector('#issue_title'); // New issue title
        function manageKeyEvents(zEvent) {
            document.querySelector('#issue_title').blur();
            document.querySelector('#issue_title').focus();
            if ((zEvent.ctrlKey && zEvent.keyCode === 13) || zEvent.keyCode === 13) {
                if (confirm('Are you sure?') === false) {
                    zEvent.stopPropagation();
                    zEvent.preventDefault();
                // } else {
                    // var btn = document.querySelector('.btn-primary');  
                    // btn.click();
                }
            }
        }
        if (targArea !== null) {targArea.addEventListener('keydown', manageKeyEvents);}
    }
    init();
    document.addEventListener('pjax:end', init); // for the History API
})();
Comments