CODEWITHSUNDEEP
javascriptandroidjqueryioscordova
gaepi
gaepi

Reputation: 404

Detect orientation change before event firing with phonegap

I'm developing an application for Android, iOS and Windows Phone with PhoneGap. I have a page with a graph and I would like to display it in fullscreen if the user rotates the device in landscape orientation.

The problem is that the whole application must be blocked on portrait orientation, so the landscape must be available only on this graph page.

I have 2 possibilities :

1) Authorize portrait/landscape orientation in the whole application. If user is on any other page than graph and if he puts device in landscape orientation, cancel the rotation and stay in portrait mode.

I think I must have a way to catch an event before these one :

window.addEventListener("orientationchange", orientationChange, false);
window.addEventListener("resize", resize, false);

2) Block the whole application in portrait orientation. If user is on graph page, add a button which allow to rotate this page in landscape just to display the graph, and return to portrait mode after that.

I found this but only useful for Android : set screen orientation

So, is there a way to do one of these possibilities ?

Thanks

Upvotes: 3

Views: 4102

Answers (2)

Gajus
Gajus

Reputation: 73728

window
    .matchMedia('(orientation: portrait)')
    .addListener(function (m) {
        console.log('a');
    });

window.addEventListener('resize', function () {
    console.log('b');
});

window.addEventListener('orientationchange', function () {
    console.log('c');
});

// https://github.com/gajus/orientationchangeend
viewport.on('orientationchangeend', function () {
    console.log('c');
});

These events will fire in the alphabetical order.

Upvotes: 2

Ahmed Assaf
Ahmed Assaf

Reputation: 601

Solution for iOS:

type this function in your javascript file

function shouldRotateToOrientation (rotation) {
switch (rotation) {
        case 0:     
          if(condition){
             return true;
          }else{
             return false;}
        case 90:
          return false;
        case -90:
          return false;
        case 180:
          return false;
    }
}

this function override built in function in cordova lib.

Upvotes: 1

Related Questions