summaryrefslogtreecommitdiff
path: root/examples/demos/src/main/scala/scrollmenu/Controller.scala
blob: d359138dda99505f4311a2d446533c58caac5eb1 (plain) (blame)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
package scrollmenu

import org.scalajs.dom
import org.scalajs.dom.extensions._

import scala.scalajs.js
import scala.scalajs.js.annotation.JSExport
import scalatags.JsDom.all._



@JSExport
object Controller{

  def munge(name: String) = {
    name.replace(" ", "")
  }

  @JSExport
  def main(data: scala.scalajs.js.Any) = {

    val structure = upickle.readJs[Tree[String]](upickle.json.readJs(data))

    val Seq(main, menu, layout, menuLink) = Seq(
      "main", "menu", "layout", "menuLink"
    ).map(dom.document.getElementById)

    val snippets = dom.document.getElementsByClassName("highlight-me")

    snippets.foreach(js.Dynamic.global.hljs.highlightBlock(_))
    def rest() = {
      val scrollSpy = new ScrollSpy(structure, main)
      val list = ul(cls := "menu-item-list collapsed")(
        scrollSpy.domTrees.map(_.value.frag)
      ).render

      def updateScroll() = scrollSpy(main.scrollTop)
      val expandIcon = i(cls := "fa fa-caret-down").render
      val expandLink =
        a(
          expandIcon,
          href := "javascript:",
          marginLeft := "0px",
          paddingLeft := "15px",
          paddingRight := "15px",
          position.absolute,
          top := "0px",
          right := "0px",
          cls := "pure-menu-selected",
          onclick := { (e: dom.Event) =>
            expandIcon.classList.toggle("fa-caret-down")
            expandIcon.classList.toggle("fa-caret-up")
            list.classList.toggle("collapsed")
            scrollSpy.clean = !scrollSpy.clean
            updateScroll()
          }
        ).render


      menu.appendChild(
        div(cls := "pure-menu  pure-menu-open")(
          a(cls := "pure-menu-heading")(
            "Contents", expandLink
          ),
          list
        ).render
      )

      menuLink.onclick = (e: dom.MouseEvent) => {
        layout.classList.toggle("active")
        menu.classList.toggle("active")
        menuLink.classList.toggle("active")
      }

      main.onscroll = (e: dom.UIEvent) => updateScroll()
      updateScroll()
    }
    dom.setTimeout(rest _, 10)
  }
}