Added backwards combatibility with old ionic-plugin-keyboard.

Added both keyboard plugins and use new one if it is available. Added a TODO as this will eventually be removed.
meteoric · Mar 22, 2016 · e9fdbdc · e9fdbdc
1 parent f91c727
commit e9fdbdc
Show file tree

Hide file tree

Showing 2 changed files with 137 additions and 45 deletions.
diff --git a/components/ionKeyboard/ionKeyboard.js b/components/ionKeyboard/ionKeyboard.js
@@ -4,66 +4,157 @@ Meteor.startup(function () {
   }
 });
 
-IonKeyboard = {
-  close: function () {
-    if (Meteor.isCordova) {
-      Keyboard.hide();
-    }
-  },
+//TODO: Using if statement for backwards combatibility but we need to remove this eventually and only use Keyboard and cordova-plugin-keyboard;
+if(Keyboard){
+  IonKeyboard = {
+    close: function () {
+      if (Meteor.isCordova) {
+        Keyboard.hide();
+      }
+    },
+
+    show: function () {
+      if (Meteor.isCordova) {
+        Keyboard.show();
+      }
+    },
+
+    hideKeyboardAccessoryBar: function () {
+      if (Meteor.isCordova) {
+        Keyboard.hideFormAccessoryBar(true);
+      }
+    },
+
+    showKeyboardAccessoryBar: function () {
+      if (Meteor.isCordova) {
+        Keyboard.hideFormAccessoryBar(false);
+      }
+    },
 
-  show: function () {
-    if (Meteor.isCordova) {
-      Keyboard.show();
+    disableScroll: function () {
+      if (Meteor.isCordova) {
+        Keyboard.disableScrollingInShrinkView(true);
+      }
+    },
+
+    enableScroll: function () {
+      if (Meteor.isCordova) {
+        Keyboard.disableScrollingInShrinkView(false);
+      }
     }
-  },
+  };
 
-  hideKeyboardAccessoryBar: function () {
-    if (Meteor.isCordova) {
-      Keyboard.hideFormAccessoryBar(true);
+  window.addEventListener('keyboardHeightWillChange', function (event) {
+    // TODO: Android is having problems
+    if (Platform.isAndroid()) {
+      return;
     }
-  },
 
-  showKeyboardAccessoryBar: function () {
-    if (Meteor.isCordova) {
-      Keyboard.hideFormAccessoryBar(false);
+    $('body').addClass('keyboard-open');
+    var keyboardHeight = event.keyboardHeight;
+
+    // Scroll to the focused element
+    scrollToFocusedElement(null, keyboardHeight);
+
+  });
+
+  window.addEventListener('keyboardDidHide', function (event) {
+
+    // TODO: Android is having problems
+    if (Platform.isAndroid()) {
+      return;
     }
-  },
 
-  disableScroll: function () {
-    if (Meteor.isCordova) {
-      Keyboard.disableScrollingInShrinkView(true);
+    // $('input, textarea').blur();
+    $('body').removeClass('keyboard-open');
+
+  });
+} else {
+
+  IonKeyboard = {
+    close: function () {
+      if (Meteor.isCordova) {
+        cordova.plugins.Keyboard.close();
+      }
+    },
+
+    show: function () {
+      if (Meteor.isCordova) {
+        cordova.plugins.Keyboard.show();
+      }
+    },
+
+    hideKeyboardAccessoryBar: function () {
+      if (Meteor.isCordova) {
+        cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
+      }
+    },
+
+    showKeyboardAccessoryBar: function () {
+      if (Meteor.isCordova) {
+        cordova.plugins.Keyboard.hideKeyboardAccessoryBar(false);
+      }
+    },
+
+    disableScroll: function () {
+      if (Meteor.isCordova) {
+        cordova.plugins.Keyboard.disableScroll(true);
+      }
+    },
+
+    enableScroll: function () {
+      if (Meteor.isCordova) {
+        cordova.plugins.Keyboard.disableScroll(false);
+      }
     }
-  },
+  };
+
+  window.addEventListener('native.keyboardshow', function (event) {
 
-  enableScroll: function () {
-    if (Meteor.isCordova) {
-      Keyboard.disableScrollingInShrinkView(false);
+    // TODO: Android is having problems
+    if (Platform.isAndroid()) {
+      return;
     }
-  }
-};
 
-window.addEventListener('keyboardHeightWillChange', function (event) {
-  // TODO: Android is having problems
-  if (Platform.isAndroid()) {
-    return;
-  }
+    $('body').addClass('keyboard-open');
+    var keyboardHeight = event.keyboardHeight;
 
-  $('body').addClass('keyboard-open');
-  var keyboardHeight = event.keyboardHeight;
+    // Attach any elements that want to be attached
+    $('[data-keyboard-attach]').each(function (index, el) {
+      $(el).data('ionkeyboard.bottom', $(el).css('bottom'));
+      $(el).css({bottom: keyboardHeight});
+    });
 
-  // Scroll to the focused element
-  scrollToFocusedElement(null, keyboardHeight);
+    // Move the bottom of the content area(s) above the top of the keyboard
+    $('.content.overflow-scroll').each(function (index, el) {
+      $(el).data('ionkeyboard.bottom', $(el).css('bottom'));
+      $(el).css({bottom: keyboardHeight});
+    });
 
-});
+    // Scroll to the focused element
+    scrollToFocusedElement(null, keyboardHeight);
 
-window.addEventListener('keyboardDidHide', function (event) {
+  });
 
-  // TODO: Android is having problems
-  if (Platform.isAndroid()) {
-    return;
-  }
+  window.addEventListener('native.keyboardhide', function (event) {
 
-  // $('input, textarea').blur();
-  $('body').removeClass('keyboard-open');
+    // TODO: Android is having problems
+    if (Platform.isAndroid()) {
+      return;
+    }
 
-});
+    // $('input, textarea').blur();
+    $('body').removeClass('keyboard-open');
+
+    // Detach any elements that were attached
+    $('[data-keyboard-attach]').each(function (index, el) {
+      $(el).css({bottom: $(el).data('ionkeyboard.bottom')});
+    });
+
+    // Reset the content area(s)
+    $('.content.overflow-scroll').each(function (index, el) {
+      $(el).css({bottom: $(el).data('ionkeyboard.bottom')});
+    });
+
+  });
+}
diff --git a/package.js b/package.js
@@ -6,6 +6,7 @@ Package.describe({
 });
 
 Cordova.depends({
+  'ionic-plugin-keyboard': '1.0.8',
   'cordova-plugin-keyboard': '1.1.3'
 });