You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@ripple.apache.org by gt...@apache.org on 2013/09/22 06:08:29 UTC
git commit: some more hacking on inappbrowser
Updated Branches:
refs/heads/cordova-3.0 86157fd49 -> f7881559a
some more hacking on inappbrowser
Project: http://git-wip-us.apache.org/repos/asf/incubator-ripple/repo
Commit: http://git-wip-us.apache.org/repos/asf/incubator-ripple/commit/f7881559
Tree: http://git-wip-us.apache.org/repos/asf/incubator-ripple/tree/f7881559
Diff: http://git-wip-us.apache.org/repos/asf/incubator-ripple/diff/f7881559
Branch: refs/heads/cordova-3.0
Commit: f7881559a06fb104a33d6551d49fda3ec6eaec35
Parents: 86157fd
Author: Gord Tanner <gt...@gmail.com>
Authored: Sun Sep 22 00:08:17 2013 -0400
Committer: Gord Tanner <gt...@gmail.com>
Committed: Sun Sep 22 00:08:17 2013 -0400
----------------------------------------------------------------------
assets/client/ripple.css | 7 +-
.../cordova/3.0.0/bridge/inappbrowser.js | 10 +-
lib/client/ui.js | 3 +-
lib/client/ui/plugins/browser.js | 53 ++++++++
lib/client/ui/plugins/browser/overlay.html | 7 +-
lib/server/browser.js | 122 +++++++++++++++++++
lib/server/emulate.js | 2 +
7 files changed, 198 insertions(+), 6 deletions(-)
----------------------------------------------------------------------
http://git-wip-us.apache.org/repos/asf/incubator-ripple/blob/f7881559/assets/client/ripple.css
----------------------------------------------------------------------
diff --git a/assets/client/ripple.css b/assets/client/ripple.css
index 48742b2..5ce2be9 100644
--- a/assets/client/ripple.css
+++ b/assets/client/ripple.css
@@ -451,13 +451,14 @@ section.left { left: 0; }
display: none;
width: 100%;
height: 100%;
- -webkit-box-orient: horizontal;
- -webkit-box-pack: center;
- -webkit-box-align: center;
overflow-y: auto;
background: rgba(255, 255, 255, 1);
}
+#browser {
+ width: 100%;
+}
+
.overlay-menu {
z-index: 1000;
position: absolute;
http://git-wip-us.apache.org/repos/asf/incubator-ripple/blob/f7881559/lib/client/platform/cordova/3.0.0/bridge/inappbrowser.js
----------------------------------------------------------------------
diff --git a/lib/client/platform/cordova/3.0.0/bridge/inappbrowser.js b/lib/client/platform/cordova/3.0.0/bridge/inappbrowser.js
index fa5b684..5305ef7 100644
--- a/lib/client/platform/cordova/3.0.0/bridge/inappbrowser.js
+++ b/lib/client/platform/cordova/3.0.0/bridge/inappbrowser.js
@@ -18,13 +18,21 @@
* under the License.
*
*/
+
+var emulatorBridge = ripple('emulatorBridge'),
+ browser = ripple("ui/plugins/browser");
+
module.exports = {
open: function (win, fail, args) {
var url = args[0],
target = args[1],
options = args[2];
- console.log(args);
+ browser.show(url);
+ window.setTimeout(function () {
+ //win({type: "loadstart", url: url});
+ //win({type: "loadstop", url: url});
+ }, 100);
},
show: function (win, fail, args) {
http://git-wip-us.apache.org/repos/asf/incubator-ripple/blob/f7881559/lib/client/ui.js
----------------------------------------------------------------------
diff --git a/lib/client/ui.js b/lib/client/ui.js
index ab43ca4..c59ae7f 100644
--- a/lib/client/ui.js
+++ b/lib/client/ui.js
@@ -46,7 +46,8 @@ var _self,
"tooltips",
"camera",
"themeSwitcher",
- "settings"
+ "settings",
+ "browser"
],
_overlay = {
getOrCreate: function (id) {
http://git-wip-us.apache.org/repos/asf/incubator-ripple/blob/f7881559/lib/client/ui/plugins/browser.js
----------------------------------------------------------------------
diff --git a/lib/client/ui/plugins/browser.js b/lib/client/ui/plugins/browser.js
new file mode 100644
index 0000000..f3c5093
--- /dev/null
+++ b/lib/client/ui/plugins/browser.js
@@ -0,0 +1,53 @@
+/*
+ *
+ * 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 ui = ripple('ui'),
+ event = ripple('event'),
+ close = document.getElementById('close-browser');
+
+module.exports = {
+ initialize: function () {
+ close.addEventListener('click', function () {
+ ui.hideOverlay('inappbrowser');
+ });
+ },
+ show: function (url, target, options) {
+
+ var params = "url=" + url;
+ var xhr = new XMLHttpRequest();
+ xhr.open("POST", "/ripple/browser");
+
+ //Send the proper header information along with the request
+ xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
+ xhr.setRequestHeader("Content-length", params.length);
+ xhr.setRequestHeader("Connection", "close");
+
+ xhr.send(params, false);
+
+ ui.showOverlay("inappbrowser", function (node) {
+ var iframe = document.getElementById("browser");
+ iframe.src = url;
+ });
+ },
+ hide: function () {
+ ui.hideOverlay("inappbrowser");
+ }
+};
http://git-wip-us.apache.org/repos/asf/incubator-ripple/blob/f7881559/lib/client/ui/plugins/browser/overlay.html
----------------------------------------------------------------------
diff --git a/lib/client/ui/plugins/browser/overlay.html b/lib/client/ui/plugins/browser/overlay.html
index c28d65e..b8ffa36 100644
--- a/lib/client/ui/plugins/browser/overlay.html
+++ b/lib/client/ui/plugins/browser/overlay.html
@@ -19,5 +19,10 @@
*
-->
<section id="inappbrowser" class="overlay-browser">
- This is the InAppBrowser!
+ <h2>InAppBrowser Emulation</h2>
+ It is like a browser, only it is all up in your app
+ <iframe id="browser" src="" frameborder="0"></iframe>
+ <button id="close-browser" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only small-button">
+ <span class="ui-button-text">Close</span>
+ </button>
</section>
http://git-wip-us.apache.org/repos/asf/incubator-ripple/blob/f7881559/lib/server/browser.js
----------------------------------------------------------------------
diff --git a/lib/server/browser.js b/lib/server/browser.js
new file mode 100644
index 0000000..90d9916
--- /dev/null
+++ b/lib/server/browser.js
@@ -0,0 +1,122 @@
+/*
+ *
+ * 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 url = require('url'),
+ request = require('request'),
+ _url = "http://slashdot.org";
+
+// TODO: Put this and xhr_proxy into common file (epic DRY..)?
+function proxyRemote(opts, req, res) {
+ var proxyReqData,
+ proxyReqHeaders,
+ proxyReq,
+ parsedURL = url.parse(opts.url),
+
+ // TODO: There should be a better way to inject on files...
+ shouldInjectInto = req.path.match(/^\/$/) || req.path.match(/\.html/);
+
+ console.log("INFO:".green + " Remote proxy: Retrieve -> " + opts.url);
+
+ proxyReqHeaders = Object.keys(req.headers).reduce(function (headers, key) {
+ if (key !== "origin") {
+ headers[key] = req.headers[key];
+ }
+ return headers;
+ }, {});
+
+ proxyReqHeaders["host"] = parsedURL.host;
+
+ if (opts.userAgent) {
+ proxyReqHeaders["user-agent"] = opts.userAgent;
+ }
+
+ // HACK: Makes https://google.com crash (issue with node? request? us?)
+ delete proxyReqHeaders["accept-encoding"];
+
+ proxyReqData = {
+ url: parsedURL,
+ method: req.method,
+ headers: proxyReqHeaders
+ };
+
+ if (Object.keys(req.body).length > 0) {
+ if (req.get("content-type") === "application/json") {
+ proxyReqData.body = JSON.stringify(req.body);
+ } else {
+ proxyReqData.form = req.body;
+ }
+ }
+
+ // Attempt to catch any synchronously thrown exceptions
+ try {
+ proxyReq = request(proxyReqData, function (error, response, body) {
+ if (error) {
+ console.log("ERROR:".red + " Remote proxying failed with:", error);
+ res.send(500, error);
+ } else if (shouldInjectInto) {
+ if (body) {
+ // pretty sure this callback can be called multiple times (not just when complete)
+ body = body.replace(HEAD_TAG,
+ '<head>' +
+ '<script>' +
+ BOOTSTRAP_FROM_IFRAME +
+ '</script>');
+
+ // TODO: Why only need to set new content-length here (and not for localInjection)?
+ response.headers['content-length'] = body.length;
+
+ res.status(response.statusCode);
+ res.set(response.headers);
+ res.send(body);
+ }
+ }
+ });
+
+ // TODO: Pipe is awesome, but can't modify body (?)
+ if (!shouldInjectInto) {
+ proxyReq.pipe(res);
+ }
+ } catch (e) {
+ res.send(500, e.toString());
+ }
+}
+
+module.exports = {
+ inject: function (opts) {
+ return function (req, res, next) {
+ if (req.originalUrl.match(/\/ripple\/browser\/*/)) {
+ console.log(req.method);
+ if (req.method === "POST") {
+ console.log(req.body.url);
+ _url = req.body.url;
+ res.send(200);
+ } else {
+ proxyRemote({
+ url: _url + req.url.replace("/ripple/browser", ""),
+ userAgent: opts.userAgent
+ }, req, res);
+ }
+ }
+ else {
+ next();
+ }
+ };
+ }
+};
http://git-wip-us.apache.org/repos/asf/incubator-ripple/blob/f7881559/lib/server/emulate.js
----------------------------------------------------------------------
diff --git a/lib/server/emulate.js b/lib/server/emulate.js
index d59a7fa..33a67d3 100644
--- a/lib/server/emulate.js
+++ b/lib/server/emulate.js
@@ -22,6 +22,7 @@ var proxy = require('./proxy'),
server = require('./index'),
colors = require('colors'),
express = require('express'),
+ browser = require('./browser'),
hosted = require('./emulate/hosted');
colors.mode = "console";
@@ -56,6 +57,7 @@ module.exports = {
// TODO: How to make into a dynamic route (using options.route)? (set at build time right now)
app.use("/ripple/assets", express.static(__dirname + "/../../pkg/hosted"));
app.use(hosted.inject(options));
+ app.use(browser.inject(options));
if (!options.remote) {
options.path.forEach(function (path) {