From 282fdb7a400176c8b89fa85a5a7148f7d229b021 Mon Sep 17 00:00:00 2001 From: Piotr Zalewa Date: Thu, 24 Apr 2014 10:51:06 -0400 Subject: [PATCH 1/6] not forcing the look of the inAppBrowserWrap and buttons --- doc/index.md | 19 +++++++++++++++++++ src/firefoxos/InAppBrowserProxy.js | 5 +---- 2 files changed, 20 insertions(+), 4 deletions(-) diff --git a/doc/index.md b/doc/index.md index ebc4734..8696c93 100644 --- a/doc/index.md +++ b/doc/index.md @@ -91,6 +91,7 @@ instance, or the system browser. - Amazon Fire OS - Android - BlackBerry 10 +- Firefox OS - iOS - Windows Phone 7 and 8 @@ -99,6 +100,23 @@ instance, or the system browser. var ref = window.open('http://apache.org', '_blank', 'location=yes'); var ref2 = window.open(encodeURI('http://ja.m.wikipedia.org/wiki/ハングル'), '_blank', 'location=yes'); +### Firefox OS Quirks + +As plugin doesn't enforce any design there is a need to add some CSS rules if +opened with `target` `'_blank'`. The rules might look like these + +``` css +.inappbrowser-wrap { + background-color: rgba(0,0,0,0.75); + color: rgba(235,235,235,1.0); +} +.inappbrowser-wrap p { + padding-top: 10px; + text-align: center; +} +``` + + ## InAppBrowser The object returned from a call to `window.open`. @@ -196,6 +214,7 @@ The function is passed an `InAppBrowserEvent` object. - Amazon Fire OS - Android +- Firefox OS - iOS - Windows Phone 7 and 8 diff --git a/src/firefoxos/InAppBrowserProxy.js b/src/firefoxos/InAppBrowserProxy.js index 8ee3736..85ea5b9 100644 --- a/src/firefoxos/InAppBrowserProxy.js +++ b/src/firefoxos/InAppBrowserProxy.js @@ -63,9 +63,8 @@ var IABExecs = { document.body.removeChild(browserWrap); } browserWrap = document.createElement('div'); + browserWrap.classList.add('inappbrowser-wrap'); browserWrap.style.position = 'absolute'; - browserWrap.style.backgroundColor = 'rgba(0,0,0,0.75)'; - browserWrap.style.color = 'rgba(235,235,235,1.0)'; browserWrap.style.width = window.innerWidth + 'px'; browserWrap.style.height = window.innerHeight + 'px'; browserWrap.style.padding = '10px,0,0,0'; @@ -83,8 +82,6 @@ var IABExecs = { var p = document.createElement('p'); p.appendChild(document.createTextNode('close')); // TODO: make all buttons - ← → × - p.style.paddingTop = '10px'; - p.style.textAlign = 'center'; browserWrap.appendChild(p); browserWrap.appendChild(browserElem); document.body.appendChild(browserWrap); From 7b24dcb3ddf86bb3dd4423ed7d0904aa786abe03 Mon Sep 17 00:00:00 2001 From: Piotr Zalewa Date: Thu, 24 Apr 2014 14:14:41 -0400 Subject: [PATCH 2/6] back/forward buttons added, iframe has no border --- src/firefoxos/InAppBrowserProxy.js | 97 +++++++++++++++++++++++++----- 1 file changed, 82 insertions(+), 15 deletions(-) diff --git a/src/firefoxos/InAppBrowserProxy.js b/src/firefoxos/InAppBrowserProxy.js index 85ea5b9..1427ea0 100644 --- a/src/firefoxos/InAppBrowserProxy.js +++ b/src/firefoxos/InAppBrowserProxy.js @@ -47,10 +47,35 @@ var IABExecs = { open: function (win, lose, args) { var strUrl = args[0], target = args[1], - features = args[2], + features_string = args[2], + features = {}, url, elem; + var features_list = features_string.split(','); + features_list.forEach(function(feature) { + var tup = feature.split('='); + if (tup[1] == 'yes') { + tup[1] = true; + } else if (tup[1] == 'no') { + tup[1] = false; + } else { + var number = parseInt(tup[1]); + if (!isNaN(number)) { + tup[1] = number; + } + } + features[tup[0]] = tup[1]; + }); + + function updateIframeSizeNoLocation() { + console.log('hey'); + browserWrap.style.width = window.innerWidth + 'px'; + browserWrap.style.height = window.innerHeight + 'px'; + browserWrap.browser.style.height = (window.innerHeight - 60) + 'px'; + browserWrap.browser.style.width = browserWrap.style.width; + } + if (target === '_system') { origOpenFunc.apply(window, [strUrl, '_blank']); } else if (target === '_blank') { @@ -63,31 +88,73 @@ var IABExecs = { document.body.removeChild(browserWrap); } browserWrap = document.createElement('div'); - browserWrap.classList.add('inappbrowser-wrap'); + // assign browser element to browserWrap for future reference + browserWrap.browser = browserElem; + + browserWrap.classList.add('inAppBrowserWrap'); browserWrap.style.position = 'absolute'; - browserWrap.style.width = window.innerWidth + 'px'; - browserWrap.style.height = window.innerHeight + 'px'; - browserWrap.style.padding = '10px,0,0,0'; browserElem.style.position = 'absolute'; + browserElem.style.border = 0; browserElem.style.top = '60px'; browserElem.style.left = '0px'; - browserElem.style.height = (window.innerHeight - 60) + 'px'; - browserElem.style.width = browserWrap.style.width; + updateIframeSizeNoLocation(); - browserWrap.addEventListener('click', function () { + var menu = document.createElement('menu'); + menu.setAttribute('type', 'toolbar'); + var close = document.createElement('li'); + var back = document.createElement('li'); + var forward = document.createElement('li'); + + close.appendChild(document.createTextNode('×')); + back.appendChild(document.createTextNode('<')); + forward.appendChild(document.createTextNode('>')); + + close.classList.add('inAppBrowserClose'); + back.classList.add('inAppBrowserBack'); + forward.classList.add('inAppBrowserForward'); + + function checkForwardBackward() { + var backReq = browserElem.getCanGoBack(); + backReq.onsuccess = function() { + if (this.result) { + back.classList.remove('disabled'); + } else { + back.classList.add('disabled'); + } + } + var forwardReq = browserElem.getCanGoForward(); + forwardReq.onsuccess = function() { + if (this.result) { + forward.classList.remove('disabled'); + } else { + forward.classList.add('disabled'); + } + } + }; + + browserElem.addEventListener('mozbrowserloadend', checkForwardBackward); + + close.addEventListener('click', function () { setTimeout(function () { IABExecs.close(); }, 0); }, false); - var p = document.createElement('p'); - p.appendChild(document.createTextNode('close')); - // TODO: make all buttons - ← → × - browserWrap.appendChild(p); + + back.addEventListener('click', function () { + browserElem.goBack(); + }, false); + + forward.addEventListener('click', function () { + browserElem.goForward(); + }, false); + + menu.appendChild(back); + menu.appendChild(forward); + menu.appendChild(close); + + browserWrap.appendChild(menu); browserWrap.appendChild(browserElem); document.body.appendChild(browserWrap); - // assign browser element to browserWrap for future - // reference - browserWrap.browser = browserElem; } else { window.location = strUrl; } From a6cd0a16ba034cda28c93dafa01c45929bef8eb1 Mon Sep 17 00:00:00 2001 From: Piotr Zalewa Date: Thu, 24 Apr 2014 15:01:09 -0400 Subject: [PATCH 3/6] console.log removed --- src/firefoxos/InAppBrowserProxy.js | 1 - 1 file changed, 1 deletion(-) diff --git a/src/firefoxos/InAppBrowserProxy.js b/src/firefoxos/InAppBrowserProxy.js index 1427ea0..f05689d 100644 --- a/src/firefoxos/InAppBrowserProxy.js +++ b/src/firefoxos/InAppBrowserProxy.js @@ -69,7 +69,6 @@ var IABExecs = { }); function updateIframeSizeNoLocation() { - console.log('hey'); browserWrap.style.width = window.innerWidth + 'px'; browserWrap.style.height = window.innerHeight + 'px'; browserWrap.browser.style.height = (window.innerHeight - 60) + 'px'; From 527046261134c15007a6c3268e0789d1edce5cbc Mon Sep 17 00:00:00 2001 From: Piotr Zalewa Date: Thu, 24 Apr 2014 15:03:33 -0400 Subject: [PATCH 4/6] doc updated --- doc/index.md | 28 ++++++++++++++++++++++------ 1 file changed, 22 insertions(+), 6 deletions(-) diff --git a/doc/index.md b/doc/index.md index 8696c93..1f4f3ba 100644 --- a/doc/index.md +++ b/doc/index.md @@ -106,13 +106,29 @@ As plugin doesn't enforce any design there is a need to add some CSS rules if opened with `target` `'_blank'`. The rules might look like these ``` css -.inappbrowser-wrap { - background-color: rgba(0,0,0,0.75); - color: rgba(235,235,235,1.0); +.inAppBrowserWrap { + background-color: rgba(0,0,0,0.75); + color: rgba(235,235,235,1.0); } -.inappbrowser-wrap p { - padding-top: 10px; - text-align: center; +.inAppBrowserWrap menu { + overflow: auto; + list-style-type: none; + padding-left: 0; +} +.inAppBrowserWrap menu li { + font-size: 25px; + height: 25px; + float: left; + margin-right: 0px; + margin: 0 10px; + padding: 3px 10px; + text-decoration: none; + color: #ccc; + display: block; + background: rgba(30,30,30,0.50); +} +.inAppBrowserWrap menu li.disabled { + color: #777; } ``` From 846190a6f84a7f2ad01d36b3d1b78589aac1b8af Mon Sep 17 00:00:00 2001 From: Piotr Zalewa Date: Wed, 4 Jun 2014 15:24:21 +0200 Subject: [PATCH 5/6] default parameter added --- src/firefoxos/InAppBrowserProxy.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/firefoxos/InAppBrowserProxy.js b/src/firefoxos/InAppBrowserProxy.js index f05689d..846f57a 100644 --- a/src/firefoxos/InAppBrowserProxy.js +++ b/src/firefoxos/InAppBrowserProxy.js @@ -47,7 +47,7 @@ var IABExecs = { open: function (win, lose, args) { var strUrl = args[0], target = args[1], - features_string = args[2], + features_string = args[2] || "location=yes", //location=yes is default features = {}, url, elem; From df001e2765a512bc2b9c7e5d730f438556112067 Mon Sep 17 00:00:00 2001 From: Piotr Zalewa Date: Thu, 5 Jun 2014 13:03:51 +0200 Subject: [PATCH 6/6] after code review --- doc/index.md | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/doc/index.md b/doc/index.md index 1106457..d59cd99 100644 --- a/doc/index.md +++ b/doc/index.md @@ -94,7 +94,7 @@ instance, or the system browser. ### Firefox OS Quirks As plugin doesn't enforce any design there is a need to add some CSS rules if -opened with `target` `'_blank'`. The rules might look like these +opened with `target='_blank'`. The rules might look like these ``` css .inAppBrowserWrap { @@ -110,7 +110,6 @@ opened with `target` `'_blank'`. The rules might look like these font-size: 25px; height: 25px; float: left; - margin-right: 0px; margin: 0 10px; padding: 3px 10px; text-decoration: none;