0 votes
by (710 points)

I wanted to do a fullscreen/window toggle by pressing a key.

var gui = require('nw.gui');	
gui.App.registerGlobalHotKey(new gui.Shortcut({
key: "Enter",
active: function () {
// decide whether to toogle fullscreen mode
// then ...
gui.Window.get().toggleFullscreen();
}
}));

While using this code, the Enter key work at first, but as soon as I use the Settings Options, like “Reset to Defaults” or “Restart”, it doesn’t work anymore. sad

1 Answer

+1 vote
by (68.6k points)
selected by
 
Best answer
Where, exactly, are you evaluating your example code?
by (710 points)
In a script passage.
by (68.6k points)

It's likely that you're registering multiple global keyboard shortcuts, all of which attempt to toggle fullscreen mode resulting in shenanigans.  Why?  Both the Restart and Reset to Defaults buttons cause a reload of NW.js' browser instance, which results in your scripts being evaluated again—this is normal.  Your shortcuts are registered globally—i.e. outside of the instance—so they do not get reset, thus you end up registering multiple copies.

Beyond that, I'm unsure why you want global—a.k.a. system-wide—hotkeys in the first place.  They're registered at the OS level, so even if your application doesn't have focus they can intercept keystrokes.  Doing so could cause issues for players attempting to do something outside of your application—every time they'd hit the enter/return key your application would toggle in and out of fullscreen mode.  You'd also need to unregister your hotkey before the player closed the application or that could also cause issues.

I'd suggest something like the following which will toggle fullscreen mode when the Enter/Return key is pressed without the need to register global hotkeys:

/*
	Attempts to toggle fullscreen mode if the Enter/Return key is pressed.
*/
$(document).on('keydown', function (ev) {
	if (ev.which === 13) { // 13 is the Enter/Return key code
		var doc   = window.document;
		var docEl = doc.documentElement;

		var requestFullscreen = docEl.requestFullscreen || docEl.mozRequestFullScreen || docEl.webkitRequestFullScreen || docEl.msRequestFullscreen;
		var exitFullscreen    = doc.exitFullscreen || doc.mozCancelFullScreen || doc.webkitExitFullscreen || doc.msExitFullscreen;
		var fullscreenElement = doc.fullscreenElement || doc.mozFullScreenElement || doc.webkitFullscreenElement || doc.msFullscreenElement;

		if (!fullscreenElement) {
			requestFullscreen.call(docEl);
		}
		else if (exitFullscreen) {
			exitFullscreen.call(doc); 
		}
	}
});

IIRC, you'll also need the following bit of CSS as WebKit/Blink-based browser instances do stupid things with the <body> element when in fullscreen mode.

html {
	background-color: #111;
}
body {
	background-color: transparent;
}

 

by (710 points)

While the code works perfectly, it mess up the custom class I had done, which allow the reader to choose his background color in the settings. Oh well. 

var settingBGNames = ["Dark", "Grey", "Sepia"];

var settingBGHandler = function () {
    var $html = $("html");

$html.removeClass("dark");

$html.removeClass("grey");

$html.removeClass("sepia");

    switch (settings.BG) {
    case "Dark":
$html.addClass("dark");
        break;
    case "Grey":
$html.addClass("grey");
        break;
    case "Sepia":
$html.addClass("sepia");
        break;
    }
};

Setting.addList("BG", {
    label    : "Background Color",
    list     : settingBGNames,
    onInit   : settingBGHandler,
    onChange : settingBGHandler,
    default  : "Dark",
});
html.dark body {
   background-color: #111; 
}

html.grey body {
   background-color: #333232; 
}

html.sepia body {
   background-color: #1F1800; 
};

 

by (68.6k points)
edited by
Placing the patch styles above your background option styles and removing the body selector from each of your background option style rules should fix it.
by (710 points)

All fixed and thank you. yes

...