From 3a54136769cf5ddb15067b7c415c7f73ddc74fcd Mon Sep 17 00:00:00 2001
From: Math-ias <mathiaslogins@gmail.com>
Date: Fri, 22 Nov 2024 17:37:40 -0500
Subject: [PATCH] [DISC-18903] Remove jquery and hanging javascript assets.

Some notes on files I changed.
 * `scaladoc/src/dotty/tools/scaladoc/renderers/Resources.scala`
   This adds jquery to list of resources to load in a scaladoc page.
   I could remove it after fixing `ux.js`.

   If you search for jquery now it appears in `dagre-d3.min.js`.
   But this is only in doc comment examples.

 * `scaladoc/resources/dotty_res/scripts/ux.js`
   jQuery powered things like sidebar link behaviour (issuing GET)
   and item expansion (from mini blurb to full description).

 * `docs/_spec/public/scripts/toc.js`
   I tried to do a 1 to 1 port,
   included bugs like scroll listener being unhooked
   after clicking a link in the TOC.
   This table of contents ISN'T the same as
   what appears in normal docs.
   This is specific to the language spec.
   There might be an opportunity here to share code,
   see IntersectionObserver in `ux.js`.

 * `docs/_spec/public/scripts/main.js`
   Nothing exciting here.

 * `docs/_spec/_layouts/toc.yml`
   Loads jQuery for previously mentioned language spec TOC.

 * `docs/_spec/_layouts/default.yml`
   I think duplicate to above.

 * `docs/_assets/js/toolbar.js`
   Lots of unused jquery code.
   This is hanging source code,
   with references to code that was removed with commit ...
   ```
   0f78f739dd31ba095f19d32707315d94469ae9f9
   ```
 * `docs/_assets/css/toolbar.css`
   Same as above.

 * `docs/_assets/js/sidebar.js`
   `togglePath` call path removed in same commit above.
---
 docs/_assets/css/toolbar.css                  |  98 --------------
 docs/_assets/js/sidebar.js                    |   6 -
 docs/_assets/js/toolbar.js                    |  26 ----
 docs/_spec/_layouts/default.yml               |   1 -
 docs/_spec/_layouts/toc.yml                   |   1 -
 docs/_spec/public/scripts/main.js             |  18 ++-
 docs/_spec/public/scripts/toc.js              | 128 +++++++++---------
 scaladoc/resources/dotty_res/scripts/ux.js    |  11 +-
 .../tools/scaladoc/renderers/Resources.scala  |   1 -
 9 files changed, 81 insertions(+), 209 deletions(-)
 delete mode 100644 docs/_assets/css/toolbar.css
 delete mode 100644 docs/_assets/js/sidebar.js
 delete mode 100644 docs/_assets/js/toolbar.js

