ordering of ul and desing improvment

2025-09-25 10:27:08 +02:00
parent 508624febc
commit 71ce707c51
4 changed files with 233 additions and 41 deletions
--- a/PyPost.py
+++ b/PyPost.py
@@ -131,8 +131,8 @@ def render_markdown(md_path: Path):
    <main class="container" style="flex:1;">
        <h1 onclick="window.location.href=window.location.origin" style="cursor:pointer; display:flex; align-items:center; gap:8px; font-size:1.5em; margin:0;">
            <img src="../css/icons/back.webp" width="32" height="32" alt="Back" style="display:block;" />
-                {title}
-        </h1>
+                {title}  <noscript>(Enable JavaScript!)</noscript>
+        </h1> 
        <img src="../css/icons/written.webp" width="32" height="32" alt="write_img" loading="lazy" style="vertical-align: middle;padding-left:12px; padding-left:40px;" />
        <div class="meta" style="display: inline;">Written @{time.asctime(time.localtime())}</div>
        <hr style="margin:10px 0;" />
@@ -148,7 +148,7 @@ def render_markdown(md_path: Path):
        <img src="../css/icons/magnifier.webp" width="16" height="16" alt="Hash2" loading="lazy" style="display:inline; vertical-align:middle;" />
        Hash 2 (<b>Windows-1252</b>)<i>:{base64.b64encode(hash2.encode("windows-1252")).decode("windows-1252")}</i><br />
        <img src="../css/icons/save.webp" width="16" height="16" alt="Hash2" loading="lazy" style="display:inline; vertical-align:middle;" />
-        <a id="download-md">Download as Markdown</a>
+        <a id="download-md">Download as Markdown <noscript>Enable JavaScript for downloads</noscript></a>
    </footer>
 </body>
 </html>"""
--- a/html/base/index.html
+++ b/html/base/index.html
@@ -3,6 +3,58 @@
 <head>
  <title>Auto Index</title>
  <style>
+    hr {width: auto;}
+    button {
+      margin-right: 5px;
+      background-image: linear-gradient(#f7f8fa ,#e7e9ec);
+      border-color: #adb1b8 #a2a6ac #8d9096;
+      border-style: solid;
+      border-width: 1px;
+      border-radius: 3px;
+      box-shadow: rgba(255,255,255,.6) 0 1px 0 inset;
+      box-sizing: border-box;
+      color: #0f1111;
+      cursor: pointer;
+      display: inline-block;
+      font-family: "Amazon Ember",Arial,sans-serif;
+      font-size: 14px;
+      height: 29px;
+      font-size: 13px;
+      outline: 0;
+      overflow: hidden;
+      padding: 0 11px;
+      text-align: center;
+      text-decoration: none;
+      text-overflow: ellipsis;
+      user-select: none;
+      -webkit-user-select: none;
+      touch-action: manipulation;
+      white-space: nowrap;
+    }
+
+    button:active {
+      border-bottom-color: #a2a6ac;
+    }
+
+    button:active:hover {
+      border-bottom-color: #a2a6ac;
+    }
+
+    button:hover {
+      border-color: #a2a6ac #979aa1 #82858a;
+    }
+
+    button:focus {
+      border-color: #e77600;
+      box-shadow: rgba(228, 121, 17, .5) 0 0 3px 2px;
+      outline: 0;
+    }
+
+    button:disabled,
+    button[disabled]{
+      color: gray;
+      border-color: gray;
+    }
    body { font-family: Arial, sans-serif; margin: 20px; }
    h1 { color: #333; }
    li { list-style: none; background: url("../../css/icons/item.webp") no-repeat left center; background-size: 15px 20px; padding-left: 25px; transition: font-size 0.5s cubic-bezier(0.075, 0.82, 0.165, 1); padding-bottom: 5px; }
@@ -33,6 +85,8 @@
              <li>It strips the .HTML ending from each file you see in the list below</li>
              <li>It isnt necessary, but visually tweaks the page.</li>
              <li>It enables the "Back" Function for Headers</li>
+              <li>It enables Searching and Sorting of the Page-Display</li>
+              <li>It is essential for downloading Markdown-Source</li>
             </ul>
        </p>
    </noscript>
@@ -45,8 +99,9 @@
 <!-- load scripts needed for indexer -->
 <script src="../../js/normal.js"></script>
 <script src="../../js/search.js" defer></script>
+<script src="../../js/ulorder.js" defer></script>

-<footer style=" position: absolute; bottom: 0; width: 100%;">
+<footer style="margin-top:auto; width: 100%;">
  <p></p>
 </footer>
 </body>
--- a/js/search.js
+++ b/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);
 });
--- a/js/ulorder.js
+++ b/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);