CB-7964 Add cordova-plugin-splashscreen support for browser platform
Added Browser platform support Using cordova/confighelper module to read parameter values from config.xml Updated the docs
This commit is contained in:
parent
6ce8a32865
commit
bb65993a51
16
README.md
16
README.md
@ -36,6 +36,7 @@ This plugin displays and hides a splash screen during application launch.
|
|||||||
- iOS
|
- iOS
|
||||||
- Windows Phone 7 and 8
|
- Windows Phone 7 and 8
|
||||||
- Windows 8
|
- Windows 8
|
||||||
|
- Browser
|
||||||
|
|
||||||
|
|
||||||
## Methods
|
## Methods
|
||||||
@ -45,7 +46,7 @@ This plugin displays and hides a splash screen during application launch.
|
|||||||
|
|
||||||
### Android Quirks
|
### Android Quirks
|
||||||
|
|
||||||
In your config.xml, you need to add the following preferences:
|
In your `config.xml`, you need to add the following preferences:
|
||||||
|
|
||||||
<preference name="SplashScreen" value="foo" />
|
<preference name="SplashScreen" value="foo" />
|
||||||
<preference name="SplashScreenDelay" value="10000" />
|
<preference name="SplashScreenDelay" value="10000" />
|
||||||
@ -53,6 +54,19 @@ In your config.xml, you need to add the following preferences:
|
|||||||
Where foo is the name of the splashscreen file, preferably a 9 patch file. Make sure to add your splashcreen files to your res/xml directory under the appropriate folders. The second parameter represents how long the splashscreen will appear in milliseconds. It defaults to 3000 ms. See [Icons and Splash Screens](http://cordova.apache.org/docs/en/edge/config_ref_images.md.html)
|
Where foo is the name of the splashscreen file, preferably a 9 patch file. Make sure to add your splashcreen files to your res/xml directory under the appropriate folders. The second parameter represents how long the splashscreen will appear in milliseconds. It defaults to 3000 ms. See [Icons and Splash Screens](http://cordova.apache.org/docs/en/edge/config_ref_images.md.html)
|
||||||
for more information.
|
for more information.
|
||||||
|
|
||||||
|
### Browser Quirks
|
||||||
|
|
||||||
|
You can use the following preferences in your `config.xml`:
|
||||||
|
|
||||||
|
<platform name="browser">
|
||||||
|
<preference name="SplashScreen" value="images/browser/splashscreen.jpg" /> <!-- defaults to "img/logo.png" -->
|
||||||
|
<preference name="SplashScreenDelay" value="10000" /> <!-- 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>
|
||||||
|
|
||||||
## splashscreen.hide
|
## splashscreen.hide
|
||||||
|
|
||||||
Dismiss the splash screen.
|
Dismiss the splash screen.
|
||||||
|
@ -134,4 +134,11 @@
|
|||||||
<runs />
|
<runs />
|
||||||
</js-module>
|
</js-module>
|
||||||
</platform>
|
</platform>
|
||||||
|
|
||||||
|
<!-- browser -->
|
||||||
|
<platform name="browser">
|
||||||
|
<js-module src="src/browser/SplashScreenProxy.js" name="SplashScreenProxy">
|
||||||
|
<runs />
|
||||||
|
</js-module>
|
||||||
|
</platform>
|
||||||
</plugin>
|
</plugin>
|
||||||
|
138
src/browser/SplashScreenProxy.js
Normal file
138
src/browser/SplashScreenProxy.js
Normal file
@ -0,0 +1,138 @@
|
|||||||
|
/*
|
||||||
|
*
|
||||||
|
* Licensed to the Apache Software Foundation (ASF) under one
|
||||||
|
* or more contributor license agreements. See the NOTICE file
|
||||||
|
* distributed with this work for additional information
|
||||||
|
* regarding copyright ownership. The ASF licenses this file
|
||||||
|
* to you under the Apache License, Version 2.0 (the
|
||||||
|
* "License"); you may not use this file except in compliance
|
||||||
|
* with the License. You may obtain a copy of the License at
|
||||||
|
*
|
||||||
|
* http://www.apache.org/licenses/LICENSE-2.0
|
||||||
|
*
|
||||||
|
* Unless required by applicable law or agreed to in writing,
|
||||||
|
* software distributed under the License is distributed on an
|
||||||
|
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
|
||||||
|
* KIND, either express or implied. See the License for the
|
||||||
|
* specific language governing permissions and limitations
|
||||||
|
* under the License.
|
||||||
|
*
|
||||||
|
*/
|
||||||
|
// Default parameter values including image size can be changed in `config.xml`
|
||||||
|
var splashImageWidth = 170;
|
||||||
|
var splashImageHeight = 200;
|
||||||
|
var position = { x: 0, y: 0, width: splashImageWidth, height: splashImageHeight };
|
||||||
|
var splash = null; //
|
||||||
|
var localSplash; // the image to display
|
||||||
|
var localSplashImage;
|
||||||
|
var bgColor = "#464646";
|
||||||
|
var imageSrc = 'img/logo.png';
|
||||||
|
var splashScreenDelay = 3000; // in milliseconds
|
||||||
|
var showSplashScreen = true; // show splashcreen by default
|
||||||
|
var configHelper = cordova.require('cordova/confighelper');
|
||||||
|
|
||||||
|
function updateImageLocation() {
|
||||||
|
position.width = Math.min(splashImageWidth, window.innerWidth);
|
||||||
|
position.height = position.width * (splashImageHeight / splashImageWidth);
|
||||||
|
|
||||||
|
localSplash.style.width = window.innerWidth + "px";
|
||||||
|
localSplash.style.height = window.innerHeight + "px";
|
||||||
|
localSplash.style.top = "0px";
|
||||||
|
localSplash.style.left = "0px";
|
||||||
|
|
||||||
|
localSplashImage.style.top = "50%";
|
||||||
|
localSplashImage.style.left = "50%";
|
||||||
|
localSplashImage.style.height = position.height + "px";
|
||||||
|
localSplashImage.style.width = position.width + "px";
|
||||||
|
localSplashImage.style.marginTop = (-position.height / 2) + "px";
|
||||||
|
localSplashImage.style.marginLeft = (-position.width / 2) + "px";
|
||||||
|
}
|
||||||
|
|
||||||
|
function onResize() {
|
||||||
|
updateImageLocation();
|
||||||
|
}
|
||||||
|
|
||||||
|
var SplashScreen = {
|
||||||
|
setBGColor: function (cssBGColor) {
|
||||||
|
bgColor = cssBGColor;
|
||||||
|
if (localSplash) {
|
||||||
|
localSplash.style.backgroundColor = bgColor;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
show: function () {
|
||||||
|
if(!localSplash) {
|
||||||
|
window.addEventListener("resize", onResize, false);
|
||||||
|
localSplash = document.createElement("div");
|
||||||
|
localSplash.style.backgroundColor = bgColor;
|
||||||
|
localSplash.style.position = "absolute";
|
||||||
|
|
||||||
|
localSplashImage = document.createElement("img");
|
||||||
|
localSplashImage.src = imageSrc;
|
||||||
|
localSplashImage.style.position = "absolute";
|
||||||
|
|
||||||
|
updateImageLocation();
|
||||||
|
|
||||||
|
localSplash.appendChild(localSplashImage);
|
||||||
|
document.body.appendChild(localSplash);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
hide: function () {
|
||||||
|
if(localSplash) {
|
||||||
|
window.removeEventListener("resize", onResize, false);
|
||||||
|
document.body.removeChild(localSplash);
|
||||||
|
localSplash = null;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Reads preferences via ConfigHelper and substitutes default parameters.
|
||||||
|
*/
|
||||||
|
function readPreferencesFromCfg(cfg) {
|
||||||
|
try {
|
||||||
|
var value = cfg.getPreferenceValue('ShowSplashScreen');
|
||||||
|
if(typeof value != 'undefined') {
|
||||||
|
showSplashScreen = value === 'true';
|
||||||
|
}
|
||||||
|
|
||||||
|
splashScreenDelay = cfg.getPreferenceValue('SplashScreenDelay') || splashScreenDelay;
|
||||||
|
imageSrc = cfg.getPreferenceValue('SplashScreen') || imageSrc;
|
||||||
|
bgColor = cfg.getPreferenceValue('SplashScreenBackgroundColor') || bgColor;
|
||||||
|
splashImageWidth = cfg.getPreferenceValue('SplashScreenWidth') || splashImageWidth;
|
||||||
|
splashImageHeight = cfg.getPreferenceValue('SplashScreenHeight') || splashImageHeight;
|
||||||
|
} catch(e) {
|
||||||
|
var msg = '[Browser][SplashScreen] Error occured on loading preferences from config.xml: ' + JSON.stringify(e);
|
||||||
|
console.error(msg);
|
||||||
|
error(msg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Shows and hides splashscreen if it is enabled, with a delay according the current preferences.
|
||||||
|
*/
|
||||||
|
function showAndHide() {
|
||||||
|
if(showSplashScreen) {
|
||||||
|
SplashScreen.show();
|
||||||
|
|
||||||
|
window.setTimeout(function() {
|
||||||
|
SplashScreen.hide();
|
||||||
|
}, splashScreenDelay);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Tries to read config.xml and override default properties and then shows and hides splashcreen if it is enabled.
|
||||||
|
*/
|
||||||
|
(function initAndShow() {
|
||||||
|
configHelper.readConfig(function(config) {
|
||||||
|
readPreferencesFromCfg(config);
|
||||||
|
showAndHide();
|
||||||
|
}, function(err) {
|
||||||
|
console.error(err);
|
||||||
|
});
|
||||||
|
})();
|
||||||
|
|
||||||
|
module.exports = SplashScreen;
|
||||||
|
|
||||||
|
require("cordova/exec/proxy").add("SplashScreen", SplashScreen);
|
||||||
|
|
Loading…
x
Reference in New Issue
Block a user