Enso Docs: Proper indentation in HTML render of code block and copy button. (#1288)

This commit is contained in:
Maciej Mikołajek 2020-11-13 15:36:47 +01:00 committed by GitHub
parent a0f87b3611
commit 2c3f2014b2
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

View File

@ -178,20 +178,43 @@ object Doc {
val uniqueIDBtn = Random.alphanumeric.take(8).mkString("")
val htmlIdCode = HTML.`id` := uniqueIDCode
val htmlIdBtn = HTML.`id` := uniqueIDBtn
val htmlStyle = HTML.`style` := "inline-block"
val elemsHTML = elems.toList.map(elem => elem.html)
val firstIndent = elems.head.indent
val elemsHTML = elems.toList.map(elem => elem.htmlOffset(firstIndent))
val btnAction = onclick :=
s"""var code = document.getElementById("$uniqueIDCode");
|var btn = document.getElementById("$uniqueIDBtn").firstChild;
|var btn = document.getElementById("$uniqueIDBtn").firstChild;
|btn.data = btn.data == "Show" ? "Hide" : "Show";
|code.style.display = code.style.display ==
|code.style.display = code.style.display ==
|"inline-block" ? "none" : "inline-block";""".stripMargin
.replaceAll("\n", "")
val btn = HTML.button(btnAction)(htmlIdBtn)("Show")
val copyAction = onclick :=
s"""var code = document.getElementById("$uniqueIDCode");
|var range = document.createRange();
|range.selectNode(code);
|window.getSelection().removeAllRanges();
|window.getSelection().addRange(range);
|document.execCommand("copy");
|window.getSelection().removeAllRanges();""".stripMargin
val btnStyle = HTML.`style` := "display: flex"
val btn = HTML.button(btnAction)(htmlIdBtn)("Show")
val copyBtn = HTML.button(copyAction)(btnStyle)("Copy")
if (isInGui) {
Seq(HTML.div(htmlCls())(htmlStyle)(elemsHTML))
val htmlStyle = HTML.`style` := "display: block"
Seq(
HTML.div(
HTML.div(htmlCls())(htmlStyle)(htmlIdCode)(elemsHTML),
copyBtn
)
)
} else {
Seq(HTML.div(btn, HTML.div(htmlCls())(htmlIdCode)(elemsHTML)))
val htmlStyle = HTML.`style` := "display: none"
Seq(
HTML.div(
btn,
HTML.div(htmlCls())(htmlStyle)(htmlIdCode)(elemsHTML),
copyBtn
)
)
}
}
}
@ -211,7 +234,9 @@ object Doc {
}
final case class Line(indent: Int, elem: String) extends Elem {
val repr: Repr.Builder = R + indent + elem
val html: HTML = Seq(HTML.code(elem), HTML.br)
val html: HTML = Seq(HTML.code(" " * indent + elem), HTML.br)
def htmlOffset(off: Int): HTML =
Seq(HTML.code(" " * (indent - off) + elem), HTML.br)
}
}