Stop keyboard obscuring report detail text box

Adjusts the height of the details textarea when the keyboard
is shown so that it doesn't disappear behind the keyboard.

Fixes #222

4 files changed, 35 insertions, 17 deletions

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 753c4a4..cb1c960 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -10,6 +10,7 @@
         - Correctly set user title. #156
         - Show more helpful error if server rejects password. #156
         - Allow mailto: links to be followed. #263
+        - Stop keyboard obscuring report details text field. #222
     - Development improvements
         - CONFIG.SKIP_CONFIRM_REPORT flag to skip confirmation screen
         - Ensure compatibility with latest Cordova versions.
diff --git a/www/js/views/details.js b/www/js/views/details.js
index f2de9d8..84b6ac2 100644
--- a/www/js/views/details.js
+++ b/www/js/views/details.js
@@ -18,6 +18,16 @@
                 'blur input': 'updateCurrentReport'
             },
 
+            initialize: function() {
+                var that = this;
+                window.addEventListener('native.keyboardshow', function(e) {
+                    that.fixDetailTextAreaHeight(e.keyboardHeight);
+                });
+                window.addEventListener('native.keyboardhide', function(e) {
+                    that.fixDetailTextAreaHeight();
+                });
+            },
+
             afterRender: function() {
                 this.$('#form_category').attr('data-role', 'none');
 
@@ -28,13 +38,18 @@
 
             },
 
-            beforeDisplay: function() {
-                this.fixPageHeight();
+            beforeDisplay: function(extra) {
+                this.fixDetailTextAreaHeight();
+            },
+
+            fixDetailTextAreaHeight: function(extra) {
+                extra = extra || 0;
+                this.fixPageHeight(extra);
                 var header = this.$("div[data-role='header']:visible"),
                 detail = this.$('#form_detail'),
                 top = detail.position().top,
                 viewHeight = $(window).height(),
-                contentHeight = viewHeight - header.outerHeight() + 15;
+                contentHeight = viewHeight - header.outerHeight() + 15 - extra;
 
                 detail.height( contentHeight - top );
             },
diff --git a/www/js/views/details_extra.js b/www/js/views/details_extra.js
index a516562..e5f63ba 100644
--- a/www/js/views/details_extra.js
+++ b/www/js/views/details_extra.js
@@ -108,18 +108,6 @@
                 this.$('input').each(populate);
                 this.$('select').each(populate);
                 this.$('textarea').each(populate);
-            },
-
-            disableScrolling: function() {
-                if ( typeof cordova !== 'undefined' ) {
-                    cordova.plugins.Keyboard.disableScroll(true);
-                }
-            },
-
-            enableScrolling: function() {
-                if ( typeof cordova !== 'undefined' ) {
-                    cordova.plugins.Keyboard.disableScroll(false);
-                }
             }
         })
     });
diff --git a/www/js/views/fms.js b/www/js/views/fms.js
index 711968f..ae1174f 100644
--- a/www/js/views/fms.js
+++ b/www/js/views/fms.js
@@ -45,12 +45,13 @@
                 return this;
             },
 
-            fixPageHeight: function() {
+            fixPageHeight: function(extra) {
+                extra = extra || 0;
                 var header = this.$("div[data-role='header']:visible"),
                 content = this.$(this.contentSelector),
                 top = content.position().top,
                 viewHeight = $(window).height(),
-                contentHeight = FMS.windowHeight - header.outerHeight() - this.bottomMargin;
+                contentHeight = FMS.windowHeight - header.outerHeight() - this.bottomMargin - extra;
 
                 if ($("body").hasClass("iphone-x")) {
                     var body = $("body").get(0);
@@ -115,6 +116,19 @@
                 $('.form-error').removeClass('form-error');
             },
 
+            disableScrolling: function() {
+                if ( typeof cordova !== 'undefined' ) {
+                    cordova.plugins.Keyboard.disableScroll(true);
+                    $('body').scrollTop(0);
+                }
+            },
+
+            enableScrolling: function() {
+                if ( typeof cordova !== 'undefined' ) {
+                    cordova.plugins.Keyboard.disableScroll(false);
+                }
+            },
+
             destroy: function() { FMS.printDebug('destroy for ' + this.id); this._destroy(); this.remove(); },
 
             _destroy: function() {}