Skip to content

Commit 3eafba5

Browse files
pikinier20pikinier20
authored
Merge pull request #4 from KacperFKorban/scaladoc/hide-snippets-comments
Scaladoc/hide snippets comments
2 parents 04ec4cb + fc99877 commit 3eafba5

File tree

5 files changed

+126
-7
lines changed

5 files changed

+126
-7
lines changed

‎scaladoc-js/resources/scaladoc-searchbar.css

Lines changed: 28 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -100,5 +100,32 @@
100100

101101
.pull-right {
102102
float: right;
103-
margin-left: auto
103+
margin-left: auto;
104+
}
105+
106+
.snippet-comment-button {
107+
position: absolute;
108+
left: 50%;
109+
width: 24px;
110+
height: 24px;
111+
}
112+
113+
.show-snippet-comments-button {
114+
-ms-transform: translate(calc(-50% + 5em), -50%);
115+
transform: translate(calc(-50% + 5em), -50%);
116+
background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Ccircle cx='12' cy='12' r='12' fill='white'/%3E %3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M19 11.0053L19 13.1085H12.9873L12.988 19H10.8714L10.8721 13.1085L5 13.1085L5 11.0053L10.8721 11.0053V5L12.9865 5.00074L12.988 11.0045L19 11.0053Z' fill='%2327282C' fill-opacity='0.75'/%3E %3C/svg%3E");
117+
}
118+
119+
.show-snippet-comments-button:hover {
120+
background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Ccircle cx='12' cy='12' r='12' fill='light grey'/%3E %3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M19 11.0053L19 13.1085H12.9873L12.988 19H10.8714L10.8721 13.1085L5 13.1085L5 11.0053L10.8721 11.0053V5L12.9865 5.00074L12.988 11.0045L19 11.0053Z' fill='%2327282C' fill-opacity='0.75'/%3E %3C/svg%3E");
121+
}
122+
123+
.hide-snippet-comments-button {
124+
-ms-transform: translate(calc(-50% + 5em), -50%) rotate(45deg);
125+
transform: translate(calc(-50% + 5em), -50%) rotate(45deg);
126+
background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Ccircle cx='12' cy='12' r='12' fill='white'/%3E %3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M19 11.0053L19 13.1085H12.9873L12.988 19H10.8714L10.8721 13.1085L5 13.1085L5 11.0053L10.8721 11.0053V5L12.9865 5.00074L12.988 11.0045L19 11.0053Z' fill='%2327282C' fill-opacity='0.75'/%3E %3C/svg%3E");
127+
}
128+
129+
.hide-snippet-comments-button:hover {
130+
background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Ccircle cx='12' cy='12' r='12' fill='light grey'/%3E %3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M19 11.0053L19 13.1085H12.9873L12.988 19H10.8714L10.8721 13.1085L5 13.1085L5 11.0053L10.8721 11.0053V5L12.9865 5.00074L12.988 11.0045L19 11.0053Z' fill='%2327282C' fill-opacity='0.75'/%3E %3C/svg%3E");
104131
}

‎scaladoc-js/src/Main.scala

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,4 +3,5 @@ package dotty.tools.scaladoc
33
object Main extends App {
44
Searchbar()
55
SocialLinks()
6+
CodeSnippets()
67
}

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

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
package dotty.tools.scaladoc
2+
3+
import org.scalajs.dom._
4+
import org.scalajs.dom.ext._
5+
6+
class CodeSnippets:
7+
val replacePatternsAndResults: Seq[(String, String)] = Seq(
8+
"""(\/\/{{\n)((.|\n)*?)(\/\/}}\n)""" -> """<span class="hideable">$2</span>""", // wrap content of block directives
9+
"""(\/\/.*?)(\n|\$)""" -> """<span class="hideable">$1</span>$2""", // wrap single line comment
10+
"""(\/\*)((.|\n)*?)(\*\/)""" -> """<span class="hideable">$0</span>""", // wrap multi line comment
11+
)
12+
13+
document.querySelectorAll("code").foreach {
14+
case e: html.Element => e.innerHTML = replacePatternsAndResults.foldLeft(e.innerHTML) {
15+
case (acc, (pattern, result)) =>
16+
acc.replaceAll(pattern, result)
17+
}
18+
}
19+
20+
def toggleHide(e: html.Element | html.Document) = e.querySelectorAll("code span.hideable").foreach {
21+
case e: html.Element if e.style.getPropertyValue("display").isEmpty => e.style.setProperty("display", "none")
22+
case e: html.Element => e.style.removeProperty("display")
23+
}
24+
25+
toggleHide(document)
26+
27+
document.querySelectorAll("pre").foreach {
28+
case e: html.Element if e.querySelectorAll("code span.hideable").nonEmpty =>
29+
val a = document.createElement("a")
30+
a.addEventListener("click", { (_: MouseEvent) =>
31+
if(a.classList.contains("hide-snippet-comments-button")) {
32+
a.classList.add("show-snippet-comments-button")
33+
a.classList.remove("hide-snippet-comments-button")
34+
} else {
35+
a.classList.add("hide-snippet-comments-button")
36+
a.classList.remove("show-snippet-comments-button")
37+
}
38+
toggleHide(e)
39+
})
40+
a.classList.add("snippet-comment-button")
41+
a.classList.add("show-snippet-comments-button")
42+
e.insertBefore(a, e.firstChild)
43+
}

