Skip to content
Permalink
Browse files
CB-8056 Implement splashscreen for Windows platform
The plugin implementation has been moved to the platform code
Documented SplashScreenBackgroundColor preference for Windows
Updated the docs
Updated plugin dependencies - cordova-windows@5 is required
Updated the plugin version to 4.0.0
  • Loading branch information
daserge committed Apr 22, 2016
1 parent 8d66b9e commit acb45f3a386bbb80d1d52cbe9d26f3de2617bfe0
Showing 4 changed files with 65 additions and 87 deletions.
@@ -126,6 +126,47 @@ projectRoot
<preference name="SplashScreenDelay" value="3000" />
```

- `FadeSplashScreen` (boolean, defaults to `true`): Set to `false` to
prevent the splash screen from fading in and out when its display
state changes.

```xml
<preference name="FadeSplashScreen" value="false"/>
```

- `FadeSplashScreenDuration` (float, defaults to `3000`): Specifies the
number of milliseconds for the splash screen fade effect to execute.

```xml
<preference name="FadeSplashScreenDuration" value="3000"/>
```

Note also that this value used to be seconds, and not milliseconds, so values less than 30 will still be treated as seconds. ( Consider this a deprecated patch that will disapear in some future version. )

_Note_: `FadeSplashScreenDuration` is included into `SplashScreenDelay`, for example if you have `<preference name="SplashScreenDelay" value="3000" />` and `<preference name="FadeSplashScreenDuration" value="1000"/>` defined in `config.xml`:

- 00:00 - splashscreen is shown
- 00:02 - fading has started
- 00:03 - splashscreen is hidden

Turning the fading off via `<preference name="FadeSplashScreen" value="false"/>` technically means fading duration to be `0` so that in this example the overall splash delay will still be 3 seconds.

_Note_: This only applies to the app startup - you need to take the fading timeout into account when manually showing/hiding the splashscreen in the code:

```javascript
navigator.splashscreen.show();
window.setTimeout(function () {
navigator.splashscreen.hide();
}, splashDuration - fadeDuration);
```

- `ShowSplashScreenSpinner` (boolean, defaults to `true`): Set to `false`
to hide the splash-screen spinner.

```xml
<preference name="ShowSplashScreenSpinner" value="false"/>
```

### Android Quirks

In your `config.xml`, you need to add the following preferences:
@@ -161,50 +202,22 @@ You can use the following preferences in your `config.xml`:

__Note__: `SplashScreen` value should be absolute in order to work in a sub-page. The `SplashScreen` value is used only for the browser platform. The value will be ignored for other platforms.

### Android and iOS Quirks
### iOS Quirks

- In iOS, the splashscreen images are called launch images. These images are mandatory on iOS.

- `FadeSplashScreen` (boolean, defaults to `true`): Set to `false` to
prevent the splash screen from fading in and out when its display
state changes.

```xml
<preference name="FadeSplashScreen" value="false"/>
```

- `FadeSplashScreenDuration` (float, defaults to `3000`): Specifies the
number of milliseconds for the splash screen fade effect to execute.

```xml
<preference name="FadeSplashScreenDuration" value="3000"/>
```

Note also that this value used to be seconds, and not milliseconds, so values less than 30 will still be treated as seconds. ( Consider this a deprecated patch that will disapear in some future version. )

_Note_: `FadeSplashScreenDuration` is included into `SplashScreenDelay`, for example if you have `<preference name="SplashScreenDelay" value="3000" />` and `<preference name="FadeSplashScreenDuration" value="1000"/>` defined in `config.xml`:
### Windows Quirks

- 00:00 - splashscreen is shown
- 00:02 - fading has started
- 00:03 - splashscreen is hidden
- `SplashScreenSpinnerColor` (string, defaults to system accent color): hash, rgb notation or CSS color name.

Turning the fading off via `<preference name="FadeSplashScreen" value="false"/>` technically means fading duration to be `0` so that in this example the overall splash delay will still be 3 seconds.
<preference name="SplashScreenSpinnerColor" value="#242424"/>
<preference name="SplashScreenSpinnerColor" value="DarkRed"/>
<preference name="SplashScreenSpinnerColor" value="rgb(50,128,128)"/>

_Note_: This only applies to the app startup - you need to take the fading timeout into account when manually showing/hiding the splashscreen in the code:
- `SplashScreenBackgroundColor` (string, defaults to #464646): hex notation.

```javascript
navigator.splashscreen.show();
window.setTimeout(function () {
navigator.splashscreen.hide();
}, splashDuration - fadeDuration);
```
<preference name="SplashScreenBackgroundColor" value="0xFFFFFFFF"/>

- `ShowSplashScreenSpinner` (boolean, defaults to `true`): Set to `false`
to hide the splash-screen spinner.

```xml
<preference name="ShowSplashScreenSpinner" value="false"/>
```

## Methods

@@ -1,6 +1,6 @@
{
"name": "cordova-plugin-splashscreen",
"version": "3.2.3-dev",
"version": "4.0.0",
"description": "Cordova Splashscreen Plugin",
"cordova": {
"id": "cordova-plugin-splashscreen",
@@ -38,12 +38,17 @@
"test": "npm run jshint",
"jshint": "node node_modules/jshint/bin/jshint www && node node_modules/jshint/bin/jshint src && node node_modules/jshint/bin/jshint tests"
},
"engines": [
{
"name": "cordova-android",
"version": ">=3.6.0"
"engines": {
"cordovaDependencies": {
"2.0.0": {
"cordova-android": ">=3.6.0"
},
"4.0.0": {
"cordova-android": ">=3.6.0",
"cordova-windows": ">=5.0.0"
}
}
],
},
"author": "Apache Software Foundation",
"license": "Apache-2.0",
"devDependencies": {
@@ -20,7 +20,7 @@

<plugin xmlns="http://apache.org/cordova/ns/plugins/1.0"
id="cordova-plugin-splashscreen"
version="3.2.3-dev">
version="4.0.0">
<name>Splashscreen</name>
<description>Cordova Splashscreen Plugin</description>
<license>Apache 2.0</license>
@@ -30,6 +30,7 @@

<engines>
<engine name="cordova-android" version=">=3.6.0" /><!-- Requires CordovaPlugin.preferences -->
<engine name="cordova-windows" version=">=5.0.0" />
Copy link
@nikhilkh

nikhilkh Apr 25, 2016

Contributor

This got merged without the cordova-windows 5.0.0 release - looks like we might have to release cordova-windows soon to make this work.

</engines>

<js-module src="www/splashscreen.js" name="SplashScreen">
@@ -20,56 +20,15 @@
*/

/*jslint sloppy:true */
/*global WinJS */

var cordova = require('cordova');

var isPhone = (cordova.platformId == "windows") && WinJS.Utilities.isPhone;
var isHosted = window.location.protocol.indexOf('http') === 0;
var localSplash = null, localSplashImage = null;
var bgColor = "#464646"; // default backgrond color; TDOO - read it from .appxmanifest
var splashImageSrc = (isHosted ? "ms-appx-web" : "ms-appx") + ":///images/" +
(isPhone ? "splashscreenphone.png" : "splashscreen.png");
var splash = require('cordova/splashscreen');

var SplashScreen = {
setBGColor: function (cssBGColor) {
bgColor = cssBGColor;
if (localSplash) {
localSplash.style.backgroundColor = bgColor;
}
},
show: function () {
if (localSplash) {
return; // already showed
}

localSplash = document.createElement("div");
localSplash.style.backgroundColor = bgColor;
localSplash.style.position = "fixed";
localSplash.style.top = "0";
localSplash.style.width = "100%";
localSplash.style.height = "100%";

localSplashImage = document.createElement("img");
localSplashImage.src = splashImageSrc;
localSplashImage.style.maxWidth = "100%";
localSplashImage.style.maxHeight = "100%";
// center horizontally
localSplashImage.style.margin = "0 auto";
localSplashImage.style.display = "block";
// center vertically
localSplashImage.style.position = "relative";
localSplashImage.style.top = "50%";
localSplashImage.style.transform = "translateY(-50%)";

localSplash.appendChild(localSplashImage);
document.body.appendChild(localSplash);
splash.show();
},
hide: function () {
if (localSplash) {
document.body.removeChild(localSplash);
localSplash = null;
}
splash.hide();
}
};

0 comments on commit acb45f3

Please sign in to comment.