<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div id="app">
<div class="container">
<div class="jumbotron">
<h1>Arabic Keyboard</h1>
<Screen></Screen>
<Keyboard
:numerals="numerals"
:keys="keys"
:special="special"
:remaining="remaining"
>
</Keyboard>
</div>
</div>
</div>
<template id="screen">
<div id="screen-component">
<textarea placeholder="...Waiting for input" readonly dir="rtl" class="form-control" rows="5" autofocus>{{letters}}</textarea>
</div>
</template>
<template id="keyboard">
<div id="keyboard-component">
<tr>
<div id="numbers">
<span v-for="number in numerals">
<button id="nums" @click="addLetter(number.l)">{{number.l}}</button>
</span>
</div><br>
<div id="keys">
<span v-for="letter in keys">
<button id="key" @click="addLetter(letter.l)">{{letter.l}}</button>
</span>
</div>
<div id="sp">
<span v-for="letter in special">
<button id="special" @click="addLetter(letter.k)">{{letter.k}}</button>
</span>
</div>
</tr>
</div>
</template>
textarea{
resize: none;
}
.form-control{
cursor: text !important;
background-color: white !important;
font-size: 30px !important;
border: 1px solid darkgray !important;
box-shadow: 2px 2px 2px gray !important;
}
#keyboard-component{
margin-top: 15px;
}
h1{
text-align: center;
font-family: 'Lato', sans-serif !important;
color: black !important;
}
#key{
width: 90px;
height: 50px;
margin-left: 5px;
margin-top: 5px;
text-shadow: 2 2px 2 lightgray;
color: white;
font-size: 25px;
font-weight: bolder;
background-color: black;
border-radius: 5px;
border: 1px solid darkgray;
border: 1px solid darkgray;
box-shadow: 5px 5px 10px gray;
}
#sp{
margin-left: 20%;
margin-top: 10px;
}
#nums{
width: 90px;
height: 50px;
margin-left: 5px;
margin-top: 5px;
text-shadow: 2 2px 2 lightgray;
color: white;
font-size: 25px;
font-weight: bolder;
background-color: black;
border-radius: 5px;
border: 1px solid darkgray;
box-shadow: 5px 5px 10px gray;
}
#special{
width: 585px;
height: 50px;
margin-top: 5px;
text-shadow: 2 2px 2 lightgray;
color: white;
font-size: 25px;
font-weight: bolder;
background-color: black;
border-radius: 5px;
border: 1px solid darkgray;
box-shadow: 5px 5px 10px gray;
}
::-webkit-input-placeholder {
text-align: center;
}
:-moz-placeholder { /* Firefox 18- */
text-align: center;
}
::-moz-placeholder { /* Firefox 19+ */
text-align: center;
}
:-ms-input-placeholder {
text-align: center;
}
const KEYS = [
{l: 'ض'}, {l: 'ص'}, {l: 'ق'}, {l: 'ف'}, {l: 'غ'}, {l: 'ع'}, {l: 'ه'}, {l: 'خ'}, {l: 'ح'}, {l: 'ج'},
{l: 'ش'}, {l: 'س'}, {l: 'ي'}, {l: 'ب'}, {l: 'ل'}, {l: 'ا'}, {l: 'ت'}, {l: 'ن'}, {l: 'م'}, {l: 'ك'},
{l: 'ظ'}, {l: 'ط'}, {l: 'ذ'}, {l: 'د'}, {l: 'ز'}, {l: 'ر'}, {l: 'و'}, {l: 'ة'}, {l: 'ث'}, {l: 'ى'},
{l: 'Clear'},{l: '!'},{l: '.'},{l: 'ئ'}, {l: 'ء'}, {l: 'ؤ'}, {l: 'لا'}, {l: '،'},{l: '؟'},{l: 'Delete'}
]
const NUMERALS = [
{l: '١'}, {l: '٢'}, {l: '٣'}, {l: '٤'}, {l: '٥'}, {l: '٦'}, {l: '٧'}, {l: '٨'}, {l: '٩'}, {l: '٠'}
]
const SPECIAL_KEYS = [
{k: 'Space'}
]
var store = {
state: {
words: []
},
clearScreen: function(){
return this.state.words.splice(0)
},
backspace: function(){
var position = this.state.words.length
return this.state.words.splice(position - 1, 1)
}
}
Vue.component('Screen', {
template: '#screen',
data: function() {
return {
words: store.state.words,
}
},
computed: {
letters: function(){
return this.words.map(function(word){
return word
}).join('')
}
}
})
Vue.component('Keyboard', {
props: ['numerals', 'keys', 'special', 'remaining'],
template: '#keyboard',
data: function(){
return {
words: store.state.words,
}
},
methods:{
addLetter: function(letter){
if(letter==='Clear'){
store.clearScreen()
}else if(letter==="Delete"){
store.backspace()
}else if(letter==='Space'){
this.words.push(' ')
}
else{
this.words.push(letter)
}
}
}
})
vm = new Vue({
el: "#app",
data: {
numerals: NUMERALS,
keys: KEYS,
special: SPECIAL_KEYS,
}
})
