Add snippet includes feature. Introduce new snippet UX/UI.

scaladoc-js/resources/scaladoc-searchbar.css

@@ -124,34 +124,206 @@
     margin-left: auto;
 }
 
-.snippet-comment-button {
-    position: absolute;
+/* Snippets */
+
+.snippet {
+    cursor: default;
+}
+
+.snippet .snippet-meta {
+    border-top: 2px solid var(--inactive-bg);
+    color: var(--inactive-fg);
+    margin-top: 10px;
+    padding-top: 10px;
+    font-size: 0.75em;
+}
+
+.snippet-meta .snippet-label {
+    font-weight: bold;
+}
+
+.snippet .buttons {
+    --icon-size: 16px;
+}
+
+.snippet-showhide {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    --slider-width: 40px;
+    --slider-height: 16px;
+    --slider-diameter: calc(var(--slider-height) - 4px);
+}
+
+.snippet-showhide p {
+    margin-left: 4px;
+    margin-bottom: 0;
+    margin-top: 0;
+    color: var(--inactive-fg);
+}
+
+.snippet-showhide-button {
     display: inline-block;
-    left: 50%;
-    width: 24px;
-    height: 24px;
-    background:
-        linear-gradient(#fff, #fff),
-        linear-gradient(#fff, #fff),
-        #aaa;
-    background-position: center;
-    background-size: 50% 2px, 2px 50%;
-    background-repeat: no-repeat;
-    border-radius: 12px;
-    box-shadow: 0 0 2px var(--black);
-}
-
-.snippet-comment-button:hover {
-    background:
-        linear-gradient(#444, #444),
-        linear-gradient(#444, #444),
-        #ddd;
-    background-position: center;
-    background-size: 50% 2px, 2px 50%;
-    background-repeat: no-repeat;
-}
-
-.hide-snippet-comments-button {
-    -ms-transform: rotate(45deg);
-    transform: rotate(45deg);
+    position: relative;
+    width: var(--slider-width);
+    height: var(--slider-height);
+    margin-bottom: 0;
+}
+
+.snippet-showhide-button input {
+    opacity: 0;
+    width: 0;
+    height: 0;
+}
+
+.snippet-showhide-button .slider {
+    position: absolute;
+    cursor: pointer;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: var(--inactive-bg);
+    -webkit-transition: .4s;
+    transition: .4s;
+    border-radius: var(--slider-height);
+}
+
+.snippet-showhide-button .slider:before {
+    position: absolute;
+    content: "";
+    height: var(--slider-diameter);
+    width: var(--slider-diameter);
+    left: 2px;
+    bottom: 2px;
+    background-color: var(--inactive-fg);
+    -webkit-transition: .4s;
+    transition: .4s;
+    border-radius: 50%;
+}
+
+.snippet-showhide-button .slider:hover::before {
+    background-color: var(--active-fg);
+}
+
+input:checked + .slider {
+    background-color: var(--active-bg);
+}
+
+input:focus + .slider {
+    box-shadow: 0 0 1px var(--active-bg-shadow);
+}
+
+input:checked + .slider:before {
+    --translation-size: calc(var(--slider-width) - var(--slider-diameter) - 4px);
+    -webkit-transform: translateX(var(--translation-size));
+    -ms-transform: translateX(var(--translation-size));
+    transform: translateX(var(--translation-size));
+}
+
+.snippet .buttons .tooltip::after {
+    top: 32px;
+}
+
+.snippet .buttons {
+    display: flex;
+    flex-direction: row-reverse;
+    justify-content: flex-start;
+}
+
+.snippet .buttons button {
+    outline: none;
+    background: none;
+    border: none;
+    font-size: var(--icon-size);
+    color: var(--inactive-fg);
+    cursor: pointer;
 }
+
+.snippet .buttons button:hover:not(:disabled) {
+    color: var(--inactive-fg-shadow)
+}
+
+.snippet .buttons button:active:not(:disabled) {
+    transform: translateY(2px);
+    color: var(--active-fg)
+}
+
+.snippet .buttons button:disabled {
+    color: var(--inactive-bg)
+}
+
+
+.snippet .buttons>:not(:last-child) {
+    border-left: 2px solid var(--inactive-bg);
+}
+
+.snippet .buttons>* {
+    padding-left: 5px;
+    padding-right: 5px;
+}
+
+.unselectable {
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+}
+
+.included-section {
+    display: flex;
+    flex-direction: column;
+}
+
+.included-section a {
+    color: var(--inactive-fg) !important;
+    font-size: 0.75em;
+}
+
+.included-section b {
+    font-weight: bold;
+}
+
+.hideable.hidden {
+    display: none;
+}
+
+@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

@@ -0,0 +1,130 @@
+package dotty.tools.scaladoc
+
+import org.scalajs.dom._
+import org.scalajs.dom.ext._
+
+class CodeSnippets:
+
+  private def getButtonsSection(snippet: html.Element): Option[html.Div] = snippet.querySelector("div.buttons") match {
+    case div: html.Div => Some(div)
+    case _ => None
+  }
+
+  def enrichSnippets() = document.querySelectorAll("div.snippet").foreach {
+    case snippet: html.Element =>
+      snippet.addEventListener("click", e => e.stopPropagation())
+      snippetAnchor(snippet)
+      handleHideableCode(snippet)
+      handleImportedCode(snippet)
+      copyRunButtons(snippet)
+  }
+
+  private def handleHideableCode(snippet: html.Element): Unit = {
+    def toggleHide(e: html.Element | html.Document) = e.querySelectorAll(".hideable").foreach {
+      case e: html.Element => e.classList.toggle("hidden")
+      case _ =>
+    }
+    def createShowHideButton(toggleRoot: html.Element) = {
+      val div = document.createElement("div")
+      div.classList.add("snippet-showhide")
+      val p = document.createElement("p")
+      p.textContent = "Show collapsed lines"
+      val showHideButton = document.createElement("label")
+      showHideButton.classList.add("snippet-showhide-button")
+      val checkbox = document.createElement("input").asInstanceOf[html.Input]
+      checkbox.`type` = "checkbox"
+      val slider = document.createElement("span")
+      slider.classList.add("slider")
+      showHideButton.appendChild(checkbox)
+      showHideButton.appendChild(slider)
+      checkbox.addEventListener("change", _ => toggleHide(toggleRoot))
+      div.appendChild(showHideButton)
+      div.appendChild(p)
+      div
+    }
+
+    toggleHide(snippet)
+    val buttonsSection = getButtonsSection(snippet)
+    val hideables = snippet.querySelectorAll(".hideable")
+    if hideables != null && hideables.nonEmpty then {
+      val showHideButton = createShowHideButton(snippet)
+      buttonsSection.foreach(_.appendChild(showHideButton))
+    }
+  }
+
+  private def snippetAnchor(snippet: html.Element): Unit = snippet.querySelector(".snippet-meta .snippet-label") match {
+    case e: html.Element =>
+      val name = e.textContent.trim
+      val anchor = document.createElement("a").asInstanceOf[html.Anchor]
+      anchor.id = s"snippet-$name"
+      snippet.insertBefore(anchor, snippet.firstChild)
+    case _ =>
+  }
+
+  private def handleImportedCode(snippet: html.Element): Unit = {
+    val included = snippet.querySelectorAll("code span.include")
+    val pre = snippet.querySelector("pre")
+    if included != null && included.nonEmpty && pre != null then {
+      val includesDiv = document.createElement("div")
+      includesDiv.classList.add("included-section")
+      includesDiv.classList.add("hideable")
+      included
+        .collect { case e: html.Element => e }
+        .toList
+        .filter(_.hasAttribute("name"))
+        .map(_.getAttribute("name"))
+        .distinct
+        .map { name =>
+          val a = document.createElement("a").asInstanceOf[html.Anchor]
+          a.classList.add("unselectable")
+          a.href = s"#snippet-$name"
+          a.innerHTML = s"included <b>$name</b>"
+          a
+        }
+        .foreach(a => includesDiv.appendChild(a))
+
+      snippet.insertBefore(includesDiv, pre)
+    }
+  }
+
+  private def copyRunButtons(snippet: html.Element) = {
+    def copyButton = {
+      val div = document.createElement("div")
+      val button = document.createElement("button")
+      val icon = document.createElement("i")
+      icon.classList.add("far")
+      icon.classList.add("fa-clone")
+      button.appendChild(icon)
+      button.classList.add("copy-button")
+      button.addEventListener("click", _ => {
+        val code = snippet.querySelectorAll("code>span:not(.hidden)")
+          .map(_.textContent)
+          .mkString
+        window.navigator.clipboard.writeText(code)
+      })
+      div.appendChild(button)
+      div
+    }
+    def runButton = {
+      val div = document.createElement("div")
+      val button = document.createElement("button").asInstanceOf[html.Button]
+      val icon = document.createElement("i")
+      icon.classList.add("fas")
+      icon.classList.add("fa-play")
+      button.appendChild(icon)
+      button.classList.add("run-button")
+      button.addEventListener("click", _ => {}) // TODO: Run button #13065
+      button.disabled = true
+      div.appendChild(button)
+      div
+    }
+    val buttonsSection = getButtonsSection(snippet)
+    buttonsSection.foreach(s =>
+      s.appendChild(copyButton)
+      // Temporarily disabled
+      // s.appendChild(runButton)
+    )
+  }
+
+  enrichSnippets()
+