diff --git a/src/windows/InAppBrowserProxy.js b/src/windows/InAppBrowserProxy.js index 5842212..febb974 100644 --- a/src/windows/InAppBrowserProxy.js +++ b/src/windows/InAppBrowserProxy.js @@ -29,7 +29,12 @@ var cordova = require('cordova'), urlutil = require('cordova/urlutil'); var browserWrap, - popup; + popup, + navigationButtonsDiv, + navigationButtonsDivInner, + backButton, + forwardButton, + closeButton; // x-ms-webview is available starting from Windows 8.1 (platformId is 'windows') // http://msdn.microsoft.com/en-us/library/windows/apps/dn301831.aspx @@ -40,14 +45,23 @@ function attachNavigationEvents(element, callback) { element.addEventListener("MSWebViewNavigationStarting", function (e) { callback({ type: "loadstart", url: e.uri}, {keepCallback: true} ); }); + element.addEventListener("MSWebViewNavigationCompleted", function (e) { callback({ type: e.isSuccess ? "loadstop" : "loaderror", url: e.uri}, {keepCallback: true}); }); + element.addEventListener("MSWebViewUnviewableContentIdentified", function (e) { // WebView found the content to be not HTML. // http://msdn.microsoft.com/en-us/library/windows/apps/dn609716.aspx callback({ type: "loaderror", url: e.uri}, {keepCallback: true}); }); + + element.addEventListener("MSWebViewContentLoading", function (e) { + if (navigationButtonsDiv) { + backButton.disabled = !popup.canGoBack; + forwardButton.disabled = !popup.canGoForward; + } + }); } else { var onError = function () { callback({ type: "loaderror", url: this.contentWindow.location}, {keepCallback: true}); @@ -56,6 +70,7 @@ function attachNavigationEvents(element, callback) { element.addEventListener("unload", function () { callback({ type: "loadstart", url: this.contentWindow.location}, {keepCallback: true}); }); + element.addEventListener("load", function () { callback({ type: "loadstop", url: this.contentWindow.location}, {keepCallback: true}); }); @@ -118,7 +133,83 @@ var IAB = { popup = document.createElement(isWebViewAvailable ? "x-ms-webview" : "iframe"); popup.style.borderWidth = "0px"; popup.style.width = "100%"; - popup.style.height = "100%"; + + browserWrap.appendChild(popup); + + if (features.indexOf("location=yes") !== -1 || features.indexOf("location") === -1) { + popup.style.height = "calc(100% - 60px)"; + + navigationButtonsDiv = document.createElement("div"); + navigationButtonsDiv.style.height = "60px"; + navigationButtonsDiv.style.backgroundColor = "#404040"; + navigationButtonsDiv.style.zIndex = "999"; + navigationButtonsDiv.onclick = function (e) { + e.cancelBubble = true; + }; + + navigationButtonsDivInner = document.createElement("div"); + navigationButtonsDivInner.style.paddingTop = "10px"; + navigationButtonsDivInner.style.height = "50px"; + navigationButtonsDivInner.style.width = "160px"; + navigationButtonsDivInner.style.margin = "0 auto"; + navigationButtonsDivInner.style.backgroundColor = "#404040"; + navigationButtonsDivInner.style.zIndex = "999"; + navigationButtonsDivInner.onclick = function (e) { + e.cancelBubble = true; + }; + + + backButton = document.createElement("button"); + backButton.style.width = "40px"; + backButton.style.height = "40px"; + backButton.style.borderRadius = "40px"; + + backButton.innerText = "<-"; + backButton.addEventListener("click", function (e) { + if (popup.canGoBack) + popup.goBack(); + }); + + forwardButton = document.createElement("button"); + forwardButton.style.marginLeft = "20px"; + forwardButton.style.width = "40px"; + forwardButton.style.height = "40px"; + forwardButton.style.borderRadius = "40px"; + + forwardButton.innerText = "->"; + forwardButton.addEventListener("click", function (e) { + if (popup.canGoForward) + popup.goForward(); + }); + + closeButton = document.createElement("button"); + closeButton.style.marginLeft = "20px"; + closeButton.style.width = "40px"; + closeButton.style.height = "40px"; + closeButton.style.borderRadius = "40px"; + + closeButton.innerText = "x"; + closeButton.addEventListener("click", function (e) { + setTimeout(function () { + IAB.close(); + }, 0); + }); + + if (!isWebViewAvailable) { + // iframe navigation is not yet supported + backButton.disabled = true; + forwardButton.disabled = true; + } + + navigationButtonsDivInner.appendChild(backButton); + navigationButtonsDivInner.appendChild(forwardButton); + navigationButtonsDivInner.appendChild(closeButton); + navigationButtonsDiv.appendChild(navigationButtonsDivInner); + + browserWrap.appendChild(navigationButtonsDiv); + } else { + popup.style.height = "100%"; + } // start listening for navigation events attachNavigationEvents(popup, win); @@ -127,8 +218,6 @@ var IAB = { strUrl = strUrl.replace("ms-appx://", "ms-appx-web://"); } popup.src = strUrl; - - browserWrap.appendChild(popup); } },