69 lines
1.8 KiB
Vue
69 lines
1.8 KiB
Vue
<template>
|
|
<div class="wordCounter">
|
|
<span class="words"><u>{{ __('Mots') }}</u> : <b>{{ words }}</b></span>
|
|
<span class="chars"><u>{{ __('Caractères') }}</u> : <b>{{ chars }}</b></span>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
mounted() {
|
|
let data = JSON.parse(this.$attrs.json)
|
|
this.id = data.id
|
|
},
|
|
data() {
|
|
return {
|
|
id: null,
|
|
input: null,
|
|
words: 0,
|
|
chars: 0,
|
|
emitTimer : null
|
|
}
|
|
},
|
|
watch: {
|
|
id() {
|
|
if (!this.id) {
|
|
console.error('Missing ID')
|
|
return;
|
|
}
|
|
this.input = document.getElementById(this.id)
|
|
},
|
|
input() {
|
|
this.input.addEventListener('input', (e) => this.updateValues(e.target.value))
|
|
this.updateValues(this.input.value)
|
|
}
|
|
},
|
|
methods: {
|
|
updateValues(string) {
|
|
let chars, words
|
|
[words, chars] = this.calculateValues(string)
|
|
this.words = words
|
|
this.chars = chars
|
|
},
|
|
calculateValues(string) {
|
|
const arr = string.split(' ')
|
|
return [ arr.filter(word => word !== '').length, string.length ]
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.wordCounter {
|
|
display:inline-block;
|
|
color: initial;
|
|
border: 1px solid rgb(196, 196, 196);
|
|
border-bottom: 0;
|
|
background-color: #fafafa;
|
|
position: relative;
|
|
width: 100%;
|
|
.words {
|
|
position: relative;
|
|
left: 2rem;
|
|
}
|
|
.chars {
|
|
position: absolute;
|
|
left: 9rem;
|
|
}
|
|
}
|
|
</style>
|