From 0041051ee910aa90b917309fb5cc5d7cd60176de Mon Sep 17 00:00:00 2001 From: Robert Jaros Date: Fri, 23 Mar 2018 12:41:39 +0100 Subject: Support fo toolbar and button group componenets. --- .../pl/treksoft/kvision/toolbar/ButtonGroup.kt | 89 ++++++++++++++++++++++ .../kotlin/pl/treksoft/kvision/toolbar/Toolbar.kt | 44 +++++++++++ .../pl/treksoft/kvision/toolbar/ButtonGroupSpec.kt | 39 ++++++++++ .../pl/treksoft/kvision/toolbar/ToolbarSpec.kt | 29 +++++++ 4 files changed, 201 insertions(+) create mode 100644 src/main/kotlin/pl/treksoft/kvision/toolbar/ButtonGroup.kt create mode 100644 src/main/kotlin/pl/treksoft/kvision/toolbar/Toolbar.kt create mode 100644 src/test/kotlin/test/pl/treksoft/kvision/toolbar/ButtonGroupSpec.kt create mode 100644 src/test/kotlin/test/pl/treksoft/kvision/toolbar/ToolbarSpec.kt (limited to 'src') diff --git a/src/main/kotlin/pl/treksoft/kvision/toolbar/ButtonGroup.kt b/src/main/kotlin/pl/treksoft/kvision/toolbar/ButtonGroup.kt new file mode 100644 index 00000000..ddb3bca4 --- /dev/null +++ b/src/main/kotlin/pl/treksoft/kvision/toolbar/ButtonGroup.kt @@ -0,0 +1,89 @@ +/* + * Copyright (c) 2018. Robert Jaros + */ +package pl.treksoft.kvision.toolbar + +import pl.treksoft.kvision.core.Container +import pl.treksoft.kvision.core.StringBoolPair +import pl.treksoft.kvision.core.StringPair +import pl.treksoft.kvision.panel.SimplePanel + +/** + * Button group sizes. + */ +enum class ButtonGroupSize(internal val className: String) { + LARGE("btn-group-lg"), + SMALL("btn-group-sm"), + XSMALL("btn-group-xs") +} + +/** + * Button group styles. + */ +enum class ButtonGroupStyle(internal val className: String) { + VERTICAL("btn-group-vertical"), + JUSTIFIED("btn-group-justified") +} + +/** + * The Bootstrap button group. + * + * @constructor + * @param size button group size + * @param style button group style + * @param classes a set of CSS class names + * @param init an initializer extension function + */ +open class ButtonGroup( + size: ButtonGroupSize? = null, style: ButtonGroupStyle? = null, + classes: Set = setOf(), init: (ButtonGroup.() -> Unit)? = null +) : SimplePanel(classes) { + + /** + * Button group size. + */ + var size by refreshOnUpdate(size) + /** + * Button group style. + */ + var style by refreshOnUpdate(style) + + init { + @Suppress("LeakingThis") + init?.invoke(this) + } + + override fun getSnClass(): List { + val cl = super.getSnClass().toMutableList() + if (style != ButtonGroupStyle.VERTICAL) { + cl.add("btn-group" to true) + } + style?.let { + cl.add(it.className to true) + } + size?.let { + cl.add(it.className to true) + } + return cl + } + + override fun getSnAttrs(): List { + return super.getSnAttrs() + ("role" to "group") + } + + companion object { + /** + * DSL builder extension function. + * + * It takes the same parameters as the constructor of the built component. + */ + fun Container.buttonGroup( + size: ButtonGroupSize? = null, style: ButtonGroupStyle? = null, + classes: Set = setOf(), init: (ButtonGroup.() -> Unit)? = null + ): ButtonGroup { + val group = ButtonGroup(size, style, classes).apply { init?.invoke(this) } + this.add(group) + return group + } + } +} diff --git a/src/main/kotlin/pl/treksoft/kvision/toolbar/Toolbar.kt b/src/main/kotlin/pl/treksoft/kvision/toolbar/Toolbar.kt new file mode 100644 index 00000000..a1651a22 --- /dev/null +++ b/src/main/kotlin/pl/treksoft/kvision/toolbar/Toolbar.kt @@ -0,0 +1,44 @@ +/* + * Copyright (c) 2018. Robert Jaros + */ +package pl.treksoft.kvision.toolbar + +import pl.treksoft.kvision.core.Container +import pl.treksoft.kvision.core.StringPair +import pl.treksoft.kvision.panel.SimplePanel + +/** + * The Bootstrap toolbar. + * + * @constructor + * @param classes a set of CSS class names + * @param init an initializer extension function + */ +open class Toolbar( + classes: Set = setOf(), init: (Toolbar.() -> Unit)? = null +) : SimplePanel(classes + "btn-toolbar") { + + init { + @Suppress("LeakingThis") + init?.invoke(this) + } + + override fun getSnAttrs(): List { + return super.getSnAttrs() + ("role" to "toolbar") + } + + companion object { + /** + * DSL builder extension function. + * + * It takes the same parameters as the constructor of the built component. + */ + fun Container.toolbar( + classes: Set = setOf(), init: (Toolbar.() -> Unit)? = null + ): Toolbar { + val toolbar = Toolbar(classes).apply { init?.invoke(this) } + this.add(toolbar) + return toolbar + } + } +} diff --git a/src/test/kotlin/test/pl/treksoft/kvision/toolbar/ButtonGroupSpec.kt b/src/test/kotlin/test/pl/treksoft/kvision/toolbar/ButtonGroupSpec.kt new file mode 100644 index 00000000..c1695d74 --- /dev/null +++ b/src/test/kotlin/test/pl/treksoft/kvision/toolbar/ButtonGroupSpec.kt @@ -0,0 +1,39 @@ +/* + * Copyright (c) 2018. Robert Jaros + */ +package test.pl.treksoft.kvision.toolbar + +import pl.treksoft.kvision.panel.Root +import pl.treksoft.kvision.toolbar.ButtonGroup +import pl.treksoft.kvision.toolbar.ButtonGroupSize +import pl.treksoft.kvision.toolbar.ButtonGroupStyle +import test.pl.treksoft.kvision.DomSpec +import kotlin.browser.document +import kotlin.test.Test + +class ButtonGroupSpec : DomSpec { + + @Test + fun render() { + run { + val root = Root("test", true) + val group = ButtonGroup() + root.add(group) + val element = document.getElementById("test") + assertEqualsHtml( + "
", + element?.innerHTML, + "Should render correct button group" + ) + group.size = ButtonGroupSize.LARGE + group.style = ButtonGroupStyle.JUSTIFIED + assertEqualsHtml( + "
", + element?.innerHTML, + "Should render correct button group with large and justified buttons" + ) + + } + } + +} diff --git a/src/test/kotlin/test/pl/treksoft/kvision/toolbar/ToolbarSpec.kt b/src/test/kotlin/test/pl/treksoft/kvision/toolbar/ToolbarSpec.kt new file mode 100644 index 00000000..5363640a --- /dev/null +++ b/src/test/kotlin/test/pl/treksoft/kvision/toolbar/ToolbarSpec.kt @@ -0,0 +1,29 @@ +/* + * Copyright (c) 2018. Robert Jaros + */ +package test.pl.treksoft.kvision.toolbar + +import pl.treksoft.kvision.panel.Root +import pl.treksoft.kvision.toolbar.Toolbar +import test.pl.treksoft.kvision.DomSpec +import kotlin.browser.document +import kotlin.test.Test + +class ToolbarSpec : DomSpec { + + @Test + fun render() { + run { + val root = Root("test", true) + val toolbar = Toolbar() + root.add(toolbar) + val element = document.getElementById("test") + assertEqualsHtml( + "
", + element?.innerHTML, + "Should render correct toolbar" + ) + } + } + +} -- cgit