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 { ...@@ -46,10 +46,6 @@ export default {
}, },
}, },
data: () => ({ data: () => ({
keysSwitch: {
a: "ǻ",
A: "Ǡ",
},
optionsModal: false, optionsModal: false,
// Select the keyboard at index 0 in the keyboard list by default // Select the keyboard at index 0 in the keyboard list by default
selectedKeyboard: 0, selectedKeyboard: 0,
...@@ -83,9 +79,12 @@ export default { ...@@ -83,9 +79,12 @@ export default {
start + key.character.length; start + key.character.length;
}, },
keyInput(e) { keyInput(e) {
const character = this.keysSwitch[e.key]; if (!this.keyboard) return;
if (!character) return; const key = this.keyboard.characters.find(
this.addChar({ character }); (c) => c.keyboard_code == e.key.charCodeAt()
);
if (!key) return;
this.addChar({ character: key.character });
e.preventDefault(); e.preventDefault();
}, },
looseFocus() { looseFocus() {
......
...@@ -15,15 +15,23 @@ ...@@ -15,15 +15,23 @@
Row {{ selectedKey.row + 1 }} - Column {{ selectedKey.column + 1 }} Row {{ selectedKey.row + 1 }} - Column {{ selectedKey.column + 1 }}
</p> </p>
<template v-if="selectedChar"> <template v-if="selectedChar">
<p class="large-text">{{ selectedChar.code | displayUTF8 }}</p> <p class="large-character">{{ selectedChar.code | displayUTF8 }}</p>
<p>{{ selectedChar.name }}</p> <p>{{ selectedChar.name }}</p>
<button type="button" v-on:click="replace">Replace</button> <button type="button" v-on:click="replace">Replace</button>
</template> </template>
<template v-else> <template v-else>
<p v-if="selectedKey && selectedKey.character" class="large-text"> <template v-if="selectedKey.character">
{{ selectedKey.character }} <p class="large-character">{{ selectedKey.character }}</p>
</p> <span>Key binding</span>
<p v-else>empty</p> <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> </template>
<p> <p>
UTF8 Picker UTF8 Picker
...@@ -60,6 +68,7 @@ export default { ...@@ -60,6 +68,7 @@ export default {
picker: false, picker: false,
selectedKey: null, selectedKey: null,
selectedChar: null, selectedChar: null,
keyBinding: null,
}), }),
filters: { filters: {
displayUTF8, displayUTF8,
...@@ -69,15 +78,30 @@ export default { ...@@ -69,15 +78,30 @@ export default {
replace() { replace() {
if (!this.selectedKey || !this.selectedChar) return; if (!this.selectedKey || !this.selectedChar) return;
// Update the keyboard // Update the keyboard
this.selectedKey = this.updateKey({ this.updateKey({
...this.selectedKey,
index: this.keyboardIndex, index: this.keyboardIndex,
code: this.selectedChar.code, ...this.selectedKey,
character: displayUTF8(this.selectedChar.code),
}); });
this.selectedChar = null; this.selectedChar = null;
this.selectedKey = null; this.selectedKey = null;
this.picker = false; 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> </script>
...@@ -90,7 +114,10 @@ export default { ...@@ -90,7 +114,10 @@ export default {
width: 15rem; width: 15rem;
margin-left: 2rem; margin-left: 2rem;
} }
.large-text { .large-character {
width: 5rem;
font-size: 5rem; font-size: 5rem;
margin: 1rem;
border: 1px solid black;
} }
</style> </style>
...@@ -19,19 +19,19 @@ export const DEFAULT_KEYBOARDS = [ ...@@ -19,19 +19,19 @@ export const DEFAULT_KEYBOARDS = [
row: 0, row: 0,
column: 0, column: 0,
character: "", character: "",
keyboard_code: 97, keyboard_code: 65,
}, },
{ {
row: 0, row: 0,
column: 2, column: 2,
character: "", character: "",
keyboard_code: 98, keyboard_code: 67,
}, },
{ {
row: 0, row: 0,
column: 3, column: 3,
character: "", character: "",
keyboard_code: null, keyboard_code: 68,
}, },
{ {
row: 1, row: 1,
......
...@@ -6,7 +6,6 @@ import { ...@@ -6,7 +6,6 @@ import {
DEFAULT_KEYBOARDS, DEFAULT_KEYBOARDS,
UTF8_ASSETS_URL, UTF8_ASSETS_URL,
} from "../config"; } from "../config";
import { displayUTF8 } from "../helpers.js";
Vue.use(Vuex); Vue.use(Vuex);
...@@ -48,19 +47,13 @@ export default new Vuex.Store({ ...@@ -48,19 +47,13 @@ export default new Vuex.Store({
if (!state.keyboards[index]) return; if (!state.keyboards[index]) return;
state.keyboards[index].name = name; state.keyboards[index].name = name;
}, },
updateKey(state, { index, row, column, code }) { updateKey(state, { index, ...newKey }) {
// Copy the keyboard if the index is correct to avoid modifying it directly in the state // Copy the keyboard if the index is correct to avoid modifying it directly in the state
const keyboard = state.keyboards[index] && { ...state.keyboards[index] }; const keyboard = state.keyboards[index] && { ...state.keyboards[index] };
if (!keyboard) return; if (!keyboard) return;
// Find the key and replace it // Find the key and replace it
const newKey = {
character: displayUTF8(code),
row,
column,
keyboard_code: null,
};
const keyPos = keyboard.characters.findIndex( 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; if (keyPos > 0) keyboard.characters[keyPos] = newKey;
else keyboard.characters.push(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