Siphalor/nginx-fancyindex-theme
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Implement file filtering

Browse Source
This commit is contained in:
Siphalor
2022-04-09 18:40:43 +02:00
parent 764b6a4653
commit e889bccb06
2 changed files with 48 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
footer.html
View File

@@ -14,15 +14,43 @@
<script src="https://siphalor.de/assets/js/main.js" defer="defer"></script> <script src="https://siphalor.de/assets/js/main.js" defer="defer"></script>
<script src="/Nginx-Fancyindex-Theme/marked.min.js"></script> <script src="/Nginx-Fancyindex-Theme/marked.min.js"></script>
<script> <script>
var directoryHeading = document.getElementById("directory"); let directoryHeading = document.getElementById("directory");
document.title = "Directory Listing for " + directoryHeading.innerHTML; document.title = "Directory Listing for " + directoryHeading.innerHTML;
let table = document.getElementById("list");
let searchContainer = document.getElementById("search-container");
searchContainer.remove();
table.before(searchContainer);
searchContainer.hidden = false;
let searchInput = document.getElementById("search-input");
searchInput.addEventListener("input", filterTable);
filterTable();
function filterTable() {
let value = searchInput.value.toLowerCase();
let rows = table.tBodies[0].rows;
if (value) {
for (let row of rows) {
row.hidden = row.cells[0].children[0].innerHTML.toLowerCase()
.indexOf(value) < 0;
}
} else {
for (let row of rows) {
row.hidden = false;
}
}
}
fetch("README.md").then(response => { fetch("README.md").then(response => {
if (response.ok) { if (response.ok) {
response.text().then(text => { response.text().then(text => {
var article = document.createElement("article"); let description = document.createElement("details");
article.innerHTML = marked.parse(text); description.innerHTML = marked.parse(text);
directoryHeading.after(article); description.open = true;
let summary = document.createElement("summary");
summary.innerHTML = "Description";
description.prepend(summary);
directoryHeading.after(description);
}); });
} }
}); });

16
header.html
View File

@@ -32,6 +32,13 @@
h1 { h1 {
text-align: center text-align: center
} }
summary {
text-align: center;
}
#search-container hr {
margin-top: 10px;
margin-bottom: 20px;
}
</style> </style>
</head> </head>
<body data-theme="dark"> <body data-theme="dark">
@@ -233,5 +240,14 @@
</div> </div>
<div class="wrapper"> <div class="wrapper">
<main class="page-content"> <main class="page-content">
<div id="search-container" hidden>
<hr />
<div class="search-article">
<label for="search-input" aria-hidden="true">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="rgba(128,128,128,0.8)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-search"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
</label>
<input type="search" id="search-input" placeholder="Filter the files" aria-label="Search">
</div>
</div>
<h1 id="directory" class="center"> <h1 id="directory" class="center">