Skip to content

Commit 0779b75

Browse files
nw-splasher
1 parent e524b69 commit 0779b75

File tree

4 files changed

+257
-1
lines changed

4 files changed

+257
-1
lines changed

README.md

Lines changed: 50 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,51 @@
1-
# nw-splasher
1+
# NW-Splasher
2+
23
Small library to show a splash screen until main application loads.
4+
5+
The splash screen will run in a separate process so any animations will play smoothly while the app is loading.
6+
7+
8+
* * *
9+
10+
11+
## Demo
12+
13+
Here is a demo projec that uses the `nw-splasher.js` and `nw-splasher.css` files:
14+
15+
* https://github.com/nwutils/nw-splash-screen-example
16+
17+
18+
* * *
19+
20+
21+
## Usage
22+
23+
1. `npm install --save nw-splasher`
24+
1. Create a `splash.html` file and an `index.html` file (for your app)
25+
* Add this line to the `<head>` of both files.
26+
* `<script src="node_modules/nw-splasher/nw-splasher.js"></script>`
27+
1. In `package.json` set `"main": "splash.html"`
28+
1. In the `splash.html` run `nwSplasher.loadAppWindowInBackground()`
29+
1. In the `index.html` run `nwSplasher.closeSplashAndShowApp()` after the app is done loading and ready to be displayed
30+
31+
32+
## API
33+
34+
`nwSplasher.loadAppWindowInBackground(url, newWindowOptions, port)`
35+
36+
Used by your Splash screen window. This creates a websocket and spawns your main app in a hidden window. Then waits for the app to send a signal to the websocket to close the splash screen.
37+
38+
Argument | Optional | Type | Description | Defaults
39+
:-- | :-- | :-- | :-- | :--
40+
`url` | yes | String | URL to load in the App window. | Defaults to `index.html`, `default.html`, `main.html`, or `app.html` if those files exist, or the first html file it finds in the current directory. Console logs if no html file found.
41+
`newWindowOptions` | yes | Object | Object with the [NW.js Window Subfields](http://docs.nwjs.io/en/latest/References/Manifest%20Format/#window-subfields). | `show` is always set to `false`. `new_instance` is always set to `true`.
42+
`port` | yes | Number | If you pass in a number it must match the same port number passed in the app window. | Defaults to 4443.
43+
44+
45+
`nwSplasher.closeSplashAndShowApp(port)`
46+
47+
Call this from your App window when it is ready to be shown. This will also trigger closing the Splash screen window.
48+
49+
Argument | Optional | Type | Description | Defaults
50+
:-- | :-- | :-- | :-- | :--
51+
`port` | yes | Number | If you pass in a number it must match the same port number passed in the splash window. | Defaults to 4443.

nw-splasher.css

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
html,
2+
body,
3+
.wrapper {
4+
height: 100%;
5+
box-sizing: border-box;
6+
}
7+
8+
body {
9+
background: transparent;
10+
border: 4px solid #222;
11+
border-radius: 20px;
12+
margin: 0px;
13+
padding: 00px;
14+
color: #DEDEDE;
15+
font-family: sans-serif;
16+
text-align: center;
17+
}
18+
19+
.wrapper {
20+
background: linear-gradient(300deg, hsla(0, 0%, 18%, 1), hsla(0, 0%, 22%, 0.3));
21+
border-radius: 10px;
22+
padding: 20px;
23+
}
24+
25+
.drag-enable {
26+
-webkit-app-region: drag;
27+
}
28+
29+
.drag-disable {
30+
-webkit-app-region: no-drag;
31+
}
32+
33+
.close {
34+
position: absolute;
35+
top: 3px;
36+
right: 12px;
37+
font-size: 30px;
38+
cursor: pointer;
39+
}
40+
41+
@keyframes spin {
42+
0% {
43+
transform: rotateZ(0deg);
44+
}
45+
45% {
46+
background-color: rgba(168, 225, 136, 0.95)
47+
}
48+
100% {
49+
transform: rotateZ(719deg);
50+
}
51+
}
52+
53+
.spinner {
54+
display: block;
55+
width: 100px;
56+
height: 100px;
57+
background: rgba(168, 180, 136, 0.95);
58+
border-radius: 10px;
59+
margin: 50px auto;
60+
animation: spin 4s ease 0s infinite normal;
61+
}

nw-splasher.js

Lines changed: 125 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,125 @@
1+
const nwSplasher = {
2+
º: '%c',
3+
consoleNormal: 'font-family: sans-serif',
4+
consoleBold: '' +
5+
'font-family: sans-serif' +
6+
'font-weight: bold',
7+
consoleCode: '' +
8+
'background: #EEEEF6;' +
9+
'border: 1px solid #B2B0C1;' +
10+
'border-radius: 7px;' +
11+
'padding: 2px 8px 3px;' +
12+
'color: #5F5F5F;' +
13+
'line-height: 22px;' +
14+
'box-shadow: 0px 0px 1px 1px rgba(178,176,193,0.3)',
15+
validateUrl: function (url) {
16+
if (typeof(url) === 'string') {
17+
return url;
18+
}
19+
let fs = require('fs');
20+
files = fs.readdirSync('.');
21+
files = files.filter(function (file) {
22+
return file.endsWith('.html')
23+
});
24+
25+
if (files.length) {
26+
url = files[0];
27+
}
28+
29+
const defaults = [
30+
'app.html',
31+
'main.html',
32+
'default.html',
33+
'index.html',
34+
];
35+
36+
defaults.forEach(function (possibleFile) {
37+
if (files.includes(possibleFile)) {
38+
url = possibleFile;
39+
}
40+
});
41+
if (url) {
42+
return url;
43+
}
44+
return false;
45+
},
46+
validateNewWindowOptions: function (newWindowOptions) {
47+
if (!newWindowOptions || typeof(newWindowOptions) !== 'object' || Array.isArray(newWindowOptions)) {
48+
newWindowOptions = {};
49+
}
50+
51+
// Needs to be a new instance so splash screen animations play smoothly
52+
newWindowOptions.new_instance = true;
53+
// hide the app window until it signals it is done loading
54+
newWindowOptions.show = false;
55+
56+
return newWindowOptions;
57+
},
58+
validatePort: function (port) {
59+
if (typeof(port) !== 'number') {
60+
port = 4443;
61+
}
62+
return port;
63+
},
64+
/**
65+
* Used by your Splash screen window. This creates a websocket and spawns
66+
* your main app in a hidden window. Then waits for the app to send a signal
67+
* to the websocket to close the splash screen.
68+
*
69+
* All params are optional.
70+
*
71+
* @param {string} url URL to load in the App window. Defaults to index.html, default.html, main.html, or app.html if those files exist, or the first html file it finds.
72+
* @param {object} newWindowOptions Object with the NW.js Window fields (height, width, frameless, etc)
73+
* @param {number} port Defaults to 1337, must match the same port number used in the app window
74+
* @return {undefined} Returns nothing, just executes
75+
*/
76+
loadAppWindowInBackground: function (url, newWindowOptions, port) {
77+
url = this.validateUrl(url);
78+
newWindowOptions = this.validateNewWindowOptions(newWindowOptions);
79+
port = this.validatePort(port);
80+
81+
if (!url) {
82+
console.log(this.º + 'NW-Splasher: Could not find a valid path to load your app window.\n' +
83+
'Pass in url or filename to load in the app Window.', this.consoleNormal);
84+
console.log(this.º + 'Example:', this.consoleBold);
85+
console.log(this.º + 'nwSplasher.loadAppInBackground(\'index.html\');', this.consoleCode);
86+
return;
87+
}
88+
89+
const net = require('net');
90+
const server = net.createServer(function (socket) {
91+
socket.write('Echo server');
92+
socket.pipe(socket);
93+
94+
// Handle incoming messages app window
95+
socket.on('data', function (data) {
96+
if (data.toString() === 'loaded') {
97+
server.close();
98+
nw.Window.get().close(true);
99+
}
100+
});
101+
});
102+
103+
server.listen(port, 'localhost');
104+
105+
// Launch hidden app window and wait for it to signal to close the splasher window
106+
nw.Window.open(url, newWindowOptions);
107+
},
108+
/**
109+
* Call this from your App window when it is ready to be shown.
110+
* This will also trigger closing the Splash screen window.
111+
*
112+
* @param {number} port Optional port number, defaults to 1337. Must match port number used in Splash window
113+
* @return {undefined} Nothing is returned, this just runs a command.
114+
*/
115+
closeSplashAndShowApp: function (port) {
116+
port = this.validatePort(port);
117+
118+
const net = require('net');
119+
const client = new net.Socket();
120+
client.connect(port, 'localhost');
121+
122+
client.write('loaded');
123+
nw.Window.get().show();
124+
}
125+
};

package.json

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
{
2+
"name": "nw-splasher",
3+
"version": "1.0.0",
4+
"description": "Small library to show a splash screen until main application loads.",
5+
"main": "nw-splasher.js",
6+
"repository": {
7+
"type": "git",
8+
"url": "git+https://github.com/nwutils/nw-splasher.git"
9+
},
10+
"keywords": [
11+
"NW.js",
12+
"Splash screen",
13+
"loading"
14+
],
15+
"author": "",
16+
"license": "MIT",
17+
"bugs": {
18+
"url": "https://github.com/nwutils/nw-splasher/issues"
19+
},
20+
"homepage": "https://github.com/nwutils/nw-splasher#readme"
21+
}

0 commit comments

Comments
 (0)