Skip to content

Commit

Permalink
rewrite layouts
Browse files Browse the repository at this point in the history
  • Loading branch information
@icebob
icebob committed Oct 25, 2016
1 parent d16d59d commit fa21941
Show file tree
Hide file tree
Showing 3 changed files with 135 additions and 45 deletions.
5 changes: 5 additions & 0 deletions dev/app.vue
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,7 @@
<template lang="jade">
select.layoutSelector(v-model="layout")
option(v-for="layout in allLayouts", :value="$key") {{ $key }}

input.input(type="text", @focus="show")
vue-touch-keyboard#keyboard(v-if="visible", :layout="layout", :cancel="hide", :accept="accept", :input="input")

Expand All @@ -17,6 +20,7 @@
data() {
return {
visible: false,
allLayouts: VueTouchKeyboard.layouts,
//layout: VueTouchKeyboard.layouts["alphaNumeric-mini"],
layout: "alphaNumeric-mini",
input: null
Expand Down Expand Up @@ -72,6 +76,7 @@
bottom: 0;
z-index: 1000;
width: 100%;
max-width: 1000px;
margin: 0 auto;
Expand Down
109 changes: 83 additions & 26 deletions src/keyboard.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,22 +3,31 @@
// input(type="text", v-model="keyboardText", v-if="!input")
.keyboard
.line(v-for="line in keySet", track-by="$index")
span(v-for="key in line", track-by="$index", :class="getClassesOfKey(key)", v-text="getCaptionOfKey(key)", @click="clickKey(key)")
span(v-for="key in line", track-by="$index", :class="getClassesOfKey(key)", v-text="getCaptionOfKey(key)", @click="clickKey(key)", :style="getKeyStyle(key)")

</template>

<script>
import Layouts from "./layouts";
import isString from "lodash/isString";
import isObject from "lodash/isObject";
export default {
props: [
"layout",
"accept",
"cancel",
"change",
"input"
],
props: {
input: HTMLInputElement,
layout: [String, Object],
accept: Function,
cancel: Function,
change: Function,
options: {
type: Object,
default() {
return {};
}
}
},
data () {
return {
Expand All @@ -27,8 +36,50 @@
},
computed: {
keySet() {
return this.getLayout()[this.currentKeySet];
let layout = this.getLayout();
let keyset = layout[this.currentKeySet];
let res = []
let meta = layout["_meta"] || {};
keyset.forEach((line) => {
let row = [];
line.forEach((item) => {
if (isObject(item)) {
row.push(item);
}
else if (isString(item)) {
if (item.length > 2 && item[0] == "{" && item[item.length- 1] == "}") {
let name = item.substring(1, item.length - 1);
if (meta[name])
row.push(meta[name])
else
console.warn("Missing named key from meta: " + name);
} else {
if (item == "") {
// Placeholder
row.push({
placeholder: true
});
} else {
// Normal key
row.push({
key: item,
text: item
});
}
}
}
});
res.push(row);
});
console.log(res);
return res;
}
},
Expand All @@ -51,20 +102,21 @@
},
getCaptionOfKey(key) {
if (typeof key == "object") {
return key.text || key.key || "";
}
return key;
return key.text || key.key || "";
},
getClassesOfKey(key) {
if (typeof key == "object")
if (key.placeholder)
return "placeholder"
else
return "key " + (key.classes || "");
if (key == "")
return "ph";
return "key";
},
getKeyStyle(key) {
if (key.width)
return {
flex: key.width
}
},
getCaret() {
Expand Down Expand Up @@ -101,7 +153,7 @@
let addChar = null;
if (typeof key == "object") {
if (key.keySet) {
this.changeKeySet(key.keySet);
this.toggleKeySet(key.keySet);
}
else if (key.func) {
switch(key.func) {
Expand Down Expand Up @@ -133,10 +185,14 @@
}
if (addChar) {
let e = document.createEvent("Event");
e.initEvent("keypress", true, true);
e.which = e.keyCode = addChar.charCodeAt();
if (this.input.dispatchEvent(e)) {
if (this.options.useKbEvents) {
let e = document.createEvent("Event");
e.initEvent("keypress", true, true);
e.which = e.keyCode = addChar.charCodeAt();
if (this.input.dispatchEvent(e)) {
text = this.insertChar(caret, text, addChar);
}
} else {
text = this.insertChar(caret, text, addChar);
}
Expand Down Expand Up @@ -203,6 +259,7 @@
//width: $btnW;
height: $height;
line-height: $height;
overflow: hidden;
vertical-align: middle;
border: 1px solid #ccc;
Expand Down Expand Up @@ -233,7 +290,7 @@
} // span
.ph {
.placeholder {
flex: $width / 2;
height: $height;
line-height: $height;
Expand All @@ -244,7 +301,7 @@
}
.space {
flex: 200;
flex: 180;
}
.zero {
Expand Down
66 changes: 47 additions & 19 deletions src/layouts.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,59 +5,87 @@ module.exports = {

'alphaNumeric-mini': {

_meta: {
"default": { keySet: 'default', text: 'abc'},
"alpha": { keySet: 'default', text: 'Abc'},
"shift": { keySet: 'shifted', text: 'ABC'},
"numbers": { keySet: 'numbers', text: '123'},
"space": { key: ' ', text: 'Space', classes: 'space'},
"backspace": { func: 'backspace', classes: 'fa fa-arrow-left'},
"accept": { func: 'accept', text: 'Accept', classes: 'featured'},
"cancel": { func: 'cancel', text: 'Close'}
},

default: [
['q', 'w', 'e', 'r', 't', 'y', 'u', 'i', 'o', 'p'],
['', 'a', 's', 'd', 'f', 'g', 'h', 'j', 'k', 'l', ''],
[{ keySet: 'shifted', text: 'ABC'}, 'z', 'x', 'c', 'v', 'b', 'n', 'm', '.'],
[{ keySet: 'numbers', text: '123'}, '-', { key: ' ', text: 'Space', classes: 'space'}, { func: 'backspace', classes: 'fa fa-arrow-left'}, { func: 'accept', text: 'Accept', classes: 'featured'}, { func: 'cancel', text: 'Close'}]
['{shift}', 'z', 'x', 'c', 'v', 'b', 'n', 'm', '.'],
['{numbers}', '-', '{space}', '{backspace}', '{accept}', '{cancel}']
],

shifted: [
['Q', 'W', 'E', 'R', 'T', 'Y', 'U', 'I', 'O', 'P'],
['', 'A', 'S', 'D', 'F', 'G', 'H', 'J', 'K', 'L',''],
[{ keySet: 'default', text: 'abc'}, 'Z', 'X', 'C', 'V', 'B', 'N', 'M', ','],
[{ keySet: 'numbers', text: '123'}, '_', { key: ' ', text: 'Space', classes: 'space'}, { func: 'backspace', classes: 'fa fa-arrow-left'}, { func: 'accept', text: 'Accept', classes: 'featured'}, { func: 'cancel', text: 'Close'}]
['{default}', 'Z', 'X', 'C', 'V', 'B', 'N', 'M', ','],
['{numbers}', '_', '{space}', '{backspace}', '{accept}', '{cancel}']
],

numbers: [
['1', '2', '3'],
['4', '5', '6'],
['7', '8', '9'],
['', '', { keySet: 'default', text: 'Abc'}, '.', { key: '0', classes: 'zero'}, { func: 'backspace', classes: 'fa fa-arrow-left'}, { func: 'accept', text: 'Accept', classes: 'featured'}, { func: 'cancel', text: 'Close'}]
['', '', '{alpha}', '.', { key: '0', classes: 'zero'}, '{backspace}', '{accept}', '{cancel}']
]
},

'numeric': {

_meta: {
"backspace": { func: 'backspace', classes: 'fa fa-arrow-left'},
"accept": { func: 'accept', text: 'Accept', classes: 'featured'},
"cancel": { func: 'cancel', text: 'Close'}
},

default: [
['1', '2', '3'],
['4', '5', '6'],
['7', '8', '9'],
['_', '-', '.', { key: '0', classes: 'zero'}, { func: 'backspace', classes: 'fa fa-arrow-left'}, { func: 'accept', text: 'Accept', classes: 'featured'}, { func: 'cancel', text: 'Close'}]
['_', '-', '.', { key: '0', classes: 'zero'}, '{backspace}', '{accept}', '{cancel}']
]
},

'alphaNumeric-full': {

_meta: {
"shift": { keySet: 'shifted', text: 'Shift'},
"caps": { keySet: 'capsed', text: 'Caps Lock'},
"space": { key: ' ', text: 'Space', classes: 'space'},
"backspace": { func: 'backspace', classes: 'fa fa-arrow-left'},
"accept": { func: 'accept', text: 'Accept', classes: 'featured'},
"cancel": { func: 'cancel', text: 'Close'}
},

default: [
['`', '1', '2', '3', '4', '5', '6', '7', '8', '9', '0', '-', '=', '<- | Delete'],
['Tab', 'q', 'w', 'e', 'r', 't', 'y', 'u', 'i', 'o', 'p', '[', ']', '\\'],
['Caps', 'a', 's', 'd', 'f', 'g', 'h', 'j', 'k', 'l', ';', '\'', 'Enter'],
['Shift', 'z', 'x', 'c', 'v', 'b', 'n', 'm', ',', '.', '/', 'Shift'],
['Space']
['`', '1', '2', '3', '4', '5', '6', '7', '8', '9', '0', '-', '=', '{backspace}'],
[{ key: '\t', text: 'Tab'}, 'q', 'w', 'e', 'r', 't', 'y', 'u', 'i', 'o', 'p', '[', ']', '\\'],
['{caps}', 'a', 's', 'd', 'f', 'g', 'h', 'j', 'k', 'l', ';', '\'', 'Enter'],
['{shift}', 'z', 'x', 'c', 'v', 'b', 'n', 'm', ',', '.', '/', '{shift}'],
['{space}']
],
shifted: [
['~', '!', '@', '#', '$', '%', '^', '&', '*', '(', ')', '_', '+', 'Delete'],
['~', '!', '@', '#', '$', '%', '^', '&', '*', '(', ')', '_', '+', '{backspace}'],
['Tab', 'Q', 'W', 'E', 'R', 'T', 'Y', 'U', 'I', 'O', 'P', '{', '}', '|'],
['Caps', 'A', 'S', 'D', 'F', 'G', 'H', 'J', 'K', 'L', ':', '"', 'Enter'],
['Shift', 'Z', 'X', 'C', 'V', 'B', 'N', 'M', '<', '>', '?', 'Shift'],
['Space']
['{caps}', 'A', 'S', 'D', 'F', 'G', 'H', 'J', 'K', 'L', ':', '"', 'Enter'],
['{shift}', 'Z', 'X', 'C', 'V', 'B', 'N', 'M', '<', '>', '?', '{shift}'],
['{space}']
],

capsed: [
['`', '1', '2', '3', '4', '5', '6', '7', '8', '9', '0', '-', '=', 'Delete'],
['`', '1', '2', '3', '4', '5', '6', '7', '8', '9', '0', '-', '=', '{backspace}'],
['Tab', 'Q', 'W', 'E', 'R', 'T', 'Y', 'U', 'I', 'O', 'P', '[', ']', '\\'],
['Caps', 'A', 'S', 'D', 'F', 'G', 'H', 'J', 'K', 'L', ';', '\'', 'Enter'],
['Shift', 'Z', 'X', 'C', 'V', 'B', 'N', 'M', ',', '.', '/', 'Shift'],
['Space']
['{caps}', 'A', 'S', 'D', 'F', 'G', 'H', 'J', 'K', 'L', ';', '\'', 'Enter'],
['{shift}', 'Z', 'X', 'C', 'V', 'B', 'N', 'M', ',', '.', '/', '{shift}'],
['{space}']
]
}

Expand Down

0 comments on commit fa21941

Please sign in to comment.