Skip to content

Commit 49d3189

Browse files
author
Marty Wallace
committed
Reference configured delimiters.
1 parent 6217cfb commit 49d3189

File tree

5 files changed

+30
-21
lines changed

5 files changed

+30
-21
lines changed

‎bower.json

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
{
22
"name": "vue-keyboard",
3-
"version": "1.0.0",
4-
"dependencies": {
5-
"vue": "^1.0.26"
6-
},
7-
"main": "dist/vue-keyboard.js"
3+
"version": "1.1.0",
4+
"homepage": "https://github.com/MartyWallace/vue-keyboard",
5+
"main": "dist/vue-keyboard.js",
6+
"license": "MIT",
7+
"ignore": ["package.json", "demo"]
88
}

‎demo/basic.html

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,10 +5,11 @@
55
<title>Keyboard Demo</title>
66
</head>
77
<body>
8-
<keyboard chars="qwertyuiop{clear:clear}|asdfghjkl{backspace:backspace}|zxcvbnm|{space:space}{test:test}" :value.sync="input"></keyboard>
9-
<p>{{ input }}</p>
8+
<keyboard chars="qwertyuiop{clear:clear}|asdfghjkl{backspace}|zxcvbnm|{space:space}{test:test}" :value.sync="input"></keyboard>
9+
<p>${ input }</p>
1010

11-
<script src="../bower_components/vue/dist/vue.min.js"></script>
11+
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.26/vue.min.js"></script>
12+
<script>Vue.config.delimiters = ['${', '}'];</script>
1213
<script src="../dist/vue-keyboard.js"></script>
1314

1415
<script>

‎dist/vue-keyboard.js

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "vue-keyboard",
3-
"version": "1.0.0",
3+
"version": "1.1.0",
44
"devDependencies": {
55
"gulp": "^3.9.1",
66
"gulp-uglify": "1.5.*",

‎src/vue-keyboard.js

Lines changed: 19 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,11 @@
11
(() => {
2-
window.VueKeyboard = Vue.component('keyboard', Vue.extend({
3-
template: '<div class="keyboard"><div v-for="row in renderChars()"><button v-for="char in row" :class="char.class" @click="char.action">{{ char.value }}</button></div></div>',
2+
window.VueKeyboard = Vue.component('keyboard', {
3+
template: (() => {
4+
const a = Vue.config.delimiters[0];
5+
const b = Vue.config.delimiters[1];
6+
7+
return '<div class="keyboard"><div v-for="row in renderChars()"><button v-for="btn in row" :class="btn.class" @click="btn.action">' + a + ' btn.value ' + b + '</button></div></div>';
8+
})(),
49

510
props: {
611
chars: {
@@ -26,19 +31,21 @@
2631
if (char === '{') {
2732
token = '';
2833
} else if (char === '}') {
29-
let command = (/(\w+):(\w+)/g).exec(token);
30-
let action = null;
34+
let command = token.split(':');
35+
let text = command.length > 1 ? command[0] : '';
36+
let action = command.length > 1 ? command[1] : command[0];
37+
let method = null;
3138

32-
if (this.hasOwnProperty(command[2])) {
33-
action = this[command[2]].bind(this);
39+
if (this.hasOwnProperty(action)) {
40+
method = this[action].bind(this);
3441
} else {
35-
action = this.$dispatch.bind(this, command[2], this);
42+
method = this.$dispatch.bind(this, action, this);
3643
}
3744

3845
buttons.push({
39-
class: 'action-' + command[2].replace(/\s+/g, '-').toLowerCase(),
40-
action: action,
41-
value: command[1]
46+
class: 'action-' + action.replace(/\s+/g, '-').toLowerCase(),
47+
action: method,
48+
value: text
4249
});
4350

4451
token = null;
@@ -47,6 +54,7 @@
4754
token += char;
4855
} else {
4956
buttons.push({
57+
class: 'char-' + char,
5058
action: this.append.bind(this, char),
5159
value: char
5260
});
@@ -74,5 +82,5 @@
7482
this.value = '';
7583
}
7684
}
77-
}));
85+
});
7886
})();

0 commit comments

Comments
 (0)