136 lines
4.5 KiB
JavaScript
136 lines
4.5 KiB
JavaScript
function paginate_ul_items(page = 1) {
|
|
const ul = document.querySelector('ul');
|
|
if (!ul) return;
|
|
|
|
const items = Array.from(ul.querySelectorAll('li'));
|
|
const query = document.getElementById('searchbox').value.toLowerCase();
|
|
|
|
// Filter items based on search
|
|
const filteredItems = items.filter(li => li.textContent.toLowerCase().includes(query));
|
|
|
|
const itemsPerPage = 10;
|
|
const totalPages = Math.ceil(filteredItems.length / itemsPerPage);
|
|
|
|
// Hide all items first
|
|
items.forEach(li => li.style.display = 'none');
|
|
|
|
// Show only items for the current page
|
|
const start = (page - 1) * itemsPerPage;
|
|
const end = start + itemsPerPage;
|
|
filteredItems.slice(start, end).forEach(li => li.style.display = 'list-item');
|
|
|
|
// Render pagination controls
|
|
renderPaginationControls(totalPages, page);
|
|
}
|
|
|
|
function renderPaginationControls(totalPages, currentPage) {
|
|
let paginationDiv = document.getElementById('pagination-controls');
|
|
let separator = document.getElementById('vertical-seperator');
|
|
if (!paginationDiv) {
|
|
paginationDiv = document.createElement('div');
|
|
paginationDiv.id = 'pagination-controls';
|
|
paginationDiv.style.display = 'inline-block';
|
|
paginationDiv.style.marginLeft = '16px';
|
|
paginationDiv.style.verticalAlign = 'middle';
|
|
|
|
const searchDiv = document.getElementById('searchbox').parentNode;
|
|
|
|
// Create a wrapper so we can put a separator between search and pagination
|
|
const wrapper = document.createElement('div');
|
|
wrapper.style.display = 'flex';
|
|
wrapper.style.alignItems = 'center';
|
|
wrapper.style.gap = '12px'; // space around separator
|
|
|
|
// Move searchbox into wrapper
|
|
searchDiv.appendChild(wrapper);
|
|
wrapper.appendChild(document.getElementById('searchbox'));
|
|
|
|
// Separator
|
|
separator = document.createElement('div');
|
|
separator.id = "vertical-seperator"
|
|
separator.style.width = '1px';
|
|
separator.style.height = '28px';
|
|
separator.style.marginRight = "-15px";
|
|
separator.style.backgroundColor = '#ccc';
|
|
wrapper.appendChild(separator);
|
|
|
|
// Add pagination after separator
|
|
wrapper.appendChild(paginationDiv);
|
|
}
|
|
paginationDiv.innerHTML = '';
|
|
if (separator) {
|
|
separator.style.display = totalPages <= 1 ? 'none' : 'block';
|
|
}
|
|
|
|
if (totalPages <= 1) {
|
|
paginationDiv.style.display = 'none';
|
|
|
|
return;
|
|
} else {
|
|
paginationDiv.style.display = 'inline-block';
|
|
}
|
|
|
|
// Previous button
|
|
const prevBtn = document.createElement('button');
|
|
prevBtn.textContent = '<';
|
|
prevBtn.disabled = currentPage === 1;
|
|
prevBtn.onclick = () => paginate_ul_items(currentPage - 1);
|
|
paginationDiv.appendChild(prevBtn);
|
|
|
|
// Page numbers
|
|
for (let i = 1; i <= totalPages; i++) {
|
|
const btn = document.createElement('button');
|
|
btn.textContent = i;
|
|
btn.disabled = i === currentPage;
|
|
btn.onclick = () => paginate_ul_items(i);
|
|
paginationDiv.appendChild(btn);
|
|
}
|
|
|
|
// Next button
|
|
const nextBtn = document.createElement('button');
|
|
nextBtn.textContent = '>';
|
|
nextBtn.disabled = currentPage === totalPages;
|
|
nextBtn.onclick = () => paginate_ul_items(currentPage + 1);
|
|
paginationDiv.appendChild(nextBtn);
|
|
}
|
|
|
|
|
|
// Update search function to use pagination
|
|
function search_ul_items() {
|
|
paginate_ul_items(1);
|
|
}
|
|
|
|
// Create search box and insert before the available pages paragraph
|
|
window.addEventListener('DOMContentLoaded', function() {
|
|
const searchDiv = document.createElement('div');
|
|
searchDiv.style.marginBottom = '16px';
|
|
searchDiv.style.paddingLeft = '19px';
|
|
searchDiv.innerHTML = `
|
|
<input
|
|
type="text"
|
|
id="searchbox"
|
|
placeholder="Search pages..."
|
|
style="
|
|
padding: 6px 6px 6px 28px;
|
|
font-size: 1em;
|
|
width: 220px;
|
|
background: url('../../css/icons/search.webp') no-repeat 6px center;
|
|
background-size: 20px 20px;
|
|
"
|
|
title="Search for pages"
|
|
/>
|
|
`;
|
|
const available = document.getElementById('available');
|
|
available.parentNode.insertBefore(searchDiv, available);
|
|
|
|
const searchbox = document.getElementById('searchbox');
|
|
if (searchbox) {
|
|
searchbox.title = "Search for pages";
|
|
searchbox.style.fontStyle = "bold";
|
|
}
|
|
|
|
document.getElementById('searchbox').addEventListener('input', search_ul_items);
|
|
|
|
// Initial pagination setup
|
|
paginate_ul_items(1);
|
|
}); |