feat(footer): keyboard-attach attribute directive to position footer …

…above keyboard

docs/templates/api_menu_version.template.html

@@ -400,7 +400,7 @@
     </a>
     <ul>
       <li>
-        <a href="{{ page.versionHref }}/api/service/$ionicBackdrop">
+        <a href="{{ page.versionHref }}/api/service/$ionicBackdrop/">
           $ionicBackdrop
         </a>
       </li>
@@ -442,9 +442,21 @@
     </a>
   </li>
 
-  <!-- Keyboard -->
+    <!-- Keyboard -->
   <li class="menu-section">
-    <a href="{{ page.versionHref }}/api/page/keyboard/" class="api-section">
+    <a href="#" class="api-section">
       Keyboard
     </a>
+    <ul>
+      <li>
+        <a href="{{ page.versionHref }}/api/page/keyboard/">
+          Keyboard
+        </a>
+      </li>
+      <li>
+        <a href="{{ page.versionHref }}/api/directive/keyboardAttach/">
+          keyboard-attach
+        </a>
+      </li>
+    </ul>
   </li>

js/angular/directive/keyboardAttach.js

@@ -0,0 +1,53 @@
+/**
+ * @ngdoc directive
+ * @name keyboardAttach
+ * @module ionic
+ * @restrict A
+ *
+ * @description
+ * keyboard-attach is an attribute directive which will cause an element to float above
+ * the keyboard when the keyboard shows. Currently only supports the [ion-footer-bar]({{ page.versionHref }}/api/directive/ionFooterBar/)
+ * directive.
+ *
+ * @usage
+ *
+ * ```html
+ *  <ion-footer-bar align-title="left" keyboard-attach class="bar-assertive">
+ *    <h1 class="title">Title!</h1>
+ *  </ion-footer-bar>
+ * ```
+ */
+
+IonicModule
+.directive('keyboardAttach', function() {
+  return function(scope, element, attrs) {
+    window.addEventListener('native.showkeyboard', onShow);
+    window.addEventListener('native.hidekeyboard', onHide);
+
+    var scrollCtrl;
+
+    function onShow(e) {
+      //for testing
+      var keyboardHeight = e.keyboardHeight || e.detail.keyboardHeight;
+      element.css('bottom', keyboardHeight);
+      scrollCtrl = element.controller('$ionicScroll');
+      if ( scrollCtrl ) {
+        scrollCtrl.scrollView.__container.style.bottom = keyboardHeight + keyboardAttachGetClientHeight(element[0]) + "px";
+      }
+    };
+
+    function onHide() {
+      element.css('bottom', '');
+      if ( scrollCtrl ) { 
+        scrollCtrl.scrollView.__container.style.bottom = '';
+      }
+    };
+
+    scope.$on('$destroy', function() {
+      window.removeEventListener('native.showkeyboard', onShow);
+      window.removeEventListener('native.hidekeyboard', onHide);
+    });
+  };
+})
+
+function keyboardAttachGetClientHeight(element) { return element.clientHeight }

test/unit/angular/directive/keyboardAttach.unit.js

@@ -0,0 +1,53 @@
+describe('keyboardAttach directive', function() {
+  beforeEach(module('ionic'));
+
+  function setup() {
+    var el, content;
+    inject(function($compile, $rootScope) {
+      el = angular.element('<div keyboard-attach></div>');
+      content = angular.element('<ion-content></ion-content>');
+      content.append(el);
+      $compile(content)($rootScope.$new());
+      $rootScope.$apply();
+    });
+    return {el: el, content: content};
+  }
+
+  it('should move up when window fires native.showkeyboard event', function() {
+    var el = setup().el;
+    expect(el.css('bottom')).toEqual('');
+    ionic.trigger('native.showkeyboard', { target: window, keyboardHeight: 33 });
+    expect(el.css('bottom')).toEqual('33px');
+    el.scope().$destroy();
+  });
+
+  it('should move up when window fires native.showkeyboard event', function() {
+    var directives = setup();
+    var el = directives.el;
+    var content = directives.content;
+    var keyboardHeight = 33;
+    var elHeight = 50;
+
+    spyOn(window, 'keyboardAttachGetClientHeight').andReturn(elHeight);
+
+    expect(content.css('bottom')).toEqual('');
+    ionic.trigger('native.showkeyboard', { target: window, keyboardHeight: 33 });
+    expect(content.css('bottom')).toEqual(keyboardHeight + elHeight + 'px');
+  });
+
+  it('should remove listeners on destroy', function() {
+    spyOn(window, 'removeEventListener');
+    var el = setup().el;
+    el.scope().$destroy();
+    expect(window.removeEventListener).toHaveBeenCalledWith('native.showkeyboard', jasmine.any(Function));
+    expect(window.removeEventListener).toHaveBeenCalledWith('native.hidekeyboard', jasmine.any(Function));
+  });
+
+  it('should remove listeners on destroy', function() {
+    spyOn(window, 'removeEventListener');
+    var el = setup().el;
+    el.scope().$destroy();
+    expect(window.removeEventListener).toHaveBeenCalledWith('native.showkeyboard', jasmine.any(Function));
+    expect(window.removeEventListener).toHaveBeenCalledWith('native.hidekeyboard', jasmine.any(Function));
+  });
+})