Adding optional virtual keyboard to searchbox (#2952)

build.xml

@@ -383,6 +383,10 @@
         <exclude name="themes/default-dark/" />
       </fileset>
     </copy>
+    <!-- simple-keyboard -->
+    <copy file="${srcdir}/node_modules/simple-keyboard/build/index.js" todir="${srcdir}/themes/bootstrap3/js/vendor/simple-keyboard" overwrite="true" />
+    <copy file="${srcdir}/node_modules/simple-keyboard/build/css/index.css" todir="${srcdir}/themes/bootstrap3/css/vendor/simple-keyboard" overwrite="true" />
+    <copy file="${srcdir}/node_modules/simple-keyboard-layouts/build/index.js" todir="${srcdir}/themes/bootstrap3/js/vendor/simple-keyboard-layouts" overwrite="true" />
     <!-- vanilla-cookieconsent -->
     <copy file="${srcdir}/node_modules/vanilla-cookieconsent/dist/cookieconsent.umd.js" todir="${srcdir}/themes/bootstrap3/js/vendor" overwrite="true" />
   </target>

config/vufind/searchbox.ini

@@ -56,3 +56,50 @@ type[] = External
 target[] = "http://www.google.com/search?q="
 label[] = Google
 group[] = "Other Sites"
+
+; Uncomment one or more of the lines below to enable virtual on-screen keyboard support
+; using the specified layout(s).
+[VirtualKeyboard]
+;layouts[] = "arabic"
+;layouts[] = "assamese"
+;layouts[] = "balochi"
+;layouts[] = "belarusian"
+;layouts[] = "bengali"
+;layouts[] = "brazilian"
+;layouts[] = "burmese"
+;layouts[] = "chinese"
+;layouts[] = "czech"
+;layouts[] = "english"
+;layouts[] = "farsi"
+;layouts[] = "french"
+;layouts[] = "georgian"
+;layouts[] = "german"
+;layouts[] = "gilaki"
+;layouts[] = "greek"
+;layouts[] = "hebrew"
+;layouts[] = "hindi"
+;layouts[] = "hungarian"
+;layouts[] = "italian"
+;layouts[] = "japanese"
+;layouts[] = "kannada"
+;layouts[] = "korean"
+;layouts[] = "kurdish"
+;layouts[] = "malayalm"
+;layouts[] = "nigerian"
+;layouts[] = "nko"
+;layouts[] = "norwegian"
+;layouts[] = "odia"
+;layouts[] = "polish"
+;layouts[] = "punjabi"
+;layouts[] = "russian"
+;layouts[] = "russianOld"
+;layouts[] = "sindhi"
+;layouts[] = "spanish"
+;layouts[] = "swedish"
+;layouts[] = "telugu"
+;layouts[] = "thai"
+;layouts[] = "turkish"
+;layouts[] = "ukrainian"
+;layouts[] = "urdu"
+;layouts[] = "urduStandard"
+;layouts[] = "uyghur"

module/VuFind/src/VuFind/View/Helper/Root/SearchBox.php

@@ -273,6 +273,16 @@ public function getPlaceholderText($activeSearchClass)
         return null;
     }
 
+    /**
+     * Get an array of the configured virtual keyboard layouts
+     *
+     * @return array
+     */
+    public function getKeyboardLayouts()
+    {
+        return $this->config['VirtualKeyboard']['layouts'] ?? [];
+    }
+
     /**
      * Get an array of information on search handlers for use in generating a
      * drop-down or hidden field. Returns an array of arrays with 'value', 'label',

package.json

@@ -47,6 +47,8 @@
     "grunt-contrib-watch": "^1.1.0",
     "jshint": "^2.13.4",
     "jstree": "3.3.15",
+    "simple-keyboard": "^3.6.0",
+    "simple-keyboard-layouts": "^3.0.0",
     "vanilla-cookieconsent": "3.0.0-rc.16"
   }
 }

themes/bootprint3/less/search.less

@@ -41,7 +41,10 @@
   .btn-primary[multiple],
   .form-control[multiple] { height: auto; }
   @media (min-width: 768px) {
-    .search-query { width: 400px; }
+    .input-group {
+      width: 400px;
+    }
+    .form-control.search-query { width: 400px; }
   }
   .nav-tabs {
     border-bottom: 0;
@@ -65,6 +68,44 @@
     text-decoration: none;
     z-index: 5;
   }
+
+  .keyboard-selection {
+    button.dropdown-toggle {
+      color: @input-color;
+      background-color: white;
+
+      &:hover, &:focus {
+        color: white;
+        background-color: @brand-primary;
+      }
+    }
+
+    &:not(.open) {
+      .activated:not(:hover){
+        background: lighten(@brand-primary, 35%);
+      }
+    }
+
+    .btn-primary {
+      height: 20px;
+    }
+  }
+}
+
+.keyboard-box {
+  width: 85%;
+
+  @media (min-width: 768px) {
+    width: 635px;
+  }
+
+  @media (min-width: 992px) {
+    width: 832px;
+  }
+
+  @media (min-width: 1200px) {
+    width: 832px;
+  }
 }
 
 .top-facets .facet a { vertical-align: middle; }

themes/bootprint3/scss/search.scss

@@ -41,7 +41,10 @@
   .btn-primary[multiple],
   .form-control[multiple] { height: auto; }
   @media (min-width: 768px) {
-    .search-query { width: 400px; }
+    .input-group {
+      width: 400px;
+    }
+    .form-control.search-query { width: 400px; }
   }
   .nav-tabs {
     border-bottom: 0;
@@ -65,6 +68,44 @@
     text-decoration: none;
     z-index: 5;
   }
+
+  .keyboard-selection {
+    button.dropdown-toggle {
+      color: $input-color;
+      background-color: white;
+
+      &:hover, &:focus {
+        color: white;
+        background-color: $brand-primary;
+      }
+    }
+
+    &:not(.open) {
+      .activated:not(:hover){
+        background: lighten($brand-primary, 35%);
+      }
+    }
+
+    .btn-primary {
+      height: 20px;
+    }
+  }
+}
+
+.keyboard-box {
+  width: 85%;
+
+  @media (min-width: 768px) {
+    width: 635px;
+  }
+
+  @media (min-width: 992px) {
+    width: 832px;
+  }
+
+  @media (min-width: 1200px) {
+    width: 832px;
+  }
 }
 
 .top-facets .facet a { vertical-align: middle; }