From d520b4752f9d2de0dc020a870bd28d5b292d37b0 Mon Sep 17 00:00:00 2001
From: KingOfDog <logins@kingofdog.eu>
Date: Mon, 15 Apr 2019 16:27:11 +0200
Subject: [PATCH] Fix new search bar - you can now finally search again

---
 application/views/header.php | 13 +++++-
 assets/css/header.css        | 14 +++++-
 assets/js/main.js            | 86 +++++++++++-------------------------
 3 files changed, 49 insertions(+), 64 deletions(-)

diff --git a/application/views/header.php b/application/views/header.php
index 2e33091..a0fbb42 100644
--- a/application/views/header.php
+++ b/application/views/header.php
@@ -77,14 +77,23 @@
     </div>
 
     <div class="navbar-search">
-        <input class="form-control" type="search" placeholder="Suchen nach Posts, Projekten, Blog-Einträgen und mehr">
+        <form action="#" id="search-form">
+            <div class="input-group">
+                <div class="input-group-prepend">
+                    <button class="btn" type="submit">
+                        <i class="fa fa-search"></i>
+                    </button>
+                </div>
+                <input class="form-control" type="search" placeholder="Suchen nach Posts, Projekten, Blog-Einträgen und mehr">
+            </div>
+        </form>
     </div>
 
     <?php if (isset($_SESSION['user'])): ?>
         <div class="navbar-action">
             <div class="dropdown">
                 <a href="#" class="navbar-action-btn dropdown-toggle" data-toggle="dropdown" id="userMenuButton" aria-haspopup="true" aria-expanded="false" role="button">
-                    <img src="<?= $_SESSION['user']['profilePic'] ?>?w=100" alt="" class="img-fluid rounded-circle">
+                    <img src="<?= $_SESSION['user']['profilePic'] ?>?w=40" alt="" class="img-fluid rounded-circle">
                     <text><?= $_SESSION['user']['displayname'] ?></text>
                 </a>
 
diff --git a/assets/css/header.css b/assets/css/header.css
index 3e1463a..9aec541 100644
--- a/assets/css/header.css
+++ b/assets/css/header.css
@@ -190,16 +190,28 @@
 
 .navbar .navbar-search {
     z-index: 1;
+    padding-right: 40px;
     grid-area: center;
 }
 
+.navbar .navbar-search .input-group {
+    border-radius: .25rem;
+    background: rgba(0, 0, 0, .04);
+}
+
 .navbar .navbar-search input.form-control {
     border: none;
-    background: rgba(0, 0, 0, .04);
+    background: none;
     box-shadow: none;
     outline: none;
 }
 
+.navbar .navbar-search .input-group .btn {
+    padding: .375rem .25rem .375rem .75rem;
+    background: none;
+    color: #666;
+}
+
 #userMenuButton {
     height: 48px;
     padding: 4px 25px 4px 4px;
diff --git a/assets/js/main.js b/assets/js/main.js
index 7969ded..b9ede8e 100644
--- a/assets/js/main.js
+++ b/assets/js/main.js
@@ -222,10 +222,17 @@ $(document).on('swipeleft', function () {
     }
 });
 
-function closeSearch() {
-    $('.navbar.search-open').removeClass('search-open')
-        .find('.navbar-search input').val('');
-}
+$('#search-form').submit((e) => {
+    e.preventDefault();
+
+    executeSearch();
+});
+
+$('.navbar-search input').on('keyup', (e) => {
+    if (e.key === 'Enter') {
+        $('#search-form').submit();
+    }
+});
 
 function executeSearch() {
     const search = $('.navbar-search input').val().trim();
@@ -250,12 +257,8 @@ function executeSearch() {
         },
         method: 'GET',
         success: data => {
-            // $('html').children().remove()[0].outerHTML = data;
             document.write(data);
             document.close();
-            // const newBody = $('body > *:not(header):not(footer):not(#bottom)', $(data));
-            // console.log(newBody);
-            // $('.loadingSpinner').after(newBody);
         },
         error: data => {
             console.log(data);
@@ -263,57 +266,6 @@ function executeSearch() {
     });
 }
 
-$('#searchButton').on('click', (e) => {
-    e.preventDefault();
-    const navbar = $('.navbar');
-    if (navbar.hasClass('search-open')) {
-        const search = $('.navbar-search input').val().trim();
-
-        if (search.length > 0) {
-            executeSearch();
-        } else {
-            closeSearch();
-        }
-    } else {
-        navbar.addClass('search-open');
-        $('.navbar .navbar-search input').focus();
-    }
-});
-
-$('#searchResetButton').on('click', (e) => {
-    e.preventDefault();
-    closeSearch();
-});
-
-$('body').on('keyup', (e) => {
-    if ($('.navbar').hasClass('search-open') && e.key === 'Escape') {
-        closeSearch();
-    }
-});
-
-$('.navbar-search input').on('keyup', (e) => {
-    if (e.key === 'Enter') {
-        executeSearch()
-    }
-});
-
-$('.navbar-search:not(.active) .btn-search').click(function (event) {
-    event.preventDefault();
-    const $form = $(this).closest('form'),
-        $input = $form.find('input');
-    $form.addClass('active');
-    $input.focus();
-});
-
-$('.navbar-search.active .btn-search').click(function (event) {
-    event.preventDefault();
-    const $form = $(this).closest('form'),
-        $input = $form.find('input');
-    //TODO: Execute search
-
-    closeSearch();
-});
-
 $(function () {
     $.each($(".share-btn"), function () {
         $(this).on("click", function (event) {
@@ -388,6 +340,18 @@ $('#notificationMenuButton').click(() => {
     });
 });
 
+$(() => {
+    $('.max-length-input').each(function () {
+        console.log(this);
+        $(this).after(`<span class="max-length-counter">${$(this).attr('max-length')}</span>`);
+    });
+});
+
+$('.max-length-input').keypress(function () {
+    const val = $(this).val() || $(this).text();
+    $(this).next('.max-length-counter').text($(this).attr('max-length') - val.trim().length);
+});
+
 const notificationCount = 5;
 let notificationOffset = 0;
 
@@ -485,7 +449,7 @@ function openAsyncModal(url, title, data, finished, id, size = 'default') {
         success: (result) => {
             console.log(result);
             modal.find('.modal-body').empty();
-            if(result.success) {
+            if (result.success) {
                 modal.find('.modal-title').text(result.title);
                 modal.find('.modal-body').append(result.body);
                 finished();
@@ -501,7 +465,7 @@ function openAsyncModal(url, title, data, finished, id, size = 'default') {
         }
     });
 
-    modal.on('hidden.bs.modal', function() {
+    modal.on('hidden.bs.modal', function () {
         $(this).remove();
     });