From 4c8f58d87c008a7743b8222205735fa9f6b76ad4 Mon Sep 17 00:00:00 2001 From: daserge Date: Mon, 15 Dec 2014 19:15:01 +0300 Subject: [PATCH] CB-7961 Add cordova-plugin-inappbrowser support for browser platform Added Browser platform support (Chrome, IE, Firefox) Updated the docs --- README.md | 19 +++ plugin.xml | 10 ++ src/browser/InAppBrowserProxy.js | 221 +++++++++++++++++++++++++++++++ 3 files changed, 250 insertions(+) create mode 100644 src/browser/InAppBrowserProxy.js diff --git a/README.md b/README.md index 7867689..47bbac0 100644 --- a/README.md +++ b/README.md @@ -129,6 +129,7 @@ instance, or the system browser. - iOS - Windows 8 and 8.1 - Windows Phone 7 and 8 +- Browser ### Example @@ -166,6 +167,11 @@ opened with `target='_blank'`. The rules might look like these } ``` +### Browser Quirks + +- Plugin is implemented via iframe, + +- Navigation history (`back` and `forward` buttons in LocationBar) is not implemented. ## InAppBrowser @@ -215,6 +221,11 @@ The object returned from a call to `cordova.InAppBrowser.open`. - iOS - Windows 8 and 8.1 - Windows Phone 7 and 8 +- Browser + +### Browser Quirks + +`loadstart` and `loaderror` events are not being fired. ### Quick Example @@ -246,6 +257,7 @@ The function is passed an `InAppBrowserEvent` object. - iOS - Windows 8 and 8.1 - Windows Phone 7 and 8 +- Browser ### Quick Example @@ -270,6 +282,7 @@ The function is passed an `InAppBrowserEvent` object. - iOS - Windows 8 and 8.1 - Windows Phone 7 and 8 +- Browser ### Quick Example @@ -290,6 +303,7 @@ The function is passed an `InAppBrowserEvent` object. - Android - iOS - Windows 8 and 8.1 +- Browser ### Quick Example @@ -322,6 +336,7 @@ The function is passed an `InAppBrowserEvent` object. - Android - iOS - Windows 8 and 8.1 +- Browser ### Quick Example @@ -330,6 +345,10 @@ The function is passed an `InAppBrowserEvent` object. ref.executeScript({file: "myscript.js"}); }); +### Browser Quirks + +- only __code__ key is supported. + ## insertCSS > Injects CSS into the `InAppBrowser` window. diff --git a/plugin.xml b/plugin.xml index 3817aca..617c736 100644 --- a/plugin.xml +++ b/plugin.xml @@ -213,4 +213,14 @@ + + + + + + + + + + diff --git a/src/browser/InAppBrowserProxy.js b/src/browser/InAppBrowserProxy.js new file mode 100644 index 0000000..85aa2cf --- /dev/null +++ b/src/browser/InAppBrowserProxy.js @@ -0,0 +1,221 @@ +/* + * + * 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. + * +*/ + +var cordova = require('cordova'), + channel = require('cordova/channel'), + urlutil = require('cordova/urlutil'); + +var browserWrap, + popup, + navigationButtonsDiv, + navigationButtonsDivInner, + backButton, + forwardButton, + closeButton; + +function attachNavigationEvents(element, callback) { + var onError = function () { + callback({ type: "loaderror", url: this.contentWindow.location}, {keepCallback: true}); + }; + + element.addEventListener("pageshow", function () { + callback({ type: "loadstart", url: this.contentWindow.location}, {keepCallback: true}); + }); + + element.addEventListener("load", function () { + callback({ type: "loadstop", url: this.contentWindow.location}, {keepCallback: true}); + }); + + element.addEventListener("error", onError); + element.addEventListener("abort", onError); +} + +var IAB = { + close: function (win, lose) { + if (browserWrap) { + if (win) win({ type: "exit" }); + + browserWrap.parentNode.removeChild(browserWrap); + browserWrap = null; + popup = null; + } + }, + + show: function (win, lose) { + if (browserWrap) { + browserWrap.style.display = "block"; + } + }, + + open: function (win, lose, args) { + var strUrl = args[0], + target = args[1], + features = args[2], + url; + + if (target === "_system" || target === "_self" || !target) { + window.location = strUrl; + } else { + // "_blank" or anything else + if (!browserWrap) { + browserWrap = document.createElement("div"); + browserWrap.style.position = "absolute"; + browserWrap.style.borderWidth = "40px"; + browserWrap.style.width = "calc(100% - 80px)"; + browserWrap.style.height = "calc(100% - 80px)"; + browserWrap.style.borderStyle = "solid"; + browserWrap.style.borderColor = "rgba(0,0,0,0.25)"; + + browserWrap.onclick = function () { + setTimeout(function () { + IAB.close(win); + }, 0); + }; + + document.body.appendChild(browserWrap); + } + + if (features.indexOf("hidden=yes") !== -1) { + browserWrap.style.display = "none"; + } + + popup = document.createElement("iframe"); + popup.style.borderWidth = "0px"; + popup.style.width = "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.innerHTML = "←"; + 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.innerHTML = "→"; + 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.innerHTML = "✖"; + closeButton.addEventListener("click", function (e) { + setTimeout(function () { + IAB.close(win); + }, 0); + }); + + // 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); + + popup.src = strUrl; + } + }, + + injectScriptCode: function (win, fail, args) { + var code = args[0], + hasCallback = args[1]; + + if (browserWrap && popup) { + try { + popup.contentWindow.eval(code); + hasCallback && win([]); + } catch(e) { + console.error('Error occured while trying to injectScriptCode: ' + JSON.stringify(e)); + } + } + }, + + injectScriptFile: function (win, fail, args) { + var msg = 'Browser org.apache.cordova.inappbrowser injectScriptFile is not yet implemented'; + console.warn(msg); + fail && fail(msg); + }, + + injectStyleCode: function (win, fail, args) { + var msg = 'Browser org.apache.cordova.inappbrowser injectStyleCode is not yet implemented'; + console.warn(msg); + fail && fail(msg); + }, + + injectStyleFile: function (win, fail, args) { + var msg = 'Browser org.apache.cordova.inappbrowser injectStyleFile is not yet implemented'; + console.warn(msg); + fail && fail(msg); + } +}; + +module.exports = IAB; + +require("cordova/exec/proxy").add("InAppBrowser", module.exports); \ No newline at end of file