Skip to content

Commit b311f20

Browse files
TheBitTheBit
committed
Refactoring keyboard no resize handling
1 parent 35d9f16 commit b311f20

20 files changed

+69
-85
lines changed

‎features/system-tests/step_definitions/steps.js‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import {defineSupportCode} from 'cucumber'
22
import {should} from 'chai'; should();
33
import BrowserUiState from '../../../src/browser-ui-state/index'
4+
import {Orientation} from '../../../src/browser-ui-state/device-detectors/device-orientation-detector'
45

56
defineSupportCode(function(context) {
67
let Given = context.Given
@@ -25,6 +26,7 @@ defineSupportCode(function(context) {
2526
addEventListener(type, listener, useCapture) { /*NOOP*/ }
2627
}
2728
},
29+
addEventListener(type, listener, useCapture) { /*NOOP*/ },
2830
dispatchEvent(event) { /*NOOP*/ }
2931
}
3032

@@ -56,7 +58,7 @@ defineSupportCode(function(context) {
5658

5759
Given('a user agent equals to {string}', function(userAgent) {
5860
this.win.navigator.userAgent = userAgent
59-
this.browserUiState = new BrowserUiState(this.win)
61+
this.browserUiState = new BrowserUiState(this.win, Orientation.LANDSCAPE)
6062
})
6163

6264
Given('screen dimensions is {int} x {int}', function(width, height) {
@@ -71,7 +73,10 @@ defineSupportCode(function(context) {
7173
this.updateWindow(width, height)
7274
})
7375

74-
When('browser is rotated to portrait', function() { /*NOOP*/ })
76+
When('browser is rotated to portrait', function() {
77+
let stateProvider = this.stateProvider ? this.stateProvider : this.browserUiState._provider
78+
stateProvider._deviceOrientationDetector._toggleCurrentOrientation()
79+
})
7580

7681
When('screen dimensions changes to {int} x {int}', function(width, height) {
7782
this.updateScreen(width, height)

‎features/unit-tests/step_definitions/state-provider.steps.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ defineSupportCode(function(context) {
1010

1111
Given('testing state provider with a user agent equals to {string}', function(userAgent) {
1212
this.win.navigator.userAgent = userAgent
13-
this.stateProvider = new StateProvider(this.win, this.thresholds)
13+
this.stateProvider = new StateProvider(this.win, this.thresholds, Orientation.LANDSCAPE)
1414
})
1515

1616
Then('stateProvider.screenAspectRatio should be equal {int}/{int}', function (width, height) {

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
"main": "index.js",
66
"scripts": {
77
"start": "webpack-dev-server",
8-
"build": "webpack -p",
8+
"build": "webpack -p && npm run test",
99
"test": "./node_modules/.bin/cucumber.js --compiler js:babel-core/register"
1010
},
1111
"author": "TheBit",

‎src/browser-ui-state/device-detectors/device-orientation-detector.js‎

Lines changed: 12 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -6,31 +6,20 @@ export const Orientation = {
66
}
77

88
export default class DeviceOrientationDetector {
9-
constructor(win) {
9+
constructor(win, initialOrientation) {
1010
this._win = win
1111
this._keyboardNoResizeDetector = new KeyboardNoResizeDetector(win)
12-
this._tooSquareViewportThreshold = 1.55;
1312

13+
this._initialOrientation = this._currentOrientation = initialOrientation
1414

15-
//TODO track initial orientation via width/height and then add orientation change handler and just toggle changes
16-
17-
this._initialOrientation = this._win.innerWidth > this._win.innerHeight ?
18-
Orientation.LANDSCAPE : Orientation.PORTRAIT
19-
this._previousOrientation = this._initialOrientation
20-
21-
//console.log(this._initialOrientation)
22-
23-
this._toggleOrientation = () => {
24-
this._previousOrientation = this._previousOrientation === Orientation.LANDSCAPE ?
25-
Orientation.PORTRAIT : Orientation.LANDSCAPE
15+
if (initialOrientation) {
16+
this._win.addEventListener('orientationchange', () => this._toggleCurrentOrientation())
2617
}
2718

28-
const orientationChangeHandler = () => {
29-
this._toggleOrientation()
30-
//alert(this._previousOrientation)
19+
this._toggleCurrentOrientation = () => {
20+
this._currentOrientation = this._currentOrientation === Orientation.LANDSCAPE ?
21+
Orientation.PORTRAIT : Orientation.LANDSCAPE
3122
}
32-
33-
this._win.addEventListener('orientationchange', orientationChangeHandler)
3423
}
3524

3625
get orientation() {
@@ -39,8 +28,7 @@ export default class DeviceOrientationDetector {
3928
if (orientationType) {
4029
return this._getOrientationModern(orientationType)
4130
} else {
42-
return this._previousOrientation
43-
//return this._getOrientationLegacy(this._win.innerWidth, this._win.innerHeight, this._keyboardNoResizeDetector.keyboardShown)
31+
return this._getOrientationLegacy(this._win.innerWidth, this._win.innerHeight)
4432
}
4533
}
4634

@@ -52,23 +40,11 @@ export default class DeviceOrientationDetector {
5240
}
5341
}
5442

55-
/**
56-
* TODO add resize handling as must, because Pixel QQ EN in ladscape after showing and hiding keyboard with OS nav bar - reports portrait
57-
*/
58-
_getOrientationLegacy(width, height, keyboardShown) {
59-
if (width > height && !keyboardShown) {
60-
return Orientation.LANDSCAPE
61-
} else if (width <= height && !keyboardShown) {
62-
return Orientation.PORTRAIT
63-
} else if (width > height && keyboardShown && this._isViewportTooSquare(width, height)) {
64-
return Orientation.PORTRAIT
43+
_getOrientationLegacy(width, height) {
44+
if (this._initialOrientation) {
45+
return this._currentOrientation
6546
} else {
66-
return Orientation.LANDSCAPE
47+
return width > height ? Orientation.LANDSCAPE : Orientation.PORTRAIT
6748
}
6849
}
69-
70-
_isViewportTooSquare(width, height) {
71-
let viewportAspectRatio = Math.max(width, height) / Math.min(width, height)
72-
return viewportAspectRatio <= this._tooSquareViewportThreshold
73-
}
7450
}

‎src/browser-ui-state/index.js‎

Lines changed: 16 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -14,46 +14,46 @@ import OperaMiniIphoneStateProvider from './state-providers/opera-mini-iphone-st
1414
import QqCnIphoneStateProvider from './state-providers/qq-cn-iphone-state-provider'
1515

1616
class BrowserUiState {
17-
constructor(win = window) {
17+
constructor(win = window, initialOrientation = null) {
1818
this._userAgentDetector = new UserAgentDetector(win.navigator.userAgent)
1919

2020
switch (this._userAgentDetector.userAgent) {
2121
case UserAgents.CHROME_ANDROID :
22-
this._provider = new ChromeAndroidStateProvider(win); break
22+
this._provider = new ChromeAndroidStateProvider(win, initialOrientation); break
2323
case UserAgents.CHROME_IOS :
24-
this._provider = new ChromeIosStateProvider(win); break
24+
this._provider = new ChromeIosStateProvider(win, initialOrientation); break
2525
case UserAgents.SAFARI_IPHONE :
26-
this._provider = new SafariIphoneStateProvider(win); break
26+
this._provider = new SafariIphoneStateProvider(win, initialOrientation); break
2727
case UserAgents.SAFARI_IPAD :
28-
this._provider = new SafariIpadStateProvider(win); break
28+
this._provider = new SafariIpadStateProvider(win, initialOrientation); break
2929
case UserAgents.SAMSUNG_BROWSER :
30-
this._provider = new SamsungBrowserStateProvider(win); break
30+
this._provider = new SamsungBrowserStateProvider(win, initialOrientation); break
3131
case UserAgents.UC_BROWSER_EN_ANDROID :
32-
this._provider = new UcbrowserEnAndroidStateProvider(win); break
32+
this._provider = new UcbrowserEnAndroidStateProvider(win, initialOrientation); break
3333
case UserAgents.UC_BROWSER_CN_ANDROID :
34-
this._provider = new UcbrowserCnAndroidStateProvider(win); break
34+
this._provider = new UcbrowserCnAndroidStateProvider(win, initialOrientation); break
3535
case UserAgents.UC_BROWSER_IOS :
36-
this._provider = new UcbrowserIosStateProvider(win); break
36+
this._provider = new UcbrowserIosStateProvider(win, initialOrientation); break
3737
case UserAgents.OPERA_MINI_IPHONE :
38-
this._provider = new OperaMiniIphoneStateProvider(win); break
38+
this._provider = new OperaMiniIphoneStateProvider(win, initialOrientation); break
3939
case UserAgents.QQ_CN_IPHONE :
40-
this._provider = new QqCnIphoneStateProvider(win); break
40+
this._provider = new QqCnIphoneStateProvider(win, initialOrientation); break
4141
case UserAgents.DU_BROWSER :
4242
case UserAgents.UC_BROWSER_EN_IOS_STATIC :
4343
case UserAgents.OPERA_MINI_IPHONE_STATIC :
4444
case UserAgents.OPERA_MINI_IPAD :
45-
this._provider = new StaticStateProvider(win); break
45+
this._provider = new StaticStateProvider(win, initialOrientation); break
4646
case UserAgents.DESKTOP :
47-
this._provider = new DesktopStateProvider(win); break
47+
this._provider = new DesktopStateProvider(win, initialOrientation); break
4848
default :
49-
this._provider = new UnknownStateProvider(win)
49+
this._provider = new UnknownStateProvider(win, initialOrientation)
5050
}
5151

5252
//Thanx Opera Mini iOS for this :( It has completely the same user-agent as Safari on homescreen/standalone
5353
if (win.navigator.standalone && /\WiPhone\W/i.test(win.navigator.userAgent)) {
54-
this._provider = new SafariIphoneStateProvider(win)
54+
this._provider = new SafariIphoneStateProvider(win, initialOrientation)
5555
} else if (win.navigator.standalone && /\WiPad\W/i.test(win.navigator.userAgent)) {
56-
this._provider = new SafariIpadStateProvider(win)
56+
this._provider = new SafariIpadStateProvider(win, initialOrientation)
5757
}
5858
}
5959

‎src/browser-ui-state/state-providers/chrome-android-state-provider.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import StateProvider from './state-provider'
22
import DeviceDetector, {Devices} from '../device-detectors/device-detector'
33

44
export default class ChromeAndroidStateProvider extends StateProvider {
5-
constructor(win) {
5+
constructor(win, initialOrientation) {
66
let thresholds = {
77
landscape : {
88
collapsed: 14.75,
@@ -52,7 +52,7 @@ export default class ChromeAndroidStateProvider extends StateProvider {
5252
}; break
5353
}
5454

55-
super(win, thresholds)
55+
super(win, thresholds, initialOrientation)
5656
this._device = deviceDetector.device
5757
}
5858
}

‎src/browser-ui-state/state-providers/chrome-ios-state-provider.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import KeyboardNoResizeStateProvider from './keyboard-no-resize-state-provider'
66
* manage this case. Let's assume more and more users will gradually upgrade to iOS 10+.
77
*/
88
export default class ChromeIosStateProvider extends KeyboardNoResizeStateProvider {
9-
constructor(win) {
9+
constructor(win, initialOrientation) {
1010
const thresholds = {
1111
landscape : {
1212
collapsed: 9.75,
@@ -18,6 +18,6 @@ export default class ChromeIosStateProvider extends KeyboardNoResizeStateProvide
1818
}
1919
}
2020

21-
super(win, thresholds)
21+
super(win, thresholds, initialOrientation)
2222
}
2323
}

‎src/browser-ui-state/state-providers/desktop-state-provider.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import StateProvider from './state-provider'
33
import States from './states'
44

55
export default class DesktopStateProvider extends StateProvider {
6-
constructor(win) {
6+
constructor(win, initialOrientation) {
77
const thresholds = {
88
landscape : {
99
collapsed: null,
@@ -14,7 +14,7 @@ export default class DesktopStateProvider extends StateProvider {
1414
keyboard: null
1515
}
1616
}
17-
super(win, thresholds)
17+
super(win, thresholds, initialOrientation)
1818
}
1919

2020
get state() {

‎src/browser-ui-state/state-providers/opera-mini-iphone-state-provider.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import StateProvider from './state-provider'
22

33
export default class OperaMiniIphoneStateProvider extends StateProvider {
4-
constructor(win) {
4+
constructor(win, initialOrientation) {
55
const thresholds = {
66
landscape : {
77
collapsed: 10.7,
@@ -13,6 +13,6 @@ export default class OperaMiniIphoneStateProvider extends StateProvider {
1313
}
1414
}
1515

16-
super(win, thresholds)
16+
super(win, thresholds, initialOrientation)
1717
}
1818
}

‎src/browser-ui-state/state-providers/qq-cn-iphone-state-provider.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import KeyboardNoResizeStateProvider from './keyboard-no-resize-state-provider'
22

33
export default class QqCnIphoneStateProvider extends KeyboardNoResizeStateProvider {
4-
constructor(win) {
4+
constructor(win, initialOrientation) {
55
let thresholds = {
66
landscape : {
77
collapsed: 8.45,
@@ -30,7 +30,7 @@ export default class QqCnIphoneStateProvider extends KeyboardNoResizeStateProvid
3030
return win.screen.height === 480
3131
}
3232

33-
super(win, thresholds)
33+
super(win, thresholds, initialOrientation)
3434
this._device = `isIphone4=${isIphone4()}`
3535
}
3636
}

0 commit comments

Comments
 (0)