Last active
December 15, 2015 21:59
-
-
Save petertakacs/5330117 to your computer and use it in GitHub Desktop.
Extended Splashscreen implementation for Windows Store application
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <title>ExtendedSplashScreen Sample</title> | |
| <!-- WinJS references --> | |
| <link href="//Microsoft.WinJS.1.0/css/ui-dark.css" rel="stylesheet" /> | |
| <script src="//Microsoft.WinJS.1.0/js/base.js"></script> | |
| <script src="//Microsoft.WinJS.1.0/js/ui.js"></script> | |
| <link href="/css/default.css" rel="stylesheet" /> | |
| <script src="/js/default.js"></script> | |
| <script src="js/extendedSplashScreen.js"></script> | |
| </head> | |
| <body> | |
| <div id="extendedSplashScreen"> | |
| <img id="splashImage" src="images/splashscreen.png" onload="" alt=""/> | |
| <div id="splashContent"> | |
| <progress class="win-medium win-ring myseries-progress"></progress> | |
| <h1>Loading...</h1> | |
| </div> | |
| </div> | |
| </body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| (function () { | |
| "use strict"; | |
| WinJS.Application.onactivated = function (args) { | |
| if (args.detail.kind === Windows.ApplicationModel.Activation.ActivationKind.launch) { | |
| Application.ExtendedSplash.show({ | |
| splashScreen: args.detail.splashScreen, //the splash screen object retrieved from eventargs | |
| extendedSplashElement: document.getElementById("extendedSplashScreen"), //the extended splash dom element container | |
| imgElement: document.getElementById("splashImage"), //the splash image element | |
| updateContentPosition: function (splash) { //sets the splashcontent position to the proper place. This function is called when viewstate changes (snapped, filled...) | |
| var splashContent = document.getElementById("splashContent"); | |
| splashContent.style.marginTop = (splash.imageLocation.y + splash.imageLocation.height) + "px"; | |
| }, | |
| onSplashDismissed: function splashDismissed(args) { | |
| var readyPromise = WinJS.Promise.timeout(2000); //do async work here (e.g.: downloading data with WinJS.xhr) | |
| readyPromise.then(function (popularSeries) { | |
| //code runs after the async work is done e.g.: WinJS.Navigation.navigate(pageurl) | |
| }); | |
| args.setPromise(readyPromise); //once this promise is fulfilled the extended splash screen disappears | |
| } | |
| }); | |
| args.setPromise(WinJS.UI.processAll()); | |
| } | |
| }; | |
| WinJS.Application.start(); | |
| })(); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /// <reference path="//Microsoft.WinJS.1.0/js/base.js" /> | |
| (function (global) { | |
| "use strict"; | |
| //Splash Image | |
| var img = null; | |
| //WinRT Splash object | |
| var splash = null; | |
| //ExtendedSplash DOM Element | |
| var extendedSplash = null; | |
| //Event when splashscreen (img) dismissed | |
| var onSplashDismissed = null; | |
| //Function for updating extendedsplash content position | |
| var updateContentPosition = null; | |
| function onSplashScreenDismissed() { | |
| ///<summary>Eventhandler for dismissed event</summary> | |
| if (onSplashDismissed !== null && typeof (onSplashDismissed) === "function") { | |
| var args = { | |
| promise: null, | |
| setPromise: function (promise) { | |
| if (WinJS.Promise.is(promise)) { | |
| this.promise = promise; | |
| } | |
| } | |
| }; | |
| onSplashDismissed(args); | |
| if (args.promise == null) { | |
| remove(); | |
| } else { | |
| args.promise.done(remove); | |
| } | |
| } | |
| } | |
| function show(splashScreen, extendedSplashElement, imgElement) { | |
| ///<summary>Shows the extended splash screen</summary> | |
| img.style.position = "absolute"; | |
| extendedSplash.style.position = "absolute"; | |
| extendedSplash.style.height = "100%"; | |
| extendedSplash.style.width = "100%"; | |
| extendedSplash.style.top = "0px"; | |
| extendedSplash.style.left = "0px"; | |
| extendedSplash.style.textAlign = "center"; | |
| extendedSplash.style.display = "block"; | |
| if (Windows.ApplicationModel.DesignMode.designModeEnabled) { | |
| WinJS.Promise.join([WinJS.UI.processAll(), WinJS.Resources.processAll(), WinJS.Binding.processAll()]).then(function () { | |
| onSplashScreenDismissed(); | |
| }); | |
| return; | |
| } | |
| setImgPosition(); | |
| setContentPosition(); | |
| global.addEventListener("resize", updateContent, false); | |
| splash.addEventListener("dismissed", onSplashScreenDismissed, false); | |
| } | |
| function setImgPosition() { | |
| ///<summary>Sets the position of the image</summary> | |
| img.style.top = splash.imageLocation.y + "px"; | |
| img.style.left = splash.imageLocation.x + "px"; | |
| img.style.height = splash.imageLocation.height + "px"; | |
| img.style.width = splash.imageLocation.width + "px"; | |
| } | |
| function setContentPosition() { | |
| //<summary>Updates the position of the content div</summary> | |
| if (updateContentPosition !== null && typeof (updateContentPosition) === "function") { | |
| updateContentPosition(splash); | |
| } | |
| } | |
| function updateContent() { | |
| ///<summary>Update position</summary> | |
| setImgPosition(); | |
| setContentPosition(); | |
| } | |
| function remove() { | |
| ///<summary>Extended splash screen hiding</summary> | |
| extendedSplash.style.display = "none"; | |
| global.removeEventListener("resize", updateContent, false); | |
| } | |
| WinJS.Namespace.define("Application", { | |
| ExtendedSplash: { | |
| show: function (config) { | |
| splash = config.splashScreen; | |
| img = config.imgElement; | |
| extendedSplash = config.extendedSplashElement; | |
| onSplashDismissed = config.onSplashDismissed; | |
| if (config.updateContentPosition !== undefined) { | |
| updateContentPosition = config.updateContentPosition; | |
| } | |
| show(); | |
| } | |
| } | |
| }); | |
| })(this); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment