Hide ion-tabs on keyboard open

ionic-v1
1

Hey ionic forum,

I recently needed to hide the ion-tabs when the keyboard shows and solved it with a directive:

 .directive('hideTabsOnKeyboardOpen', ["AppWindow", function(AppWindow) {

    return function(scope, element, attrs) {
 
        reg = function(){
            AppWindow.onKeyboardShow(function(){
                $(element).addClass('tabs-item-hide');
                $(element).find('ion-content').removeClass('has-tabs');
                AppWindow.onKeyboardHide(function(){
                    $(element).removeClass('tabs-item-hide');
                    $(element).find('ion-content').addClass('has-tabs');
                    reg();
                });
            });
        }
        
        reg();
    };
}])

AppWindow has these two functions:

       onKeyboardHide: function(cb){
            var callbackAndRemoveListener = function (){
                cb();
                window.removeEventListener('native.keyboardhide',callbackAndRemoveListener);
            };
            window.addEventListener('native.keyboardhide', callbackAndRemoveListener);  
        },
        onKeyboardShow: function(cb){
            var callbackAndRemoveListener = function (){
                cb();
                window.removeEventListener('native.keyboardshow',callbackAndRemoveListener);
            };
            window.addEventListener('native.keyboardshow', callbackAndRemoveListener);  
        }

This works but seems a bit patchy , is there any other more standard way to do so?

Thanks :smiley:

2 
window.addEventListener 'native.keyboardshow', -> document.body.classList.add('keyboard-open')

.keyboard-open .tabs{
  display:none;
}
.keyboard-open .has-tabs{
  bottom:0;
}
3

I think in ideal world ionic keyboard plugin automatically adds and removes .keyboard-open class, but it was broken at some point so I had to asdd it manually, it does gets removed by ionic so you don’t need to worry about. I haven’t tested if this has been fixed, so maybe you don’t even need to add it anymore.

4

Ok now I remembered the reason I am manually adding this class. The reason is that ionic does 400ms delay before adding it which didn’t suit me

http://ionicframework.com/docs/api/page/keyboard/

5

Great! The class addition is indeed the tricky part but after that - works well !
Thanks