mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-22 21:48:42 +08:00
chore(platform): resize works correctly
* chore(platform): resize works correctly * chore(platform): height correct after resize * test(platform): add new dimensions unit tests * chore(platform): works with keyboard too * chore(platform): store values * chore(platform): change const to var
This commit is contained in:

committed by
Manu Mtz.-Almeida

parent
da14042094
commit
54e50f48e5
@ -574,40 +574,43 @@ export class Platform {
|
|||||||
if (this._isPortrait === null || this._isPortrait === false && this._win['innerWidth'] < this._win['innerHeight']) {
|
if (this._isPortrait === null || this._isPortrait === false && this._win['innerWidth'] < this._win['innerHeight']) {
|
||||||
var win = this._win;
|
var win = this._win;
|
||||||
|
|
||||||
|
var innerWidth = win['innerWidth'];
|
||||||
|
var innerHeight = win['innerHeight'];
|
||||||
|
|
||||||
// we're keeping track of portrait and landscape dimensions
|
// we're keeping track of portrait and landscape dimensions
|
||||||
// separately because the virtual keyboard can really mess
|
// separately because the virtual keyboard can really mess
|
||||||
// up accurate values when the keyboard is up
|
// up accurate values when the keyboard is up
|
||||||
if (win.screen.width > 0 && win.screen.height > 0) {
|
if (win.screen.width > 0 && win.screen.height > 0) {
|
||||||
if (win['innerWidth'] < win['innerHeight']) {
|
if (innerWidth < innerHeight) {
|
||||||
|
|
||||||
// the device is in portrait
|
// the device is in portrait
|
||||||
if (this._pW <= win['innerWidth']) {
|
// we have to do fancier checking here
|
||||||
|
// because of the virtual keyboard resizing
|
||||||
|
// the window
|
||||||
|
if (this._pW <= innerWidth) {
|
||||||
console.debug('setting _isPortrait to true');
|
console.debug('setting _isPortrait to true');
|
||||||
this._isPortrait = true;
|
this._isPortrait = true;
|
||||||
this._pW = win['innerWidth'];
|
this._pW = innerWidth;
|
||||||
}
|
}
|
||||||
if (this._pH <= win['innerHeight']) {
|
|
||||||
|
if (this._pH <= innerHeight) {
|
||||||
console.debug('setting _isPortrait to true');
|
console.debug('setting _isPortrait to true');
|
||||||
this._isPortrait = true;
|
this._isPortrait = true;
|
||||||
this._pH = win['innerHeight'];
|
this._pH = innerHeight;
|
||||||
}
|
}
|
||||||
|
|
||||||
} else {
|
} else {
|
||||||
if (this._lW > win['innerWidth']) {
|
|
||||||
// Special case: keyboard is open and device is in portrait
|
|
||||||
console.debug('setting _isPortrait to true while keyboard is open and device is portrait');
|
|
||||||
this._isPortrait = true;
|
|
||||||
}
|
|
||||||
// the device is in landscape
|
// the device is in landscape
|
||||||
if (this._lW <= win['innerWidth']) {
|
if (this._lW !== innerWidth) {
|
||||||
console.debug('setting _isPortrait to false');
|
console.debug('setting _isPortrait to false');
|
||||||
this._isPortrait = false;
|
this._isPortrait = false;
|
||||||
this._lW = win['innerWidth'];
|
this._lW = innerWidth;
|
||||||
}
|
}
|
||||||
if (this._lH <= win['innerHeight']) {
|
|
||||||
|
if (this._lH !== innerHeight) {
|
||||||
console.debug('setting _isPortrait to false');
|
console.debug('setting _isPortrait to false');
|
||||||
this._isPortrait = false;
|
this._isPortrait = false;
|
||||||
this._lH = win['innerHeight'];
|
this._lH = innerHeight;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -173,6 +173,56 @@ describe('Platform', () => {
|
|||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
|
describe('dimensions', () => {
|
||||||
|
it('should return the correct width of the window', () => {
|
||||||
|
expect(plt.width()).toEqual(window.innerWidth);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should return the correct height of the window', () => {
|
||||||
|
expect(plt.height()).toEqual(window.innerHeight);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should return the correct width of the window after resize', () => {
|
||||||
|
|
||||||
|
// start with default window
|
||||||
|
expect(plt.width()).toEqual(window.innerWidth);
|
||||||
|
|
||||||
|
let resizedWindow: any = {
|
||||||
|
innerWidth: 200,
|
||||||
|
innerHeight: 300,
|
||||||
|
screen: {
|
||||||
|
width: 200,
|
||||||
|
height: 300
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// resize to smaller window
|
||||||
|
plt.setWindow(resizedWindow);
|
||||||
|
|
||||||
|
expect(plt.width()).toEqual(resizedWindow.innerWidth);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should return the correct height of the window after resize', () => {
|
||||||
|
|
||||||
|
// start with default window
|
||||||
|
expect(plt.height()).toEqual(window.innerHeight);
|
||||||
|
|
||||||
|
let resizedWindow: any = {
|
||||||
|
innerWidth: 200,
|
||||||
|
innerHeight: 300,
|
||||||
|
screen: {
|
||||||
|
width: 200,
|
||||||
|
height: 300
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// resize to smaller window
|
||||||
|
plt.setWindow(resizedWindow);
|
||||||
|
|
||||||
|
expect(plt.height()).toEqual(resizedWindow.innerHeight);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
it('should set core as the fallback', () => {
|
it('should set core as the fallback', () => {
|
||||||
plt.setDefault('core');
|
plt.setDefault('core');
|
||||||
plt.setQueryParams('');
|
plt.setQueryParams('');
|
||||||
|
Reference in New Issue
Block a user