package demo.examples.util import japgolly.scalajs.react._ import japgolly.scalajs.react.vdom.prefix_<^._ import org.scalajs.dom.document import org.scalajs.dom.ext.PimpedNodeList /** * Created by weiyin on 16/03/15. */ object CodeContent { case class Content(scalaSource: String, el: ReactNode, exampleClasses: String = "") { def apply() = component(this) } case class State(showCode: Boolean = false) class Backend(scope: BackendScope[Content, State]) { def toggleCodeMode(e: ReactEvent) = { e.preventDefault() scope.modState(s => s.copy(showCode = !s.showCode)) } } def installSyntaxHighlighting[P, S, B] = (_: ReactComponentB[P, S, B]) .componentDidMount(_ => applySyntaxHighlight()) .componentDidUpdate((_, _, _) => applySyntaxHighlight()) def applySyntaxHighlight() = { import scala.scalajs.js.Dynamic.{global => g} val nodeList = document.querySelectorAll("pre code").toArray nodeList.foreach(n => g.hljs.highlightBlock(n)) } val component = ReactComponentB[Content]("CodeContent") .initialState(State()) .backend(new Backend(_)) .render((P, C, S, B) => { <.div(^.className := "playground", <.div(^.className := s"bs-example ${P.exampleClasses}", <.div(P.el)), if (S.showCode) <.div( <.pre(<.code(P.scalaSource.trim)), <.a(^.className := "code-toggle", ^.onClick ==> B.toggleCodeMode, ^.href := "#", "Hide code") ) else <.a(^.className := "code-toggle", ^.onClick ==> B.toggleCodeMode, ^.href := "#", "Show code") ) }).configure(installSyntaxHighlighting) .build }