commit f193cf942f9481684c939465db4df83c75161548
Author: Petr Lukašík <lukasik@rtsoft.cz>
Date:   Thu May 23 14:35:28 2019 +0200

    předěláno jako komponenta, upraven JS

diff --git a/app/FrontModule/component/Keyboard/Keyboard.latte b/app/FrontModule/component/Keyboard/Keyboard.latte
new file mode 100644
index 0000000..dab64c4
--- /dev/null
+++ b/app/FrontModule/component/Keyboard/Keyboard.latte
@@ -0,0 +1,170 @@
+<div class="card" style="width: 24.5rem;">
+    <div class="card-body">
+        <div id="keyboard">
+            <div class="display-5" style="margin-bottom: 0.5rem;">Keyboard</div>
+            <div class="cont">
+                <div id="keyboard-div">
+                    <table>
+                        <tbody>
+                        <tr>
+                            <td><input class="btn btn-sm btn-outline-dark" type="button" value="á"
+                                       onclick="keyboardRead(this.value)"></td>
+                            <td><input class="btn btn-sm btn-outline-dark" type="button" value="é"
+                                       onclick="keyboardRead(this.value)"></td>
+                            <td><input class="btn btn-sm btn-outline-dark" type="button" value="í"
+                                       onclick="keyboardRead(this.value)"></td>
+                            <td><input class="btn btn-sm btn-outline-dark" type="button" value="ú"
+                                       onclick="keyboardRead(this.value)"></td>
+                            <td></td>
+                            <td></td>
+                            <td><input class="btn btn-sm btn-outline-dark" type="button" value="Á"
+                                       onclick="keyboardRead(this.value)"></td>
+                            <td><input class="btn btn-sm btn-outline-dark" type="button" value="É"
+                                       onclick="keyboardRead(this.value)"></td>
+                            <td><input class="btn btn-sm btn-outline-dark" type="button" value="Í"
+                                       onclick="keyboardRead(this.value)"></td>
+                            <td><input class="btn btn-sm btn-outline-dark" type="button" value="Ú"
+                                       onclick="keyboardRead(this.value)"></td>
+                        </tr>
+                        <tr>
+                            <td><input class="btn btn-sm btn-outline-dark" type="button" value="à"
+                                       onclick="keyboardRead(this.value)"></td>
+                            <td><input class="btn btn-sm btn-outline-dark" type="button" value="è"
+                                       onclick="keyboardRead(this.value)"></td>
+                            <td><input class="btn btn-sm btn-outline-dark" type="button" value="ì"
+                                       onclick="keyboardRead(this.value)"></td>
+                            <td><input class="btn btn-sm btn-outline-dark" type="button" value="ù"
+                                       onclick="keyboardRead(this.value)"></td>
+                            <td><input class="btn btn-sm btn-outline-dark" type="button" value="ò"
+                                       onclick="keyboardRead(this.value)"></td>
+                            <td></td>
+                            <td><input class="btn btn-sm btn-outline-dark" type="button" value="À"
+                                       onclick="keyboardRead(this.value)"></td>
+                            <td><input class="btn btn-sm btn-outline-dark" type="button" value="È"
+                                       onclick="keyboardRead(this.value)"></td>
+                            <td><input class="btn btn-sm btn-outline-dark" type="button" value="Ì"
+                                       onclick="keyboardRead(this.value)"></td>
+                            <td><input class="btn btn-sm btn-outline-dark" type="button" value="Ù"
+                                       onclick="keyboardRead(this.value)"></td>
+                            <td><input class="btn btn-sm btn-outline-dark" type="button" value="Ò"
+                                       onclick="keyboardRead(this.value)"></td>
+                        </tr>
+                        <tr>
+                            <td><input class="btn btn-sm btn-outline-dark" type="button" value="â"
+                                       onclick="keyboardRead(this.value)"></td>
+                            <td><input class="btn btn-sm btn-outline-dark" type="button" value="ê"
+                                       onclick="keyboardRead(this.value)"></td>
+                            <td><input class="btn btn-sm btn-outline-dark" type="button" value="î"
+                                       onclick="keyboardRead(this.value)"></td>
+                            <td><input class="btn btn-sm btn-outline-dark" type="button" value="û"
+                                       onclick="keyboardRead(this.value)"></td>
+                            <td><input class="btn btn-sm btn-outline-dark" type="button" value="ô"
+                                       onclick="keyboardRead(this.value)"></td>
+                            <td></td>
+                            <td><input class="btn btn-sm btn-outline-dark" type="button" value="Â"
+                                       onclick="keyboardRead(this.value)"></td>
+                            <td><input class="btn btn-sm btn-outline-dark" type="button" value="Ê"
+                                       onclick="keyboardRead(this.value)"></td>
+                            <td><input class="btn btn-sm btn-outline-dark" type="button" value="Û"
+                                       onclick="keyboardRead(this.value)"></td>
+                            <td><input class="btn btn-sm btn-outline-dark" type="button" value="Ô"
+                                       onclick="keyboardRead(this.value)"></td>
+                            <td><input class="btn btn-sm btn-outline-dark" type="button" value="⌈"
+                                       onclick="keyboardRead(this.value)">
+                                <input class="btn btn-sm btn-outline-dark" type="button" value="⌉"
+                                       onclick="keyboardRead(this.value)"></td>
+                        </tr>
+
+
+                        <tr>
+                            <td><input class="btn btn-sm btn-outline-dark" type="button" value="ā"
+                                       onclick="keyboardRead(this.value)"></td>
+                            <td><input class="btn btn-sm btn-outline-dark" type="button" value="ē"
+                                       onclick="keyboardRead(this.value)"></td>
+                            <td><input class="btn btn-sm btn-outline-dark" type="button" value="ī"
+                                       onclick="keyboardRead(this.value)"></td>
+                            <td><input class="btn btn-sm btn-outline-dark" type="button" value="ū"
+                                       onclick="keyboardRead(this.value)"></td>
+                            <td><input class="btn btn-sm btn-outline-dark" type="button" value="ō"
+                                       onclick="keyboardRead(this.value)"></td>
+                            <td></td>
+                            <td><input class="btn btn-sm btn-outline-dark" type="button" value="Ā"
+                                       onclick="keyboardRead(this.value)"></td>
+                            <td><input class="btn btn-sm btn-outline-dark" type="button" value="Ē"
+                                       onclick="keyboardRead(this.value)"></td>
+                            <td><input class="btn btn-sm btn-outline-dark" type="button" value="Ī"
+                                       onclick="keyboardRead(this.value)"></td>
+                            <td><input class="btn btn-sm btn-outline-dark" type="button" value="Ū"
+                                       onclick="keyboardRead(this.value)"></td>
+                            <td><input class="btn btn-sm btn-outline-dark" type="button" value="Ō"
+                                       onclick="keyboardRead(this.value)"></td>
+                        </tr>
+                        <tr>
+                            <td><input class="btn btn-sm btn-outline-dark" type="button" value="ʾ"
+                                       onclick="keyboardRead(this.value)"></td>
+                            <td><input class="btn btn-sm btn-outline-dark" type="button" value="ʿ"
+                                       onclick="keyboardRead(this.value)"></td>
+                            <td><input class="btn btn-sm btn-outline-dark" type="button" value="ṣ"
+                                       onclick="keyboardRead(this.value)"></td>
+                            <td><input class="btn btn-sm btn-outline-dark" type="button" value="š"
+                                       onclick="keyboardRead(this.value)"></td>
+                            <td><input class="btn btn-sm btn-outline-dark" type="button" value="ṭ"
+                                       onclick="keyboardRead(this.value)"></td>
+                            <td><input class="btn btn-sm btn-outline-dark" type="button" value="ḫ"
+                                       onclick="keyboardRead(this.value)"></td>
+                            <td><input class="btn btn-sm btn-outline-dark" type="button" value="Ṣ"
+                                       onclick="keyboardRead(this.value)"></td>
+                            <td><input class="btn btn-sm btn-outline-dark" type="button" value="Š"
+                                       onclick="keyboardRead(this.value)"></td>
+                            <td><input class="btn btn-sm btn-outline-dark" type="button" value="Ṭ"
+                                       onclick="keyboardRead(this.value)"></td>
+                            <td><input class="btn btn-sm btn-outline-dark" type="button" value="Ḫ"
+                                       onclick="keyboardRead(this.value)"></td>
+                            <td><input class="btn btn-sm btn-outline-dark" type="button" value="["
+                                       onclick="keyboardRead(this.value)">
+                                <input class="btn btn-sm btn-outline-dark" type="button" value="]"
+                                       onclick="keyboardRead(this.value)"></td>
+                        </tr>
+                        <tr>
+                            <td><input class="btn btn-sm btn-outline-dark" type="button" value="₁"
+                                       onclick="keyboardRead(this.value)"></td>
+                            <td><input class="btn btn-sm btn-outline-dark" type="button" value="₂"
+                                       onclick="keyboardRead(this.value)"></td>
+                            <td><input class="btn btn-sm btn-outline-dark" type="button" value="₃"
+                                       onclick="keyboardRead(this.value)"></td>
+                            <td><input class="btn btn-sm btn-outline-dark" type="button" value="₄"
+                                       onclick="keyboardRead(this.value)"></td>
+                            <td><input class="btn btn-sm btn-outline-dark" type="button" value="₅"
+                                       onclick="keyboardRead(this.value)"></td>
+                            <td><input class="btn btn-sm btn-outline-dark" type="button" value="₆"
+                                       onclick="keyboardRead(this.value)"></td>
+                            <td><input class="btn btn-sm btn-outline-dark" type="button" value="₇"
+                                       onclick="keyboardRead(this.value)"></td>
+                            <td><input class="btn btn-sm btn-outline-dark" type="button" value="₈"
+                                       onclick="keyboardRead(this.value)"></td>
+                            <td><input class="btn btn-sm btn-outline-dark" type="button" value="₉"
+                                       onclick="keyboardRead(this.value)"></td>
+                            <td><input class="btn btn-sm btn-outline-dark" type="button" value="₀"
+                                       onclick="keyboardRead(this.value)"></td>
+                            <td><input class="btn btn-sm btn-outline-dark" type="button" value="ｘ"
+                                       onclick="keyboardRead(this.value)"></td>
+                        </tr>
+                        </tbody>
+                    </table>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+
+{block scripts}
+    <script>
+        let lastFocused;
+
+        $("form input[type=text]").focus(function(){ lastFocused = this.id; });
+
+        function keyboardRead(val) {
+            document.getElementById(lastFocused).value = document.getElementById(lastFocused).value + val;
+        }
+    </script>
+{/block}
\ No newline at end of file
diff --git a/app/FrontModule/component/Keyboard/Keyboard.php b/app/FrontModule/component/Keyboard/Keyboard.php
new file mode 100644
index 0000000..4064838
--- /dev/null
+++ b/app/FrontModule/component/Keyboard/Keyboard.php
@@ -0,0 +1,24 @@
+<?php
+
+
+namespace App\FrontModule\Components;
+
+
+use Nette\Application\UI\Control;
+
+class Keyboard extends Control
+{
+    public function render()
+    {
+        $this->template->setFile(__DIR__ . '/Keyboard.latte');
+        $this->template->render();
+    }
+}
+
+interface IKeyboard
+{
+    /**
+     * @return Keyboard
+     */
+    public function create();
+}
\ No newline at end of file
diff --git a/app/FrontModule/component/Transliteration/TransliterationSearchForm.php b/app/FrontModule/component/Transliteration/TransliterationSearchForm.php
index 0df51e7..be00e30 100644
--- a/app/FrontModule/component/Transliteration/TransliterationSearchForm.php
+++ b/app/FrontModule/component/Transliteration/TransliterationSearchForm.php
@@ -52,25 +52,20 @@ class TransliterationSearchForm extends Control
 
         $form->addText('word1', 'Word 1')
             ->addRule(Form::REQUIRED, 'Field %label is required.')