diff --git a/docs/_assets/css/toolbar.css b/docs/_assets/css/toolbar.css
deleted file mode 100644
index faf051e5dde8..000000000000
--- a/docs/_assets/css/toolbar.css
+++ /dev/null
@@ -1,98 +0,0 @@
-body {
-  margin-top: 50px;
-}
-
-nav.navbar {
-  height: 50px;
-  line-height: 1;
-  font-size: 24px;
-  font-family: var(--font-family-toolbar-details);
-  background-color: var(--toolbar);
-  box-shadow: 0 0 6px;
-}
-nav.navbar-dark * {
-  color: var(--toolbar-entry);
-  transition: color .2s ease-out;
-}
-
-nav.navbar-dark a:hover *, nav.navbar-dark a:focus * {
-  color: var(--toolbar-active);
-}
-nav.navbar a:hover {
-  text-decoration: none;
-}
-nav.navbar a {
-  cursor: pointer;
-}
-
-.navbar-brand {
-  margin-right: auto;
-  margin-left: auto;
-  font-size: inherit;
-  display: flex;
-  align-items: center;
-}
-
-.navbar-brand .project-logo {
-  display: none;
-  height: 40px;
-  margin-right: 7px;
-}
-
-.navbar-brand .project-details * {
-  margin: 0;
-  line-height: inherit;
-}
-.navbar-brand .project-details h1 {
-  font-size: 1em;
-  font-family: var(--font-family-toolbar-main);
-  font-weight: var(--font-weight-toolbar-main);
-}
-.navbar-brand .project-details h2 {
-  font-size: 0.5em;
-  margin-top: 2px;
-  font-weight: var(--font-weight-toolbar-details);
-}
-
-#search-api-input {
-  color: initial;
-  width: 10em;
-}
-#searchbar {
-  display: none;
-}
-#searchbar.shown {
-  display: initial;
-  margin-left: auto;
-  margin-right: auto;
-}
-#searchbar.shown + .navbar-brand {
-  display: none;
-}
-
-#search-icon {
-  margin-left: .5em;
-}
-
-@media (min-width: 420px) {
-  .navbar-brand .project-logo {
-    display: inline;
-  }
-}
-
-@media (min-width: 768px) {
-  #search-icon, #searchbar.shown {
-    margin-left: 1em;
-    margin-right: initial;
-  }
-  #searchbar.shown + .navbar-brand {
-    display: flex;
-  }
-}
-
-@media (min-width: 1200px) {
-  #searchbar.shown {
-    position: absolute;
-    margin-left: 4em;
-  }
-}
diff --git a/docs/_assets/js/sidebar.js b/docs/_assets/js/sidebar.js
deleted file mode 100644
index 2832486c1d6a..000000000000
--- a/docs/_assets/js/sidebar.js
+++ /dev/null
@@ -1,6 +0,0 @@
-// Toggles a sidebar section
-function toggleSection(titleElement) {
-  const title = $(titleElement);
-  title.siblings("ul").toggleClass("toggled");
-  title.children("i.fas").toggleClass("fa-angle-right fa-angle-down");
-}
diff --git a/docs/_assets/js/toolbar.js b/docs/_assets/js/toolbar.js
deleted file mode 100644
index a799ca661dd9..000000000000
--- a/docs/_assets/js/toolbar.js
+++ /dev/null
@@ -1,26 +0,0 @@
-$(function() {
-  const menuIcon = $("#menu-icon");
-  const sidebar = $(".sidebar");
-  menuIcon.on("click", () => {
-    sidebar.toggleClass("toggled");
-  });
-
-  const searchIcon = $("#search-icon");
-  const searchbar = $("#searchbar");
-  const searchApiInput = $("#search-api-input");
-  searchIcon.on("click", () => {
-    searchbar.toggleClass("shown");
-    searchApiInput.focus();
-  });
-
-  const baseurlInput = $("#baseurl-input");
-  searchApiInput.keydown(evt => {
-    if (evt.which === 13) { // Enter
-      const baseUrl = baseurlInput.val();
-      const searchTerm = searchApiInput.val();
-      const previousUrl = encodeURI(window.location);
-      const searchUrl = `${baseUrl}/api/search.html?searchTerm=${searchTerm}&previousUrl=${previousUrl}`;
-      window.location = searchUrl;
-    }
-  });
-});
diff --git a/docs/_spec/_layouts/default.yml b/docs/_spec/_layouts/default.yml
index 0f7fb24d7ce2..88e13a1668ce 100644
--- a/docs/_spec/_layouts/default.yml
+++ b/docs/_spec/_layouts/default.yml
@@ -10,7 +10,6 @@
   <script defer src="https://cdn.jsdelivr.net/npm/katex@0.10.0/dist/katex.min.js" integrity="sha384-K3vbOmF2BtaVai+Qk37uypf7VrgBubhQreNQe9aGsz9lB63dIFiQVlJbr92dw2Lx" crossorigin="anonymous"></script>
   <script defer src="https://cdn.jsdelivr.net/npm/katex@0.10.0/dist/contrib/auto-render.min.js" integrity="sha384-kmZOZB5ObwgQnS/DuDg6TScgOiWWBiVt0plIRkZCmE6rDZGrEOQeHM5PcHi+nyqe" crossorigin="anonymous"></script>
 
-  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.2/styles/default.min.css">
   <!-- need to use include to see value of page.chapter variable -->
   <style type="text/css">
diff --git a/docs/_spec/_layouts/toc.yml b/docs/_spec/_layouts/toc.yml
index cfb407a8af71..850e2ce72454 100644
--- a/docs/_spec/_layouts/toc.yml
+++ b/docs/_spec/_layouts/toc.yml
@@ -6,7 +6,6 @@
   <link rel="icon" type="image/png" href="public/favicon.ico">
   <link rel="shortcut icon" type="image/png" href="public/favicon.ico">
 
