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

Allow to resize a keyboard

parent 0d86ebca
No related branches found
No related tags found
1 merge request!12Allow to resize a keyboard
Pipeline #5657 passed with warnings
<template> <template>
<div class="conf-div"> <div class="conf-div">
<div> <div>
<UTF8Picker v-if="picker" :selectedChar.sync="selectedChar" /> <keep-alive>
<KeyboardDisplay <UTF8Picker v-if="picker" :selectedChar.sync="selectedChar" />
v-else <KeyboardDisplay
:keyboard-index="keyboardIndex" v-else
:selectedKey="selectedKey" :keyboard-index="keyboardIndex"
v-on:input="(i) => (selectedKey = i)" :selectedKey="selectedKey"
/> v-on:input="(i) => (selectedKey = i)"
resizable
/>
</keep-alive>
</div> </div>
<div class="picker"> <div class="picker">
<template v-if="selectedKey"> <template v-if="selectedKey">
......
<template> <template>
<div v-if="characters && characters.length"> <div>
<div v-if="!charTable">An error occured loading the keyboard</div> <div v-if="!charTable">An error occured loading the keyboard</div>
<div v-else v-for="(row, i) in charTable" :key="i"> <div v-else v-for="(row, i) in charTable" :key="i">
<span v-for="(char, j) in row" :key="j"> <span v-for="(char, j) in row" :key="j">
...@@ -19,11 +19,31 @@ ...@@ -19,11 +19,31 @@
</button> </button>
</span> </span>
</div> </div>
<template v-if="resizable">
<label>Rows</label>
<!-- Directly parse field value to handle integers only -->
<input
:value="rows"
v-on:change.prevent="(e) => updateRows(e.target.value)"
:min="rowsCount"
:max="maxKeyboardSize"
type="number"
/>
<label>Columns</label>
<input
:value="columns"
v-on:change.prevent="(e) => updateColumns(e.target.value)"
:min="columnsCount"
:max="maxKeyboardSize"
type="number"
/>
</template>
</div> </div>
</template> </template>
<script> <script>
import { mapState } from "vuex"; import { mapState } from "vuex";
import { maxKeyboardSize } from "../config.js";
export default { export default {
props: { props: {
...@@ -36,29 +56,46 @@ export default { ...@@ -36,29 +56,46 @@ export default {
type: Object, type: Object,
default: null, default: null,
}, },
resizable: {
type: Boolean,
default: false,
},
}, },
data: () => ({
// Rows and columns including a potential resize of the keyboard
rows: 0,
columns: 0,
maxKeyboardSize,
}),
computed: { computed: {
...mapState(["keyboards"]), ...mapState(["keyboards"]),
keyboard() {
return this.keyboards[this.keyboardIndex];
},
characters() { characters() {
return this.keyboards[this.keyboardIndex].characters; return this.keyboard && this.keyboard.characters;
}, },
rowsCount() { rowsCount() {
// Return the number of rows from keyboard characters
if (!this.characters.length) return 1;
return ( return (
this.characters && Math.max(...this.characters.map((c) => c.row)) + 1 this.characters && Math.max(...this.characters.map((c) => c.row)) + 1
); );
}, },
columnsCount() { columnsCount() {
// Return the number of columns from keyboard characters
if (!this.characters.length) return 1;
return ( return (
this.characters && Math.max(...this.characters.map((c) => c.column)) + 1 this.characters && Math.max(...this.characters.map((c) => c.column)) + 1
); );
}, },
charTable() { charTable() {
if (!this.columnsCount || !this.rowsCount) return; const [tableRows, tableCols] = this.resizable
? [this.rows, this.columns]
: [this.rowsCount, this.columnsCount];
if (!tableRows || !tableCols) return;
// Return a list of every column with padding // Return a list of every column with padding
const table = Array.from( const table = Array.from(Array(tableRows), () => new Array(tableCols));
Array(this.rowsCount),
() => new Array(this.columnsCount)
);
if (!this.characters) return table; if (!this.characters) return table;
this.characters.forEach((c) => { this.characters.forEach((c) => {
table[c.row][c.column] = c; table[c.row][c.column] = c;
...@@ -66,6 +103,33 @@ export default { ...@@ -66,6 +103,33 @@ export default {
return table; return table;
}, },
}, },
methods: {
// We need to handle input changes manually as v-model.number allows random numbers or empty strings
updateRows(value) {
if (isNaN(value) || value < this.rowsCount || value > maxKeyboardSize)
return;
this.rows = parseInt(value);
},
updateColumns(value) {
if (isNaN(value) || value < this.columnsCount || value > maxKeyboardSize)
return;
this.columns = parseInt(value);
},
},
watch: {
rowsCount: {
immediate: true,
handler(n) {
if (!this.rows) this.rows = n || 1;
},
},
columnsCount: {
immediate: true,
handler(n) {
if (!this.columns) this.columns = n || 1;
},
},
},
}; };
</script> </script>
......
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