jschaufuss/DiceCloud
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Health bar refactored to not use keycodes, which are deprecated

Browse Source
This commit is contained in:
Stefan Zermatten
2020-03-09 12:08:39 +02:00
parent ea5ac42ec0
commit 43a08eb034
1 changed files with 44 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

70
app/imports/ui/properties/components/attributes/HealthBar.vue
View File

@@ -49,14 +49,20 @@
> >
<v-spacer /> <v-spacer />
<v-btn-toggle <v-btn-toggle
v-model="operation" :value="operation === 'add' ? 0: operation === 'subtract' ? 1 : null"
@click="$refs.editInput.focus()" @click="$refs.editInput.focus()"
class="mr-2" class="mr-2"
> >
<v-btn @click="$nextTick(() => $refs.editInput.focus())" class="filled"> <v-btn
@click="toggleAdd(); $nextTick(() => $refs.editInput.focus())"
class="filled"
>
<v-icon>add</v-icon> <v-icon>add</v-icon>
</v-btn> </v-btn>
<v-btn @click="$nextTick(() => $refs.editInput.focus())" class="filled"> <v-btn
@click="toggleSubtract(); $nextTick(() => $refs.editInput.focus())"
class="filled"
>
<v-icon>remove</v-icon> <v-icon>remove</v-icon>
</v-btn> </v-btn>
</v-btn-toggle> </v-btn-toggle>
@@ -69,16 +75,9 @@
style="max-width: 120px;" style="max-width: 120px;"
min="0" min="0"
:value="editValue" :value="editValue"
:prepend-inner-icon="operation === 0 ? 'add' : operation === 1 ? 'remove' : 'forward'" :prepend-inner-icon="operationIcon(operation)"
@focus="$event.target.select()" @focus="$event.target.select()"
@keyup.enter="commitEdit" @keypress="keypress"
@keypress.43="
operation === 0 ? (operation = null) : (operation = 0)
"
@keypress.45="
operation === 1 ? (operation = null) : (operation = 1)
"
@keypress="rejectNonNumbers($event)"
> >
</v-text-field> </v-text-field>
<v-btn small fab @click="commitEdit" class="filled" color="red"> <v-btn small fab @click="commitEdit" class="filled" color="red">
@@ -103,7 +102,7 @@
return { return {
editing: false, editing: false,
editValue: 0, editValue: 0,
operation: null, operation: 3,
hover: false, hover: false,
}; };
}, },
@@ -116,7 +115,7 @@
methods: { methods: {
edit() { edit() {
this.editing = true; this.editing = true;
this.operation = null; this.operation = 'set';
this.editValue = this.value; this.editValue = this.value;
this.$nextTick(function() { this.$nextTick(function() {
this.$refs.editInput.focus(); this.$refs.editInput.focus();
@@ -128,24 +127,43 @@
commitEdit() { commitEdit() {
this.editing = false; this.editing = false;
let value = +this.$refs.editInput.lazyValue; let value = +this.$refs.editInput.lazyValue;
let type = this.operation === null ? 'set' : 'increment'; if (this.operation === 'add') {
if (this.operation === 0) {
value = -value; value = -value;
} }
let type = this.operation === 'set' ? 'set' : 'increment';
this.$emit('change', { type, value }); this.$emit('change', { type, value });
}, },
rejectNonNumbers: function(evt) { operationIcon(operation) {
evt = evt ? evt : window.event; switch (operation) {
var charCode = evt.which ? evt.which : evt.keyCode; case 'set':
if ( return 'forward';
(charCode > 31 && (charCode < 48 || charCode > 57)) || case 'add':
charCode === 46 return 'add';
) { case 'subtract':
evt.preventDefault(); return 'remove';
} else {
return true;
} }
}, },
toggleAdd(){
this.operation = (this.operation === 'add') ? 'set': 'add';
},
toggleSubtract(){
this.operation = (this.operation === 'subtract') ? 'set': 'subtract';
},
keypress(event) {
let digitsOnly = /[0-9]/;
let key = event.key;
if (key === '+') {
this.toggleAdd();
event.preventDefault();
} else if (key === '-') {
this.toggleSubtract();
event.preventDefault();
} else if (key === 'Enter') {
this.commitEdit();
} else if (!digitsOnly.test(key)){
event.preventDefault();
}
}
}, },
}; };
</script> </script>