diff --git a/scripts/boxesserver b/scripts/boxesserver
index f4ccf40..e5ea52d 100755
--- a/scripts/boxesserver
+++ b/scripts/boxesserver
@@ -303,9 +303,16 @@ class BServer:
+
+
+
+
diff --git a/static/self.css b/static/self.css
index 9c35a15..5b44ba7 100644
--- a/static/self.css
+++ b/static/self.css
@@ -49,6 +49,7 @@ h3 {
padding: 5px;
padding-left: 15px;
margin: 0px;
+ width: 75%
}
h3::before {
@@ -138,6 +139,10 @@ video {
font-size: 0.9em;
}
+.search {
+ float : right;
+}
+
.footer ul li a {
color: #555;
margin-right: 10px;
diff --git a/static/self.js b/static/self.js
index d43f5d6..dded00d 100644
--- a/static/self.js
+++ b/static/self.js
@@ -15,18 +15,28 @@ function hideThumbnail() {
img.style.display = "none";
}
-
+function expandId(id) {
+ const e = document.getElementById(id);
+ const h = document.getElementById("h-" + id);
+ e.style.display = "block";
+ h.classList.add("open");
+ h.setAttribute("aria-expanded", "true");
+}
+function collapseId(id) {
+ const e = document.getElementById(id);
+ const h = document.getElementById("h-" + id);
+ e.style.display = "none";
+ h.classList.remove("open");
+ h.setAttribute("aria-expanded", "false");
+}
+
function toggleId(id) {
const e = document.getElementById(id);
const h = document.getElementById("h-" + id);
if (e.style.display == null || e.style.display === "none") {
- e.style.display = "block";
- h.classList.add("open");
- h.setAttribute("aria-expanded", "true");
+ expandId(id);
} else {
- e.style.display = "none";
- h.classList.remove("open");
- h.setAttribute("aria-expanded", "false");
+ collapseId(id);
}
}
@@ -157,4 +167,48 @@ document.addEventListener('DOMContentLoaded', function() {
}, false);
+function collapseAll() {
+ const h = document.getElementsByClassName("toggle");
+ for (let el of h) {
+ id = el.getAttribute("data-id")
+ collapseId(id);
+ }
+}
+function expandAll() {
+ const h = document.getElementsByClassName("toggle");
+ for (let el of h) {
+ id = el.getAttribute("data-id")
+ expandId(id);
+ }
+}
+
+function showAll(str) {
+ let matching_ids = document.querySelectorAll('[id^="search_id_"]')
+ for (let id of matching_ids) {
+ id.hidden = false;
+ }
+}
+
+function showOnly(str) {
+ str = str.toLowerCase();
+ let matching_ids = document.querySelectorAll('[id^="search_id_"]')
+ for (let id of matching_ids) {
+ name = id.id.replace("search_id_", "").toLowerCase();
+ if (name.includes(str) || id.textContent.toLowerCase().includes(str))
+ id.hidden = false;
+ else
+ id.hidden = true;
+ }
+}
+
+function filterSearchItems() {
+ const search = document.getElementById("search")
+ if (search.value.length == 0) {
+ collapseAll();
+ showAll()
+ } else {
+ expandAll();
+ showOnly(search.value)
+ }
+}