Merge pull request #29 from pikinier20/scaladoc/new-ui-scastie

Scastie support

Author: pikinier20

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

@@ -103,87 +103,46 @@ class CodeSnippets:
       )
     }
     def runButton = {
-      val runButton = button(cls := "run-button")(
+      val runButton = button(cls := "run-button icon-button")(
         i(cls := "fas fa-play")
       )
-      runButton.addEventListener("click", _ =>
-        if !runButton.hasAttribute("opened") then {
-          scastie.Embedded(snippet.querySelector("pre"), scastieConfig)
-          runButton.setAttribute("opened", "opened")
+      runButton.addEventListener("click", e =>
+        val popup = div(cls := "snippet-popup")(
+          div(cls := "snippet-popup-content body-small")(
+            pre(
+              code(
+                snippet.querySelector("pre").textContent
+              )
+            )
+          ).tap(_.addEventListener("click", e => {
+            e.asInstanceOf[js.Dynamic].fromPopup = true
+          }))
+        )
+
+        def handler: Event => Unit = (e: Event) => {
+          if js.isUndefined(e.asInstanceOf[js.Dynamic].fromPopup) then {
+            document.body.removeChild(popup)
+          }
         }
-        snippet.querySelector(".scastie .embedded-menu") match {
-          case btn: html.Element =>
-            btn.style = "display:none;"
-          case _ =>
-        }
-        snippet.querySelector(".scastie .embedded-menu .run-button") match {
-          case btn: html.Element => btn.click()
-          case _ =>
-        }
-        snippet.querySelector(".buttons .exit-button") match {
-          case btn: html.Element => btn.parentElement.style = ""
-          case _ =>
-        }
-        snippet.querySelector(".buttons .to-scastie-button") match {
-          case btn: html.Element => btn.parentElement.style = ""
-          case _ =>
-        }
-      )
 
-      div(runButton)
-    }
-    def exitButton = {
-      val exitButton = button(cls := "exit-button")(
-        i(cls := "fas fa-times")
-      )
+        document.body.appendChild(popup)
+        document.body.addEventListener("click", handler)
 
-      val bdiv = div(style := "display:none;")(exitButton)
+        scastie.Embedded(popup.querySelector("pre"), scastieConfig)
 
-      exitButton.addEventListener("click", _ =>
-        snippet.querySelector("pre") match {
-          case p: html.Element => p.style = ""
-          case _ =>
-        }
-        snippet.querySelector(".scastie.embedded") match {
-          case s: html.Element => snippet.removeChild(s)
-          case _ =>
-        }
-        snippet.querySelector(".buttons .run-button") match {
-          case btn: html.Element => btn.removeAttribute("opened")
-          case _ =>
-        }
-        snippet.querySelector(".buttons .to-scastie-button") match {
-          case btn: html.Element => btn.parentElement.style = "display:none;"
-          case _ =>
-        }
-        bdiv.style = "display:none;"
-      )
-
-      bdiv
-    }
+        popup.querySelector("li.btn.run-button").asInstanceOf[html.Element].click()
 
-    def toScastieButton = {
-      val toScastieButton = button(cls := "to-scastie-button")(
-        i(cls := "fas fa-external-link-alt")
+        e.stopPropagation()
       )
 
-      toScastieButton.addEventListener("click", _ =>
-        snippet.querySelector(".embedded-menu li.logo") match {
-          case toScastie: html.Element => toScastie.click()
-          case _ =>
-        }
-      )
-
-      div("style" := "display:none;")(toScastieButton)
+      div(runButton)
     }
 
     val buttonsSection = getButtonsSection(snippet)
     buttonsSection.foreach(s =>
       s.appendChild(copyButton)
       if snippet.hasAttribute("runnable") then {
-        s.appendChild(toScastieButton)
         s.appendChild(runButton)
-        s.appendChild(exitButton)
       }
     )
   }

scaladoc/resources/dotty_res/scripts/ux.js

@@ -12,9 +12,10 @@ window.addEventListener("DOMContentLoaded", () => {
     for (i = 0; i < elements.length; i++) {
       if (elements[i].querySelector(".show-content") !== null) {
         elements[i].onclick = function (e) {
-          if (!$(e.target).is("a") && e.fromSnippet !== true)
+          if (!$(e.target).is("a") && e.fromSnippet !== true) {
             this.classList.toggle("expand")
             this.querySelector(".show-content").classList.toggle("expand")
+          }
         }
       }
     }

scaladoc/resources/dotty_res/styles/theme/color-tokens.css

@@ -9,6 +9,7 @@
 
   /* icon */
   --icon-default: var(--grey11);
+  --icon-hover: var(--grey12);
 
   /* border */
   --border-default: var(--grey5);
@@ -104,6 +105,7 @@
 
   /* icon */
   --icon-default: var(--grey11);
+  --icon-hover: var(--grey12);
 
   /* border */
   --border-default: var(--grey6);

scaladoc/resources/dotty_res/styles/theme/components/code-snippet.css

@@ -98,16 +98,92 @@
 }
 
 .snippet .copy-button {
-  display: none;
   position: absolute;
   top: calc(3 * var(--base-spacing));
   right: calc(3 * var(--base-spacing));
 }
 
-.snippet:hover .copy-button {
+.snippet .run-button {
+  position: absolute;
+  top: calc(3 * var(--base-spacing));
+  right: calc(6 * var(--base-spacing));
+}
+
+.snippet .run-button {
+  color: var(--icon-default);
+}
+
+.snippet .run-button:hover {
+  color: var(--icon-hover);
+}
+
+.snippet .icon-button {
+  display: none;
+}
+
+.snippet:hover .icon-button {
   display: block;
 }
 
+.snippet-popup-content {
+  position: fixed;
+  top: 20%;
+  left: 50%;
+  margin-left: -25%;
+  background-color: rgba(245, 245, 245, 1);
+  padding: calc(2 * var(--base-spacing));
+  border-radius: 4px;
+  width: 50%;
+}
+
+.snippet-popup {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.569);
+  z-index: 3;
+}
+
+.scastie.embedded {
+  width: unset !important;
+}
+
+.tooltip-container {
+  display: none;
+}
+.tooltip:hover .tooltip-container {
+  display: unset;
+}
+.tooltip:hover .tooltip-container::after {
+  content: attr(label);
+  padding: 4px 8px;
+  color: white;
+  background-color:black;
+  position: absolute;
+  z-index:10;
+  box-shadow:0 0 3px #444;
+  opacity: 0.8;
+}
+
+.snippet .buttons .tooltip::after {
+  top: 32px;
+}
+
+.snippet-error {
+  border-bottom: 2px dotted red;
+}
+.snippet-warn {
+  border-bottom: 2px dotted orange;
+}
+.snippet-info {
+  border-bottom: 2px dotted teal;
+}
+.snippet-debug {
+  border-bottom: 2px dotted pink;
+}
+
 .hljs-keyword {
   color: var(--code-method-highlighting-keyword);
 }

scaladoc/src/dotty/tools/scaladoc/tasty/comments/markdown/SnippetRenderer.scala

@@ -94,6 +94,11 @@ object SnippetRenderer:
         line.copy(content = begin + s"""<span class="hideable">$comment</span>""" + end)
       case _ => line
 
+  private def reindexLines(lines: Seq[SnippetLine]) =
+    lines.zipWithIndex.map {
+      case (line, newIdx) => line.copy(lineNo = newIdx)
+    }
+
   private def wrapCodeLines(codeLines: Seq[String]): Seq[SnippetLine] =
     val snippetLines = codeLines.zipWithIndex.map {
       case (content, idx) => SnippetLine(content.escapeReservedTokens, idx)
@@ -133,7 +138,7 @@ object SnippetRenderer:
   ).toString
 
   def renderSnippetWithMessages(snippetName: Option[String], codeLines: Seq[String], messages: Seq[SnippetCompilerMessage], success: Boolean): String =
-    val transformedLines = wrapCodeLines.andThen(addCompileMessages(messages)).apply(codeLines).map(_.toHTML)
+    val transformedLines = wrapCodeLines.andThen(addCompileMessages(messages)).andThen(reindexLines).apply(codeLines).map(_.toHTML)
     val codeHTML = s"""<code class="language-scala">${transformedLines.mkString("")}</code>"""
     val isRunnable = success
     val attrs = Seq(