-            ->setAttribute("autofocus")
-            ->setAttribute("onFocus", "setId(this.id)");
-        $form->addText('word2', 'Word 2')
-            ->setAttribute("onFocus", "setId(this.id)");
+            ->setAttribute("autofocus");
+        $form->addText('word2', 'Word 2');
         $form->addSelect('word2_condition', '', ESearchFormOperators::$wordSelectLabels);
-        $form->addText('word3', 'Word 3')
-            ->setAttribute("onFocus", "setId(this.id)");
+        $form->addText('word3', 'Word 3');
         $form->addSelect('word3_condition', '', ESearchFormOperators::$wordSelectLabels);
 
         $form->addCheckbox('exact_match', ' Exact Match');
 
         $form->addSelect('book_condition', '', ESearchFormOperators::$selectLikeOperatorLabels)
             ->setDefaultValue(ESearchFormOperators::CONTAINS);
-        $form->addText('book', 'Book')
-            ->setAttribute("onFocus", "setId(this.id)");
+        $form->addText('book', 'Book');
         $form->addSelect('museum_condition', '', ESearchFormOperators::$selectLikeOperatorLabels)
             ->setDefaultValue(ESearchFormOperators::CONTAINS);
-        $form->addText('museum', 'Museum number')
-            ->setAttribute("onFocus", "setId(this.id)");
+        $form->addText('museum', 'Museum number');
 
         $form->addSelect('type_condition', '', ESearchFormOperators::$selectEqualsOperatorLabels)
             ->setDefaultValue(ESearchFormOperators::IS);
