[ADD] Added Split Mode support + finalizing refactoring with keyboard and orientation handling

Author: andriyha

features/system-tests/step_definitions/steps.js

@@ -17,6 +17,7 @@ defineSupportCode(function(context) {
             width: 0,
             height: 0
         },
+        orientation: 90,
         navigator: {
             userAgent: '',
             standalone: false
@@ -59,6 +60,7 @@ defineSupportCode(function(context) {
     Given('a user agent equals to {string}', function(userAgent) {
         this.win.navigator.userAgent = userAgent
         this.browserUiState = new BrowserUiState(this.win, Orientation.LANDSCAPE)
+        this.win.orientation = 90
     })
 
     Given('screen dimensions is {int} x {int}', function(width, height) {
@@ -76,6 +78,7 @@ defineSupportCode(function(context) {
     When('browser is rotated to portrait', function() {
         let stateProvider = this.stateProvider ? this.stateProvider : this.browserUiState._provider
         stateProvider._deviceOrientationDetector._toggleCurrentOrientation()
+        this.win.orientation = 0
     })
 
     When('screen dimensions changes to {int} x {int}', function(width, height) {

features/unit-tests/state-provider.feature

@@ -14,8 +14,8 @@ Feature: State Provider
       And stateProvider.collapsedThreshold should be equal <th-l-col>
       And stateProvider.keyboardThreshold should be equal <th-l-key>
       And stateProvider.state should be equal "COLLAPSED"
-      And stateProvider.viewportWidthAdjustedIfNeeded should be correct
-      And stateProvider.isIphoneX should correspond to "<device>"
+      And stateProvider._viewportWidthAdjustedIfNeeded should be correct
+      And stateProvider._isIphoneX should correspond to "<device>"
 
     When after swipe up window dimensions changes to <win-w-swiped-l> x <win-h-swiped-l>
 
@@ -39,8 +39,8 @@ Feature: State Provider
       And stateProvider.collapsedThreshold should be equal <th-p-col>
       And stateProvider.keyboardThreshold should be equal <th-p-key>
       And stateProvider.state should be equal "COLLAPSED"
-      And stateProvider.viewportWidthAdjustedIfNeeded should be correct
-      And stateProvider.isIphoneX should correspond to "<device>"
+      And stateProvider._viewportWidthAdjustedIfNeeded should be correct
+      And stateProvider._isIphoneX should correspond to "<device>"
 
     When after swipe up window dimensions changes to <win-w-swiped-p> x <win-h-swiped-p>
 
@@ -55,4 +55,4 @@ Feature: State Provider
   Examples:
     | device   | os-ver | ua-ver    | ua-mode | screen-w-l  | screen-h-l | win-w-init-l | win-h-init-l | win-w-swiped-l | win-h-swiped-l | screen-w-p  | screen-h-p | win-w-init-p | win-h-init-p | win-w-swiped-p | win-h-swiped-p | th-l-col | th-l-key | th-p-col | th-p-key | user-agent-string |
     | iPhone 7 | 10.2   | Safari 10 |         | 375         | 667        | 667          | 331          | 667            | 375            | 375         | 667        | 375          | 559          | 375            | 627            | 6.75     | 48.0     | 12.0     | 32.7     | "Mozilla/5.0 (iPhone; CPU iPhone OS 10_2_1 like Mac OS X) AppleWebKit/602.4.6 (KHTML, like Gecko) Version/10.0 Mobile/14D27 Safari/602.1" |
-    | iPhone X | 11.0   | Safari 11 |         | 375         | 812        | 724          | 325          | 667            | 375            | 375         | 812        | 375          | 635          | 375            | 748            | 6.75     | 48.0     | 12.0     | 32.7     | "Mozilla/5.0 (iPhone; CPU iPhone OS 11_0 like Mac OS X) AppleWebKit/604.1.38 (KHTML, like Gecko) Version/11.0 Mobile/15A372 Safari/604.1" |
+    | iPhone X | 11.0   | Safari 11 |         | 375         | 812        | 724          | 325          | 724            | 375            | 375         | 812        | 375          | 635          | 375            | 748            | 6.75     | 48.0     | 12.0     | 32.7     | "Mozilla/5.0 (iPhone; CPU iPhone OS 11_0 like Mac OS X) AppleWebKit/604.1.38 (KHTML, like Gecko) Version/11.0 Mobile/15A372 Safari/604.1" |

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

@@ -11,6 +11,7 @@ defineSupportCode(function(context) {
     Given('testing state provider with a user agent equals to {string}', function(userAgent) {
         this.win.navigator.userAgent = userAgent
         this.stateProvider = new StateProvider(this.win, this.thresholds, Orientation.LANDSCAPE)
+        this.win.orientation = 90
     })
 
     Then('stateProvider.screenAspectRatio should be equal {int}/{int}', function (width, height) {
@@ -19,7 +20,7 @@ defineSupportCode(function(context) {
 
     Then('stateProvider.viewportAspectRatio should be equal {int}/{int}', function (width, height) {
         let widthAdjusted = this.stateProvider.orientation === Orientation.LANDSCAPE &&
-                                this.stateProvider.isIphoneX() ? this.win.screen.height : width
+                                this.stateProvider._isIphoneX() ? this.win.screen.height : width
 
         this.stateProvider.viewportAspectRatio.should.be.equal(widthAdjusted/height)
     })
@@ -52,14 +53,14 @@ defineSupportCode(function(context) {
         this.stateProvider.state.should.be.equal(state)
     })
 
-    Then('stateProvider.viewportWidthAdjustedIfNeeded should be correct', function () {
-        let width = this.stateProvider.isIphoneX() ? this.win.screen.height : this.win.innerWidth
-        this.stateProvider.viewportWidthAdjustedIfNeeded.should.be.equal(width)
+    Then('stateProvider._viewportWidthAdjustedIfNeeded should be correct', function () {
+        let width = this.stateProvider._isIphoneX() ? this.win.screen.height : this.win.innerWidth
+        this.stateProvider._viewportWidthAdjustedIfNeeded.should.be.equal(width)
     })
 
-    Then('stateProvider.isIphoneX should correspond to {string}', function (device) {
+    Then('stateProvider._isIphoneX should correspond to {string}', function (device) {
         if (device === 'iPhone X') {
-            this.stateProvider.isIphoneX().should.be.true
+            this.stateProvider._isIphoneX().should.be.true
         }
     })
 })

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

@@ -5,6 +5,8 @@ export const Orientation = {
     PORTRAIT:  'PORTRAIT'
 }
 
+const splitModeThreshold = 200
+
 export default class DeviceOrientationDetector {
     constructor(win, initialOrientation) {
         this._win = win
@@ -41,10 +43,30 @@ export default class DeviceOrientationDetector {
     }
 
     _getOrientationLegacy(width, height) {
-        if (this._initialOrientation) {
+        if (/\W(?:iPhone|iPod|iPad)\W/i.test(this._win.navigator.userAgent)) {
+            return Math.abs(this._win.orientation) === 90 ? Orientation.LANDSCAPE : Orientation.PORTRAIT
+        } else if (this._initialOrientation) {
             return this._currentOrientation
         } else {
             return width > height ? Orientation.LANDSCAPE : Orientation.PORTRAIT
         }
     }
+
+    _isSplitMode() {
+        if (/\WiPad\W/i.test(this._win.navigator.userAgent)) {
+            if (this.orientation === Orientation.LANDSCAPE) {
+                return Math.max(this._win.screen.width, this._win.screen.height) - this._win.innerWidth > splitModeThreshold
+            } else {
+                return Math.min(this._win.screen.width, this._win.screen.height) - this._win.innerWidth > splitModeThreshold
+            }
+        } else {
+            if (this.orientation === Orientation.LANDSCAPE) {
+                return Math.max(this._win.screen.width, this._win.screen.height) - this._win.innerWidth > splitModeThreshold
+            } else if (!this._keyboardNoResizeDetector.keyboardShown) {
+                return Math.max(this._win.screen.width, this._win.screen.height) - this._win.innerHeight > splitModeThreshold
+            } else {
+                return false
+            }
+        }
+    }
 }

src/browser-ui-state/device-detectors/user-agent-detector.js

@@ -22,8 +22,8 @@ const UserAgentsRegExp = {
     CHROME_IOS: /\W(?:iPhone|iPod|iPad)\W.*\W(?:Chrome|CriOS|CrMo)\W/i,
     SAFARI_IPHONE: /\W(?:iPhone|iPod)\W.*\WVersion\/(?!.*\WMQQBrowser\W)/i,
     SAFARI_IPAD: /\WiPad\W.*\WVersion\//i,
-    UC_BROWSER_EN_ANDROID: /\WAndroid\W.*(?!\Wzh-CN\W).*\WUCBrowser\W/i,
-    UC_BROWSER_CN_ANDROID: /\WAndroid\W.*\Wzh-CN\W.*\WUCBrowser\W/i, //TODO check why it doesn't detects as CN but EN on Pixel
+    UC_BROWSER_EN_ANDROID: /\WAndroid\W(?!.*\Wzh-CN\W).*\WUCBrowser\W/i,
+    UC_BROWSER_CN_ANDROID: /\WAndroid\W.*\Wzh-CN\W.*\WUCBrowser\W/i,
     UC_BROWSER_IOS: /\W(?:iPhone|iPod|iPad)\W.*\WUCBrowser\/[0-9]{2}/i,
     UC_BROWSER_EN_IOS_STATIC: /\W(?:iPhone|iPod|iPad)\W.*\Wen-.*\WUCBrowser\/[0-9]\./i, //on iPhone 4S, UC EN 9.3 is static (well with manual refreshes it is not)
     DU_BROWSER: /\Wbdbrowser\W/i,

src/browser-ui-state/state-providers/keyboard-no-resize-state-provider.js

@@ -2,13 +2,13 @@ import StateProvider from './state-provider'
 import States from './states'
 
 export default class KeyboardNoResizeStateProvider extends StateProvider {
-    constructor(win, thresholds) {
-        super(win, thresholds)
+    constructor(win, thresholds, initialOrientation) {
+        super(win, thresholds, initialOrientation)
     }
 
     get state() {
         if (this._deviceOrientationDetector._keyboardNoResizeDetector.keyboardShown) {
-            return States.KEYBOARD_NO_RESIZE //TODO maybe add handling to resize happens when keyboardShown to catch it disappearing?
+            return States.KEYBOARD_NO_RESIZE
         } else {
             return super.state
         }

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

@@ -24,7 +24,8 @@ export default class StateProvider {
     get viewportAspectRatio() {
         const currentOrientation = this._deviceOrientationDetector.orientation
         let {innerWidth : viewportWidth, innerHeight : viewportHeight} = this._win
-        const viewportWiderSize = currentOrientation === Orientation.LANDSCAPE ? this.viewportWidthAdjustedIfNeeded : viewportHeight
+        const viewportWiderSize = currentOrientation === Orientation.LANDSCAPE ?
+                                                            this._viewportWidthAdjustedIfNeeded : viewportHeight
         const viewportNarrowerSize = currentOrientation === Orientation.PORTRAIT ? viewportWidth : viewportHeight
 
         return viewportWiderSize / viewportNarrowerSize
@@ -50,11 +51,16 @@ export default class StateProvider {
 
     get state() {
         const deviation = this.deviation
+        const isSplitMode = this._deviceOrientationDetector._isSplitMode()
 
         let state = States.EXPANDED
 
-        if (fscreen.fullscreenElement) {
-            state = States.HTML5_FULLSCREEN //Case with keyboard in HTML5 fullscreen mode can't be traced correctly
+        if (fscreen.fullscreenElement && isSplitMode) {
+            state = States.HTML5_FULLSCREEN_IN_SPLIT_MODE //Case with keyboard in HTML5 fullscreen mode can't be traced correctly
+        } else if (isSplitMode) {
+            state = States.SPLIT_MODE
+        } else if (fscreen.fullscreenElement) {
+            state = States.HTML5_FULLSCREEN
         } else if (deviation > this.keyboardThreshold) {
             state = States.KEYBOARD
         } else if (deviation > this.collapsedThreshold) {
@@ -71,11 +77,11 @@ export default class StateProvider {
      * always the largest side of the screen).
      * Relevant only for landscape
      */
-    get viewportWidthAdjustedIfNeeded() {
-        return this.isIphoneX() ? this._win.screen.height : this._win.innerWidth
+    get _viewportWidthAdjustedIfNeeded() {
+        return this._isIphoneX() ? this._win.screen.height : this._win.innerWidth
     }
 
-    isIphoneX() {
+    _isIphoneX() {
         return /\WiPhone\W/i.test(this._win.navigator.userAgent) && this._win.screen.height === 812
     }
 }

src/browser-ui-state/state-providers/states.js

@@ -1,15 +1,43 @@
 export default {
-    COLLAPSED:                'COLLAPSED', //e.g. initial browser state with address bar visible on the screen
-    EXPANDED:                 'EXPANDED', //e.g. state usually received after swiping up so that address bar gets hidden
-    KEYBOARD:                 'KEYBOARD', //e.g. after tapping on input element when on-screen keyboard appears and resizes viewport
-    KEYBOARD_NO_RESIZE:       'KEYBOARD_NO_RESIZE', //e.g. after tapping on input element when on-screen keyboard appears but doesn't resize viewport
-    HTML5_FULLSCREEN:         'HTML5_FULLSCREEN', //e.g. after switching to HTML5 Full Screen mode (not supported by all browsers)
-    DESKTOP:                  'DESKTOP', //e.g. regular desktop browser
-    DESKTOP_HTML5_FULLSCREEN: 'DESKTOP_HTML5_FULLSCREEN', //e.g. desktop browser in HTML5 full screen mode
-    STATIC:                   'STATIC', //e.g. browser doesn't resize it's window content when it's bars get displayed
-                                        // or hidden, or the bars are static and doesn't disappear at all; used only for
-                                        // browsers which are known to behave like this, no programmatic way to detect this in other way
-    SAFARI_HOMESCREEN:        'SAFARI_HOMESCREEN', //e.g. no browser's UI, page added as app to homescreen
-    UNKNOWN:                  'UNKNOWN' //e.g. browser is unknown to the library, so impossible to find-out it's state
-    //TODO Detect split screen (landscape easy - diff between screen.width and win.innerWidth; portrait hard - diff + keyboardShown
+    COLLAPSED:                      'COLLAPSED',
+    //Initial browser state with address bar visible on the screen
+
+    EXPANDED:                       'EXPANDED',
+    //State which usually received after swiping up so that address bar gets hidden
+
+    KEYBOARD:                       'KEYBOARD',
+    //After tapping on input element when on-screen keyboard appears and resizes viewport
+
+    KEYBOARD_NO_RESIZE:             'KEYBOARD_NO_RESIZE',
+    //After tapping on input element when on-screen keyboard appears but doesn't resize viewport (mostly iOS)
+
+    HTML5_FULLSCREEN:               'HTML5_FULLSCREEN',
+    //After switching to HTML5 Full Screen mode (not supported by all browsers, completely absent on iOS)
+
+    SPLIT_MODE:                     'SPLIT_MODE',
+    //Aka 'multi-tasking', 'split-view', 'split screen', 'side-by-side', e.g.:
+    // - iOS 10+ iPad Safari 'Split View': https://support.apple.com/en-us/HT207522
+    // - iOS 9+ iPad 'Split View': https://support.apple.com/en-us/HT207582
+    // - Android 7+ 'Multi-Window': https://developer.android.com/guide/topics/ui/multi-window.html
+
+    HTML5_FULLSCREEN_IN_SPLIT_MODE: 'HTML5_FULLSCREEN_IN_SPLIT_MODE',
+    //When HTML5 Full Screen mode is launched in Split Mode - it still covers only the area of the browser initiated
+    //Full Screen, so it might be needed to differentiate this mode
+
+    DESKTOP:                        'DESKTOP',
+    //Regular desktop browser
+
+    DESKTOP_HTML5_FULLSCREEN:       'DESKTOP_HTML5_FULLSCREEN',
+    //Desktop browser in HTML5 full screen mode
+
+    STATIC:                         'STATIC',
+    //Browser doesn't resize it's window content when it's bars get displayed or hidden,
+    // or the bars are static and doesn't disappear at all; used only for browsers which are known to behave like this,
+    // no programmatic way to detect this in other way
+
+    SAFARI_HOMESCREEN:              'SAFARI_HOMESCREEN',
+    //No browser's UI, page added as app to homescreen, just a shortcut for window.navigator.standalone property
+
+    UNKNOWN:                        'UNKNOWN'
+    //Browser is unknown to the library, so impossible to find-out it's state
 }

src/demo/index.js

@@ -5,7 +5,8 @@ import {Orientation} from "../browser-ui-state/device-detectors/device-orientati
 
 class BrowserUiStateDemo {
     constructor() {
-        let initialOrientation = window.innerWidth > window.innerHeight ? Orientation.LANDSCAPE : Orientation.PORTRAIT
+        let initialOrientation = window.innerWidth > window.innerHeight ?
+            Orientation.LANDSCAPE : Orientation.PORTRAIT
 
         this.browserUiState = new BrowserUiState(window, initialOrientation)