feat: add support for touch & Device Orientation & Motion

Author: TenviLi

index.js

@@ -4,3 +4,6 @@ export { useSaveData } from "./save-data";
 export { useHardwareConcurrency } from "./hardware-concurrency";
 export { useBatteryStatus } from "./battery";
 export { useMediaCapabilities, useMediaDevices } from "./media";
+
+export { useTouch } from "./touch";
+export { useDeviceOrientation, useDeviceMotion } from "./orientation";

orientation.js

@@ -0,0 +1,91 @@
+import { useState, useEffect } from "vue-hooks";
+
+const useDeviceOrientation = () => {
+    let unsupported;
+    if (typeof window !== "undefined" && "ondeviceorientation" in window)
+        unsupported = false;
+    else unsupported = true;
+
+    const initialDeviceOrientation = {
+        unsupported,
+        absolute: 0,
+        alpha: 0,
+        beta: 0,
+        gamma: 0
+    };
+    const [deviceOrientation, setDeviceOrientation] = useState(
+        initialDeviceOrientation
+    );
+
+    useEffect(() => {
+        if (!unsupported) {
+            const updateOrientation = event => {
+                setDeviceOrientation({
+                    absolute: event.absolute,
+                    alpha: event.alpha,
+                    beta: event.beta,
+                    gamma: event.gamma
+                });
+            };
+            window.addEventListener(
+                "deviceorientation",
+                updateOrientation,
+                true
+            );
+
+            return () => {
+                navigatorConnection.removeEventListener(
+                    "change",
+                    updateOrientation
+                );
+            };
+        }
+    }, []);
+
+    return {
+        ...deviceOrientation,
+        setDeviceOrientation
+    };
+};
+
+const useDeviceMotion = () => {
+    let unsupported;
+    if (typeof window !== "undefined" && "ondevicemotion" in window)
+        unsupported = false;
+    else unsupported = true;
+
+    const initialDeviceMotion = {
+        unsupported,
+        acceleration: null,
+        accelerationIncludingGravity: null,
+        rotationRate: null,
+        interval: null
+    };
+    const [deviceMotion, setDeviceMotion] = useState(initialDeviceMotion);
+
+    useEffect(() => {
+        if (!unsupported) {
+            const updateMotion = event => {
+                setDeviceMotion({
+                    acceleration: event.acceleration,
+                    accelerationIncludingGravity:
+                        event.accelerationIncludingGravity,
+                    rotationRate: event.rotationRate,
+                    interval: event.interval
+                });
+            };
+            window.addEventListener("devicemotion", updateMotion, true);
+
+            return () => {
+                navigatorConnection.removeEventListener("change", updateMotion);
+            };
+        }
+    }, []);
+
+    return {
+        ...deviceMotion,
+        setDeviceMotion
+    };
+};
+
+export { useDeviceOrientation, useDeviceMotion };

touch.js

@@ -0,0 +1,26 @@
+let unsupported;
+
+// 检查浏览器是否支持 Navigator.deviceMemory
+if (
+    !!(
+        typeof window !== "undefined" &&
+        ("ontouchstart" in window ||
+            (window.DocumentTouch &&
+                typeof document !== "undefined" &&
+                document instanceof window.DocumentTouch))
+    ) ||
+    !!(
+        typeof navigator !== "undefined" &&
+        (navigator.maxTouchPoints || navigator.msMaxTouchPoints)
+    )
+) {
+    unsupported = false;
+} else {
+    unsupported = true;
+}
+
+const useTouch = () => {
+    return !unsupported ? { touch: true } : { unsupported };
+};
+
+export { useTouch };