@@ -81,12 +76,11 @@ class TransliterationSearchForm extends Control
 
         $form->addSelect('registration_condition', '', ESearchFormOperators::$selectLikeOperatorLabels)
             ->setDefaultValue(ESearchFormOperators::CONTAINS);
-        $form->addText('registration', 'Registration / Ex. number')
-            ->setAttribute("onFocus", "setId(this.id)");
+        $form->addText('registration', 'Registration / Ex. number');
+
         $form->addSelect('date_condition', '', ESearchFormOperators::$selectLikeOperatorLabels)
             ->setDefaultValue(ESearchFormOperators::CONTAINS);
-        $form->addText('date', 'Date')
-            ->setAttribute("onFocus", "setId(this.id)");
+        $form->addText('date', 'Date');
 
         $form->addSubmit('submit', 'Search');
         $form->onSuccess[] = [$this, 'formSuccess'];
diff --git a/app/FrontModule/presenters/TransliterationPresenter.php b/app/FrontModule/presenters/TransliterationPresenter.php
index 97f3a5f..247ee3e 100644
--- a/app/FrontModule/presenters/TransliterationPresenter.php
+++ b/app/FrontModule/presenters/TransliterationPresenter.php
@@ -4,6 +4,7 @@ namespace App\FrontModule\Presenters;
 
 
 