-  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
   <title>{{ page.title }} | Scala {{ site.thisScalaVersion }}</title>
 
   <link rel="stylesheet" type="text/css" href="public/stylesheets/screen.css">
diff --git a/docs/_spec/public/scripts/main.js b/docs/_spec/public/scripts/main.js
index c74c8d0ff9a1..5d9660ea94f9 100644
--- a/docs/_spec/public/scripts/main.js
+++ b/docs/_spec/public/scripts/main.js
@@ -2,7 +2,7 @@ function currentChapter() {
   return parseInt(document.location.pathname.split('/').pop().substr(0, 2), 10);
 }
 
-function heading(i, heading, $heading) {
+function heading(i, heading) {
   const currentLevel = parseInt(heading.tagName.substring(1));
 
   if (currentLevel === this.headerLevel) {
@@ -19,12 +19,12 @@ function heading(i, heading, $heading) {
       this.headerCounts[this.headerLevel] = 1;
     }
   }
-  return `${this.headerCounts[this.headerLevel]} ${$heading.text()}`;
+  return `${this.headerCounts[this.headerLevel]} ${heading.innerText}`;
 }
 
 // ignore when using wkhtmltopdf, or it won't work...
 if (window.jekyllEnv !== 'spec-pdf') {
-  $('#toc').toc(
+  addTOC(document.getElementById('toc'),
     {
       'selectors': 'h1,h2,h3',
       'smoothScrolling': false,
@@ -53,12 +53,16 @@ document.addEventListener("DOMContentLoaded", function() {
   // syntax highlighting after KaTeX is loaded,
   // so that math can be used in code blocks
   hljs.initHighlighting();
-  $("pre nobr").addClass("fixws");
+  document.querySelectorAll("pre nobr").forEach((element) => {
+    element.classList.add("fixws")
+  });
+
   // point when all necessary js is done, so PDF to be rendered
   window.status = "loaded";
 });
 
-$("#chapters a").each(function (index) {
-  const href = $(this).attr("href");
-  $(this).toggleClass("chapter-active", document.location.pathname.endsWith(href));
+document.querySelectorAll("#chapters a").forEach(function (element) {
+  const href = element.attributes.getNamedItem("href");
+  const toggle = href != null && document.location.pathname.endsWith(href.value);
+  element.classList.toggle("chapter-active", toggle);
 });
diff --git a/docs/_spec/public/scripts/toc.js b/docs/_spec/public/scripts/toc.js
index 5b0bded12cfc..b6642e249afa 100644
--- a/docs/_spec/public/scripts/toc.js
+++ b/docs/_spec/public/scripts/toc.js
@@ -5,32 +5,39 @@
  * copyright Greg Allen 2014
  * MIT License
 */
-(function($) {
-var verboseIdCache = {};
-$.fn.toc = function(options) {
-  var self = this;
-  var opts = $.extend({}, jQuery.fn.toc.defaults, options);
 
-  var container = $(opts.container);
-  var headings = $(opts.selectors, container);
+/* The following ports the jquery plugin to modern javascript. */
+
+/***
+ * Add table of contents links to the given TOC container.
+ * @param {HTMLElement} domElement - The DOM element to manipulate
+ * @param {Object} options - A list of options to change TOC_DEFAULTS.
+ * @return {HTMLElement} - The same tocContainer for chaining.
+ */
+function addTOC(tocContainer, options) {
+  var verboseIdCache = {};
+  // Since options are only one level of nesting deep,
+  // we use the spread syntax to merge.
+  var opts = {...TOC_DEFAULTS, ...options};
+  var container = document.querySelector(opts.container);
+  var headings = container.querySelectorAll(opts.selectors);
   var headingOffsets = [];
   var activeClassName = opts.activeClass;
-
   var scrollTo = function(e, callback) {
-    $('li', self).removeClass(activeClassName);
-    $(e.target).parent().addClass(activeClassName);
+    tocContainer.querySelectorAll('li').forEach(function (element) {
+      element.classList.remove(activeClassName);
+    });
+    e.parentNode.classList.add(activeClassName);
   };
 
-  //highlight on scroll
   var timeout;
   var highlightOnScroll = function(e) {
     if (timeout) {
       clearTimeout(timeout);
     }
     timeout = setTimeout(function() {
-      var top = $(window).scrollTop(),
+      var top = window.pageYOffset,
         highlighted, closest = Number.MAX_VALUE, index = 0;
-      
       for (var i = 0, c = headingOffsets.length; i < c; i++) {
         var currentClosest = Math.abs(headingOffsets[i] - top);
         if (currentClosest < closest) {
@@ -38,57 +45,54 @@ $.fn.toc = function(options) {
           closest = currentClosest;
         }
       }
-      
-      $('li', self).removeClass(activeClassName);
-      highlighted = $('li:eq('+ index +')', self).addClass(activeClassName);
-      opts.onHighlight(highlighted);      
+      tocContainer.querySelectorAll('li').forEach(function (element) {
+        element.classList.remove(activeClassName);
+      });
+      highlighted = tocContainer.querySelector('li:nth-child(' + index + ')')
+      if (highlighted != null) { highlighted.classList.add(activeClassName); }
+      opts.onHighlight(highlighted);
     }, 50);
   };
+
   if (opts.highlightOnScroll) {
-    $(window).on('scroll', highlightOnScroll);
+    window.addEventListener('scroll', highlightOnScroll);
     highlightOnScroll();
   }
 
-  return this.each(function() {
-    //build TOC
-    var el = $(this);
-    var ul = $(opts.listType);
-
-    headings.each(function(i, heading) {
-      var $h = $(heading);
-      headingOffsets.push($h.offset().top - opts.highlightOffset);
-
-      var anchorName = opts.anchorName(i, heading, opts.prefix);
-
-      //add anchor
-      if(heading.id !== anchorName) {
-        var anchor = $('<span/>').attr('id', anchorName).insertBefore($h);
-      }
-
-      //build TOC item
-      var a = $('<a/>')
-        .text(opts.headerText(i, heading, $h))
-        .attr('href', '#' + anchorName)
-        .on('click', function(e) {
-          $(window).off('scroll', highlightOnScroll);
-          scrollTo(e, function() {
-            $(window).on('scroll', highlightOnScroll);
-          });
-          el.trigger('selected', $(this).attr('href'));
-        });
-
-      var li = $('<li/>')
-        .addClass(opts.itemClass(i, heading, $h, opts.prefix))
-        .append(a);
+  const listTypeRegex = new RegExp("<(.*)/>");
+  const listTypeToTagName = listTypeRegex.exec(opts.listType);
+  if (listTypeToTagName == null) { return tocContainer; }
+  var ul = document.createElement(listTypeToTagName[1]);
+  headings.forEach(function(heading, i) {
+    headingOffsets.push(heading.getBoundingClientRect().top - opts.highlightOffset);
+    var anchorName = opts.anchorName(i, heading, opts.prefix);
+    if(heading.id !== anchorName) {
+      var anchor = document.createElement("span");
+      anchor.setAttribute('id', anchorName);
+      heading.parentNode.insertBefore(anchor, heading);
+    }
 
-      ul.append(li);
+    var a = document.createElement("a");
+    a.textContent = opts.headerText(i, heading);
+    a.setAttribute('href', '#' + anchorName);
+    a.addEventListener('click', () => {
+      window.removeEventListener('scroll', highlightOnScroll);
+      scrollTo(a, function() {
+        // Kept bug from jquery version: callback isn't called, so scroll event listener not re-attached.
+        window.addEventListener('scroll', highlightOnScroll);
+      });
+      // Research suggests this is a now unused custom event. Won't translate.
+      // el.trigger('selected', $(this).attr('href'))
     });
-    el.html(ul);
+    var li = document.createElement('li');
+    li.classList.add(opts.itemClass(i, heading, opts.prefix));
+    li.append(a);
+    ul.append(li);
   });
-};
-
+  tocContainer.replaceChildren(ul);
+}
 
-jQuery.fn.toc.defaults = {
+const TOC_DEFAULTS = {
   container: 'body',
   listType: '<ul/>',
   selectors: 'h1,h2,h3',
@@ -101,28 +105,22 @@ jQuery.fn.toc.defaults = {
     if(heading.id.length) {
       return heading.id;
     }
-
-    var candidateId = $(heading).text().replace(/[^a-z0-9]/ig, ' ').replace(/\s+/g, '-').toLowerCase();
+    var candidateId = heading.innerText.replace(/[^a-z0-9]/ig, ' ').replace(/\s+/g, '-').toLowerCase();
     if (verboseIdCache[candidateId]) {
       var j = 2;
-      
       while(verboseIdCache[candidateId + j]) {
         j++;
       }
       candidateId = candidateId + '-' + j;
-      
     }
     verboseIdCache[candidateId] = true;
-
     return prefix + '-' + candidateId;
   },
-  headerText: function(i, heading, $heading) {
-    return $heading.text();
+  headerText: function(i, heading) {
+    return heading.innerText();
   },
-  itemClass: function(i, heading, $heading, prefix) {
-    return prefix + '-' + $heading[0].tagName.toLowerCase();
+  itemClass: function(i, heading, prefix) {
+    return prefix + '-' + heading.tagName.toLowerCase();
   }
 
 };
-
-})(jQuery);
diff --git a/scaladoc/resources/dotty_res/scripts/ux.js b/scaladoc/resources/dotty_res/scripts/ux.js
index 97f9bf14939d..ab56c6ea3772 100644
--- a/scaladoc/resources/dotty_res/scripts/ux.js
+++ b/scaladoc/resources/dotty_res/scripts/ux.js
@@ -92,7 +92,7 @@ function attachAllListeners() {
         expanderChild !== null
       ) {
         expanderChild.onclick = function (e) {
-          if (!$(e.target).is("a") && e.fromSnippet !== true) {
+          if (!e.target.tagName === "A" && e.fromSnippet !== true) {
             this.parentElement.classList.toggle("expand");
             this.children[0].classList.toggle("expanded");
             this.querySelector(".show-content").classList.toggle("expand");
@@ -127,7 +127,7 @@ function attachAllListeners() {
   var memberLists = document.getElementsByClassName("tab");
   if (memberLists) {
     for (i = 0; i < memberLists.length; i++) {
-      if ($(memberLists[i].children[0].children[0]).is("button")) {
+      if (memberLists[i].children[0].children[0].tagName === "BUTTON") {
         memberLists[i].children[0].onclick = function (e) {
           this.classList.toggle("expand");
           this.children[0].classList.toggle("expand");
@@ -172,7 +172,9 @@ function attachAllListeners() {
       }
       e.preventDefault();
       e.stopPropagation();
-      $.get(href, function (data) {
+      fetch(href, { method: 'GET' })
+      .then((response) => response.text())
+      .then(function (data) {
         const oldLoc = getRawLoc();
         if (window.history.state === null) {
           window.history.replaceState(savePageState(document), "");
@@ -553,7 +555,8 @@ var transform;
 
 function showGraph() {
   document.getElementById("inheritance-diagram").classList.add("shown");
-  if ($("svg#graph").children().length == 0) {
+  const graph = document.querySelector("svg#graph");
+  if (graph != null && graph.children().length == 0) {
     var dotNode = document.querySelector("#dot");
 
     if (dotNode) {
diff --git a/scaladoc/src/dotty/tools/scaladoc/renderers/Resources.scala b/scaladoc/src/dotty/tools/scaladoc/renderers/Resources.scala
index 3e49af2e0576..bdd86c0e14ba 100644
--- a/scaladoc/src/dotty/tools/scaladoc/renderers/Resources.scala
+++ b/scaladoc/src/dotty/tools/scaladoc/renderers/Resources.scala
@@ -120,7 +120,6 @@ trait Resources(using ctx: DocContext) extends Locations, Writer:
     ).map(dottyRes)
 
     val urls = List(
-      "https://code.jquery.com/jquery-3.5.1.min.js",
       "https://d3js.org/d3.v6.min.js",
       "https://cdn.jsdelivr.net/npm/graphlib-dot@0.6.2/dist/graphlib-dot.min.js",
       "https://cdnjs.cloudflare.com/ajax/libs/dagre-d3/0.6.1/dagre-d3.min.js",