ordering of ul and desing improvment

js/search.js

@@ -1,46 +1,136 @@
-function search_ul_items() {
-const query = document.getElementById('searchbox').value.toLowerCase();
-const ul = document.querySelector('ul'); // only one UL
-if (!ul) return;
+function paginate_ul_items(page = 1) {
+    const ul = document.querySelector('ul');
+    if (!ul) return;
 
-const items = ul.querySelectorAll('li');
-items.forEach(li => {
-    if (li.textContent.toLowerCase().includes(query)) {
-    li.style.display = 'list-item';
-    } else {
-    li.style.display = 'none';
+    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 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";
-}
+    const searchbox = document.getElementById('searchbox');
+    if (searchbox) {
+        searchbox.title = "Search for pages";
+        searchbox.style.fontStyle = "bold";
+    }
 
-document.getElementById('searchbox').addEventListener('input', search_ul_items);
+    document.getElementById('searchbox').addEventListener('input', search_ul_items);
+
+    // Initial pagination setup
+    paginate_ul_items(1);
 });

js/ulorder.js

@@ -0,0 +1,47 @@
+// sortLists.js
+
+// Function to detect if a string contains numbers
+function extractNumber(text) {
+  const match = text.match(/\d+/);
+  return match ? parseInt(match[0], 10) : null;
+}
+
+// Sorting function
+function sortListItems(a, b) {
+  const textA = a.textContent.trim().toLowerCase();
+  const textB = b.textContent.trim().toLowerCase();
+
+  const numA = extractNumber(textA);
+  const numB = extractNumber(textB);
+
+  if (numA !== null && numB !== null) {
+    // Both contain numbers -> sort numerically
+    if (numA !== numB) return numA - numB;
+    return textA.localeCompare(textB);
+  }
+
+  if (numA !== null) {
+    // A has number, B doesn't -> numbers first
+    return -1;
+  }
+  if (numB !== null) {
+    // B has number, A doesn't
+    return 1;
+  }
+
+  // Otherwise sort alphabetically
+  return textA.localeCompare(textB);
+}
+
+// Main function to sort all ULs
+function sortAllULs() {
+  const uls = document.querySelectorAll("ul");
+  uls.forEach(ul => {
+    const items = Array.from(ul.querySelectorAll("li"));
+    items.sort(sortListItems);
+    items.forEach(item => ul.appendChild(item)); // reattach in sorted order
+  });
+}
+
+// Run after page load
+document.addEventListener("DOMContentLoaded", sortAllULs);