Merge pull request #24 from szymon-rd/dynamic-loading-fixes

Dynamic loading fixes

Author: szymon-rd

docs/_assets/docsScalaLangResources/scaladoc-assets.html

@@ -1,9 +1,5 @@
 ---
 layout: base
-extraJS:
-  - js/contributors.js
-extraCSS:
-  - css/content-contributors.css
 ---
 
 <div id="content-wrapper">{{ content }}</div>

docs/_layouts/main.html

@@ -14,7 +14,7 @@ object DocumentationWebsite {
 
 
     val contributorsTestcasesDestinationFile = Paths.get("scaladoc-testcases", "docs", "_assets", "js", "contributors.js").toFile
-    val contributorsDestinationFile = Paths.get("docs", "_assets", "js", "contributors.js").toFile
+    val contributorsDestinationFile = baseDest / "dotty_res" / "scripts" / "contributors.js"
     sbt.IO.copyFile(contributorsFile, contributorsTestcasesDestinationFile)
     sbt.IO.copyFile(contributorsFile, contributorsDestinationFile)
 
@@ -25,8 +25,8 @@ object DocumentationWebsite {
     val cssCodeSnippetsSourceFile = cssSourceFileBase / "code-snippets.css"
     sbt.IO.copyFile(cssCodeSnippetsSourceFile, cssCodeSnippetsDesitnationFile)
 
-    val cssContentContributorsTestcasesDesitnationFile = Paths.get("docs", "_assets", "css", "content-contributors.css").toFile
-    val cssContentContributorsDesitnationFile = Paths.get("scaladoc-testcases", "docs", "_assets", "css", "content-contributors.css").toFile
+    val cssContentContributorsTestcasesDesitnationFile = Paths.get("scaladoc-testcases", "docs", "_assets", "css", "content-contributors.css").toFile
+    val cssContentContributorsDesitnationFile = baseDest / "dotty_res" / "styles" / "content-contributors.css"
     val cssContentContributorsSourceFile = cssContentContributorsSourceBaseFile / "content-contributors.css"
     sbt.IO.copyFile(cssContentContributorsSourceFile, cssContentContributorsTestcasesDesitnationFile)
     sbt.IO.copyFile(cssContentContributorsSourceFile, cssContentContributorsDesitnationFile)

project/DocumentationWebsite.scala

@@ -40,7 +40,6 @@
 ./contextual/type-classes.html
 ./contextual/using-clauses.html
 ./docs/reference/other-new-features/named-typeargs.html
-./docsScalaLangResources/scaladoc-assets.html
 ./dropped-features.html
 ./dropped-features/auto-apply.html
 ./dropped-features/class-shadowing-spec.html

project/scripts/expected-links/reference-expected-links.txt

@@ -147,5 +147,7 @@ class CodeSnippets:
     )
   }
 
-  enrichSnippets()
+  window.addEventListener("dynamicPageLoad", (e: Event) => {
+    enrichSnippets()
+  })
 

scaladoc-js/common/src/code-snippets/CodeSnippets.scala

@@ -49,7 +49,10 @@ trait FileChange extends js.Object:
 
 class ContentContributors:
   val indenticonsUrl = "https://github.com/identicons"
-  def linkForFilename(filename: String) = Globals.githubContributorsUrl + s"/commits?path=$filename"
+  val htmlElement = window.document.documentElement
+  def githubContributorsUrl() = htmlElement.getAttribute("data-githubContributorsUrl")
+  def githubContributorsFilename() = htmlElement.getAttribute("data-githubContributorsFilename")
+  def linkForFilename(filename: String) = githubContributorsUrl() + s"/commits?path=$filename"
   def getAuthorsForFilename(filename: String): Future[List[FullAuthor]] = {
     val link = linkForFilename(filename)
     Ajax.get(link).map(_.responseText).flatMap { json =>
@@ -85,11 +88,10 @@ class ContentContributors:
           .map(_.previous_filename)
     }
   }
