nw.js how to escape fullscreen - nw.js

I'm using nw.js to make an exe file. I can set it to fullscreen mode but how can I escape it using the escape key? People are suggesting the below code but which file do I put this in?
var gui = window.requireNode('nw.gui');
gui.App.registerGlobalHotKey(new gui.Shortcut({
key: "Esc",
active: function () {
gui.Window.get().leaveFullscreen();
})
}));

Officially the following way is suggested in the documentation:
http://docs.nwjs.io/en/latest/For%20Users/FAQ/
You have to register a global hotkey:
nw.App.registerGlobalHotKey(new nw.Shortcut({
key: "Escape",
active: function () {
// decide whether to leave fullscreen mode
// then ...
nw.Window.get().leaveFullscreen();
}
}));
You can put this snippet at the beginning of Your app.
<!DOCTYPE html>
<html>
<head>
<script>
nw.App.registerGlobalHotKey(new nw.Shortcut({
key: "Escape",
active: function () {
// decide whether to leave fullscreen mode
// then ...
nw.Window.get().leaveFullscreen();
}
}));
</script>
</head>
<body>
</body>
</html>

you can use this to exit firescreen
<!DOCTYPE html>
<html>
<head>
<script>
var gui = require('nw.gui');
gui.App.registerGlobalHotKey(new nw.Shortcut({
key: "Escape",
active: function () {
// decide whether to leave fullscreen mode
// then ...
nw.Window.get().leaveFullscreen();
}
}));
</script>
</head>
<body>
</body>
</html>
And this to toggle firescreen:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<script>
var gui = require('nw.gui');
gui.App.registerGlobalHotKey(new gui.Shortcut({
key: "F11",
active: function () {
// decide whether to leave fullscreen mode
// then ...
gui.Window.get().toggleFullscreen();
}
}));
</script>
</body>
</html>

you can use this to exit fullscreen
<!DOCTYPE html>
<html>
<head>
<script>
var gui = require('nw.gui');
gui.App.registerGlobalHotKey(new nw.Shortcut({
key: "Escape",
active: function () {
// decide whether to leave fullscreen mode
// then ...
gui.Window.get().leaveFullscreen();
}
}));
</script>
</head>
<body>
</body>
</html>
And this to toggle fullscreen:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<script>
var gui = require('nw.gui');
gui.App.registerGlobalHotKey(new gui.Shortcut({
key: "F11",
active: function () {
// decide whether to leave fullscreen mode
// then ...
gui.Window.get().toggleFullscreen();
}
}));
</script>
</body>
</html>

Related

Is this the right code for a pop up window?

