250 lines
11 KiB
PHP
250 lines
11 KiB
PHP
@php
|
|
$wrapperId = 'wrapper-' . uniqid();
|
|
@endphp
|
|
|
|
@if (isset($postContainer))
|
|
<div id="{{ $wrapperId }}" data-current-locale="{{ app()->getLocale() }}" @class([
|
|
'filter-posts',
|
|
$postContainer['class'] ?? null,
|
|
])>
|
|
<div @class([
|
|
'filter fw',
|
|
$postContainer['secondaryClass'] ?? null
|
|
])>
|
|
<div class="filter__wrapper wrapper">
|
|
<div class="filter-menu">
|
|
<div id="filters" class="filter__select-wrap filter-select-wrap"></div>
|
|
<div class="filter-results-num">
|
|
{{ ucfirst(__('front.news.results')) }} :
|
|
<span class="filter-results-num__wrap">
|
|
<span class="filter-results-num__wrap">
|
|
<span id="results" class="filter-results-num__current"></span>
|
|
{{ __('front.news.on_document_count') }}
|
|
<span id="all-results" class="filter-results-num__total"></span>
|
|
</span>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<div class="active-filters">
|
|
<div id="selected-filters" class="active-filters__list"></div>
|
|
<div class="active-filters__clear-wrap">
|
|
<div class="active-filters__item active-filters__item_clear">
|
|
<a class="active-filters__item-remove" data-category="{{ $postContainer['category'] }}" data-param="clear-all"
|
|
title="{{ ucfirst(__('front.buttons.clear_filters')) }}">✖</a>
|
|
{{ ucfirst(__('front.buttons.clear_filters')) }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div @class([
|
|
'posts-list fw',
|
|
$postContainer['tertiaryClass'] ?? null
|
|
])>
|
|
<div class="posts-list__wrapper wrapper">
|
|
<div @class([
|
|
'list-items',
|
|
'posts-container' => $postContainer['slug'] === "news",
|
|
'list-items_doc' => $postContainer['slug'] === "docs",
|
|
])>
|
|
<div id="loader" class="lds-ellipsis hidden"><div></div><div></div><div></div><div></div></div>
|
|
<div id="section" class="ajax-load-more-wrap infinite fading-circles alm-0 alm-is-loaded">
|
|
<div id="posts" class="alm-listing alm-ajax wrapper" data-slug="{{ $postContainer['slug'] }}" data-category="{{ $postContainer['category'] }}"></div>
|
|
<div class="alm-btn-wrap">
|
|
<button id="load-more" class="alm-load-more-btn more btn" data-page="1" type="button">{{ $postContainer['load_more'] }}</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@push('scripts')
|
|
<script nonce="{{ $nonce }}">
|
|
(function() {
|
|
const wrapper = document.getElementById('{{ $wrapperId }}');
|
|
const currentLocale = wrapper.dataset.currentLocale;
|
|
const postsContainer = wrapper.querySelector('#posts');
|
|
const filtersContainer = wrapper.querySelector('#filters');
|
|
const nbResults = wrapper.querySelector('#results');
|
|
const allResults = wrapper.querySelector('#all-results');
|
|
const loadMoreBtn = wrapper.querySelector('#load-more');
|
|
const sFiltersContainer = wrapper.querySelector('#selected-filters');
|
|
const loader = wrapper.querySelector("#loader");
|
|
const section = wrapper.querySelector("#section");
|
|
const tblFilters = {};
|
|
let hasLoaded = false;
|
|
|
|
function isLoading(value = false) {
|
|
if (value) {
|
|
loader.classList.remove('hidden');
|
|
section.classList.add('hidden');
|
|
} else {
|
|
loader.classList.add('hidden');
|
|
section.classList.remove('hidden');
|
|
}
|
|
}
|
|
|
|
function ajaxLoadPosts(clear = false, filters = {}) {
|
|
const currentFilters = new URLSearchParams(window.location.search).toString();
|
|
const nextPage = clear ? 1 : parseInt(loadMoreBtn.dataset.page);
|
|
const { slug, category } = postsContainer.dataset;
|
|
let endpoints = null;
|
|
isLoading(true);
|
|
|
|
if (slug === "news") {
|
|
endpoint = "news";
|
|
} else if (slug === "docs") {
|
|
endpoint = "documents";
|
|
}
|
|
|
|
if (!endpoint) return;
|
|
|
|
fetch(`/posts/load/${endpoint}`, {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content
|
|
},
|
|
body: JSON.stringify({
|
|
page: nextPage,
|
|
category: category,
|
|
filters: filters,
|
|
locale: currentLocale
|
|
})
|
|
})
|
|
.then(response => response.json())
|
|
.then(data => updatePosts(data, clear))
|
|
.finally(function () {
|
|
isLoading(false);
|
|
});
|
|
}
|
|
|
|
function updatePosts(data, clear) {
|
|
const pagination = data.pagination;
|
|
|
|
if (clear) {
|
|
postsContainer.innerHTML = data.news;
|
|
} else {
|
|
postsContainer.insertAdjacentHTML('beforeend', data.news);
|
|
}
|
|
|
|
sFiltersContainer.innerHTML = data.selectedFilters;
|
|
filtersContainer.innerHTML = data.filters;
|
|
nbResults.innerHTML = postsContainer.childElementCount ?? 0;
|
|
allResults.innerHTML = pagination.total ?? 0;
|
|
|
|
if (pagination.hasMore) {
|
|
loadMoreBtn.style.visibility = 'visible';
|
|
loadMoreBtn.dataset.page = pagination.currentPage + 1;
|
|
} else {
|
|
loadMoreBtn.style.visibility = 'hidden';
|
|
}
|
|
|
|
initFilters();
|
|
initSelectedFilters();
|
|
}
|
|
|
|
document.addEventListener('scroll', function () {
|
|
if (hasLoaded) return;
|
|
|
|
const wrapperPos = wrapper.getBoundingClientRect();
|
|
const isVisible = wrapperPos.top < window.innerHeight * 1.5;
|
|
|
|
if (isVisible) {
|
|
hasLoaded = true;
|
|
ajaxLoadPosts();
|
|
}
|
|
});
|
|
|
|
loadMoreBtn.addEventListener('click', function() {
|
|
loadMoreBtn.classList.add('loading');
|
|
loadMoreBtn.disabled = true;
|
|
|
|
setTimeout(() => {
|
|
ajaxLoadPosts();
|
|
loadMoreBtn.classList.remove('loading');
|
|
loadMoreBtn.disabled = false;
|
|
}, 1000);
|
|
});
|
|
|
|
function initFilters() {
|
|
const filters = filtersContainer.querySelectorAll('.filter-select');
|
|
|
|
filters.forEach(filter => {
|
|
const filterName = filter.dataset.name;
|
|
|
|
filter.querySelectorAll('li a.tax-filter').forEach(link => {
|
|
const value = link.dataset.value;
|
|
const category = link.dataset.category;
|
|
|
|
if (!tblFilters[category]) {
|
|
tblFilters[category] = {
|
|
tags: [],
|
|
years: [],
|
|
order: null
|
|
};
|
|
}
|
|
|
|
const values = tblFilters?.[category]?.[filterName] ?? [];
|
|
|
|
if (values.includes(value)) {
|
|
link.classList.add('disabled');
|
|
} else {
|
|
link.classList.remove('disabled');
|
|
}
|
|
|
|
link.addEventListener('click', function(e) {
|
|
e.preventDefault();
|
|
|
|
const state = tblFilters[category];
|
|
|
|
if (filterName === 'order') {
|
|
state.order = value;
|
|
this.classList.add('disabled');
|
|
} else {
|
|
if (!state[filterName].includes(value)) {
|
|
state[filterName].push(value);
|
|
this.classList.add('disabled');
|
|
}
|
|
}
|
|
|
|
ajaxLoadPosts(true, state);
|
|
});
|
|
});
|
|
});
|
|
}
|
|
|
|
function initSelectedFilters() {
|
|
const items = wrapper.querySelectorAll('.active-filters__item-remove');
|
|
|
|
items.forEach(item => {
|
|
item.addEventListener('click', function (e) {
|
|
e.preventDefault();
|
|
|
|
const category = item.dataset.category;
|
|
const filterName = item.dataset.param;
|
|
const value = item.dataset.value;
|
|
|
|
if (!category || !tblFilters[category]) return;
|
|
|
|
if (filterName === 'clear-all') {
|
|
Object.keys(tblFilters[category]).forEach(key => {
|
|
tblFilters[category][key] = Array.isArray(tblFilters[category][key]) ? [] : null;
|
|
});
|
|
} else if (filterName && value) {
|
|
const tblItem = tblFilters[category][filterName];
|
|
if (Array.isArray(tblItem)) {
|
|
tblFilters[category][filterName] = tblItem.filter(v => v !== value);
|
|
} else if (tblItem === value) {
|
|
tblFilters[category][filterName] = null;
|
|
}
|
|
}
|
|
|
|
ajaxLoadPosts(true, tblFilters[category]);
|
|
});
|
|
});
|
|
}
|
|
})();
|
|
</script>
|
|
@endpush
|
|
@endif
|