Initial commit as of 2018-10-16
This commit is contained in:
Marcel
244
assets/js/post_search.js
Normal file
244
assets/js/post_search.js
Normal file
@@ -0,0 +1,244 @@
|
||||
const query = $('.search-input');
|
||||
|
||||
let s_offset = 0;
|
||||
const s_amount = 10;
|
||||
let s_firstRun = true;
|
||||
let s_itemsLeft = true;
|
||||
let s_running = false;
|
||||
let val_changed = true;
|
||||
|
||||
let keyUpEvent;
|
||||
|
||||
function searchEntries() {
|
||||
const type = $('input[name=type]:checked').val();
|
||||
const rank = $('#searchForRank').val();
|
||||
const lang = $('#searchForLang').data('value');
|
||||
const country = $('#searchForCountry').data('value');
|
||||
console.log(rank);
|
||||
if (!s_running && ((s_itemsLeft || val_changed) && (query.val().length > 0 || (type === 'type-users' && (rank !== '' || lang !== '' || country !== ''))))) {
|
||||
console.log(rank);
|
||||
$.ajax({
|
||||
url: 'http://192.168.178.39/posts/getSearchPosts',
|
||||
data: {
|
||||
query: query.val(),
|
||||
type,
|
||||
rank,
|
||||
lang,
|
||||
country,
|
||||
amount: s_amount,
|
||||
offset: s_offset
|
||||
},
|
||||
beforeSend: () => {
|
||||
if (s_firstRun || val_changed) {
|
||||
$('.comment-list').empty();
|
||||
$('.no-more-posts-message').remove();
|
||||
}
|
||||
$('.loading-spinner').show();
|
||||
s_running = true;
|
||||
},
|
||||
success: (data) => {
|
||||
$('.loading-spinner').hide();
|
||||
$('.post-container .comment-list').append(data);
|
||||
registerPostEvents();
|
||||
registerScrollEvent();
|
||||
s_offset++;
|
||||
|
||||
if (data === '') {
|
||||
$('.post-container').append("<p class='no-more-posts-message'>Es konnten keine Ergebnisse (mehr) gefunden werden!</p>");
|
||||
s_itemsLeft = false;
|
||||
}
|
||||
|
||||
if (val_changed) {
|
||||
pushSearchHistoryState();
|
||||
} else {
|
||||
|
||||
}
|
||||
|
||||
s_firstRun = false;
|
||||
s_running = false;
|
||||
val_changed = false;
|
||||
|
||||
},
|
||||
error: console.log
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
function registerScrollEvent() {
|
||||
const commentList = $('.comment-list');
|
||||
$(window).scroll(function () {
|
||||
if ($(document).scrollTop() + 360 + $(window).height() >= commentList.position().top + commentList.outerHeight()) {
|
||||
searchEntries();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function newSearchQuery() {
|
||||
val_changed = true;
|
||||
s_offset = 0;
|
||||
searchEntries();
|
||||
}
|
||||
|
||||
function pushSearchHistoryState() {
|
||||
const title = encodeURIComponent(query.val());
|
||||
const type = $('input[name=type]:checked').val();
|
||||
const rank = $('#searchForRank').val();
|
||||
const lang = $('#searchForLang').data('value');
|
||||
const country = $('#searchForCountry').data('value');
|
||||
|
||||
window.history.pushState(
|
||||
{
|
||||
'postContainer': $('.post-container').html(),
|
||||
'query': title,
|
||||
'type': type,
|
||||
'rank': rank,
|
||||
'lang': lang,
|
||||
'country': country,
|
||||
},
|
||||
'Suche: ' + query.val(),
|
||||
`/posts/search?q=${title}&type=${type}${rank !== '' ? '&rank=' + rank : ''}${lang !== '' ? '&lang=' + lang : ''}${country !== '' ? '&country=' + country : ''}`
|
||||
);
|
||||
}
|
||||
|
||||
function replaceSearchHistoryState(title, newQuery) {
|
||||
const currentState = window.history.state;
|
||||
const type = $('input[name=type]:checked').val();
|
||||
const rank = $('#searchForRank').val();
|
||||
const lang = $('#searchForLang').data('value');
|
||||
const country = $('#searchForCountry').data('value');
|
||||
|
||||
window.history.replaceState(
|
||||
currentState,
|
||||
title,
|
||||
`/posts/search?q=${newQuery}&type=${type}${rank !== '' ? '&rank=' + rank : ''}${lang !== '' ? '&lang=' + lang : ''}${country !== '' ? '&country=' + country : ''}`
|
||||
);
|
||||
}
|
||||
|
||||
window.onpopstate = (e) => {
|
||||
if (e.state) {
|
||||
$('.post-container').html(e.state.postContainer);
|
||||
$('.search-input').val(e.state.query);
|
||||
$('#searchForRank').val(e.state.rank);
|
||||
$('#searchForLang').find('.dropdown-item[data-value=' + e.state.lang + ']').click();
|
||||
$('#searchForCountry').find('.dropdown-item[data-value=' + e.state.country + ']').click();
|
||||
$('#' + e.state.type).prop('checked', true);
|
||||
}
|
||||
};
|
||||
|
||||
$('.search-form').submit((e) => {
|
||||
e.preventDefault();
|
||||
newSearchQuery()
|
||||
}).keyup(() => {
|
||||
replaceSearchHistoryState('Suche: ' + query.val(), encodeURIComponent(query.val()));
|
||||
clearTimeout(keyUpEvent);
|
||||
keyUpEvent = setTimeout(() => {
|
||||
newSearchQuery();
|
||||
}, 1000);
|
||||
});
|
||||
|
||||
$('input[name=type]').change(() => {
|
||||
newSearchQuery();
|
||||
|
||||
if ($('input[name=type]:checked').val() === 'type-users') {
|
||||
$('.user-search').slideDown();
|
||||
} else {
|
||||
$('.user-search').slideUp();
|
||||
}
|
||||
});
|
||||
|
||||
$('.search-input').focus(function () {
|
||||
$(this).parent().addClass('focus');
|
||||
}).blur(function () {
|
||||
$(this).parent().removeClass('focus');
|
||||
});
|
||||
|
||||
$('.user-search select').change(() => {
|
||||
if ($('input[name=type]:checked').val() === 'type-users') {
|
||||
newSearchQuery();
|
||||
}
|
||||
});
|
||||
|
||||
function initUserSearch() {
|
||||
$.ajax({
|
||||
url: 'http://192.168.178.39/posts/getAvailableCountries',
|
||||
success: (data) => {
|
||||
const countrySelect = $('#searchForCountry').find('.dropdown-menu');
|
||||
console.log(data);
|
||||
for(let country of data.countries) {
|
||||
countrySelect.append(`
|
||||
<a href="#" class="dropdown-item" data-value="${country.country}">
|
||||
<span class="flag-icon flag-icon-${country.country.toLowerCase()} squared rounded"></span>
|
||||
${country.name} (${country.countryUserCount})
|
||||
</a>
|
||||
`)
|
||||
}
|
||||
|
||||
initSelectDropdown();
|
||||
|
||||
const urlAttribute = getUrlParameter('country');
|
||||
if(urlAttribute) {
|
||||
$('#searchForCountry').find('.dropdown-item[data-value=' + urlAttribute + ']').click();
|
||||
}
|
||||
},
|
||||
error: console.log
|
||||
});
|
||||
|
||||
$.ajax({
|
||||
url: 'http://192.168.178.39/posts/getAvailableLanguages',
|
||||
success: (data) => {
|
||||
const langSelect = $('#searchForLang').find('.dropdown-menu');
|
||||
for (let lang of data.languages) {
|
||||
langSelect.append(`
|
||||
<a href="#" class="dropdown-item" data-value="${lang.language}">
|
||||
<span class="flag-icon flag-icon-${lang.language.toLowerCase()} squared rounded"></span>
|
||||
${lang.name} (${lang.langUserCount})
|
||||
</aa>
|
||||
`);
|
||||
}
|
||||
|
||||
initSelectDropdown();
|
||||
|
||||
const urlAttribute = getUrlParameter('lang');
|
||||
if (urlAttribute) {
|
||||
$('#searchForLang').find('.dropdown-item[data-value=' + urlAttribute + ']').click();
|
||||
}
|
||||
},
|
||||
error: console.log
|
||||
});
|
||||
}
|
||||
|
||||
function initSelectDropdown() {
|
||||
$('.user-search .dropdown .dropdown-item').click(function (e) {
|
||||
e.preventDefault();
|
||||
const text = $(this).html();
|
||||
$('.dropdown-item.active', $(this).parent()).removeClass('active');
|
||||
$(this).addClass('active');
|
||||
$('.dropdown-toggle', $(this).parent().parent()).html(text);
|
||||
$(this).parent().parent().data('value', $(this).data('value'));
|
||||
|
||||
newSearchQuery();
|
||||
});
|
||||
}
|
||||
|
||||
$(function () {
|
||||
initUserSearch();
|
||||
|
||||
searchEntries();
|
||||
|
||||
if ($('input[name=type]:checked').val() === 'type-users') {
|
||||
$('.user-search').show();
|
||||
}
|
||||
});
|
||||
|
||||
function getUrlParameter(sParam) {
|
||||
const sPageURL = decodeURIComponent(window.location.search.substr(1)),
|
||||
sURLVariables = sPageURL.split('&');
|
||||
|
||||
for (let urlParameter of sURLVariables) {
|
||||
const urlVariable = urlParameter.split('=');
|
||||
|
||||
if (urlVariable[0] === sParam) {
|
||||
return urlVariable[1] === undefined ? true : urlVariable[1];
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user