From 2ae4196546ae258e4dedfd2e816ea02fc5ce51c9 Mon Sep 17 00:00:00 2001
From: Joshua Ramon Enslin <joshua@jrenslin.de>
Date: Fri, 15 Jun 2018 23:41:25 +0200
Subject: [PATCH] Added search bar to header.

---
 inc/mdEmbeds.php           | 10 +++++++++-
 inc/standardHTML.php       | 27 +++++++++++++++++++++++----
 js/main.js                 | 14 +++++++++++++-
 search.php                 |  5 ++---
 themes/default/default.css | 19 ++++++++++++++-----
 5 files changed, 61 insertions(+), 14 deletions(-)

diff --git a/inc/mdEmbeds.php b/inc/mdEmbeds.php
index c378817..5d5d4e6 100644
--- a/inc/mdEmbeds.php
+++ b/inc/mdEmbeds.php
@@ -399,6 +399,10 @@ function searchMDObjects(array $arguments, array $settings):string {
 
     $i = 0;
     $lastToDisplay = end($toDisplay);
+
+    // Display option to go to start
+    if (!in_array(0, $toDisplay)) $output .= '<a href="search.php?startwert=0' . write_get_vars(['q', 'id']) . '#mdSearchObjs">1</a>';
+
     while ($i < $contents[0]['total']) {
 
         if (!in_array($i, $toDisplay)) {
@@ -408,13 +412,17 @@ function searchMDObjects(array $arguments, array $settings):string {
         $output .= '
             <a ';
         if ($i == $current) $output .= ' class="navicurrent"';
-        $output .= ' href="search.php?startwert=' . (string)$i . write_get_vars(['q', 'id']) . '#mdSearchObjs">' . strval($i / 24) . '</a>
+        $output .= ' href="search.php?startwert=' . (string)$i . write_get_vars(['q', 'id']) . '#mdSearchObjs">' . strval(($i / 24) + 1) . '</a>
         ';
 
         $i += 24;
         if ($i == $lastToDisplay) break;
     }
 
+    // Display option to go to start
+    $last = $contents[0]["total"] - ($contents[0]["total"] % 24);
+    if (!in_array($last, $toDisplay)) $output .= '<a href="search.php?startwert=' . (string)$last . write_get_vars(['q', 'id']) . '#mdSearchObjs">' . (string)(($last / 24) + 1) . '</a>';
+
     // Generate pagination
     $output .= '
 
diff --git a/inc/standardHTML.php b/inc/standardHTML.php
index 9026bd9..a83850a 100644
--- a/inc/standardHTML.php
+++ b/inc/standardHTML.php
@@ -28,15 +28,15 @@ function printPublicHead(array $settings, string $page = "home", string $title =
     <meta http-equiv="Content-Security-Policy" content="default-src \'none\'; script-src \'self\'; connect-src \'self\' ' . $settings['mdVersion'] . '; img-src \'self\' ' . $settings['mdVersion'] . '; style-src \'self\' \'unsafe-inline\'; font-src \'self\';" />
 
 	<title>' . $title . '</title>
-    <link rel="stylesheet" type="text/css" href="themes/default/default.css">
-    <link rel="stylesheet" type="text/css" href="themes/imports.css">
-    <meta http-equiv="content-type" content="text/html;charset=utf-8">';
+    <link rel="stylesheet" type="text/css" href="themes/default/default.css" />
+    <link rel="stylesheet" type="text/css" href="themes/imports.css" />
+    <meta http-equiv="content-type" content="text/html;charset=utf-8" />';
 
     $output .= $additional;
 
     if ($icon) {
         $output .= '
-    <link rel="shortcut icon" sizes="16x16 32x32" href="' . $icon . '" />
+    <link rel="shortcut icon" href="' . $icon . '" />
     ';
     }
 
@@ -74,6 +74,8 @@ function printPublicHeader(string $title = "Home"):string {
 
         <h1>' . $title . '</h1>
 
+        ' . generateSearchBar() . '
+
     </header>
     ';
 
@@ -190,4 +192,21 @@ function generatePublicNav($pages):string {
     return $output;
 }
 
+/**
+ * Function for printing the search bar.
+ *
+ * @return string
+ */
+function generateSearchBar():string {
+
+    $output = '
+    <form action="search.php" method="GET">
+        <input type="search" name="q" />
+    </form>
+    ';
+
+    return $output;
+
+}
+
 ?>
diff --git a/js/main.js b/js/main.js
index 9c3d4d5..9f3cfda 100644
--- a/js/main.js
+++ b/js/main.js
@@ -148,10 +148,22 @@ document.addEventListener("DOMContentLoaded", function() {
         }
     }
 
+    /**
+     * Set placeholder for all input element of type="search".
+     */
+    (function() {
+        let toTranslate = document.getElementsByTagName("input");
+        for (let i = 0, max = toTranslate.length; i < max; i++) {
+            console.log(toTranslate[i].type);
+            if (toTranslate[i].type !== "search") continue;
+            toTranslate[i].placeholder = getTranslation(translations, "Search");
+        }
+    })();
+
     (function() {
         let toTranslate = document.getElementsByClassName("toTranslate");
         for (let i = 0, max = toTranslate.length; i < max; i++) {
-            console.log(toTranslate[i].getAttribute("data-content"));
+            if (debugging === true) console.log(toTranslate[i].getAttribute("data-content"));
             toTranslate[i].textContent = getTranslation(translations, toTranslate[i].getAttribute("data-content"));
         }
     })();
diff --git a/search.php b/search.php
index ec46b42..1938456 100644
--- a/search.php
+++ b/search.php
@@ -43,11 +43,10 @@ if (!isset($_GET['q'])) {
 
     echo '
     <h1><span class="toTranslate" data-content="Search"></span></h1>
-    <form action="" method="GET">
-        <input type="search" name="q" />
-    </form>
     ';
 
+    generateSearchBar();
+
 }
 else {
 
diff --git a/themes/default/default.css b/themes/default/default.css
index d26209e..5f62db0 100644
--- a/themes/default/default.css
+++ b/themes/default/default.css
@@ -69,7 +69,6 @@ th    { text-align: left; }
 input.h1Input     { display: block; width: 100%; font-size: 1.5em; border-radius: 0; }
 #inputSection > * { display: block; width: 100%; }
 
-aside     { width: 300px; margin-right: 3em; }
 aside > * { display: block; padding: 1em; border: 1px solid #D6D6D6; }
 
 /****************************
@@ -81,9 +80,10 @@ aside > * { display: block; padding: 1em; border: 1px solid #D6D6D6; }
  * Displays current position and offers access
  */
 
-#mainHeader     { display: table; width: 100%; padding: 0 5vw; border-bottom: 1px solid #D6D6D6; }
-#mainHeader > * { display: table-cell; padding: .5rem 0; color: #666; vertical-align: middle; }
-#mainHeader h1  { color: #333; }
+#mainHeader       { display: table; width: 100%; padding: 0 5vw; border-bottom: 1px solid #D6D6D6; }
+#mainHeader > *   { display: block; padding: .5rem 0; color: #666; vertical-align: middle; }
+#mainHeader h1    { color: #333; }
+#mainHeader input { width: 100%; }
 
 /************
  * Banner
@@ -129,7 +129,7 @@ body > nav > ul > li a:hover { background: #000; color: #FFF; }
  * Main part of the page.
  */
 
-main { padding: .5em 5em 3em 0; text-align: justify; }
+main { padding: 1em 0 1em 0; text-align: justify; }
 
 /************
  * Main footer.
@@ -203,6 +203,15 @@ body > footer { margin: 1em 5vw 2em 5vw; padding: 1em 0; background: #FFF; color
     body > nav,
     div#mainWrapper,
     body > footer { margin: 0 0; padding-left: 15rem; padding-right: 15rem; }
+    aside         { width: 300px; margin-right: 3em; }
+
+    #mainHeader     { display: table; }
+    #mainHeader > * { display: table-cell; }
+    #mainHeader form  { text-align: right; }
+    #mainHeader input { width: initial; }
+
+    main { padding: .5em 5em 3em 0; }
+
 }
 
 /****************************