summaryrefslogtreecommitdiff
path: root/examples/demos/src/main/scala/scrollmenu/Controller.scala
blob: 132a07311715960ad589ada16a94de4cecd1bcfa (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
81
82
83
84
85
86
87
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(_))
    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 + main.clientHeight)
    val expandIcon = i(cls:="fa fa-caret-down").render
    val expandLink =
      a(
        expandIcon,
        href:="javascript:",
        marginLeft:="0px",
        paddingLeft:="15px",
        paddingRight:="15px",
        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(
        zIndex:=10,
        position:="absolute",
        cls:="pure-menu pure-menu-open",
        ul(cls:="menu-item-list")(
          li(
            width:="43px",
            float:="right",
            expandLink
          )
        )
      ).render
    )

    menu.appendChild(
      div(cls:="pure-menu  pure-menu-open")(
        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()
  }

}