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>
<div class="conf-div">
<div>
<UTF8Picker v-if="picker" :selectedChar.sync="selectedChar" />
<KeyboardDisplay
v-else
:keyboard-index="keyboardIndex"
:selectedKey="selectedKey"
v-on:input="(i) => (selectedKey = i)"
/>
<keep-alive>
<UTF8Picker v-if="picker" :selectedChar.sync="selectedChar" />
<KeyboardDisplay
v-else
:keyboard-index="keyboardIndex"
:selectedKey="selectedKey"
v-on:input="(i) => (selectedKey = i)"
resizable
/>
</keep-alive>
</div>
<div class="picker">
<template v-if="selectedKey">
......
<template>
<div v-if="characters && characters.length">
<div>
<div v-if="!charTable">An error occured loading the keyboard</div>
<div v-else v-for="(row, i) in charTable" :key="i">
<span v-for="(char, j) in row" :key="j">
......@@ -19,11 +19,31 @@
</button>
</span>
</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>
</template>
<script>
import { mapState } from "vuex";
import { maxKeyboardSize } from "../config.js";
export default {
props: {
......@@ -36,29 +56,46 @@ export default {
type: Object,
default: null,
},
resizable: {
type: Boolean,
default: false,
},
},
data: () => ({
// Rows and columns including a potential resize of the keyboard
rows: 0,
columns: 0,
maxKeyboardSize,
}),
computed: {
...mapState(["keyboards"]),
keyboard() {
return this.keyboards[this.keyboardIndex];
},
characters() {
return this.keyboards[this.keyboardIndex].characters;
return this.keyboard && this.keyboard.characters;
},
rowsCount() {
// Return the number of rows from keyboard characters
if (!this.characters.length) return 1;
return (
this.characters && Math.max(...this.characters.map((c) => c.row)) + 1
);
},
columnsCount() {
// Return the number of columns from keyboard characters
if (!this.characters.length) return 1;
return (
this.characters && Math.max(...this.characters.map((c) => c.column)) + 1
);
},
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
const table = Array.from(
Array(this.rowsCount),
() => new Array(this.columnsCount)
);
const table = Array.from(Array(tableRows), () => new Array(tableCols));
if (!this.characters) return table;
this.characters.forEach((c) => {
table[c.row][c.column] = c;
......@@ -66,6 +103,33 @@ export default {
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>
......
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