feat: ✨ don't close emoji picker if shift is held down, like Discord
https://snug.moe/notes/9h1p04dqytz2qfsz
This commit is contained in:
parent
2a86a8ad75
commit
7d41179b83
|
@ -12,7 +12,7 @@
|
|||
:transparent-bg="true"
|
||||
:manual-showing="manualShowing"
|
||||
:src="src"
|
||||
@click="modal?.close()"
|
||||
@click="checkForShift"
|
||||
@opening="opening"
|
||||
@close="emit('close')"
|
||||
@closed="emit('closed')"
|
||||
|
@ -31,7 +31,7 @@
|
|||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref } from "vue";
|
||||
import { ref, onMounted, onBeforeUnmount } from "vue";
|
||||
import MkModal from "@/components/MkModal.vue";
|
||||
import MkEmojiPicker from "@/components/MkEmojiPicker.vue";
|
||||
import { defaultStore } from "@/store";
|
||||
|
@ -58,20 +58,49 @@ const emit = defineEmits<{
|
|||
|
||||
const modal = ref<InstanceType<typeof MkModal>>();
|
||||
const picker = ref<InstanceType<typeof MkEmojiPicker>>();
|
||||
const isShiftKeyPressed = ref(false);
|
||||
|
||||
function chosen(emoji: any) {
|
||||
const keydownHandler = (e) => {
|
||||
if (e.key === "Shift") {
|
||||
isShiftKeyPressed.value = true;
|
||||
}
|
||||
};
|
||||
|
||||
const keyupHandler = (e) => {
|
||||
if (e.key === "Shift") {
|
||||
isShiftKeyPressed.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
function checkForShift(ev?: MouseEvent) {
|
||||
if (!isShiftKeyPressed.value) {
|
||||
modal.value?.close(ev);
|
||||
}
|
||||
}
|
||||
|
||||
function chosen(emoji: any, ev: MouseEvent) {
|
||||
emit("done", emoji);
|
||||
modal.value?.close();
|
||||
checkForShift(ev);
|
||||
}
|
||||
|
||||
function opening() {
|
||||
try {
|
||||
picker.value?.reset();
|
||||
} catch (e) {
|
||||
console.error(`Something's wrong with restting the emoji picker: ${e}`);
|
||||
console.error("Something's wrong with resetting the emoji picker", e);
|
||||
}
|
||||
picker.value?.focus();
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
window.addEventListener("keydown", keydownHandler);
|
||||
window.addEventListener("keyup", keyupHandler);
|
||||
});
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
window.removeEventListener("keydown", keydownHandler);
|
||||
window.removeEventListener("keyup", keyupHandler);
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
|
Loading…
Reference in New Issue