chore: merge develop into issue branch

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/api/api.js

@@ -15,33 +15,15 @@ class ApiService {
   }
 
   async search(value) {
-    // TODO: Uncomment this when the real search endpoint is ready
-    // return this.request('/search', 'POST', {
-    //   query: {
-    //     simple_query_string: {
-    //       query: value
-    //     }
-    //   },
-    //   from: 0,
-    //   size: 10
-    // })
-    return Promise.resolve({
-      "hits" : {
-        "total" : {
-          "value" : 2
-        },
-        "hits" : [{
-          "item": "/api/textapi/ahikar/syriac/3r678-186v/latest/item.json",
-          "label": "Cod. Arab. 236 Copenhagen",
-          "n": "123v"
-        }, {
-          "item": "/api/textapi/ahikar/syriac/3r678-126r/latest/item.json",
-          "label": "Cod. Arab. 236 Copenhagen",
-          "n": "126r"
-        }]
+    return this.request('/search', 'POST', {
+      query: {
+        simple_query_string: {
+          query: value
+        }
       },
-      "took" : 1
-    });
+      from: 0,
+      size: 10
+    })
   }
 
   async request (url, method, data, params) {
@@ -54,4 +36,4 @@ class ApiService {
   }
 }
 
-export default new ApiService('/');
+export default new ApiService('https://ahikar-dev.sub.uni-goettingen.de/api');

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-top"
         >
-          <!-- TODO: provide input for characters other than latin -->
           <v-text-field
+            autofocus
             v-model="input"
             label="Your Search String"
             hint="Operators: OR, AND and *"
             persistent-hint
             outlined
             dense
+            reverse
+            ref="searchTextField"
           ></v-text-field>
+          <v-btn
+            tile
+            large
+            height="40px"
+            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"
@@ -21,7 +53,7 @@
         >
           <v-btn
             tile
-            large
+            height="40px"
             color="primary"
             @click="emitSearch"
           >
@@ -29,23 +61,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>

src/.vuepress/components/SearchResultList.vue

@@ -6,10 +6,10 @@
     >
       <v-list-item v-for="item in items" :key="item.item">
         <v-list-item-content>
-          <a :href="viewerBaseUrl + '/#/?itemurl=' + item.item" target="_blank">
-            <v-list-item-title>{{item.n}}</v-list-item-title>
-            <v-list-item-subtitle>{{item.label}}</v-list-item-subtitle>
-            <v-list-item-subtitle>Manifest: manifest title</v-list-item-subtitle>
+          <a :href="getItemUrl(item)" target="_blank">
+            <v-list-item-title>{{item.label}}</v-list-item-title>
+            <v-list-item-subtitle>Sheet {{item.n}}</v-list-item-subtitle>
+            <v-list-item-subtitle>{{getLanguage(item.lang)}}</v-list-item-subtitle>
           </a>
         </v-list-item-content>
       </v-list-item>
@@ -27,19 +27,38 @@
 export default {
   data() {
     return {
-      page: 1
+      page: 1,
+      languagesMap: {
+        ara: 'Arabic',
+        syc: 'Syriac',
+      }
     }
   },
   computed: {
     viewerBaseUrl() {
       return 'https://ahikar-dev.sub.uni-goettingen.de';
-    }
+    },
   },
   props: {
     items: {
       type: Array,
       default: []
     }
+  },
+  methods: {
+    getLanguage(code) {
+      return this.languagesMap[code] || 'Unknown';
+    },
+    getItemUrl(item) {
+      let language = '';
+
+      if (item.lang === 'ara') {
+        language = 'arabic-karshuni';
+      } else if (item.lang === 'syc') {
+        language = 'syriac'
+      }
+      return this.viewerBaseUrl + '/' + language + '/#/?itemurl=' + item.item
+    }
   }
 }
 </script>