Fix new search bar - you can now finally search again
This commit is contained in:
parent
9c023c939a
commit
d520b4752f
|
@ -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>
|
||||
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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();
|
||||
});
|
||||
|
||||
|
|
Reference in New Issue
Block a user