-  document.addEventListener("DOMContentLoaded", (e: Event) => {
-    if js.typeOf(Globals.githubContributorsUrl) != "undefined" &&
-      js.typeOf(Globals.githubContributorsFilename) != "undefined"
-    then {
-      getAuthorsForFilename(Globals.githubContributorsFilename.stripPrefix("/")).onComplete {
+  window.addEventListener("dynamicPageLoad", (e: Event) => {
+    val ghUrl = githubContributorsUrl()
+    if js.typeOf(ghUrl) == "string" && ghUrl != "null" then {
+      getAuthorsForFilename(githubContributorsFilename().stripPrefix("/")).onComplete {
         case Success(authors) =>
           val maybeDiv = Option(document.getElementById("documentation-contributors"))
           maybeDiv.foreach { mdiv =>

scaladoc-js/contributors/src/Globals.scala

@@ -3,8 +3,6 @@ import scala.scalajs.js.annotation._
 
 object Main extends App:
   Searchbar()
-  SocialLinks()
   DropdownHandler()
-  Ux()
   TooltipNormalizer()
   CodeSnippets()

scaladoc-js/contributors/src/content-contributors/ContentContributors.scala

@@ -17,12 +17,13 @@ import java.net.URI
 class SearchbarComponent(engine: PageSearchEngine, inkuireEngine: InkuireJSSearchEngine, parser: QueryParser):
   val initialChunkSize = 5
   val resultsChunkSize = 20
+  def pathToRoot() = window.document.documentElement.getAttribute("data-pathToRoot")
   extension (p: PageEntry)
     def toHTML(boldChars: Set[Int]) =
       val location = if (p.isLocationExternal) {
         p.location
       } else {
-        Globals.pathToRoot + p.location
+        pathToRoot() + p.location
       }
 
       val extensionTargetMessage = if (p.extensionTarget.isEmpty()) {
@@ -56,7 +57,7 @@ class SearchbarComponent(engine: PageSearchEngine, inkuireEngine: InkuireJSSearc
       val location = if (m.pageLocation(0) == 'e') {
           m.pageLocation.substring(1)
         } else {
-          Globals.pathToRoot + m.pageLocation.substring(1)
+          pathToRoot() + m.pageLocation.substring(1)
         }
 
       div(cls := "scaladoc-searchbar-row mono-small-inline", "result" := "", "inkuire-result" := "", "mq" := m.mq.toString)(

scaladoc-js/main/src/Main.scala

@@ -1,9 +1,6 @@
 ---
-extraJS:
-  - js/contributors.js
 extraCSS:
   - css/bootstrap.min.css
-  - css/content-contributors.css
 ---
 
 <div class="container">

scaladoc-js/main/src/searchbar/SearchbarComponent.scala

@@ -9,8 +9,6 @@ const withEvent = (element, listener, callback) => {
   return () => element && element.removeEventListener(listener, callback);
 };
 
-const init = (cb) => window.addEventListener("DOMContentLoaded", cb);
-
 const attachDOM = (element, html) => {
   if (element) {
     element.innerHTML = htmlToString(html);

scaladoc-js/main/src/social-links/SocialLinks.scala

@@ -89,4 +89,6 @@
   }
 }
 
-init(() => new FilterBar());
+window.addEventListener("dynamicPageLoad", () => {
+  new FilterBar()
+})

scaladoc-js/main/src/ux/Ux.scala

@@ -1,5 +1,49 @@
 let observer = null;
 
+const attrsToCopy = [
+  "data-githubContributorsUrl",
+  "data-githubContributorsFilename",
+  "data-pathToRoot",
+]
+
+/**
+ * @typedef {Object} SavedPageState
+ * @property {Strign} mainDiv
+ * @property {String} leftColumn
+ * @property {String} title
+ * @property {Record<string, string>} attrs
+ */
+
+/**
+ * @param {Document} doc
+ * @returns {SavedPageState}
+ */
+function savePageState(doc) {
+  const attrs = {}
+  for (const attr of attrsToCopy) {
+    attrs[attr] = doc.documentElement.getAttribute(attr)
+  }
+  return {
+    mainDiv: doc.querySelector("#main").innerHTML,
+    leftColumn: doc.querySelector("#leftColumn").innerHTML,
+    title: doc.title,
+    attrs,
+  }
+}
+
+/**
+ * @param {Document} doc
+ * @param {SavedPageState} saved
+ */
+function loadPageState(doc, saved) {
+  doc.title = saved.title
+  doc.querySelector("#main").innerHTML = saved.mainDiv
+  doc.querySelector("#leftColumn").innerHTML = saved.leftColumn
+  for (const attr of attrsToCopy) {
+    doc.documentElement.setAttribute(attr, saved.attrs[attr])
+  }
+}
+
 function attachAllListeners() {
   if (observer) {
     observer.disconnect();
@@ -84,29 +128,23 @@ function attachAllListeners() {
       e.preventDefault();
       e.stopPropagation();
       $.get(href, function (data) {
-        const html = $.parseHTML(data);
-        const title = html.find((node) => node.nodeName === "TITLE").innerText;
-        const bodyDiv = html.find((node) => node.nodeName === "DIV");
-        const { children } = document.body.firstChild;
         if (window.history.state === null) {
-          window.history.replaceState(
-            {
-              leftColumn: children[3].innerHTML,
-              mainDiv: children[6].innerHTML,
-              title: document.title,
-            },
-            "",
-          );
+          window.history.replaceState(savePageState(document), '')
         }
-        document.title = title;
-        const leftColumn = bodyDiv.children[3].innerHTML;
-        const mainDiv = bodyDiv.children[6].innerHTML;
-        window.history.pushState({ leftColumn, mainDiv, title }, "", href);
-        children[3].innerHTML = leftColumn;
-        children[6].innerHTML = mainDiv;
-        attachAllListeners();
-      });
-    });
+        const parser = new DOMParser()
+        const parsedDocument = parser.parseFromString(data, "text/html")
+        const state = savePageState(parsedDocument)
+        window.history.pushState(state, '', href)
+        loadPageState(document, state)
+        window.dispatchEvent(new Event(DYNAMIC_PAGE_LOAD))
+      })
+    })
+  })
+
+  $(".ar").on('click', function (e) {
+    $(this).parent().parent().toggleClass("expanded")
+    $(this).toggleClass("expanded")
+    e.stopPropagation()
   });
 
   $(".ar").on("click", function (e) {
@@ -248,11 +286,16 @@ function attachAllListeners() {
   // when document is loaded graph needs to be shown
 }
 
+const DYNAMIC_PAGE_LOAD = "dynamicPageLoad"
+window.addEventListener(DYNAMIC_PAGE_LOAD, () => {
+  attachAllListeners()
+})
+
 window.addEventListener("DOMContentLoaded", () => {
   hljs.registerLanguage("scala", highlightDotty);
   hljs.registerAliases(["dotty", "scala3"], "scala");
-  attachAllListeners();
-});
+  window.dispatchEvent(new Event(DYNAMIC_PAGE_LOAD))
+})
 
 // show/hide side menu on mobile view
 const sideMenuToggler = document.getElementById("mobile-sidebar-toggle");
@@ -267,26 +310,18 @@ sideMenuToggler.addEventListener("click", (_e) => {
 });
 
 // show/hide mobile menu on mobile view
-document
-  .getElementById("mobile-menu-toggle")
-  .addEventListener("click", (_e) => {
-    document.getElementById("mobile-menu").classList.add("show");
-  });
-document.getElementById("mobile-menu-close").addEventListener("click", (_e) => {
-  document.getElementById("mobile-menu").classList.remove("show");
-});
-
-window.addEventListener("popstate", (e) => {
-  if (e.state === null) {
-    return;
-  }
-  const { leftColumn, mainDiv, title } = e.state;
-  document.title = title;
-  const { children } = document.body.firstChild;
-  children[3].innerHTML = leftColumn;
-  children[6].innerHTML = mainDiv;
-  attachAllListeners();
-});
+document.getElementById("mobile-menu-toggle").addEventListener('click', _e => {
+  document.getElementById("mobile-menu").classList.add("show")
+})
+document.getElementById("mobile-menu-close").addEventListener('click', _e => {
+  document.getElementById("mobile-menu").classList.remove("show")
+})
+
+window.addEventListener('popstate', e => {
+  if (e.state === null) { return }
+  loadPageState(document, e.state)
+  window.dispatchEvent(new Event(DYNAMIC_PAGE_LOAD))
+})
 
 var zoom;
 var transform;