From e5807cd211b4f4b9e83fe9ee235713ac4ca59661 Mon Sep 17 00:00:00 2001 From: Robert Jaros Date: Fri, 28 Feb 2020 12:41:05 +0100 Subject: Add an option to automatically collapse navbar on click --- .../main/kotlin/pl/treksoft/kvision/navbar/Navbar.kt | 19 ++++++++++++++++++- 1 file changed, 18 insertions(+), 1 deletion(-) diff --git a/kvision-modules/kvision-bootstrap/src/main/kotlin/pl/treksoft/kvision/navbar/Navbar.kt b/kvision-modules/kvision-bootstrap/src/main/kotlin/pl/treksoft/kvision/navbar/Navbar.kt index c6f6fe3f..81e061e8 100644 --- a/kvision-modules/kvision-bootstrap/src/main/kotlin/pl/treksoft/kvision/navbar/Navbar.kt +++ b/kvision-modules/kvision-bootstrap/src/main/kotlin/pl/treksoft/kvision/navbar/Navbar.kt @@ -22,6 +22,7 @@ package pl.treksoft.kvision.navbar import com.github.snabbdom.VNode +import pl.treksoft.jquery.jQuery import pl.treksoft.kvision.core.BsBgColor import pl.treksoft.kvision.core.Component import pl.treksoft.kvision.core.Container @@ -70,6 +71,7 @@ enum class NavbarExpand(internal val navbarExpand: String) { * @param expand the navbar responsive behavior * @param nColor the navbar color * @param bgColor the navbar background color + * @param collapseOnClick the navbar is auto collapsed when the link is clicked * @param classes a set of CSS class names * @param init an initializer extension function */ @@ -80,6 +82,7 @@ open class Navbar( expand: NavbarExpand? = NavbarExpand.LG, nColor: NavbarColor = NavbarColor.LIGHT, bgColor: BsBgColor = BsBgColor.LIGHT, + collapseOnClick: Boolean = false, classes: Set = setOf(), init: (Navbar.() -> Unit)? = null ) : SimplePanel(classes) { @@ -135,6 +138,19 @@ open class Navbar( addInternal(container) if (label == null) brandLink.hide() counter++ + if (collapseOnClick) { + setInternalEventListener { + click = { + val target = jQuery(it.target) + if (target.`is`("a.nav-item.nav-link")) { + val navbar = target.parents("nav.navbar").first() + val toggler = navbar.children("button.navbar-toggler") + val collapse = navbar.children("div.navbar-collapse") + if (collapse.`is`(".show")) toggler.click() + } + } + } + } @Suppress("LeakingThis") init?.invoke(this) } @@ -198,9 +214,10 @@ fun Container.navbar( expand: NavbarExpand? = NavbarExpand.LG, nColor: NavbarColor = NavbarColor.LIGHT, bgColor: BsBgColor = BsBgColor.LIGHT, + collapseOnClick: Boolean = false, classes: Set = setOf(), init: (Navbar.() -> Unit)? = null ): Navbar { - val navbar = Navbar(label, link, type, expand, nColor, bgColor, classes, init) + val navbar = Navbar(label, link, type, expand, nColor, bgColor, collapseOnClick, classes, init) this.add(navbar) return navbar } -- cgit