rattatwinko/PyPost
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

ordering of ul and desing improvment

Browse Source
This commit is contained in:
rattatwinko
2025-09-25 10:27:08 +02:00
parent 508624febc
commit 71ce707c51
4 changed files with 233 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
PyPost.py
View File

@@ -131,8 +131,8 @@ def render_markdown(md_path: Path):
<main class="container" style="flex:1;"> <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;"> <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;" /> <img src="../css/icons/back.webp" width="32" height="32" alt="Back" style="display:block;" />
{title} {title} <noscript>(Enable JavaScript!)</noscript>
</h1> </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;" /> <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> <div class="meta" style="display: inline;">Written @{time.asctime(time.localtime())}</div>
<hr style="margin:10px 0;" /> <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;" /> <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 /> 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;" /> <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> </footer>
</body> </body>
</html>""" </html>"""

57
html/base/index.html
View File

@@ -3,6 +3,58 @@
<head> <head>
<title>Auto Index</title> <title>Auto Index</title>
<style> <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; } body { font-family: Arial, sans-serif; margin: 20px; }
h1 { color: #333; } 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; } 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 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 isnt necessary, but visually tweaks the page.</li>
<li>It enables the "Back" Function for Headers</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> </ul>
</p> </p>
</noscript> </noscript>
@@ -45,8 +99,9 @@
<!-- load scripts needed for indexer --> <!-- load scripts needed for indexer -->
<script src="../../js/normal.js"></script> <script src="../../js/normal.js"></script>
<script src="../../js/search.js" defer></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> <p></p>
</footer> </footer>
</body> </body>

164
js/search.js
View File

@@ -1,46 +1,136 @@
function search_ul_items() { function paginate_ul_items(page = 1) {
const query = document.getElementById('searchbox').value.toLowerCase(); const ul = document.querySelector('ul');
const ul = document.querySelector('ul'); // only one UL if (!ul) return;
if (!ul) return;
const items = ul.querySelectorAll('li'); const items = Array.from(ul.querySelectorAll('li'));
items.forEach(li => { const query = document.getElementById('searchbox').value.toLowerCase();
if (li.textContent.toLowerCase().includes(query)) {
li.style.display = 'list-item'; // Filter items based on search
} else { const filteredItems = items.filter(li => li.textContent.toLowerCase().includes(query));
li.style.display = 'none';
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 // Create search box and insert before the available pages paragraph
window.addEventListener('DOMContentLoaded', function() { window.addEventListener('DOMContentLoaded', function() {
const searchDiv = document.createElement('div'); const searchDiv = document.createElement('div');
searchDiv.style.marginBottom = '16px'; searchDiv.style.marginBottom = '16px';
searchDiv.style.paddingLeft = '19px'; searchDiv.style.paddingLeft = '19px';
searchDiv.innerHTML = ` searchDiv.innerHTML = `
<input <input
type="text" type="text"
id="searchbox" id="searchbox"
placeholder="Search pages..." placeholder="Search pages..."
style=" style="
padding: 6px 6px 6px 28px; padding: 6px 6px 6px 28px;
font-size: 1em; font-size: 1em;
width: 220px; width: 220px;
background: url('../../css/icons/search.webp') no-repeat 6px center; background: url('../../css/icons/search.webp') no-repeat 6px center;
background-size: 20px 20px; background-size: 20px 20px;
" "
title="Search for pages" title="Search for pages"
/> />
`; `;
const available = document.getElementById('available'); const available = document.getElementById('available');
available.parentNode.insertBefore(searchDiv, available); available.parentNode.insertBefore(searchDiv, available);
const searchbox = document.getElementById('searchbox'); const searchbox = document.getElementById('searchbox');
if (searchbox) { if (searchbox) {
searchbox.title = "Search for pages"; searchbox.title = "Search for pages";
searchbox.style.fontStyle = "bold"; 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);
}); });

47
js/ulorder.js Normal file
View File

@@ -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);