91 lines
No EOL
3.4 KiB
PHP
91 lines
No EOL
3.4 KiB
PHP
<div id="search-{{ $wrapperId }}" class="search-results">
|
|
{{-- LOADER --}}
|
|
<div id="search-loader-{{ $wrapperId }}" hidden>
|
|
<div id="loader" class="lds-ellipsis"><div></div><div></div><div></div><div></div></div>
|
|
</div>
|
|
{{-- EMPTY RESULTS --}}
|
|
<div id="search-empty-{{ $wrapperId }}" class="search-empty-results" hidden>
|
|
{{ trans('front.search.no_results') }}
|
|
</div>
|
|
{{-- RESULTS --}}
|
|
<div id="search-results-{{ $wrapperId }}"></div>
|
|
{{-- PAGINATION --}}
|
|
<div id="search-pagination-{{ $wrapperId }}"></div>
|
|
</div>
|
|
|
|
@php
|
|
// Set a template for the global count.
|
|
$resultsLabel = trans('front.search.results_total', [
|
|
'nbr' => '__COUNT__',
|
|
'terms' => $searchTerm,
|
|
]);
|
|
$currentLocale = app()->getLocale();
|
|
$routeAjax = route('front.searching.ajax.news');
|
|
@endphp
|
|
|
|
@push('scripts')
|
|
<script nonce="{{ $nonce }}">
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
const wrapper = document.getElementById('search-{{ $wrapperId }}');
|
|
if (!wrapper) return;
|
|
|
|
// Set a global count.
|
|
window.searchTotal = window.searchTotal || 0;
|
|
|
|
const counter = document.querySelector('#search-global-count');
|
|
const token = document.querySelector('meta[name="csrf-token"]').content;
|
|
const results = wrapper.querySelector('#search-results-{{ $wrapperId }}');
|
|
const pagination = wrapper.querySelector('#search-pagination-{{ $wrapperId }}');
|
|
const empty = wrapper.querySelector('#search-empty-{{ $wrapperId }}');
|
|
const loader = wrapper.querySelector('#search-loader-{{ $wrapperId }}');
|
|
|
|
loadPage(1);
|
|
|
|
// Call ajax to get results from a specific page.
|
|
function loadPage(page) {
|
|
loader.hidden = false;
|
|
results.innerHTML = '';
|
|
pagination.innerHTML = '';
|
|
|
|
fetch(@json($routeAjax), {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
'X-CSRF-TOKEN': token,
|
|
'X-Requested-With': 'XMLHttpRequest',
|
|
},
|
|
body: JSON.stringify({
|
|
search: @json($searchTerm),
|
|
page: Number(page),
|
|
class: @json($class),
|
|
locale: @json($currentLocale),
|
|
})
|
|
})
|
|
.then(r => r.json())
|
|
.then(update)
|
|
.finally(() => {
|
|
loader.hidden = true;
|
|
});
|
|
}
|
|
|
|
// Update content of results/pagination/count.
|
|
function update(data) {
|
|
results.innerHTML = data.items;
|
|
pagination.innerHTML = data.pagination;
|
|
empty.hidden = data.totalHits > 0;
|
|
|
|
window.searchTotal += Number(data.totalHits || 0);
|
|
counter.innerHTML = @json($resultsLabel).replace('__COUNT__', window.searchTotal);
|
|
|
|
bindPagination();
|
|
}
|
|
|
|
// Set events on new pagination.
|
|
function bindPagination() {
|
|
wrapper.querySelectorAll('[data-page]').forEach(btn => {
|
|
btn.onclick = () => loadPage(btn.dataset.page);
|
|
});
|
|
}
|
|
});
|
|
</script>
|
|
@endpush |