Skip to content
This repository has been archived by the owner on Jul 29, 2024. It is now read-only.

Commit

Permalink
Merge pull request #57 from verticalsync/dev
Browse files Browse the repository at this point in the history 
fix: commandPalette resolved requests
  • Loading branch information
@verticalsync
verticalsync authored Feb 11, 2024
2 parents 7a58a2c + 3e44525 commit 103179f
Show file tree
Hide file tree
Showing 2 changed files with 56 additions and 74 deletions.
0 docs/3_COMMAND_PALETTE.md → ...ugins/commandPalette/3_COMMAND_PALETTE.md
View file
File renamed without changes.
130 changes: 56 additions & 74 deletions src/plugins/commandPalette/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,31 +9,73 @@ import { classNameFactory } from "@api/Styles";
import { Devs } from "@utils/constants";
import { closeAllModals } from "@utils/modal";
import definePlugin, { OptionType } from "@utils/types";
import { SettingsRouter } from "@webpack/common";
import { SettingsRouter, useState } from "@webpack/common";

import { registerAction } from "./commands";
import { openCommandPalette } from "./components/CommandPalette";

const cl = classNameFactory("vc-command-palette-");
let recording: boolean = false;
let isRecordingGlobal: boolean = false;

export const settings = definePluginSettings({
hotkey: {
description: "The hotkey to open the command palette.",
type: OptionType.COMPONENT,
default: ["Control", "Shift", "P"],
component: () => (
<>
<div className={cl("key-recorder-container")} onClick={recordKeybind}>
<div className={cl("key-recorder", { "vc-command-palette-recording": recording })}>
{settings.store.hotkey.map(word => word.charAt(0).toUpperCase() + word.slice(1)).join(" + ")}
<button className={cl("key-recorder-button", { "vc-command-palette-recording-button": recording })} disabled={recording}>
{recording ? "Recording..." : "Record keybind"}
</button>
component: () => {
const [isRecording, setIsRecording] = useState(false);

const recordKeybind = (setIsRecording: (value: boolean) => void) => {
const keys: Set<string> = new Set();
const keyLists: string[][] = [];

setIsRecording(true);
isRecordingGlobal = true;

const updateKeys = () => {
if (keys.size === 0 || !document.querySelector(`.${cl("key-recorder-button")}`)) {
const longestArray = keyLists.reduce((a, b) => a.length > b.length ? a : b);
if (longestArray.length > 0) {
settings.store.hotkey = longestArray.map(key => key.toLowerCase());
}
setIsRecording(false);
isRecordingGlobal = false;
document.removeEventListener("keydown", keydownListener);
document.removeEventListener("keyup", keyupListener);
}
keyLists.push(Array.from(keys));
};

const keydownListener = (e: KeyboardEvent) => {
const { key } = e;
if (!keys.has(key)) {
keys.add(key);
}
updateKeys();
};

const keyupListener = (e: KeyboardEvent) => {
keys.delete(e.key);
updateKeys();
};

document.addEventListener("keydown", keydownListener);
document.addEventListener("keyup", keyupListener);
};

return (
<>
<div className={cl("key-recorder-container")} onClick={() => recordKeybind(setIsRecording)}>
<div className={`${cl("key-recorder")} ${isRecording ? cl("recording") : ""}`}>
{settings.store.hotkey.map(word => word.charAt(0).toUpperCase() + word.slice(1)).join(" + ")}
<button className={`${cl("key-recorder-button")} ${isRecording ? cl("recording-button") : ""}`} disabled={isRecording}>
{isRecording ? "Recording..." : "Record keybind"}
</button>
</div>
</div>
</div>
</>
)
</>
);
}
},
allowMouseControl: {
description: "Allow the mouse to control the command palette.",
Expand All @@ -42,66 +84,6 @@ export const settings = definePluginSettings({
}
});

function recordKeybind() {
const keys: Set<string> = new Set();
const keyLists: string[][] = [];

const updateComponentText = () => {
const button = document.querySelector(`.${cl("key-recorder-button")}`);
const div = document.querySelector(`.${cl("key-recorder")}`);

if (button) {
button.textContent = recording ? "Recording..." : "Record keybind";
button.classList.toggle(cl("recording-button"), recording);
}

if (div) {
div.classList.toggle(cl("recording"), recording);
}
};

recording = true;
updateComponentText();

const updateKeys = () => {


if (keys.size === 0 || !document.querySelector(`.${cl("key-recorder-button")}`)) {
const longestArray = keyLists.reduce((a, b) => a.length > b.length ? a : b);

if (longestArray.length > 0) {
settings.store.hotkey = longestArray.map(key => key.toLowerCase());
}

recording = false;
updateComponentText();

document.removeEventListener("keydown", keydownListener);
document.removeEventListener("keyup", keyupListener);
}

keyLists.push(Array.from(keys));
};

const keydownListener = (e: KeyboardEvent) => {
const { key } = e;

if (!keys.has(key)) {
keys.add(key);
}

updateKeys();
};

const keyupListener = (e: KeyboardEvent) => {
keys.delete(e.key);
updateKeys();
};

document.addEventListener("keydown", keydownListener);
document.addEventListener("keyup", keyupListener);
}


export default definePlugin({
name: "CommandPalette",
Expand Down Expand Up @@ -139,7 +121,7 @@ export default definePlugin({
const { hotkey } = settings.store;
const pressedKey = e.key.toLowerCase();

if (recording) return;
if (isRecordingGlobal) return;

for (let i = 0; i < hotkey.length; i++) {
const lowercasedRequiredKey = hotkey[i].toLowerCase();
Expand Down

0 comments on commit 103179f

Please sign in to comment.