Open side menu on hardware menu button (Android)

ionic-v1
1

Hi, I’ve got a sidemenu powered app. I’m wondering that it would be a quite intuitive way of opening the side menu by using the hardware menu key that is present on Android devices. Could you please help me with that? I’ve tried the cordova method, but I’m probably not doing it the right way. My code:

in the app init .run function I’ve got:

.run(function($rootScope, $ionicPlatform, $cordovaSplashscreen, $translate, $cordovaToast, $state, $stateParams, StorageService) {

  $ionicPlatform.ready(function() {
//...
	 if (window.cordova) {
    	$cordovaSplashscreen.hide();
		document.addEventListener("menubutton", onHardwareMenuKeyDown, false);
	 }
/...
}

reference: http://docs.phonegap.com/en/1.7.0/cordova_events_events.md.html#menubutton

Then I define the onHardwareMenuKeyDown() function on the application scope in the app controler as:

 $scope.onHardwareMenuKeyDown = function() {
	alert('menu button is working');
 }

Unfortunately this doesn’t work and the alert isn’t show. I’ve tried this in page controllers, e.g. in the about view, but also doesn’t work.

The other problem is how to open the side menu from code in that event handler.

Please help.

2

Opening the side menu is easy:

  $scope.toggleLeft = function() {	
    $ionicSideMenuDelegate.toggleLeft();
  };

<button ng-click="toggleLeft()">menu</button>

However still cannot catch the cordova menubutton event… Anyone?

3

Hi @rafaellop

I just tried your code and I believe your issue is where the callback function is registered.

The hardware menu button event and cordova are outside angular/ionic and I don’t think it will find your callback on the $scope.

try putting the callback on you angular module

  var app = angular.module('app', ['ionic', 'ngSanitize',

  app.onMenuKeyDown = function () {
    // Handle the menu button
    LogService.add("Menu Button Pressed");
    $ionicSideMenuDelegate.toggleLeft();
  }

don’t forget to inject $ionicSideMenuDelegate in your ‘.run’ function

works nicely for me

Darren

4

darrenahunter, thank you for you help but unfortunately I still cannot make this work. My code is like this:

var myApp = angular.module('myApp', ['ionic', 'ngCordova', ... ])

.run(function($rootScope, $ionicPlatform, $cordovaSplashscreen, $ionicSideMenuDelegate, ...) {

   $ionicPlatform.ready(function() {
      if (window.cordova) {
         $cordovaSplashscreen.hide();
         document.addEventListener("menubutton", onHardwareMenuKeyDown, false);
      }
   });

   myApp.onHardwareMenuKeyDown = function () {
       LogService.add("Menu Button Pressed");
       $ionicSideMenuDelegate.toggleLeft();
  }

...

}) // end of .run

I’m rather sure I put the event handler in the wrong place, but you have mentioned that .run function is the place where it should go. Maybe some misunderstanding at my side. Or maybe the listener is in the wrong place? I assume that you have successfuly tried the code and your menu opens. Could you please share some more thoughts why this isn’t working in my case? TIA :smile:

– rafaellop

5

Ok! GOT IT :smile: The addEventListener() should look like this:

document.addEventListener("menubutton", myApp.onHardwareMenuKeyDown, false);

Now it works like a breeze! Thank you Darren! :sunny:

6

no problem

I note you have my ‘LogService.add()’ function in your code. Assume this is just a copy paste for the forum as it is a unique service i run (unless you do too)

glad your up and running

7

Yes, I’m awared of it :slight_smile: Thanks again!

8

Hello

i’m trying to do something when the user pushes the hardware menu button on android. I tried your code but it doesnt work for me… :frowning:

NEVERMIND : GOT IT ! This worked for me :

angular.module('myApp', ['ngCordova', 'ionic', 'myApp.controllers'])
  .run(function($ionicPlatform, $rootScope, $state, $localstorage,$ionicSideMenuDelegate ) {

     $ionicPlatform.ready(function() {

      document.addEventListener("menubutton", onMenuKeyDown, false);

       function onMenuKeyDown() {
          console.log("some menu pops pup!! ");
          // here change the view , etc... 
          $rootScope.$apply();
        }

  });

})
9

Great you’ve figured it out :slight_smile:

10

These aren’t working for me in latest Ionic v1.3.1.
Could someone provide a full example that works with the latest Ionic 1 version?