Support fo toolbar and button group componenets.

4 files changed, 201 insertions, 0 deletions

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<String> = 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<StringBoolPair> {
+        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<StringPair> {
+        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<String> = 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<String> = setOf(), init: (Toolbar.() -> Unit)? = null
+) : SimplePanel(classes + "btn-toolbar") {
+
+    init {
+        @Suppress("LeakingThis")
+        init?.invoke(this)
+    }
+
+    override fun getSnAttrs(): List<StringPair> {
+        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<String> = 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(
+                "<div class=\"btn-group\" role=\"group\"></div>",
+                element?.innerHTML,
+                "Should render correct button group"
+            )
+            group.size = ButtonGroupSize.LARGE
+            group.style = ButtonGroupStyle.JUSTIFIED
+            assertEqualsHtml(
+                "<div class=\"btn-group btn-group-lg btn-group-justified\" role=\"group\"></div>",
+                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(
+                "<div class=\"btn-toolbar\" role=\"toolbar\"></div>",
+                element?.innerHTML,
+                "Should render correct toolbar"
+            )
+        }
+    }
+
+}