Skip to content

Commit a688472

Browse files
pikinier20pikinier20
authored
Merge pull request #29 from pikinier20/scaladoc/new-ui-scastie
Scastie support
2 parents dc1a242 + a9d3a96 commit a688472

File tree

5 files changed

+112
-69
lines changed

5 files changed

+112
-69
lines changed

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

Lines changed: 24 additions & 65 deletions
Original file line numberDiff line numberDiff line change
@@ -103,87 +103,46 @@ class CodeSnippets:
103103
)
104104
}
105105
def runButton = {
106-
val runButton = button(cls := "run-button")(
106+
val runButton = button(cls := "run-button icon-button")(
107107
i(cls := "fas fa-play")
108108
)
109-
runButton.addEventListener("click", _ =>
110-
if !runButton.hasAttribute("opened") then {
111-
scastie.Embedded(snippet.querySelector("pre"), scastieConfig)
112-
runButton.setAttribute("opened", "opened")
109+
runButton.addEventListener("click", e =>
110+
val popup = div(cls := "snippet-popup")(
111+
div(cls := "snippet-popup-content body-small")(
112+
pre(
113+
code(
114+
snippet.querySelector("pre").textContent
115+
)
116+
)
117+
).tap(_.addEventListener("click", e => {
118+
e.asInstanceOf[js.Dynamic].fromPopup = true
119+
}))
120+
)
121+
122+
def handler: Event => Unit = (e: Event) => {
123+
if js.isUndefined(e.asInstanceOf[js.Dynamic].fromPopup) then {
124+
document.body.removeChild(popup)
125+
}
113126
}
114-
snippet.querySelector(".scastie .embedded-menu") match {
115-
case btn: html.Element =>
116-
btn.style = "display:none;"
117-
case _ =>
118-
}
119-
snippet.querySelector(".scastie .embedded-menu .run-button") match {
120-
case btn: html.Element => btn.click()
121-
case _ =>
122-
}
123-
snippet.querySelector(".buttons .exit-button") match {
124-
case btn: html.Element => btn.parentElement.style = ""
125-
case _ =>
126-
}
127-
snippet.querySelector(".buttons .to-scastie-button") match {
128-
case btn: html.Element => btn.parentElement.style = ""
129-
case _ =>
130-
}
131-
)
132127

133-
div(runButton)
134-
}
135-
def exitButton = {
136-
val exitButton = button(cls := "exit-button")(
137-
i(cls := "fas fa-times")
138-
)
128+
document.body.appendChild(popup)
129+
document.body.addEventListener("click", handler)
139130

140-
val bdiv = div(style := "display:none;")(exitButton)
131+
scastie.Embedded(popup.querySelector("pre"), scastieConfig)
141132

142-
exitButton.addEventListener("click", _ =>
143-
snippet.querySelector("pre") match {
144-
case p: html.Element => p.style = ""
145-
case _ =>
146-
}
147-
snippet.querySelector(".scastie.embedded") match {
148-
case s: html.Element => snippet.removeChild(s)
149-
case _ =>
150-
}
151-
snippet.querySelector(".buttons .run-button") match {
152-
case btn: html.Element => btn.removeAttribute("opened")
153-
case _ =>
154-
}
155-
snippet.querySelector(".buttons .to-scastie-button") match {
156-
case btn: html.Element => btn.parentElement.style = "display:none;"
157-
case _ =>
158-
}
159-
bdiv.style = "display:none;"
160-
)
161-
162-
bdiv
163-
}
133+
popup.querySelector("li.btn.run-button").asInstanceOf[html.Element].click()
164134

165-
def toScastieButton = {
166-
val toScastieButton = button(cls := "to-scastie-button")(
167-
i(cls := "fas fa-external-link-alt")
135+
e.stopPropagation()
168136
)
169137

170-
toScastieButton.addEventListener("click", _ =>
171-
snippet.querySelector(".embedded-menu li.logo") match {
172-
case toScastie: html.Element => toScastie.click()
173-
case _ =>
174-
}
175-
)
176-
177-
div("style" := "display:none;")(toScastieButton)
138+
div(runButton)
178139
}
179140

180141
val buttonsSection = getButtonsSection(snippet)
181142
buttonsSection.foreach(s =>
182143
s.appendChild(copyButton)
183144
if snippet.hasAttribute("runnable") then {
184-
s.appendChild(toScastieButton)
185145
s.appendChild(runButton)
186-
s.appendChild(exitButton)
187146
}
188147
)
189148
}

‎scaladoc/resources/dotty_res/scripts/ux.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,9 +12,10 @@ window.addEventListener("DOMContentLoaded", () => {
1212
for (i = 0; i < elements.length; i++) {
1313
if (elements[i].querySelector(".show-content") !== null) {
1414
elements[i].onclick = function (e) {
15-
if (!$(e.target).is("a") && e.fromSnippet !== true)
15+
if (!$(e.target).is("a") && e.fromSnippet !== true) {
1616
this.classList.toggle("expand")
1717
this.querySelector(".show-content").classList.toggle("expand")
18+
}
1819
}
1920
}
2021
}

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

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@
99

1010
/* icon */
1111
--icon-default: var(--grey11);
12+
--icon-hover: var(--grey12);
1213

1314
/* border */
1415
--border-default: var(--grey5);
@@ -104,6 +105,7 @@
104105

105106
/* icon */
106107
--icon-default: var(--grey11);
108+
--icon-hover: var(--grey12);
107109

108110
/* border */
109111
--border-default: var(--grey6);

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

Lines changed: 78 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -98,16 +98,92 @@
9898
}
9999

100100
.snippet .copy-button {
101-
display: none;
102101
position: absolute;
103102
top: calc(3 * var(--base-spacing));
104103
right: calc(3 * var(--base-spacing));
105104
}
106105

107-
.snippet:hover .copy-button {
106+
.snippet .run-button {
107+
position: absolute;
108+
top: calc(3 * var(--base-spacing));
109+
right: calc(6 * var(--base-spacing));
110+
}
111+
112+
.snippet .run-button {
113+
color: var(--icon-default);
114+
}
115+
116+
.snippet .run-button:hover {
117+
color: var(--icon-hover);
118+
}
119+
120+
.snippet .icon-button {
121+
display: none;
122+
}
123+
124+
.snippet:hover .icon-button {
108125
display: block;
109126
}
110127

128+
.snippet-popup-content {
129+
position: fixed;
130+
top: 20%;
131+
left: 50%;
132+
margin-left: -25%;
133+
background-color: rgba(245, 245, 245, 1);
134+
padding: calc(2 * var(--base-spacing));
135+
border-radius: 4px;
136+
width: 50%;
137+
}
138+
139+
.snippet-popup {
140+
position: fixed;
141+
top: 0;
142+
left: 0;
143+
width: 100%;
144+
height: 100%;
145+
background-color: rgba(0, 0, 0, 0.569);
146+
z-index: 3;
147+
}
148+
149+
.scastie.embedded {
150+
width: unset !important;
151+
}
152+
153+
.tooltip-container {
154+
display: none;
155+
}
156+
.tooltip:hover .tooltip-container {
157+
display: unset;
158+
}
159+
.tooltip:hover .tooltip-container::after {
160+
content: attr(label);
161+
padding: 4px 8px;
162+
color: white;
163+
background-color:black;
164+
position: absolute;
165+
z-index:10;
166+
box-shadow:0 0 3px #444;
167+
opacity: 0.8;
168+
}
169+
170+
.snippet .buttons .tooltip::after {
171+
top: 32px;
172+
}
173+
174+
.snippet-error {
175+
border-bottom: 2px dotted red;
176+
}
177+
.snippet-warn {
178+
border-bottom: 2px dotted orange;
179+
}
180+
.snippet-info {
181+
border-bottom: 2px dotted teal;
182+
}
183+
.snippet-debug {
184+
border-bottom: 2px dotted pink;
185+
}
186+
111187
.hljs-keyword {
112188
color: var(--code-method-highlighting-keyword);
113189
}

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

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -94,6 +94,11 @@ object SnippetRenderer:
9494
line.copy(content = begin + s"""<span class="hideable">$comment</span>""" + end)
9595
case _ => line
9696

97+
private def reindexLines(lines: Seq[SnippetLine]) =
98+
lines.zipWithIndex.map {
99+
case (line, newIdx) => line.copy(lineNo = newIdx)
100+
}
101+
97102
private def wrapCodeLines(codeLines: Seq[String]): Seq[SnippetLine] =
98103
val snippetLines = codeLines.zipWithIndex.map {
99104
case (content, idx) => SnippetLine(content.escapeReservedTokens, idx)
@@ -133,7 +138,7 @@ object SnippetRenderer:
133138
).toString
134139

135140
def renderSnippetWithMessages(snippetName: Option[String], codeLines: Seq[String], messages: Seq[SnippetCompilerMessage], success: Boolean): String =
136-
val transformedLines = wrapCodeLines.andThen(addCompileMessages(messages)).apply(codeLines).map(_.toHTML)
141+
val transformedLines = wrapCodeLines.andThen(addCompileMessages(messages)).andThen(reindexLines).apply(codeLines).map(_.toHTML)
137142
val codeHTML = s"""<code class="language-scala">${transformedLines.mkString("")}</code>"""
138143
val isRunnable = success
139144
val attrs = Seq(

0 commit comments

Comments
 (0)