summaryrefslogtreecommitdiffstats
path: root/devtools/client/responsive/utils/orientation.js
blob: 500eab8faa18e1c4e6d966e92005eefcaf64da64 (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
/* This Source Code Form is subject to the terms of the Mozilla Public
 * License, v. 2.0. If a copy of the MPL was not distributed with this
 * file, You can obtain one at http://mozilla.org/MPL/2.0/. */

"use strict";

const {
  PORTRAIT_PRIMARY,
  LANDSCAPE_PRIMARY,
} = require("resource://devtools/client/responsive/constants.js");

/**
 * Helper that gets the screen orientation of the device displayed in the RDM viewport.
 * This function take in both a device and viewport object and an optional rotated angle.
 * If a rotated angle is passed, then we calculate what the orientation type of the device
 * would be in relation to its current orientation. Otherwise, return the current
 * orientation and angle.
 *
 * @param {Object} device
 *        The device whose content is displayed in the viewport. Used to determine the
 *        primary orientation.
 * @param {Object} viewport
 *        The viewport displaying device content. Used to determine the current
 *        orientation type of the device while in RDM.
 * @param {Number|null} angleToRotateTo
 *        Optional. The rotated angle specifies the degree to which the device WILL be
 *        turned to. If undefined, then only return the current orientation and angle
 *        of the device.
 * @return {Object} the orientation of the device.
 */
function getOrientation(device, viewport, angleToRotateTo = null) {
  const { width: deviceWidth, height: deviceHeight } = device;
  const { width: viewportWidth, height: viewportHeight } = viewport;

  // Determine the primary orientation of the device screen.
  const primaryOrientation =
    deviceHeight >= deviceWidth ? PORTRAIT_PRIMARY : LANDSCAPE_PRIMARY;

  // Determine the current orientation of the device screen.
  const currentOrientation =
    viewportHeight >= viewportWidth ? PORTRAIT_PRIMARY : LANDSCAPE_PRIMARY;

  // Calculate the orientation angle of the device.
  let angle;

  if (typeof angleToRotateTo === "number") {
    angle = angleToRotateTo;
  } else if (currentOrientation !== primaryOrientation) {
    angle = 90;
  } else {
    angle = 0;
  }

  // Calculate the orientation type of the device.
  let orientationType = currentOrientation;

  // If the viewport orientation is different from the primary orientation and the angle
  // to rotate to is 0, then we are moving the device orientation back to its primary
  // orientation.
  if (currentOrientation !== primaryOrientation && angleToRotateTo === 0) {
    orientationType = primaryOrientation;
  } else if (angleToRotateTo === 90 || angleToRotateTo === 270) {
    if (currentOrientation.includes("portrait")) {
      orientationType = LANDSCAPE_PRIMARY;
    } else if (currentOrientation.includes("landscape")) {
      orientationType = PORTRAIT_PRIMARY;
    }
  }

  return {
    type: orientationType,
    angle,
  };
}

exports.getOrientation = getOrientation;