Added keyboard shortcut for home menu
This commit is contained in:
parent
dd15c87731
commit
76a5238fb6
2 changed files with 52 additions and 1 deletions
|
|
@ -5,6 +5,7 @@ import { useWindowsManager } from "../../hooks/windows/WindowsManagerContext.js"
|
||||||
import ApplicationsManager from "../../features/applications/applications.js";
|
import ApplicationsManager from "../../features/applications/applications.js";
|
||||||
import { ReactSVG } from "react-svg";
|
import { ReactSVG } from "react-svg";
|
||||||
import { closeTab } from "../../features/utils/browser.js";
|
import { closeTab } from "../../features/utils/browser.js";
|
||||||
|
import { useKeyboardListener } from "../../hooks/utils/keyboard.js";
|
||||||
|
|
||||||
export function HomeMenu({ active, setActive }) {
|
export function HomeMenu({ active, setActive }) {
|
||||||
const windowsManager = useWindowsManager();
|
const windowsManager = useWindowsManager();
|
||||||
|
|
@ -13,8 +14,34 @@ export function HomeMenu({ active, setActive }) {
|
||||||
if (active)
|
if (active)
|
||||||
classNames.push(styles.Active);
|
classNames.push(styles.Active);
|
||||||
|
|
||||||
|
let onlyAltKey = false;
|
||||||
|
const onKeyDown = (event) => {
|
||||||
|
console.log(event);
|
||||||
|
|
||||||
|
if (event.key === "Alt") {
|
||||||
|
event.preventDefault();
|
||||||
|
onlyAltKey = true;
|
||||||
|
} else {
|
||||||
|
onlyAltKey = false;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const onKeyUp = (event) => {
|
||||||
|
console.log(event);
|
||||||
|
|
||||||
|
if (event.key === "Alt" && onlyAltKey) {
|
||||||
|
event.preventDefault();
|
||||||
|
setActive(!active);
|
||||||
|
onlyAltKey = false;
|
||||||
|
} else {
|
||||||
|
onlyAltKey = false;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
useKeyboardListener({ onKeyDown, onKeyUp });
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className={classNames.join(" ")}>
|
<div className={classNames.join(" ")} onKeyDown={onKeyDown}>
|
||||||
<div className={styles["Container-inner"]}>
|
<div className={styles["Container-inner"]}>
|
||||||
<div className={styles.Buttons}>
|
<div className={styles.Buttons}>
|
||||||
<button title="Power" onClick={() => { closeTab(); }}>
|
<button title="Power" onClick={() => { closeTab(); }}>
|
||||||
|
|
|
||||||
24
src/hooks/utils/keyboard.js
Normal file
24
src/hooks/utils/keyboard.js
Normal file
|
|
@ -0,0 +1,24 @@
|
||||||
|
import { useEffect } from "react";
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Hook that alerts clicks outside of the passed ref
|
||||||
|
*/
|
||||||
|
export function useKeyboardListener({ onKeyDown, onKeyUp, onKeyPress }) {
|
||||||
|
useEffect(() => {
|
||||||
|
if (onKeyDown)
|
||||||
|
document.addEventListener("keydown", onKeyDown);
|
||||||
|
if (onKeyUp)
|
||||||
|
document.addEventListener("keyup", onKeyUp);
|
||||||
|
if (onKeyPress)
|
||||||
|
document.addEventListener("keypress", onKeyPress);
|
||||||
|
|
||||||
|
return () => {
|
||||||
|
if (onKeyDown)
|
||||||
|
document.removeEventListener("keydown", onKeyDown);
|
||||||
|
if (onKeyUp)
|
||||||
|
document.removeEventListener("keyup", onKeyUp);
|
||||||
|
if (onKeyPress)
|
||||||
|
document.removeEventListener("keypress", onKeyPress);
|
||||||
|
};
|
||||||
|
}, [onKeyDown, onKeyUp, onKeyPress]);
|
||||||
|
}
|
||||||
Loading…
Reference in a new issue