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
This commit is contained in:
daserge
parent
8d66b9e353
commit
acb45f3a38
91
README.md
91
README.md
@ -126,45 +126,6 @@ projectRoot
|
||||
<preference name="SplashScreenDelay" value="3000" />
|
||||
```
|
||||
|
||||
### Android Quirks
|
||||
|
||||
In your `config.xml`, you need to add the following preferences:
|
||||
|
||||
```xml
|
||||
<preference name="SplashScreenDelay" value="3000" />
|
||||
<preference name="SplashMaintainAspectRatio" value="true|false" />
|
||||
<preference name="SplashShowOnlyFirstTime" value="true|false" />
|
||||
```
|
||||
|
||||
The first parameter represents how long the splashscreen will appear in milliseconds. It defaults to 3000 ms.
|
||||
|
||||
"SplashMaintainAspectRatio" preference is optional. If set to true, splash screen drawable is not stretched to fit screen, but instead simply "covers" the screen, like CSS "background-size:cover". This is very useful when splash screen images cannot be distorted in any way, for example when they contain scenery or text. This setting works best with images that have large margins (safe areas) that can be safely cropped on screens with different aspect ratios.
|
||||
|
||||
The plugin reloads splash drawable whenever orientation changes, so you can specify different drawables for portrait and landscape orientations.
|
||||
|
||||
"SplashShowOnlyFirstTime" preference is also optional and defaults to `true`. When set to `true` splash screen will only appear on application launch. However, if you plan to use `navigator.app.exitApp()` to close application and force splash screen appear on next launch, you should set this property to `false` (this also applies to closing the App with Back button).
|
||||
|
||||
### Browser Quirks
|
||||
|
||||
You can use the following preferences in your `config.xml`:
|
||||
|
||||
```xml
|
||||
<platform name="browser">
|
||||
<preference name="SplashScreen" value="/images/browser/splashscreen.jpg" /> <!-- defaults to "/img/logo.png" -->
|
||||
<preference name="SplashScreenDelay" value="3000" /> <!-- defaults to "3000" -->
|
||||
<preference name="SplashScreenBackgroundColor" value="green" /> <!-- defaults to "#464646" -->
|
||||
<preference name="ShowSplashScreen" value="false" /> <!-- defaults to "true" -->
|
||||
<preference name="SplashScreenWidth" value="600" /> <!-- defaults to "170" -->
|
||||
<preference name="SplashScreenHeight" value="300" /> <!-- defaults to "200" -->
|
||||
</platform>
|
||||
```
|
||||
|
||||
__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
|
||||
|
||||
- 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.
|
||||
@ -206,6 +167,58 @@ window.setTimeout(function () {
|
||||
<preference name="ShowSplashScreenSpinner" value="false"/>
|
||||
```
|
||||
|
||||
### Android Quirks
|
||||
|
||||
In your `config.xml`, you need to add the following preferences:
|
||||
|
||||
```xml
|
||||
<preference name="SplashScreenDelay" value="3000" />
|
||||
<preference name="SplashMaintainAspectRatio" value="true|false" />
|
||||
<preference name="SplashShowOnlyFirstTime" value="true|false" />
|
||||
```
|
||||
|
||||
The first parameter represents how long the splashscreen will appear in milliseconds. It defaults to 3000 ms.
|
||||
|
||||
"SplashMaintainAspectRatio" preference is optional. If set to true, splash screen drawable is not stretched to fit screen, but instead simply "covers" the screen, like CSS "background-size:cover". This is very useful when splash screen images cannot be distorted in any way, for example when they contain scenery or text. This setting works best with images that have large margins (safe areas) that can be safely cropped on screens with different aspect ratios.
|
||||
|
||||
The plugin reloads splash drawable whenever orientation changes, so you can specify different drawables for portrait and landscape orientations.
|
||||
|
||||
"SplashShowOnlyFirstTime" preference is also optional and defaults to `true`. When set to `true` splash screen will only appear on application launch. However, if you plan to use `navigator.app.exitApp()` to close application and force splash screen appear on next launch, you should set this property to `false` (this also applies to closing the App with Back button).
|
||||
|
||||
### Browser Quirks
|
||||
|
||||
You can use the following preferences in your `config.xml`:
|
||||
|
||||
```xml
|
||||
<platform name="browser">
|
||||
<preference name="SplashScreen" value="/images/browser/splashscreen.jpg" /> <!-- defaults to "/img/logo.png" -->
|
||||
<preference name="SplashScreenDelay" value="3000" /> <!-- defaults to "3000" -->
|
||||
<preference name="SplashScreenBackgroundColor" value="green" /> <!-- defaults to "#464646" -->
|
||||
<preference name="ShowSplashScreen" value="false" /> <!-- defaults to "true" -->
|
||||
<preference name="SplashScreenWidth" value="600" /> <!-- defaults to "170" -->
|
||||
<preference name="SplashScreenHeight" value="300" /> <!-- defaults to "200" -->
|
||||
</platform>
|
||||
```
|
||||
|
||||
__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.
|
||||
|
||||
### iOS Quirks
|
||||
|
||||
- In iOS, the splashscreen images are called launch images. These images are mandatory on iOS.
|
||||
|
||||
### Windows Quirks
|
||||
|
||||
- `SplashScreenSpinnerColor` (string, defaults to system accent color): hash, rgb notation or CSS color name.
|
||||
|
||||
<preference name="SplashScreenSpinnerColor" value="#242424"/>
|
||||
<preference name="SplashScreenSpinnerColor" value="DarkRed"/>
|
||||
<preference name="SplashScreenSpinnerColor" value="rgb(50,128,128)"/>
|
||||
|
||||
- `SplashScreenBackgroundColor` (string, defaults to #464646): hex notation.
|
||||
|
||||
<preference name="SplashScreenBackgroundColor" value="0xFFFFFFFF"/>
|
||||
|
||||
|
||||
## Methods
|
||||
|
||||
- splashscreen.show
|
||||
|
||||
17
package.json
17
package.json
@ -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" />
|
||||
</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();
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user