I wanted this code to pop up a window when the password is correct and when the password isn't correct I wanted to make it go to google.com.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<script language="Javascript">
<!--hide
var password;
var pass1="12345";
<a href="https://www.google.com/?safe=active&ssui=on"
target="_blank" onclick="preventProp(event)">Google</a>
function preventProp(e){
if(confirm("Are you sure you want to open this link ?")){
return true;
}
password=prompt("Enter Password To View Zapazzi","");
if(password!==pass1)
window.confirm("Incorrect Password, click ok to go to Google");
else
{
alert("Correct Password, click ok to go to Zapazzi");
window.location="https://sites.google.com/cusdk8.org/zapazzi/home";
}
//-->
</script>
</body>
</html>
here is what you have to do
remove the <a href="https://www.google.com/?safe=active&ssui=on"
target="_blank" onclick="preventProp(event)">Google</a> from <script> </script>
change script type to <script type="text/javascript">
change the <a href="...> to button because when it is a link tag it firstly does its job of redirecting before listening to the event so I used button
here is my clean code that is working
<!DOCTYPE HTML>
<HTML>
<head>
</head>
<body>
<button onclick="preventProp(event)">Google</button>
<script type="text/javascript">
var password;
var pass1="12345";
function preventProp(e){
if(confirm("Are you sure you want to open this link ?")){
return true;
}
password=prompt("Enter Password To View Zapazzi","");
if(password !== pass1)
window.confirm("Incorrect Password, click ok to go to Google");
else{
alert("Correct Password, click ok to go to Zapazzi");
window.location="https://sites.google.com/cusdk8.org/zapazzi/home";
}
}
</script>
</body>
</html>

Lazy Loading a service using oclazyload

This is index.html
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="https://code.jquery.com/jquery-1.11.2.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.js"></script>
<script src="node_modules/oclazyload/dist/ocLazyLoad.js"></script>
<script src="testApp.js"></script>
</head>
<body>
<h3>Lazy load succeded if you can see 'Hello world' below</h3>
<div id="example" ng-app="LazyLoadTest" ng-controller="TestController">
<button ng-click="fun()">Start</button>
</div>
<script>
angular.module("LazyLoadTest", ["oc.lazyLoad"])
.controller("TestController", function($scope, $ocLazyLoad, $compile) {
$scope.fun=function(MyService){
$ocLazyLoad.load("testApp.js").then(function() { //loading a module
console.log('loaded!!'+$scope);
var el, elToAppend,elToAppend2;
elToAppend = $compile('<say-hello to="world"></say-hello>')($scope); //appending it to div
el = angular.element('#example');
console.log(el);
el.append(elToAppend)
//el.append(elToAppend2);
}, function(e) {
console.log('errr');
console.error(e);
})
}
});
</script>
</body>
</html>
The above code is the module which is to be loaded at run time. Able to load Directive but need some help to load service.
How to laxyload the service defined in testApp.js?
Please help me out with this

Jasmine: How to test a user input?

I wrote the following html file:
<!DOCTYPE html> <html lang="en"> <head>
<meta charset="UTF-8">
<title></title> </head> <body>
<h1> HELLO WORLD </h1>
<button type="button"> CLICK HERE</button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$('button').click(function() {
$('h1').text("Thank you");
var ans = prompt("Please type your age");
if (ans > 80) {
$('h1').text("You're old");
}
})
</script> </body> </html>
I want to test that once the user clicks on the button and gives an age older than 80, the page behaves as expected and the h1-tag text changes to "You're old".
My question is how to write a Jasmine spec to test this feature?
You need to use "Spy" object to intercept "prompt" function and return your own value. After check the caption text. The code may look like ...
deascribe("test inline function:", function() {
it("caption should be 'too old' for age of more than 80", function () {
spyOn(window, 'prompt').and.returnValue(81);
$('button').click();
expect($('h1').text()).toBe("You're old");
});
});

How do I make SignalR work inside _Layout.cshtml?

I'm working on an MVC3 project right now and just started using SignalR.
I have followed several demos but I can't seem to get it working when my codes are inside \Views\Shared_Layout.cshtml. I always get the "Connection must be started before data can be sent." error.
Please see my codes below:
My Class:
[HubName("notificationsHub")]
public class NotificationsHub : Hub
{
public void updateServer()
{
Clients.updateClient("boom");
}
}
My script inside _Layout.cshtml:
$(function(){
var signalR = $.connection.notificationsHub;
signalR.updateClient = function (message) {
alert(message);
};
$("#open").click(function () {
signalR.updateServer();
});
$.connection.hub.start(function () {
alert("Connected");
});
});
Script references:
<script type="text/javascript" src="#Url.Content("~/Scripts/jquery-1.6.4.js")"></script>
<script type="text/javascript" src="#Url.Content("~/Scripts/jquery.signalR.js")"></script>
<script type="text/javascript" src="#Url.Content("~/signalr/hubs")"></script>
My NotificationsHub Class is inside a folder named NotificationsHub which is of the same directory level as my Views.
I tried this on a .html file and it works perfectly (I get the alert callback for $.connection.hub.start).
What am I missing here?
Thanks
That's weird, I cannot reproduce the problem. Here's my Layout:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>#ViewBag.Title</title>
<script type="text/javascript" src="#Url.Content("~/Scripts/jquery-1.6.4.js")"></script>
<script type="text/javascript" src="#Url.Content("~/Scripts/jquery.signalR.js")"></script>
<script type="text/javascript" src="#Url.Content("~/signalr/hubs")"></script>
<script type="text/javascript">
$(function () {
var signalR = $.connection.notificationsHub;
signalR.updateClient = function (message) {
alert(message);
};
$("#open").click(function () {
signalR.updateServer();
});
$.connection.hub.start(function () {
alert("Connected");
});
});
</script>
</head>
<body>
#RenderBody()
Open
</body>
</html>
Works perfectly fine. Make sure you don't have script reference errors.

excanvas + Dojo: getContext is undefined

When I execute the code below in IE7/WinXP32, then the output in the console is "undefined". The output changes to the expected "getContext()", when I make either of two modifications:
I remove the image tag.
I use: <body onload="draw()">
Any idea what is going on here? What may be a workaround?
<!DOCTYPE HTML PUBLIC
"-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Canvas</title>
<script type="text/javascript">
var djConfig = {parseOnLoad: false, isDebug: true};
</script>
<script type="text/javascript"
src="/development/javascript/dojo-release-1.4.3-src/dojo/dojo.js">
</script>
<!--[if IE]>
<script type="text/javascript" src="/javascript/excanvas_r73.js"></script>
<![endif]-->
<script type="text/javascript">
function draw() {
var canvas = dojo.byId("canvas");
console.log(canvas.getContext);
}
dojo.addOnLoad(draw);
</script>
</head>
<body>
<canvas id="canvas" width="100" height="100"></canvas>
<img src="nonexisting.gif">
</body>
</html>
Update: Seems like replacing "dojo.addOnLoad(draw);" with the following code does the trick.
function init() {
dojo.addOnLoad(draw);
}
if (dojo.isIE) {
dojo.connect('onload', init);
} else {
init();
}
dojo.addOnLoad fires before document.onload. I think it's associated with DOMContentLoaded. Perhaps excanvas does its initialization on the same event? Can you just use document.onload?

Resources