Corrected and changed search form:

- gave div the class 'search' to fix broken grid layout - removed the button - use image as background image of input form - use scalable SVG image - use image size '1em' to make it scale with the 'font-size'
lpaulsen93 · Oct 16, 2018 · 5b4746b · 5b4746b
1 parent 9a4a994
commit 5b4746b
Show file tree

Hide file tree

Showing 2 changed files with 80 additions and 26 deletions.
diff --git a/css/design.less b/css/design.less
@@ -5,6 +5,7 @@
  * @author Anika Henke <anika@selfthinker.org>
  * @author Andreas Gohr <andi@splitbrain.org>
  * @author Clarence Lee <clarencedglee@gmail.com>
+ * @author LarsDW223
  */
 
 /* tools
@@ -25,37 +26,24 @@
 }
 
 form.search {
-    display: block;
-    position: relative;
-    margin-bottom: 0.5em;
-
     input {
-        width: 18em;
-        padding: .35em 22px .35em .1em;
-    }
-
-    button {
-        background: transparent url(images/search.png) no-repeat 0 0;
-        border-width: 0;
-        width: 19px;
-        height: 14px;
-        text-indent: -99999px;
-        margin-left: -20px;
-        box-shadow: none;
-        padding: 0;
+        background-image: url("data:image/svg+xml,%3Csvg xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 width%3D%2224%22 height%3D%2224%22 viewBox%3D%220 0 24 24%22%3E%3Cpath d%3D%22M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z%22 fill%3D%22%23666666%22 %2F%3E%3Cpath d%3D%22M0 0h24v24H0z%22 fill%3D%22none%22%2F%3E%3C%2Fsvg%3E");
+        background-repeat: no-repeat;
+        background-color: transparent;
+        background-position: 97.5% 50%;
+        background-size: 1em;
+        width: 100%;
     }
 }
 
 [dir=rtl] form.search {
     input {
-        padding: .35em .1em .35em 22px;
-    }
-
-    button {
-        background-position: 5px 0;
-        margin-left: 0;
-        margin-right: -20px;
-        position: relative;
+        background-image: url("data:image/svg+xml,%3Csvg xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 width%3D%2224%22 height%3D%2224%22 viewBox%3D%220 0 24 24%22%3E%3Cpath d%3D%22M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z%22 fill%3D%22%23666666%22 %2F%3E%3Cpath d%3D%22M0 0h24v24H0z%22 fill%3D%22none%22%2F%3E%3C%2Fsvg%3E");
+        background-repeat: no-repeat;
+        background-color: transparent;
+        background-position: 2.5% 50%;
+        background-size: 1em;
+        width: 100%;
     }
 }
 

diff --git a/tpl_functions.php b/tpl_functions.php
@@ -259,7 +259,7 @@ function tpl_generate_youarehere() {
  * Print/generate the 'search' section.
  */
 function tpl_generate_search() {
-    tpl_searchform();
+    tpl_congrid_searchform(true, true, false);
     tpl_flush();
 }
 /**
@@ -674,6 +674,71 @@ function tpl_print_grid(array $layout) {
     print("</style>\n");
     tpl_flush();
 }
+/**
+ * Print the search form
+ *
+ * If the first parameter is given a div with the ID 'qsearch_out' will
+ * be added which instructs the ajax pagequicksearch to kick in and place
+ * its output into this div. The second parameter controls the propritary
+ * attribute autocomplete. If set to false this attribute will be set with an
+ * value of "off" to instruct the browser to disable it's own built in
+ * autocompletion feature (MSIE and Firefox)
+ *
+ * @author Andreas Gohr <andi@splitbrain.org>
+ *
+ * @param bool $ajax
+ * @param bool $autocomplete
+ * @param bool $button
+ * @return bool
+ */
+function tpl_congrid_searchform($ajax = true, $autocomplete = true, $button = true) {
+    global $lang;
+    global $ACT;
+    global $QUERY;
+    global $ID;
+
+    // don't print the search form if search action has been disabled
+    if(!actionOK('search')) return false;
+
+    $searchForm = new dokuwiki\Form\Form([
+        'action' => wl(),
+        'method' => 'get',
+        'role' => 'search',
+        'class' => 'search',
+        'id' => 'dw__search',
+    ], true);
+    $searchForm->addTagOpen('div')->addClass('no');
+    $searchForm->setHiddenField('do', 'search');
+    $searchForm->setHiddenField('id', $ID);
+    $searchForm->addTextInput('q')
+        ->addClass('edit')
+        ->attrs([
+            'title' => '[F]',
+            'accesskey' => 'f',
+            'placeholder' => $lang['btn_search'],
+            'autocomplete' => $autocomplete ? 'on' : 'off',
+        ])
+        ->id('qsearch__in')
+        ->val($ACT === 'search' ? $QUERY : '')
+        ->useInput(false)
+    ;
+    if ($button) {
+        $searchForm->addButton('', $lang['btn_search'])->attrs([
+            'type' => 'submit',
+            'title' => $lang['btn_search'],
+        ]);
+    }
+    if ($ajax) {
+        $searchForm->addTagOpen('div')->id('qsearch__out')->addClass('ajax_qsearch JSpopup');
+        $searchForm->addTagClose('div');
+    }
+    $searchForm->addTagClose('div');
+    trigger_event('FORM_QUICKSEARCH_OUTPUT', $searchForm);
+
+    echo $searchForm->toHTML();
+
+    return true;
+}
 /**
  * Print a div/cell's content of the grid.
  * 
@@ -757,6 +822,7 @@ function tpl_generate_div(array &$layout, $type, array $params, $level=1) {
         break;
 
         case 'search':
+            $divclass .= 'search';
         break;
 
         default: