Skip to content
Snippets Groups Projects
Commit 322aae03 authored by Valentin Rigal's avatar Valentin Rigal Committed by Bastien Abadie
Browse files

Keyboard bindings

parent a306a637
No related branches found
No related tags found
1 merge request!16Keyboard bindings
......@@ -46,10 +46,6 @@ export default {
},
},
data: () => ({
keysSwitch: {
a: "ǻ",
A: "Ǡ",
},
optionsModal: false,
// Select the keyboard at index 0 in the keyboard list by default
selectedKeyboard: 0,
......@@ -83,9 +79,12 @@ export default {
start + key.character.length;
},
keyInput(e) {
const character = this.keysSwitch[e.key];
if (!character) return;
this.addChar({ character });
if (!this.keyboard) return;
const key = this.keyboard.characters.find(
(c) => c.keyboard_code == e.key.charCodeAt()
);
if (!key) return;
this.addChar({ character: key.character });
e.preventDefault();
},
looseFocus() {
......
......@@ -15,15 +15,23 @@
Row {{ selectedKey.row + 1 }} - Column {{ selectedKey.column + 1 }}
</p>
<template v-if="selectedChar">
<p class="large-text">{{ selectedChar.code | displayUTF8 }}</p>
<p class="large-character">{{ selectedChar.code | displayUTF8 }}</p>
<p>{{ selectedChar.name }}</p>
<button type="button" v-on:click="replace">Replace</button>
</template>
<template v-else>
<p v-if="selectedKey && selectedKey.character" class="large-text">
{{ selectedKey.character }}
</p>
<p v-else>empty</p>
<template v-if="selectedKey.character">
<p class="large-character">{{ selectedKey.character }}</p>
<span>Key binding</span>
<input
v-model="keyBinding"
type="text"
maxlength="1"
placeholder="Type a character…"
/>
<button v-on:click="updateKeyBinding">save</button>
</template>
<p v-else class="large-character">&nbsp;</p>
</template>
<p>
UTF8 Picker
......@@ -60,6 +68,7 @@ export default {
picker: false,
selectedKey: null,
selectedChar: null,
keyBinding: null,
}),
filters: {
displayUTF8,
......@@ -69,15 +78,30 @@ export default {
replace() {
if (!this.selectedKey || !this.selectedChar) return;
// Update the keyboard
this.selectedKey = this.updateKey({
...this.selectedKey,
this.updateKey({
index: this.keyboardIndex,
code: this.selectedChar.code,
...this.selectedKey,
character: displayUTF8(this.selectedChar.code),
});
this.selectedChar = null;
this.selectedKey = null;
this.picker = false;
},
updateKeyBinding() {
this.updateKey({
index: this.keyboardIndex,
...this.selectedKey,
keyboard_code: this.keyBinding ? this.keyBinding.charCodeAt() : null,
});
},
},
watch: {
selectedKey(key) {
if (!key) return;
this.keyBinding = key.keyboard_code
? String.fromCharCode(key.keyboard_code)
: null;
},
},
};
</script>
......@@ -90,7 +114,10 @@ export default {
width: 15rem;
margin-left: 2rem;
}
.large-text {
.large-character {
width: 5rem;
font-size: 5rem;
margin: 1rem;
border: 1px solid black;
}
</style>
......@@ -19,19 +19,19 @@ export const DEFAULT_KEYBOARDS = [
row: 0,
column: 0,
character: "",
keyboard_code: 97,
keyboard_code: 65,
},
{
row: 0,
column: 2,
character: "",
keyboard_code: 98,
keyboard_code: 67,
},
{
row: 0,
column: 3,
character: "",
keyboard_code: null,
keyboard_code: 68,
},
{
row: 1,
......
......@@ -6,7 +6,6 @@ import {
DEFAULT_KEYBOARDS,
UTF8_ASSETS_URL,
} from "../config";
import { displayUTF8 } from "../helpers.js";
Vue.use(Vuex);
......@@ -48,19 +47,13 @@ export default new Vuex.Store({
if (!state.keyboards[index]) return;
state.keyboards[index].name = name;
},
updateKey(state, { index, row, column, code }) {
// Copy the keyboard if the index is correct to avoid modifying it directly in the state
updateKey(state, { index, ...newKey }) {
// Copy the keyboard if the index is correct to avoid modifying it directly in the state
const keyboard = state.keyboards[index] && { ...state.keyboards[index] };
if (!keyboard) return;
// Find the key and replace it
const newKey = {
character: displayUTF8(code),
row,
column,
keyboard_code: null,
};
const keyPos = keyboard.characters.findIndex(
(k) => k.row === row && k.column === column
(k) => k.row === newKey.row && k.column === newKey.column
);
if (keyPos > 0) keyboard.characters[keyPos] = newKey;
else keyboard.characters.push(newKey);
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment