KingOfDog.de/old
Archived
1
0
Fork 0
Code Releases Activity

Fix new search bar - you can now finally search again

Browse Source
This commit is contained in:
KingOfDog 2019-04-15 16:27:11 +02:00 committed by Marcel
parent 9c023c939a
commit d520b4752f
3 changed files with 49 additions and 64 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
application/views/header.php
View File

@ -77,14 +77,23 @@
</div>
<div class="navbar-search">
<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>

14
assets/css/header.css
View File

@ -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;

80
assets/js/main.js
View File

@ -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;