mirror of
https://github.com/heyman/heynote.git
synced 2025-06-27 21:12:00 +02:00
Add ability to record keyboard shortcuts
This commit is contained in:
parent
c64033359b
commit
da806d815c
@ -3,11 +3,13 @@
|
||||
import AutoComplete from 'primevue/autocomplete'
|
||||
|
||||
import { HEYNOTE_COMMANDS } from '@/src/editor/commands'
|
||||
import RecordKeyInput from './RecordKeyInput.vue'
|
||||
|
||||
export default {
|
||||
name: "AddKeyBind",
|
||||
components: {
|
||||
AutoComplete,
|
||||
RecordKeyInput,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
@ -34,6 +36,7 @@
|
||||
|
||||
mounted() {
|
||||
window.addEventListener("keydown", this.onKeyDown)
|
||||
this.$refs.keys.$el.focus()
|
||||
},
|
||||
beforeUnmount() {
|
||||
window.removeEventListener("keydown", this.onKeyDown)
|
||||
@ -41,7 +44,7 @@
|
||||
|
||||
methods: {
|
||||
onKeyDown(event) {
|
||||
if (event.key === "Escape") {
|
||||
if (event.key === "Escape" && document.activeElement !== this.$refs.keys.$el) {
|
||||
this.$emit("close")
|
||||
}
|
||||
},
|
||||
@ -63,11 +66,18 @@
|
||||
},
|
||||
|
||||
onSave() {
|
||||
if (this.key === "" || this.command === "") {
|
||||
return
|
||||
}
|
||||
this.$emit("save", {
|
||||
key: this.key,
|
||||
command: this.command.name,
|
||||
})
|
||||
}
|
||||
},
|
||||
|
||||
focusCommandSelector() {
|
||||
this.$refs.autocomplete.$el.querySelector("input").focus()
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
@ -80,11 +90,12 @@
|
||||
<div class="form">
|
||||
<div class="field">
|
||||
<label>Key</label>
|
||||
<input
|
||||
type="text"
|
||||
<RecordKeyInput
|
||||
v-model="key"
|
||||
class="keys"
|
||||
>
|
||||
@enter="focusCommandSelector"
|
||||
@close="$emit('close')"
|
||||
ref="keys"
|
||||
/>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label>Command</label>
|
||||
@ -93,9 +104,11 @@
|
||||
forceSelection
|
||||
v-model="command"
|
||||
:suggestions="commandSuggestions"
|
||||
:autoOptionFocus="true"
|
||||
optionLabel="key"
|
||||
:delay="0"
|
||||
@complete="onCommandSearch"
|
||||
ref="autocomplete"
|
||||
emptySearchMessage="No commands found"
|
||||
class="command-autocomplete"
|
||||
>
|
||||
@ -163,6 +176,8 @@
|
||||
.field
|
||||
//width: 50%
|
||||
margin-bottom: 20px
|
||||
&:last-child
|
||||
margin-bottom: 0
|
||||
label
|
||||
display: block
|
||||
margin-bottom: 8px
|
||||
|
88
src/components/settings/RecordKeyInput.vue
Normal file
88
src/components/settings/RecordKeyInput.vue
Normal file
@ -0,0 +1,88 @@
|
||||
<script>
|
||||
import { keyName, base } from "w3c-keyname"
|
||||
|
||||
export default {
|
||||
props: [
|
||||
"modelValue",
|
||||
],
|
||||
|
||||
data() {
|
||||
return {
|
||||
keys: this.modelValue ? this.modelValue.split(" ") : [],
|
||||
}
|
||||
},
|
||||
|
||||
computed: {
|
||||
key() {
|
||||
return this.keys.join(" ")
|
||||
},
|
||||
},
|
||||
|
||||
watch: {
|
||||
modelValue(newValue) {
|
||||
this.keys = this.modelValue ? this.modelValue.split(" ") : []
|
||||
},
|
||||
key(newValue) {
|
||||
this.$emit("update:model-value", newValue)
|
||||
},
|
||||
},
|
||||
|
||||
methods: {
|
||||
onKeyDown(event) {
|
||||
event.preventDefault()
|
||||
//console.log("event", event, event.code, keyName(event))
|
||||
|
||||
if (event.key === "Enter") {
|
||||
this.$emit("enter")
|
||||
} else if (event.key === "Escape") {
|
||||
if (this.keys.length > 0) {
|
||||
this.keys = []
|
||||
} else {
|
||||
// setTimeout is used to ensure that the settings dialog's keydown listener
|
||||
// doesn't close the whole settings dialog
|
||||
setTimeout(() => {
|
||||
this.$emit("close")
|
||||
}, 0)
|
||||
}
|
||||
} else if (["Alt", "Control", "Meta", "Shift"].includes(event.key)) {
|
||||
|
||||
} else {
|
||||
if (this.keys.length >= 2) {
|
||||
this.keys = []
|
||||
}
|
||||
let keyCombo = ""
|
||||
if (event.altKey) {
|
||||
keyCombo += "Alt-"
|
||||
}
|
||||
if (event.ctrlKey) {
|
||||
keyCombo += "Control-"
|
||||
}
|
||||
if (event.metaKey) {
|
||||
keyCombo += "Meta-"
|
||||
}
|
||||
if (event.shiftKey) {
|
||||
keyCombo += "Shift-"
|
||||
}
|
||||
let key = base[event.keyCode]
|
||||
if (key) {
|
||||
if (key === " ") {
|
||||
key = "Space"
|
||||
}
|
||||
keyCombo += key
|
||||
this.keys.push(keyCombo)
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<input
|
||||
type="text"
|
||||
:value="key"
|
||||
@keydown.prevent="onKeyDown"
|
||||
class="keys"
|
||||
readonly
|
||||
>
|
||||
</template>
|
@ -26,7 +26,7 @@
|
||||
},
|
||||
|
||||
data() {
|
||||
console.log("settings:", this.initialSettings)
|
||||
//console.log("settings:", this.initialSettings)
|
||||
return {
|
||||
keymaps: [
|
||||
{ name: "Default", value: "default" },
|
||||
|
@ -15,13 +15,14 @@
|
||||
--p-autocomplete-dropdown-border-radius: var(--p-inputtext-border-radius)
|
||||
--p-autocomplete-dropdown-hover-border-color: var(--p-inputtext-hover-border-color)
|
||||
--p-autocomplete-dropdown-active-border-color: var(--p-inputtext-active-border-color)
|
||||
--p-autocomplete-option-focus-background: #f1f1f1
|
||||
--p-autocomplete-dropdown-hover-background: #f1f1f1
|
||||
--p-autocomplete-option-focus-background: var(--highlight-color)
|
||||
--p-autocomplete-option-focus-color: #fff
|
||||
|
||||
+dark-mode
|
||||
--p-inputtext-background: #202020
|
||||
--p-inputtext-border-color: #444
|
||||
--p-autocomplete-option-focus-background: #555
|
||||
--p-autocomplete-option-focus-color: #fff
|
||||
--p-autocomplete-dropdown-hover-background: #2a2a2a
|
||||
|
||||
.p-inputtext.p-inputtext
|
||||
font-size: 12px
|
||||
|
Loading…
x
Reference in New Issue
Block a user