Merge branch 'react_on_features'

doc/index.md

@@ -82,6 +82,7 @@ instance, or the system browser.
 - Amazon Fire OS
 - Android
 - BlackBerry 10
+- Firefox OS
 - iOS
 - Windows Phone 7 and 8
 
@@ -90,6 +91,38 @@ 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
+.inAppBrowserWrap {
+  background-color: rgba(0,0,0,0.75);
+  color: rgba(235,235,235,1.0);
+}
+.inAppBrowserWrap menu {
+  overflow: auto;
+  list-style-type: none;
+  padding-left: 0;
+}
+.inAppBrowserWrap menu li {
+  font-size: 25px;
+  height: 25px;
+  float: left;
+  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;
+}
+```
+
+
 ## InAppBrowser
 
 The object returned from a call to `window.open`.
@@ -187,6 +220,7 @@ The function is passed an `InAppBrowserEvent` object.
 
 - Amazon Fire OS
 - Android
+- Firefox OS
 - iOS
 - Windows Phone 7 and 8
 

src/firefoxos/InAppBrowserProxy.js

@@ -47,10 +47,34 @@ var IABExecs = {
     open: function (win, lose, args) {
         var strUrl = args[0],
             target = args[1],
-            features = args[2],
+            features_string = args[2] || "location=yes", //location=yes is default
+            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() {
+            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,34 +87,73 @@ var IABExecs = {
                 document.body.removeChild(browserWrap);
             }
             browserWrap = document.createElement('div');
+            // assign browser element to browserWrap for future reference
+            browserWrap.browser = browserElem;
+
+            browserWrap.classList.add('inAppBrowserWrap');
             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';
             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 - ← → ×
-            p.style.paddingTop = '10px';
-            p.style.textAlign = 'center';
-            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;
         }