diff --git a/CHANGELOG.md b/CHANGELOG.md index e40897cc6f..e5915670fd 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,7 +1,7 @@ ## 0.9.21 (pre-release) - Refactor platform ready event listeners - - Create ionic.Platform.fullscreen() + - Created ionic.Platform.fullscreen() and .showStatusBar() ## 0.9.20 "Alpha Lynx" (2014-01-14) diff --git a/js/utils/platform.js b/js/utils/platform.js index 176730b3e0..bbebebd9dd 100644 --- a/js/utils/platform.js +++ b/js/utils/platform.js @@ -28,6 +28,12 @@ } }, + device: function() { + if(window.device) return window.device; + console.error('device plugin required'); + return {}; + }, + _checkPlatforms: function(platforms) { this.platforms = []; @@ -45,8 +51,7 @@ } }, - // Check if we are running in Cordova, which will have - // window.device available. + // Check if we are running in Cordova isCordova: function() { return (window.cordova || window.PhoneGap || window.phonegap); }, @@ -54,38 +59,46 @@ return navigator.userAgent.toLowerCase().indexOf('ipad') >= 0; }, isIOS7: function() { - if(!window.device) { - return false; - } - return window.device.platform == 'iOS' && parseFloat(window.device.version) >= 7.0; + return this.device().platform == 'iOS' && parseFloat(window.device.version) >= 7.0; }, isAndroid: function() { - if(!window.device) { - return navigator.userAgent.toLowerCase().indexOf('android') >= 0; - } - return window.device.platform === "Android"; + return this.device().platform === "Android"; }, // Check if the platform is the one detected by cordova is: function(type) { - if(window.device && window.device.platform) { - return window.device.platform === type || window.device.platform.toLowerCase() === type; + if(this.device.platform) { + return window.device.platform.toLowerCase() === type.toLowerCase(); } - // A quick hack for return navigator.userAgent.toLowerCase().indexOf(type.toLowerCase()) >= 0; }, + showStatusBar: function(val) { + // Only useful when run within cordova + this.showStatusBar = val; + this.ready(function(){ + // run this only when or if the platform (cordova) is ready + if(ionic.Platform.showStatusBar) { + // they do not want it to be full screen + StatusBar.show(); + document.body.classList.remove('status-bar-hide'); + } else { + // it should be full screen + StatusBar.hide(); + document.body.classList.add('status-bar-hide'); + } + }); + }, + fullScreen: function(showFullScreen, showStatusBar) { // fullScreen( [showFullScreen[, showStatusBar] ] ) - // showFullScreen: default is true - // showStatusBar: default is false + // showFullScreen: default is true if no param provided this.isFullScreen = (showFullScreen !== false); - this.showStatusBar = (showStatusBar === true); // add/remove the fullscreen classname to the body ionic.DomUtil.ready(function(){ - // run this when the DOM is ready + // run this only when or if the DOM is ready if(ionic.Platform.isFullScreen) { document.body.classList.add('fullscreen'); } else { @@ -93,19 +106,8 @@ } }); - // run this when the platform (cordova) is ready - this.ready(function(){ - - // do this only when runny in cordova - if(ionic.Platform.showStatusBar) { - // they do not want it to be full screen - StatusBar.show(); - } else { - // it should be full screen - StatusBar.hide(); - } - }); - + // showStatusBar: default is false if no param provided + this.showStatusBar( (showStatusBar === true) ); } }; @@ -123,7 +125,7 @@ // the device is all set to go, init our own stuff then fire off our event ionic.Platform.isReady = true; ionic.Platform.detect(); - ionic.trigger('platformready', document); + ionic.trigger('platformready', { target: document }); document.removeEventListener("deviceready", onCordovaReady, false); } diff --git a/scss/_platform.scss b/scss/_platform.scss index a19b45060d..f5114309fd 100644 --- a/scss/_platform.scss +++ b/scss/_platform.scss @@ -2,9 +2,14 @@ /** * Platform * -------------------------------------------------- + * Platform specific tweaks when in Cordova. */ -.platform-ios7 { +.platform-ios7:not(.fullscreen) { + // iOS7 has a status bar which sits on top of the header. + // Bump down everything to make room for it. However, if + // if its in Cordova, and set to fullscreen, then disregard the bump. + .bar-header { height: 64px; @@ -17,10 +22,7 @@ } } - .has-header { - top: 64px; - } - + .has-header, .bar-subheader { top: 64px; } @@ -30,15 +32,15 @@ } } +.platform-ios7.status-bar-hide { + // Cordova doesn't adjust the body height correctly, this makes up for it + margin-bottom: 20px; +} + .platform-android { - .bar-header { - height: 48px; - } - - .has-header { - top: 48px; - } - + + .bar-header, + .has-header, .bar-subheader { top: 48px; }