head.html: replace jQuery with vanilla JavaScript ...

... and format html code w/ prettier

1 files changed, 51 insertions, 36 deletions

diff --git a/head.html b/head.html
index da00bea..7ee78be 100644
--- a/head.html
+++ b/head.html
@@ -1,56 +1,71 @@
-<meta name="viewport" content="width=device-width, initial-scale=1">
-<link href="/assets/fonts/fonts.min.css" rel="stylesheet" type="text/css">
-<link href="/assets/css/gruvbox.css" rel="stylesheet" type="text/css">
-<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
-<link href="https://cdn.bootcdn.net/ajax/libs/simplebar/6.2.5/simplebar.css" rel="stylesheet">
+<meta name="viewport" content="width=device-width, initial-scale=1" />
+<link href="/assets/fonts/fonts.min.css" rel="stylesheet" type="text/css" />
+<link href="/assets/css/gruvbox.css" rel="stylesheet" type="text/css" />
+<link
+  href="https://cdn.bootcdn.net/ajax/libs/simplebar/6.2.5/simplebar.css"
+  rel="stylesheet"
+/>
 <script src="https://cdn.bootcdn.net/ajax/libs/simplebar/6.2.5/simplebar.js"></script>
-<link href="/assets/css/cgit.css" rel="stylesheet" type="text/css">
+<link href="/assets/css/cgit.css" rel="stylesheet" type="text/css" />
 <script>
-function go_responsive() {
+  function go_responsive() {
     /* destroy tables that prevent responsive design */
     var tabs = document.createElement("div");
     var header_form = document.createElement("div");
     var forms = document.createElement("div");
     tabs.className = "tabs";
     forms.className = "forms";
-    var header_td_form = $("table#header td.form");
-    header_td_form.children().appendTo(header_form);
-    header_td_form.remove();
-    var tab_items = $("table.tabs td").map(function(i, v) {
+    var header_td_form = document.querySelector("table#header td.form");
+    while (header_td_form.firstChild) {
+      header_form.appendChild(header_td_form.firstChild);
+    }
+    header_td_form.parentNode.removeChild(header_td_form);
+    var tab_items = Array.from(document.querySelectorAll("table.tabs td")).map(
+      (v) => {
         var div = document.createElement("div");
-        $(v).children().appendTo(div);
+        var children = Array.from(v.children);
+        children.forEach((child) => div.appendChild(child));
         return div;
-    });
+      }
+    );
     tab_items[1].className = "form";
     header_form.className = "form";
-    $([tab_items[1], header_form]).appendTo(forms);
-    $(tab_items[0]).appendTo(tabs);
-    $("table.tabs").remove();
-    var header = $("table#header");
-    $(tabs).insertAfter(header);
-    $(forms).insertAfter(header);
-    header.css('display', 'inline-block');
-    header.css('width', 'auto');
-}
+    [tab_items[1], header_form].forEach((el) => forms.appendChild(el));
+    tabs.appendChild(tab_items[0]);
+    document.querySelectorAll("table.tabs").forEach((el) => el.remove());
+    var header = document.querySelector("table#header");
+    header.insertAdjacentElement("afterend", tabs);
+    header.insertAdjacentElement("afterend", forms);
+    header.style.display = "inline-block";
+    header.style.width = "auto";
+  }
 
-function wrap_fat_elements() {
+  function wrap_fat_elements() {
     /* wrap the elements that could be very large in width */
-    $("table.list, table.blob, table.ssdiff, " +
-     "table.bin-blob, table.nowrap, table.commit-info, " +
-     "table.diffstat, table.diff, table.list, table.stats, " +
-     "table.vgraph, table.hgraph, table.blame" 
-     ).wrap("<div class='table-wrap'></div>");
-    $('.table-wrap, pre.literal-block').each((index, el) => new SimpleBar(el));
-}
+    var tables = document.querySelectorAll(
+      "table.list, table.blob, table.ssdiff, table.bin-blob, table.nowrap, table.commit-info, table.diffstat, table.diff, table.list, table.stats, table.vgraph, table.hgraph, table.blame"
+    );
+    tables.forEach((table) => {
+      var wrapper = document.createElement("div");
+      wrapper.className = "table-wrap";
+      table.parentNode.insertBefore(wrapper, table);
+      wrapper.appendChild(table);
+    });
+    document
+      .querySelectorAll(".table-wrap, pre.literal-block")
+      .forEach((el) => {
+        new SimpleBar(el);
+      });
+  }
 
-$(function() {
+  document.addEventListener("DOMContentLoaded", function () {
     go_responsive();
     wrap_fat_elements();
-});
+  });
 </script>
 <style>
-.simplebar-scrollbar::before {
-  background-color: grey;
-  height: 4px;
-}
+  .simplebar-scrollbar::before {
+    background-color: grey;
+    height: 4px;
+  }
 </style>