Further Scastie integration

Author: pikinier20

scaladoc-js/resources/code-snippets.css

@@ -46,7 +46,7 @@
   --slider-diameter: calc(var(--slider-height) - 4px);
 }
 
-.snippet-showhide p {
+.buttons p {
   margin-left: 4px;
   margin-bottom: 0;
   margin-top: 0;
@@ -211,7 +211,6 @@ input:checked + .slider:before {
 }
 
 .snippet .scastie.embedded .editor-container .editor-wrapper {
-  padding-top: 48px;
   height: unset;
 }
 
@@ -238,37 +237,6 @@ input:checked + .slider:before {
   background-color: var(--code-bg);
 }
 
-.snippet .scastie .app.light .embedded-menu > * {
-  background-color: transparent;
-  color: var(--active-fg);
-  width: 64px;
-  font-size: 1em;
-  padding: 8px;
-  position: unset;
-}
-
-.snippet .scastie .app.light .embedded-menu li:hover {
-  background-color: var(--active-bg);
-}
-
-.snippet .scastie .embedded-menu {
-  margin: 15px;
-  display: block;
-}
-
-.snippet .scastie .embedded-menu > li {
-  display: unset;
-  border: unset;
-  transition-duration: 0.4s;
-}
-
-:root.theme-dark .snippet .scastie .embedded-menu > .logo img {
-  filter: unset;
-}
-:root .snippet .scastie .embedded-menu > .logo img {
-  filter: invert(100%) hue-rotate(180deg);
-}
-
 
 .snippet .scastie .app.light .output-console pre {
   color: white;
@@ -299,43 +267,43 @@ input:checked + .slider:before {
   color: #b58900;
 }
 
+.snippet .scastie .ansi-color-magenta {
+  color: var(--red500);
+}
+
 .snippet .fa-warning:before, .fa-exclamation-triangle:before {
   color: #b58900;
 }
 
+@media(max-width: 836px) {
+  .snippet .buttons {
+    --icon-size: 16px;
+    font-size: 0px;
+  }
+
+  .snippet .buttons p {
+    --icon-size: 16px;
+    font-size: 0px;
+  }
+}
+
 @media(max-width: 576px) {
   .snippet-showhide {
       --slider-width: 32px;
       --slider-height: 16px;
   }
-
-  .snippet .buttons {
-      --icon-size: 16px;
-      font-size: 16px;
-  }
-
 }
 
 @media(max-width: 360px) {
   .snippet-showhide {
       --slider-width: 32px;
       --slider-height: 16px;
   }
-
-  .snippet .buttons {
-      --icon-size: 16px;
-      font-size: 0px;
-  }
 }
 
 @media(max-width: 240px) {
   .snippet-showhide {
       --slider-width: 24px;
       --slider-height: 10px;
   }
-
-  .snippet .buttons {
-      --icon-size: 16px;
-      font-size: 0px;
-  }
 }

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

@@ -129,16 +129,23 @@ class CodeSnippets:
           scastie.Embedded(snippet.querySelector("pre"), scastieConfig)
           runButton.setAttribute("opened", "opened")
         }
-        snippet.querySelector(".scastie .embedded-menu .run-button") match {
+        snippet.querySelector(".scastie .embedded-menu") match {
           case btn: html.Element =>
             btn.style = "display:none;"
-            btn.click()
+          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.appendChild(runButton)
@@ -167,16 +174,42 @@ class CodeSnippets:
           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 _ =>
+        }
         div.style = "display:none;"
       )
 
       div.appendChild(exitButton)
       div
     }
+    def toScastieButton = {
+      val div = document.createElement("div").asInstanceOf[html.Div]
+      val toScastieButton = document.createElement("button").asInstanceOf[html.Element]
+      val toScastieIcon = document.createElement("i").asInstanceOf[html.Image]
+
+      toScastieIcon.classList.add("fas")
+      toScastieIcon.classList.add("fa-external-link-alt")
+      toScastieButton.classList.add("to-scastie-button")
+      div.style = "display:none;"
+      toScastieButton.appendChild(toScastieIcon)
+
+      toScastieButton.addEventListener("click", _ =>
+        snippet.querySelector(".embedded-menu li.logo") match {
+          case toScastie: html.Element => toScastie.click()
+          case _ =>
+        }
+      )
+
+      div.appendChild(toScastieButton)
+      div
+    }
     val buttonsSection = getButtonsSection(snippet)
     buttonsSection.foreach(s =>
       s.appendChild(copyButton)
       if !snippet.hasAttribute("hasContext") then {
+        s.appendChild(toScastieButton)
         s.appendChild(runButton)
         s.appendChild(exitButton)
       }