Skip to content

Commit

Permalink
Fix shortcuts
Browse files Browse the repository at this point in the history
  • Loading branch information
@haxzie
haxzie committed May 6, 2024
1 parent 7ceac99 commit 32db957
Show file tree
Hide file tree
Showing 4 changed files with 154 additions and 101 deletions.
175 changes: 117 additions & 58 deletions src/components/CommandCenter.vue
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,5 @@
<template>
<div
class="command-center"
v-shortkey="['alt', 'k']"
@shortkey="toggleCommandMenu"
>
<div class="command-center">
<!-- <ZoomCenterTransition>
<div class="toggle" v-if="!showMenu" @click="toggleCommandMenu">
<CommandIcon />
Expand Down Expand Up @@ -102,6 +98,7 @@ export default {
activeCommand: null,
command: "",
parameter: "",
shortkeyListener: null,
commands: [
{
command: "/k",
Expand Down Expand Up @@ -160,9 +157,10 @@ export default {
showMenu: {
get() {
return this.getShowCommandCenter;
}, set(val) {
},
set(val) {
this.setShowCommandCenter(val);
}
},
},
filtererdCommands() {
const regex = new RegExp(this.command ? this.command.trim() : "", "i");
Expand Down Expand Up @@ -195,42 +193,23 @@ export default {
this.showMenu = !this.showMenu;
if (this.showMenu) {
setTimeout(() => {
this.$refs.commandInput.focus();
try {
if (!this.command) {
this.$refs.commandInput.focus();
}
} catch (error) {
// do nothing
}
}, 300);
} else {
this.command = null;
this.activeCommand = null;
this.parameter = null;
}
},
async execute() {
console.log("Executing...");
// check if the commands are valid or not
let commandToExecute = null;
if (this.activeCommand) {
commandToExecute = this.activeCommand;
} else if (this.command && this.command.length > 0) {
const findCommand = this.commands.find(
(item) => item.command === this.command.trim()
);
if (findCommand) {
commandToExecute = findCommand;
} else {
console.log("No command found");
this.toggleCommandMenu();
}
} else {
console.log("Not a valid command");
this.toggleCommandMenu();
}
if (!commandToExecute) {
this.toggleCommandMenu();
return;
}
async runCommandAction(command) {
let activeFile = null;
switch (commandToExecute.command) {
switch (command) {
case "/k":
this.toggleCommandMenu();
break;
Expand All @@ -241,54 +220,74 @@ export default {
} else {
this.createFile({ editable: true });
}
this.toggleCommandMenu();
break;
case "/f":
if (this.parameter && this.parameter.length > 0) {
this.createDirectory({ name: this.parameter });
} else {
this.createDirectory({ editable: true });
}
this.toggleCommandMenu();
break;
case "/w":
activeFile = this.getActiveFiles[this.getActiveEditor];
if (activeFile && activeFile.id) {
this.closeFile({ editor: this.getActiveEditor, id: activeFile.id });
}
this.toggleCommandMenu();
break;
case "/d":
activeFile = this.getActiveFiles[this.getActiveEditor];
if (activeFile && activeFile.id) {
this.deleteFile(activeFile);
}
this.toggleCommandMenu();
break;
case "/r":
activeFile = this.getActiveFiles[this.getActiveEditor];
if (this.parameter && this.parameter.length > 0 && activeFile) {
this.renameFile({ id: activeFile.id, name: this.parameter });
}
this.toggleCommandMenu();
break;
case "/s":
activeFile = this.getActiveFiles[this.getActiveEditor];
if (activeFile) {
this.downloadFile({ id: activeFile.id });
}
this.toggleCommandMenu();
break;
case "/c":
activeFile = this.getActiveFiles[this.getActiveEditor];
if (activeFile) {
navigator.clipboard.writeText(activeFile.contents);
}
this.toggleCommandMenu();
break;
default:
}
},
async execute() {
console.log("Executing...");
// check if the commands are valid or not
let commandToExecute = null;
if (this.activeCommand) {
commandToExecute = this.activeCommand;
} else if (this.command && this.command.length > 0) {
const findCommand = this.commands.find(
(item) => item.command === this.command.trim()
);
if (findCommand) {
commandToExecute = findCommand;
} else {
console.log("No command found");
this.toggleCommandMenu();
}
} else {
console.log("Not a valid command");
this.toggleCommandMenu();
}
if (!commandToExecute) {
this.toggleCommandMenu();
return;
}
this.runCommandAction(commandToExecute.command);
this.toggleCommandMenu();
},
clearIfEmpty(e) {
if (
Expand All @@ -300,26 +299,84 @@ export default {
this.$refs.commandInput.focus();
}
},
addShortkeyListener() {
console.log(`Creating shortkey listener`);
this.shortkeyListener = window.addEventListener("keydown", (e) => {
const { altKey } = e;
if (altKey) {
const key = String.fromCharCode(e.keyCode);
const commandKeys = ["k", "w", "r", "d", "n", ];
if (commandKeys.includes(key.toLowerCase())) {
e.preventDefault();
e.stopPropagation();
switch (key.toLowerCase()) {
case "k":
this.toggleCommandMenu();
break;
case "w":
this.runCommandAction("/w");
break;
case "r":
this.command = "/r";
this.toggleCommandMenu();
break;
case "d":
this.runCommandAction("/d");
break;
case "n":
this.command = "/n";
this.toggleCommandMenu();
break;
}
}
}
// const isModifierActive = () =>
// e.getModifierState("Control") ||
// e.getModifierState("Meta") ||
// e.getModifierState("OS") ||
// e.getModifierState("Win");
// console.log(isModifierActive())
// if (e.keyCode === 74 && isModifierActive()) {
// e.preventDefault();
// e.stopPropagation();
// // this.handleShortkey();
// console.log(e)
// }
});
},
},
watch: {
command(value) {
for (let i = 0; i < this.commands.length; i++) {
const commandItem = this.commands[i];
// check if the command matches and the command requires a parameter
if (value === `${commandItem.command} ` && commandItem.parameter) {
// set the active command and ask user for the parameter
this.activeCommand = commandItem;
setTimeout(() => {
this.$refs.parameterInput.focus();
}, 100);
console.log(commandItem);
return;
command: {
handler(value) {
for (let i = 0; i < this.commands.length; i++) {
const commandItem = this.commands[i];
// check if the command matches and the command requires a parameter
if (value === `${commandItem.command}`) {
// set the active command and ask user for the parameter
this.activeCommand = commandItem;
setTimeout(() => {
this.$refs.parameterInput.focus();
}, 100);
return;
}
}
}
this.activeCommand = null;
this.activeCommand = null;
},
immediate: true,
},
},
created() {
this.addShortkeyListener();
},
beforeDestroy() {
window.removeEventListener("keydown", this.shortkeyListener);
},
};
</script>

Expand Down Expand Up @@ -350,7 +407,7 @@ export default {
}
.command-center {
z-index: 99;
z-index: 9999;
.command-menu {
position: absolute;
Expand All @@ -359,9 +416,11 @@ export default {
width: 100%;
height: 100%;
background: var(--popup-background);
backdrop-filter: blur(5px);
display: flex;
align-items: flex-start;
justify-content: center;
z-index: 999;
.command-card {
display: flex;
Expand Down
32 changes: 13 additions & 19 deletions src/components/Editor.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -72,7 +72,7 @@
<li
@click="setShowCreateFileModal({ flag: true, filename: 'untitled' })"
>
<FilePlusIcon class="icon" size="18" /> Create new snippet file
<FilePlusIcon class="icon" size="18" /> Create new snippet file <span>ALT+N</span>
</li>
<li
@click="
Expand Down Expand Up @@ -127,22 +127,6 @@
@dragover.prevent
></div>
</div>
<!-- Short cuts -->
<div
v-show="false"
v-shortkey="['alt', 'd']"
@shortkey="dispatchActiveFileAction('delete')"
></div>
<div
v-show="false"
v-shortkey="['alt', 'r']"
@shortkey="dispatchActiveFileAction('rename')"
></div>
<div
v-show="false"
v-shortkey="['alt', 'w']"
@shortkey="dispatchActiveFileAction('close')"
></div>
</div>
</template>

Expand Down Expand Up @@ -360,17 +344,20 @@ export default {
.title {
font-size: 1.2rem;
padding: 10px 0;
padding: 10px 15px;
font-weight: 600;
}
.description {
opacity: 0.7;
padding: 0px 15px;
}
.menu-title {
font-size: 1rem;
margin-top: 20px;
margin-top: 50px;
padding: 0 15px;
font-weight: 600;
}
.menu {
Expand All @@ -389,10 +376,17 @@ export default {
text-decoration: underline;
text-decoration-style: dashed;
text-decoration-color: var(--color-primary);
text-underline-offset: 5px;
align-self: flex-start;
border-radius: 5px;
transition: 0.3s all ease-in-out;
span {
margin-left: 5px;
color: var(--font-color-light);
text-decoration: none;
}
a {
display: flex;
align-items: center;
Expand Down
Loading

0 comments on commit 32db957

Please sign in to comment.