From 77847f4963143b9443d0ecde65622daa6c64ef9f Mon Sep 17 00:00:00 2001 From: Adam Bradley Date: Wed, 10 Sep 2014 12:50:51 -0500 Subject: [PATCH] fix(keyboard): screen.height fallback for window.innerHeight Closes #2168 --- js/utils/keyboard.js | 37 ++++++++++++++++++++----------------- 1 file changed, 20 insertions(+), 17 deletions(-) diff --git a/js/utils/keyboard.js b/js/utils/keyboard.js index d7bee46a48..c2d4e712b8 100644 --- a/js/utils/keyboard.js +++ b/js/utils/keyboard.js @@ -13,13 +13,13 @@ * It will also attempt to prevent the native overflow scrolling on focus, * which can cause layout issues such as pushing headers up and out of view. * - * The keyboard fixes work best in conjunction with the + * The keyboard fixes work best in conjunction with the * [Ionic Keyboard Plugin](https://github.com/driftyco/ionic-plugins-keyboard), * although it will perform reasonably well without. However, if you are using * Cordova there is no reason not to use the plugin. * * ### Hide when keyboard shows - * + * * To hide an element when the keyboard is open, add the class `hide-on-keyboard-open`. * * ```html @@ -30,17 +30,17 @@ * ---------- * * ### Plugin Usage - * Information on using the plugin can be found at + * Information on using the plugin can be found at * [https://github.com/driftyco/ionic-plugins-keyboard](https://github.com/driftyco/ionic-plugins-keyboard). * - * ---------- + * ---------- * * ### Android Notes - * - If your app is running in fullscreen, i.e. you have + * - If your app is running in fullscreen, i.e. you have * `` in your `config.xml` file * you will need to set `ionic.Platform.isFullScreen = true` manually. * - * - You can configure the behavior of the web view when the keyboard shows by setting + * - You can configure the behavior of the web view when the keyboard shows by setting * [android:windowSoftInputMode](http://developer.android.com/reference/android/R.attr.html#windowSoftInputMode) * to either `adjustPan`, `adjustResize` or `adjustNothing` in your app's * activity in `AndroidManifest.xml`. `adjustResize` is the recommended setting @@ -57,11 +57,11 @@ * out of view on input focus, try setting `cordova.plugins.Keyboard.disableScroll(true)`. * This does **not** disable scrolling in the Ionic scroll view, rather it * disables the native overflow scrolling that happens automatically as a - * result of focusing on inputs below the keyboard. - * + * result of focusing on inputs below the keyboard. + * */ -var keyboardViewportHeight = window.innerHeight; +var keyboardViewportHeight = getViewportHeight(); var keyboardIsOpen; var keyboardActiveElement; var keyboardFocusOutTimer; @@ -205,8 +205,8 @@ function keyboardHide() { } function keyboardUpdateViewportHeight() { - if( window.innerHeight > keyboardViewportHeight ) { - keyboardViewportHeight = window.innerHeight; + if( getViewportHeight() > keyboardViewportHeight ) { + keyboardViewportHeight = getViewportHeight(); } } @@ -223,7 +223,7 @@ function keyboardPreventDefault(e) { } function keyboardOrientationChange() { - var updatedViewportHeight = window.innerHeight; + var updatedViewportHeight = getViewportHeight(); //too slow, have to wait for updated height if (updatedViewportHeight === keyboardViewportHeight){ @@ -234,7 +234,7 @@ function keyboardOrientationChange() { clearInterval(pollViewportHeight); } - updatedViewportHeight = window.innerHeight; + updatedViewportHeight = getViewportHeight(); if (updatedViewportHeight !== keyboardViewportHeight){ if (updatedViewportHeight < keyboardViewportHeight){ @@ -267,10 +267,9 @@ function keyboardGetHeight() { return 275; } //otherwise, wait for the screen to resize - if ( window.innerHeight < keyboardViewportHeight ){ - return keyboardViewportHeight - window.innerHeight; - } - else { + if ( getViewportHeight() < keyboardViewportHeight ){ + return keyboardViewportHeight - getViewportHeight(); + } else { return 0; } } @@ -293,6 +292,10 @@ function keyboardGetHeight() { return 275; } +function getViewportHeight() { + return window.innerHeight || screen.height; +} + function keyboardIsWithinScroll(ele) { while(ele) { if(ele.classList.contains(SCROLL_CONTAINER_CSS)) {