From 3fd94343472ffd4f25d0ff6628ad6b436b07f365 Mon Sep 17 00:00:00 2001
From: huiliangShen <alal2al@hotmail.com>
Date: Tue, 20 Feb 2024 17:29:15 +0800
Subject: [PATCH] feat(useParallax): can work with different screen orientation
 (#3675)

Co-authored-by: banruo <shl@dataqin.com>
---
 packages/core/useParallax/index.ts | 38 ++++++++++++++++++++++++++++--
 1 file changed, 36 insertions(+), 2 deletions(-)

diff --git a/packages/core/useParallax/index.ts b/packages/core/useParallax/index.ts
index c338967826e..ca133396869 100644
--- a/packages/core/useParallax/index.ts
+++ b/packages/core/useParallax/index.ts
@@ -5,6 +5,7 @@ import { useDeviceOrientation } from '../useDeviceOrientation'
 import { useMouseInElement } from '../useMouseInElement'
 import type { ConfigurableWindow } from '../_configurable'
 import { defaultWindow } from '../_configurable'
+import { useScreenOrientation } from '../useScreenOrientation'
 
 export interface UseParallaxOptions extends ConfigurableWindow {
   deviceOrientationTiltAdjust?: (i: number) => number
@@ -48,6 +49,7 @@ export function useParallax(
   } = options
 
   const orientation = reactive(useDeviceOrientation({ window }))
+  const screenOrientation = reactive(useScreenOrientation({ window }))
   const {
     elementX: x,
     elementY: y,
@@ -65,7 +67,23 @@ export function useParallax(
 
   const roll = computed(() => {
     if (source.value === 'deviceOrientation') {
-      const value = -orientation.beta! / 90
+      let value: number
+      switch (screenOrientation.orientation) {
+        case 'landscape-primary':
+          value = orientation.gamma! / 90
+          break
+        case 'landscape-secondary':
+          value = -orientation.gamma! / 90
+          break
+        case 'portrait-primary':
+          value = -orientation.beta! / 90
+          break
+        case 'portrait-secondary':
+          value = orientation.beta! / 90
+          break
+        default:
+          value = -orientation.beta! / 90
+      }
       return deviceOrientationRollAdjust(value)
     }
     else {
@@ -76,7 +94,23 @@ export function useParallax(
 
   const tilt = computed(() => {
     if (source.value === 'deviceOrientation') {
-      const value = orientation.gamma! / 90
+      let value: number
+      switch (screenOrientation.orientation) {
+        case 'landscape-primary':
+          value = orientation.beta! / 90
+          break
+        case 'landscape-secondary':
+          value = -orientation.beta! / 90
+          break
+        case 'portrait-primary':
+          value = orientation.gamma! / 90
+          break
+        case 'portrait-secondary':
+          value = -orientation.gamma! / 90
+          break
+        default:
+          value = orientation.gamma! / 90
+      }
       return deviceOrientationTiltAdjust(value)
     }
     else {