+use App\FrontModule\Components\IKeyboard;
 use App\FrontModule\Components\ITransliterationSearchFormFactory;
 use App\FrontModule\Components\ITransliterationSearchResultListFactory;
 use App\Model\Repository\LineRepository;
@@ -36,6 +37,9 @@ class TransliterationPresenter extends Presenter
     /** @var ITransliterationSearchResultListFactory */
     private $transliterationSearchResultListFactory;
 
+    /** @var IKeyboard */
+    private $keyboard;
+
     public function __construct(
         ITransliterationSearchFormFactory $transliterationSearchFormFactory,
         TransliterationRepository $transliterationRepository,
@@ -43,7 +47,8 @@ class TransliterationPresenter extends Presenter
         LitReferenceRepository $litReferenceRepository,
         RevHistoryRepository $revHistoryRepository,
         LineRepository $lineRepository,
-        ITransliterationSearchResultListFactory $transliterationSearchResultListFactory
+        ITransliterationSearchResultListFactory $transliterationSearchResultListFactory,
+        IKeyboard $keyboard
     )
     {
         parent::__construct();
@@ -55,6 +60,7 @@ class TransliterationPresenter extends Presenter
         $this->revHistoryRepository = $revHistoryRepository;
         $this->lineRepository = $lineRepository;
         $this->transliterationSearchResultListFactory = $transliterationSearchResultListFactory;
+        $this->keyboard = $keyboard;
     }
 
     public function actionView($id)