‎scaladoc-testcases/src/tests/snippetComments.scala

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
package tests.snippetComments
2+
3+
4+
/**
5+
* This is my codeblock
6+
*
7+
* ```
8+
* //{{
9+
* import xd
10+
* import xd2
11+
* //}}
12+
*
13+
*
14+
* val x = 1 // This is my valid comment
15+
*
16+
* /*
17+
* multi line comment
18+
* */
19+
* val reallyFLongDeclaration = "1234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890"
20+
* val y = 2 // comment in the same line
21+
* // comment in new line
22+
* val z = 3
23+
*
24+
* //{{
25+
* val hideMe = 7
26+
* //}}
27+
* ```
28+
*
29+
* The end of my codeblock
30+
*/
31+
class A

‎scaladoc/resources/dotty_res/styles/scalastyle.css

Lines changed: 23 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,9 @@
55
--border-light: #DADFE6;
66
--border-medium: #abc;
77

8+
--body-bg: #f0f3f6;
89
--code-bg: #F4F5FA;
10+
--documentable-bg: #FFFFFF;
911
--symbol-fg: #333;
1012
--link-fg: #00607D;
1113
--link-hover-fg: #00A0D0;
@@ -45,6 +47,7 @@ body {
4547
padding: 0;
4648
font-family: "Lato", sans-serif;
4749
font-size: 16px;
50+
background-color: var(--body-bg);
4851
}
4952

5053
/* Page layout */
@@ -75,7 +78,12 @@ h1, h2, h3 {
7578
font-family: var(--title-font);
7679
color: var(--title-fg);
7780
}
78-
pre, code, .monospace, .hljs {
81+
.monospace {
82+
font-family: var(--mono-font);
83+
background: var(--documentable-bg);
84+
font-variant-ligatures: none;
85+
}
86+
pre, code, .hljs {
7987
font-family: var(--mono-font);
8088
background: var(--code-bg);
8189
font-variant-ligatures: none;
@@ -84,12 +92,16 @@ code {
8492
font-size: .8em;
8593
padding: 0 .3em;
8694
}
95+
pre {
96+
overflow-x: auto;
97+
scrollbar-width: thin;
98+
}
8799
pre code, pre code.hljs {
88100
font-size: 1em;
89101
padding: 0;
90102
}
91103
pre, .symbol.monospace {
92-
padding: 10px 8px 10px 12px;
104+
padding: 12px 8px 10px 12px;
93105
font-weight: 500;
94106
font-size: 12px;
95107
}
@@ -468,12 +480,18 @@ footer .pull-right {
468480
padding-right: 0.5em;
469481
min-width: 10em;
470482
max-width: 10em;
483+
width: 10em;
471484
overflow: hidden;
472485
direction: rtl;
473486
white-space: nowrap;
474487
text-indent: 0em;
475488
}
476489

490+
.documentableElement .docs {
491+
width: 100%;
492+
table-layout: fixed;
493+
}
494+
477495
.documentableElement .modifiers .other-modifiers {
478496
color: gray;
479497
}
@@ -514,8 +532,8 @@ footer .pull-right {
514532
padding: 5px 4px 5px 4px;
515533
font-weight: 500;
516534
font-size: 12px;
517-
background: var(--code-bg);
518-
border: 0.25em solid white;
535+
background: var(--documentable-bg);
536+
border: 0.25em solid var(--body-bg);
519537
}
520538

521539
.documentableElement>div {
@@ -524,12 +542,11 @@ footer .pull-right {
524542

525543
.expand.documentableElement>div {
526544
display: block;
527-
padding-left: 3em;
528545
}
529546

530547
.expand.documentableElement>div.header {
531548
display: block;
532-
padding-left: 7.5em;
549+
padding-left: 4.5em;
533550
text-indent: -4.5em;
534551
}
535552

0 commit comments

Comments
 (0)