Merge branch 'feature/#65-arabic-syriac-keyboard' into 'develop'

feat: implement keyboard with arabic and syriac letters

Closes #65

See merge request !25

package.json

@@ -24,6 +24,8 @@
     "material-design-icons-iconfont": "^6.1.0",
     "node-sass": "^4.14.1",
     "sass-loader": "^7.3.1",
+    "simple-keyboard": "^3.2.11",
+    "simple-keyboard-layouts": "^3.0.138",
     "standard-version": "^9.3.0",
     "vuepress": "^1.8.2",
     "vuetify": "^2.5.3"

src/.vuepress/components/Keyboard.vue

+<template>
+  <div class="simple-keyboard"></div>
+</template>
+
+<script>
+import Keyboard from 'simple-keyboard';
+import latinLayout from 'simple-keyboard-layouts/build/layouts/english';
+import arabicLayout from "simple-keyboard-layouts/build/layouts/arabic";
+
+import 'simple-keyboard/build/css/index.css';
+
+export default {
+  name: 'Keyboard',
+  props: {
+    input: {
+      type: String
+    },
+    layout: {
+      type: String
+    }
+  },
+  data: () => ({
+    keyboard: null,
+    syriacLayout: {
+      layout: {
+        // See: https://syriaca.org/geo/$nav-base/resources/keyboard/syr/syr.js
+        default: [
+          "| 1 2 3 4 5 6 7 8 9 0",
+          "\u0714 \u0728 \u0716 \u0729 \u0726 \u071b \u0725 \u0717 \u071e \u071a \u0713 \u0715 \u0706",
+          "\u072b \u0723 \u071d \u0712 \u0720 \u0710 \u072c \u0722 \u0721 \u071f \u071b {enter}",
+          "\u0724 \u072a \u0727 \u0700 . \u0718 \u0719 \u0707",
+        ],
+      },
+    }
+  }),
+  mounted() {
+    this.keyboard = new Keyboard({
+      onChange: this.onChange,
+      onKeyPress: this.onKeyPress,
+      layout: arabicLayout.layout
+    });
+    this.keyboard.setInput(this.input);
+  },
+  methods: {
+    onChange(input) {
+      this.$emit('change', input);
+    },
+    onKeyPress(button) {
+      this.$emit('key-press', button);
+      if (button === '{shift}' || button === '{lock}') this.handleShift();
+    },
+    handleShift() {
+      let currentLayout = this.keyboard.options.layoutName;
+      let shiftToggle = currentLayout === 'default' ? 'shift' : 'default';
+
+      this.keyboard.setOptions({
+        layoutName: shiftToggle
+      });
+    }
+  },
+  watch: {
+    input(value) {
+      this.keyboard.setInput(value);
+    },
+    layout(value) {
+      let layout = latinLayout.layout;
+      if (value === 'arabic') {
+        layout = arabicLayout.layout;
+      } else if (value === 'syriac') {
+        layout = this.syriacLayout.layout;
+      }
+
+      this.keyboard.setOptions({ layout });
+    }
+  }
+};
+</script>
+
+<style scoped>
+.simple-keyboard {
+  padding: 8px;
+  border-radius: 0;
+}
+</style>

src/.vuepress/components/SearchInput.vue

 <template>
   <form action="">
-    <v-container>
-      <v-row>
+      <v-row class="mb-5">
         <v-col
           cols="6"
+          class="d-flex align-center input-container"
         >
-          <!-- TODO: provide input for characters other than latin -->
           <v-text-field
+            autofocus
             v-model="input"
             label="Your Search String"
             outlined
             dense
             hide-details
+            reverse
+            ref="searchTextField"
           ></v-text-field>
+          <v-btn
+            tile
+            color="primary"
+            class="ml-5"
+            @click="toggleKeyboard"
+          >
+            <v-icon dark>mdi-keyboard</v-icon>
+          </v-btn>
+          <v-card
+            class="keyboard-container"
+            v-if="showKeyboard"
+            elevation="8"
+          >
+            <div class="button-container pa-2">
+              <v-btn-toggle v-model="selectedKeyboardLayout">
+                <v-btn small>Arabic</v-btn>
+                <v-btn small>Syriac</v-btn>
+              </v-btn-toggle>
+              <v-btn icon class="button-close" @click="closeKeyboard">
+                <v-icon>mdi-close</v-icon>
+              </v-btn>
+            </div>
+            <Keyboard
+              @change="onChange"
+              :input="input"
+              :layout="keyboardLayouts[selectedKeyboardLayout]"
+            />
+          </v-card>
         </v-col>
         <v-col
           cols="2"
@@ -27,23 +57,69 @@
           </v-btn>
         </v-col>
       </v-row>
-    </v-container>
   </form>
 </template>
 <script>
+import Keyboard from "./Keyboard";
 export default {
+  components: { Keyboard },
   data() {
     return {
-      input: ''
+      input: '',
+      showKeyboard: false,
+      selectedKeyboardLayout: 0,
+      keyboardLayouts: ['arabic', 'syriac']
     }
   },
   methods: {
     emitSearch() {
       this.$emit('search', this.input);
+    },
+    onChange(input) {
+      this.input = input;
+      setTimeout(() => this.$refs.searchTextField.focus());
+    },
+    toggleKeyboard() {
+      this.showKeyboard = !this.showKeyboard;
+
+      if (this.showKeyboard) {
+        this.$refs.searchTextField.focus();
+      } else {
+        this.$refs.searchTextField.blur();
+      }
+    },
+    closeKeyboard() {
+      this.showKeyboard = false;
     }
   }
 }
 </script>
 
 <style lang="scss" scoped>
+@import '~vuetify/src/styles/settings/variables.scss';
+
+.input-container {
+  position: relative;
+}
+.keyboard-container {
+  position: absolute;
+  z-index: 100;
+  width: 600px;
+  top: 100%;
+  max-width: none;
+
+  @media #{map-get($display-breakpoints, 'sm-and-down')} {
+    left: 0;
+    width: 100vw;
+  }
+
+  .button-container {
+    flex: 1;
+    display: flex;
+    align-items: center;
+  }
+  .button-close {
+    margin-left: auto;
+  }
+}
 </style>