@@ -87,4 +93,9 @@ class TransliterationPresenter extends Presenter
     {
         return $this->transliterationSearchResultListFactory->create();
     }
+
+    public function createComponentKeyboard()
+    {
+        return $this->keyboard->create();
+    }
 }
\ No newline at end of file
diff --git a/app/FrontModule/templates/Keyboard/keyboard.latte b/app/FrontModule/templates/Keyboard/keyboard.latte
deleted file mode 100644
index 972f046..0000000
--- a/app/FrontModule/templates/Keyboard/keyboard.latte
+++ /dev/null
@@ -1,171 +0,0 @@
-<div class="card" style="width: 24.5rem;">
-    <div class="card-body">
-        <div id="keyboard">
-            <div class="display-5" style="margin-bottom: 0.5rem;">Keyboard</div>
-            <div class="cont">
-                <div id="keyboard-div">
-                    <table>
-                        <tbody>
-                        <tr>
-                            <td><input class="btn btn-sm btn-outline-dark" type="button" value="á"
-                                       onclick="keyboardRead(this.value)"></td>
-                            <td><input class="btn btn-sm btn-outline-dark" type="button" value="é"
-                                       onclick="keyboardRead(this.value)"></td>
-                            <td><input class="btn btn-sm btn-outline-dark" type="button" value="í"
-                                       onclick="keyboardRead(this.value)"></td>
-                            <td><input class="btn btn-sm btn-outline-dark" type="button" value="ú"
-                                       onclick="keyboardRead(this.value)"></td>
-                            <td></td>
-                            <td></td>
-                            <td><input class="btn btn-sm btn-outline-dark" type="button" value="Á"
-                                       onclick="keyboardRead(this.value)"></td>
-                            <td><input class="btn btn-sm btn-outline-dark" type="button" value="É"
-                                       onclick="keyboardRead(this.value)"></td>
-                            <td><input class="btn btn-sm btn-outline-dark" type="button" value="Í"
-                                       onclick="keyboardRead(this.value)"></td>
-                            <td><input class="btn btn-sm btn-outline-dark" type="button" value="Ú"
-                                       onclick="keyboardRead(this.value)"></td>
-                        </tr>
-                        <tr>
-                            <td><input class="btn btn-sm btn-outline-dark" type="button" value="à"
-                                       onclick="keyboardRead(this.value)"></td>
-                            <td><input class="btn btn-sm btn-outline-dark" type="button" value="è"
-                                       onclick="keyboardRead(this.value)"></td>
-                            <td><input class="btn btn-sm btn-outline-dark" type="button" value="ì"
-                                       onclick="keyboardRead(this.value)"></td>
-                            <td><input class="btn btn-sm btn-outline-dark" type="button" value="ù"
-                                       onclick="keyboardRead(this.value)"></td>
-                            <td><input class="btn btn-sm btn-outline-dark" type="button" value="ò"
-                                       onclick="keyboardRead(this.value)"></td>
-                            <td></td>
-                            <td><input class="btn btn-sm btn-outline-dark" type="button" value="À"
-                                       onclick="keyboardRead(this.value)"></td>
-                            <td><input class="btn btn-sm btn-outline-dark" type="button" value="È"
-                                       onclick="keyboardRead(this.value)"></td>
-                            <td><input class="btn btn-sm btn-outline-dark" type="button" value="Ì"
-                                       onclick="keyboardRead(this.value)"></td>
-                            <td><input class="btn btn-sm btn-outline-dark" type="button" value="Ù"
-                                       onclick="keyboardRead(this.value)"></td>
-                            <td><input class="btn btn-sm btn-outline-dark" type="button" value="Ò"
-                                       onclick="keyboardRead(this.value)"></td>
-                        </tr>
-                        <tr>
-                            <td><input class="btn btn-sm btn-outline-dark" type="button" value="â"
-                                       onclick="keyboardRead(this.value)"></td>
-                            <td><input class="btn btn-sm btn-outline-dark" type="button" value="ê"
-                                       onclick="keyboardRead(this.value)"></td>
-                            <td><input class="btn btn-sm btn-outline-dark" type="button" value="î"
-                                       onclick="keyboardRead(this.value)"></td>
-                            <td><input class="btn btn-sm btn-outline-dark" type="button" value="û"
-                                       onclick="keyboardRead(this.value)"></td>
-                            <td><input class="btn btn-sm btn-outline-dark" type="button" value="ô"
-                                       onclick="keyboardRead(this.value)"></td>
-                            <td></td>
-                            <td><input class="btn btn-sm btn-outline-dark" type="button" value="Â"
-                                       onclick="keyboardRead(this.value)"></td>
-                            <td><input class="btn btn-sm btn-outline-dark" type="button" value="Ê"
-                                       onclick="keyboardRead(this.value)"></td>
-                            <td><input class="btn btn-sm btn-outline-dark" type="button" value="Û"
-                                       onclick="keyboardRead(this.value)"></td>
-                            <td><input class="btn btn-sm btn-outline-dark" type="button" value="Ô"
-                                       onclick="keyboardRead(this.value)"></td>
-                            <td><input class="btn btn-sm btn-outline-dark" type="button" value="⌈"
-                                       onclick="keyboardRead(this.value)">
-                                <input class="btn btn-sm btn-outline-dark" type="button" value="⌉"
-                                       onclick="keyboardRead(this.value)"></td>
-                        </tr>
-
-
-                        <tr>
-                            <td><input class="btn btn-sm btn-outline-dark" type="button" value="ā"
-                                       onclick="keyboardRead(this.value)"></td>
-                            <td><input class="btn btn-sm btn-outline-dark" type="button" value="ē"
-                                       onclick="keyboardRead(this.value)"></td>
-                            <td><input class="btn btn-sm btn-outline-dark" type="button" value="ī"
-                                       onclick="keyboardRead(this.value)"></td>
-                            <td><input class="btn btn-sm btn-outline-dark" type="button" value="ū"
-                                       onclick="keyboardRead(this.value)"></td>
-                            <td><input class="btn btn-sm btn-outline-dark" type="button" value="ō"
-                                       onclick="keyboardRead(this.value)"></td>
-                            <td></td>
-                            <td><input class="btn btn-sm btn-outline-dark" type="button" value="Ā"
-                                       onclick="keyboardRead(this.value)"></td>
-                            <td><input class="btn btn-sm btn-outline-dark" type="button" value="Ē"
-                                       onclick="keyboardRead(this.value)"></td>
-                            <td><input class="btn btn-sm btn-outline-dark" type="button" value="Ī"
-                                       onclick="keyboardRead(this.value)"></td>
-                            <td><input class="btn btn-sm btn-outline-dark" type="button" value="Ū"
-                                       onclick="keyboardRead(this.value)"></td>
-                            <td><input class="btn btn-sm btn-outline-dark" type="button" value="Ō"
-                                       onclick="keyboardRead(this.value)"></td>
-                        </tr>
-                        <tr>
-                            <td><input class="btn btn-sm btn-outline-dark" type="button" value="ʾ"
-                                       onclick="keyboardRead(this.value)"></td>
-                            <td><input class="btn btn-sm btn-outline-dark" type="button" value="ʿ"
-                                       onclick="keyboardRead(this.value)"></td>
-                            <td><input class="btn btn-sm btn-outline-dark" type="button" value="ṣ"
-                                       onclick="keyboardRead(this.value)"></td>
-                            <td><input class="btn btn-sm btn-outline-dark" type="button" value="š"
-                                       onclick="keyboardRead(this.value)"></td>
-                            <td><input class="btn btn-sm btn-outline-dark" type="button" value="ṭ"
-                                       onclick="keyboardRead(this.value)"></td>
-                            <td><input class="btn btn-sm btn-outline-dark" type="button" value="ḫ"
-                                       onclick="keyboardRead(this.value)"></td>
-                            <td><input class="btn btn-sm btn-outline-dark" type="button" value="Ṣ"
-                                       onclick="keyboardRead(this.value)"></td>
-                            <td><input class="btn btn-sm btn-outline-dark" type="button" value="Š"
-                                       onclick="keyboardRead(this.value)"></td>
-                            <td><input class="btn btn-sm btn-outline-dark" type="button" value="Ṭ"
-                                       onclick="keyboardRead(this.value)"></td>
-                            <td><input class="btn btn-sm btn-outline-dark" type="button" value="Ḫ"
-                                       onclick="keyboardRead(this.value)"></td>
-                            <td><input class="btn btn-sm btn-outline-dark" type="button" value="["
-                                       onclick="keyboardRead(this.value)">
-                                <input class="btn btn-sm btn-outline-dark" type="button" value="]"
-                                       onclick="keyboardRead(this.value)"></td>
-                        </tr>
-                        <tr>
-                            <td><input class="btn btn-sm btn-outline-dark" type="button" value="₁"
-                                       onclick="keyboardRead(this.value)"></td>
-                            <td><input class="btn btn-sm btn-outline-dark" type="button" value="₂"
-                                       onclick="keyboardRead(this.value)"></td>
-                            <td><input class="btn btn-sm btn-outline-dark" type="button" value="₃"
-                                       onclick="keyboardRead(this.value)"></td>
-                            <td><input class="btn btn-sm btn-outline-dark" type="button" value="₄"
-                                       onclick="keyboardRead(this.value)"></td>
-                            <td><input class="btn btn-sm btn-outline-dark" type="button" value="₅"
-                                       onclick="keyboardRead(this.value)"></td>
-                            <td><input class="btn btn-sm btn-outline-dark" type="button" value="₆"
-                                       onclick="keyboardRead(this.value)"></td>
-                            <td><input class="btn btn-sm btn-outline-dark" type="button" value="₇"
-                                       onclick="keyboardRead(this.value)"></td>
-                            <td><input class="btn btn-sm btn-outline-dark" type="button" value="₈"
-                                       onclick="keyboardRead(this.value)"></td>
-                            <td><input class="btn btn-sm btn-outline-dark" type="button" value="₉"
-                                       onclick="keyboardRead(this.value)"></td>
-                            <td><input class="btn btn-sm btn-outline-dark" type="button" value="₀"
-                                       onclick="keyboardRead(this.value)"></td>
-                            <td><input class="btn btn-sm btn-outline-dark" type="button" value="ｘ"
-                                       onclick="keyboardRead(this.value)"></td>
-                        </tr>
-                        </tbody>
-                    </table>
-                </div>
-            </div>
-        </div>
-    </div>
-</div>
-
-<script>
-    let lastFocused;
-    let cur_id;
-
-    function setId(id) {
-        cur_id = id;
-    }
-
-    function keyboardRead(val){
-        document.getElementById(cur_id).value = document.getElementById(cur_id).value+val;
-    }
-</script>
\ No newline at end of file
diff --git a/app/FrontModule/templates/Transliteration/search.latte b/app/FrontModule/templates/Transliteration/search.latte
index 00bf224..b2a9bbd 100644
--- a/app/FrontModule/templates/Transliteration/search.latte
+++ b/app/FrontModule/templates/Transliteration/search.latte
@@ -2,5 +2,5 @@
     <div class="display-5">Search in transliterations</div>
     <hr>
     {control transliterationSearchForm}
-    {include "../Keyboard/keyboard.latte"}
+    {control keyboard}
 {/block}
\ No newline at end of file
diff --git a/app/config/components.neon b/app/config/components.neon
index b777638..2f49eb6 100644
--- a/app/config/components.neon
+++ b/app/config/components.neon
@@ -21,4 +21,5 @@ services:
     - App\AdminModule\Components\IBookTypeEditFormFactory
     - App\AdminModule\Components\IBookEditFormFactory
 
+    - App\FrontModule\Components\IKeyboard
     - App\FrontModule\Components\ITransliterationSearchResultListFactory
