feat(browser): Work on browser (CB-12024)

README.md

@@ -30,7 +30,7 @@ description: Control the device status bar.
 StatusBar
 ======
 
-> The `StatusBar` object provides some functions to customize the iOS and Android StatusBar.
+> The `StatusBar` object provides some functions to customize the iOS and Android StatusBar, as well as some browser chrome.
 
 :warning: Report issues on the [Apache Cordova issue tracker](https://issues.apache.org/jira/issues/?jql=project%20%3D%20CB%20AND%20status%20in%20(Open%2C%20%22In%20Progress%22%2C%20Reopened)%20AND%20resolution%20%3D%20Unresolved%20AND%20component%20%3D%20%22cordova-plugin-statusbar%22%20ORDER%20BY%20priority%20DESC%2C%20summary%20ASC%2C%20updatedDate%20DESC)
 
@@ -73,6 +73,12 @@ if (cordova.platformId == 'android') {
 }
 ```
 
+### Browser Quirks
+Currently, there is support for the following browsers:
+- Chrome on Android
+- Safari on iOS
+- Internet Explorer on Windows Phone
+
 Hiding at startup
 -----------
 
@@ -143,6 +149,7 @@ On iOS 7, set to false to make the statusbar appear like iOS 6. Set the style an
 Supported Platforms
 -------------------
 
+- Browser
 - iOS
 
 Quick Example
@@ -162,6 +169,7 @@ Use the default statusbar (dark text, for light backgrounds).
 Supported Platforms
 -------------------
 
+- Browser
 - iOS
 - Windows Phone 7
 - Windows Phone 8
@@ -178,6 +186,7 @@ Use the lightContent statusbar (light text, for dark backgrounds).
 Supported Platforms
 -------------------
 
+- Browser
 - iOS
 - Windows Phone 7
 - Windows Phone 8
@@ -194,6 +203,7 @@ Use the blackTranslucent statusbar (light text, for dark backgrounds).
 Supported Platforms
 -------------------
 
+- Browser
 - iOS
 - Windows Phone 7
 - Windows Phone 8
@@ -210,6 +220,7 @@ Use the blackOpaque statusbar (light text, for dark backgrounds).
 Supported Platforms
 -------------------
 
+- Browser
 - iOS
 - Windows Phone 7
 - Windows Phone 8
@@ -231,8 +242,9 @@ Supported color names are:
 Supported Platforms
 -------------------
 
-- iOS
 - Android 5+
+- Browser
+- iOS
 - Windows Phone 7
 - Windows Phone 8
 - Windows Phone 8.1
@@ -256,8 +268,9 @@ On WP7 and WP8 you can also specify values as #AARRGGBB, where AA is an alpha va
 Supported Platforms
 -------------------
 
-- iOS
 - Android 5+
+- Browser
+- iOS
 - Windows Phone 7
 - Windows Phone 8
 - Windows Phone 8.1
@@ -273,8 +286,8 @@ Hide the statusbar.
 Supported Platforms
 -------------------
 
-- iOS
 - Android
+- iOS
 - Windows Phone 7
 - Windows Phone 8
 - Windows Phone 8.1
@@ -290,8 +303,8 @@ Shows the statusbar.
 Supported Platforms
 -------------------
 
-- iOS
 - Android
+- iOS
 - Windows Phone 7
 - Windows Phone 8
 - Windows Phone 8.1
@@ -310,8 +323,8 @@ Read this property to see if the statusbar is visible or not.
 Supported Platforms
 -------------------
 
-- iOS
 - Android
+- iOS
 - Windows Phone 7
 - Windows Phone 8
 - Windows Phone 8.1

package.json

@@ -7,6 +7,7 @@
     "id": "cordova-plugin-statusbar",
     "platforms": [
       "android",
+      "browser",
       "ios",
       "wp7",
       "wp8",

plugin.xml

@@ -36,6 +36,7 @@
         <clobbers target="window.StatusBar" />
     </js-module>
 
+    <!-- android -->
     <platform name="android">
         <source-file src="src/android/StatusBar.java" target-dir="src/org/apache/cordova/statusbar" />
 
@@ -47,6 +48,7 @@
         </config-file>
     </platform>
 
+    <!-- browser -->
     <platform name="browser">
         <js-module src="src/browser/StatusBarProxy.js" name="StatusBarProxy">
             <runs />

src/browser/StatusBarProxy.js

@@ -18,33 +18,173 @@
  *
  */
 
-function notSupported(win,fail) {
-    //
-    console.log('StatusBar is not supported');
-    setTimeout(function(){
-        if (win) {
-            win();
-        }
-        // note that while it is not explicitly supported, it does not fail
-        // this is really just here to allow developers to test their code in the browser
-        // and if we fail, then their app might as well. -jm
-    },0);
+var BRIGHTEST_SUPPORTED_COLOR = '#EFEFEF';
+
+var _supported = null; // set to null so we can check first time
+
+var statusBarThemeMetaTag = null;
+
+var appropriateMetaTagName = null;
+
+var MetaTagName = {
+    IOS_SAFARI: 'apple-mobile-web-app-status-bar-style',
+    WINDOWS_PHONE: 'msapplication-navbutton-color',
+    DEFAULT: 'theme-color'
+};
+
+function isSupported() {
+    if (_supported === null) {
+        if (getAppropriateMetaTagName()) {
+            _supported = true;
+        } else {
+            _supported = false;
+        }
+    }
+
+    return _supported;
+}
+
+function findMetaTag(tagName) {
+    var metaTags = document.head.getElementsByTagName('meta');
+    if(metaTags) {
+        for (var i = 0; i < metaTags.length; i++) {
+            if (metaTags[i].name === tagName) {
+                return metaTags[i];
+            }
+        }
+    } else {
+        return false;
+    }
+}
+
+function getStatusBar() {
+    if (!isSupported()) {
+        throw new Error("Status bar is not supported");
+    }
+
+    statusBarThemeMetaTag = findMetaTag(getAppropriateMetaTagName());
+
+    if(!statusBarThemeMetaTag) {
+        statusBarThemeMetaTag = document.createElement('meta');
+        statusBarThemeMetaTag.name = getAppropriateMetaTagName();
+
+        if (getAppropriateMetaTagName() === MetaTagName.IOS_SAFARI) {
+            /*
+             * The meta tag has no effect on iOS Safari unless you first specify full-screen mode as described in apple-apple-mobile-web-app-capable.
+             * If the apple-apple-mobile-web-app-capable isn't in place already, we'll add it here.
+             */
+            if (!findMetaTag('apple-mobile-web-app-capable')) {
+                var iOSwebAppMetaTag = document.createElement('meta');
+                iOSwebAppMetaTag.name = 'apple-mobile-web-app-capable';
+                iOSwebAppMetaTag.content = 'yes';
+
+                document.head.appendChild(iOSwebAppMetaTag);
+            }
+        }
+
+        document.head.appendChild(statusBarThemeMetaTag);
+    }
+}
+
+function getAppropriateMetaTagName() {
+    if (appropriateMetaTagName === null) {
+        // TODO: Make userAgent identification more robust
+        if(navigator.userAgent.indexOf('iPhone') > -1 && navigator.userAgent.indexOf('Chrome') === -1) {
+            // iOS Safari
+            appropriateMetaTagName = MetaTagName.IOS_SAFARI;
+        } if (navigator.userAgent.indexOf('IEMobile') > -1) {
+            // Windows Phone
+            appropriateMetaTagName = MetaTagName.WINDOWS_PHONE;
+        } else {
+            // Chrome, Firefox OS, Opera and Vivaldi
+            appropriateMetaTagName = MetaTagName.DEFAULT;
+        }
+    }
+
+    return appropriateMetaTagName;    
+}
+
+function setStatusBarColor(hexColor) {
+    if (statusBarThemeMetaTag) {
+        statusBarThemeMetaTag.content = hexColor;
+    }
 }
 
 module.exports = {
-    isVisible: false,
-    styleBlackTranslucent:notSupported,
-    styleDefault:notSupported,
-    styleLightContent:notSupported,
-    styleBlackOpaque:notSupported,
-    overlaysWebView:notSupported,
-    styleLightContect: notSupported,
-    backgroundColorByName: notSupported,
-    backgroundColorByHexString: notSupported,
-    hide: notSupported,
-    show: notSupported,
-    _ready:notSupported
+    _ready: function(win, fail) {
+        if(isSupported()) {
+            getStatusBar();
+            win(true);
+        }
+    },
+
+    overlaysWebView: function () {
+        var overlay = false;
+
+        if (getAppropriateMetaTagName() === MetaTagName.IOS_SAFARI &&
+            statusBarThemeMetaTag.content === 'black-translucent') {
+            overlay = true;
+        }        
+
+        return overlay;
+    },
+
+    styleDefault: function () {
+        // dark text ( to be used on a light background )
+        if (isSupported()) {
+            if (getAppropriateMetaTagName() === MetaTagName.IOS_SAFARI) {
+                setStatusBarColor('default');
+            } else {
+                setStatusBarColor('');
+            }
+        }
+    },
+
+    styleLightContent: function () {
+        // light text ( to be used on a dark background )
+        if (isSupported()) {
+            if (getAppropriateMetaTagName() === MetaTagName.IOS_SAFARI) {
+                setStatusBarColor('black');
+            } else {
+                setStatusBarColor(BRIGHTEST_SUPPORTED_COLOR);
+            }
+        }
+    },
+
+    styleBlackTranslucent: function () {
+        if (getAppropriateMetaTagName() === MetaTagName.IOS_SAFARI) {
+            return setStatusBarColor('black-translucent');
+        } else {
+            return module.exports.styleLightContent();
+        }
+    },
+
+    styleBlackOpaque: function () {
+        return module.exports.styleLightContent();
+    },
+
+    backgroundColorByHexString: function (win, fail, args) {
+        var hex = args[0];
+        if(isSupported()) {
+            setStatusBarColor(hex);
+        }
+    },
+
+    isVisible: true,
+
+    show: function (win, fail) {
+        // added support check so no error thrown, when calling this method
+        if (isSupported()) {
+            return;
+        }
+    },
+
+    hide: function (win, fail) {
+        // added support check so no error thrown, when calling this method
+        if (isSupported()) {
+            return;
+        }
+    }
 };
 
 require("cordova/exec/proxy").add("StatusBar", module.exports);
-