Bootstrap progress bar component.

2 files changed, 227 insertions, 0 deletions

diff --git a/src/main/kotlin/pl/treksoft/kvision/progress/ProgressBar.kt b/src/main/kotlin/pl/treksoft/kvision/progress/ProgressBar.kt
new file mode 100644
index 00000000..589cf726
--- /dev/null
+++ b/src/main/kotlin/pl/treksoft/kvision/progress/ProgressBar.kt
@@ -0,0 +1,120 @@
+/*
+ * Copyright (c) 2018. Robert Jaros
+ */
+package pl.treksoft.kvision.progress
+
+import pl.treksoft.kvision.core.Container
+import pl.treksoft.kvision.html.Align
+import pl.treksoft.kvision.panel.SimplePanel
+
+/**
+ * The Bootstrap progress bar.
+ *
+ * @constructor
+ * @param progress the current progress
+ * @param min the minimal progress
+ * @param max the maximal progress
+ * @param style the style of the progress bar
+ * @param striped determines if the progress bar is striped
+ * @param animated determines if the progress bar is animated
+ * @param content element text
+ * @param rich determines if content can contain HTML code
+ * @param align content align
+ * @param classes a set of CSS class names
+ * @param init an initializer extension function
+ */
+open class ProgressBar(
+    progress: Int, min: Int = DEFAULT_MIN, max: Int = DEFAULT_MAX, style: ProgressBarStyle? = null,
+    striped: Boolean = false, animated: Boolean = false, content: String? = null,
+    rich: Boolean = false, align: Align? = null,
+    classes: Set<String> = setOf(), init: (ProgressBar.() -> Unit)? = null
+) :
+    SimplePanel(classes + "progress") {
+
+    /**
+     * The current progress.
+     */
+    var progress
+        get() = indicator.progress
+        set(value) {
+            indicator.progress = value
+        }
+    /**
+     * The minimal progress.
+     */
+    var min
+        get() = indicator.min
+        set(value) {
+            indicator.min = value
+        }
+    /**
+     * The maximal progress.
+     */
+    var max
+        get() = indicator.max
+        set(value) {
+            indicator.max = value
+        }
+    /**
+     * The style of the progress bar.
+     */
+    var style
+        get() = indicator.style
+        set(value) {
+            indicator.style = value
+        }
+    /**
+     * Determines if the progress bar is striped.
+     */
+    var striped
+        get() = indicator.striped
+        set(value) {
+            indicator.striped = value
+        }
+    /**
+     * Determines if the progress bar is animated.
+     */
+    var animated
+        get() = indicator.animated
+        set(value) {
+            indicator.animated = value
+        }
+
+    internal val indicator = ProgressIndicator(progress, min, max, style, striped, animated, content, rich, align)
+
+    init {
+        addInternal(indicator)
+
+        @Suppress("LeakingThis")
+        init?.invoke(this)
+    }
+
+    companion object {
+        /**
+         * DSL builder extension function.
+         *
+         * It takes the same parameters as the constructor of the built component.
+         */
+        fun Container.progressBar(
+            progress: Int, min: Int = DEFAULT_MIN, max: Int = DEFAULT_MAX, style: ProgressBarStyle? = null,
+            striped: Boolean = false, animated: Boolean = false,
+            content: String? = null, rich: Boolean = false, align: Align? = null,
+            classes: Set<String> = setOf(), init: (ProgressBar.() -> Unit)? = null
+        ): ProgressBar {
+            val progressBar = ProgressBar(
+                progress,
+                min,
+                max,
+                style,
+                striped,
+                animated,
+                content,
+                rich,
+                align,
+                classes
+            ).apply { init?.invoke(this) }
+            this.add(progressBar)
+            return progressBar
+        }
+    }
+}
diff --git a/src/main/kotlin/pl/treksoft/kvision/progress/ProgressIndicator.kt b/src/main/kotlin/pl/treksoft/kvision/progress/ProgressIndicator.kt
new file mode 100644
index 00000000..10413ebb
--- /dev/null
+++ b/src/main/kotlin/pl/treksoft/kvision/progress/ProgressIndicator.kt
@@ -0,0 +1,107 @@
+/*
+ * Copyright (c) 2018. Robert Jaros
+ */
+package pl.treksoft.kvision.progress
+
+import pl.treksoft.kvision.core.StringBoolPair
+import pl.treksoft.kvision.core.StringPair
+import pl.treksoft.kvision.html.Align
+import pl.treksoft.kvision.html.Div
+import pl.treksoft.kvision.utils.perc
+
+/**
+ * Progress bar styles.
+ */
+enum class ProgressBarStyle(internal val className: String) {
+    SUCCESS("progress-bar-success"),
+    INFO("progress-bar-info"),
+    WARNING("progress-bar-warning"),
+    DANGER("progress-bar-danger")
+}
+
+internal const val DEFAULT_MIN = 0
+internal const val DEFAULT_MAX = 100
+
+
+/**
+ * The Bootstrap progress bar indicator.
+ *
+ * @constructor
+ * @param progress the current progress
+ * @param min the minimal progress
+ * @param max the maximal progress
+ * @param style the style of the progress bar indicator
+ * @param striped determines if the progress bar indicator is striped
+ * @param animated determines if the progress bar indicator is animated
+ * @param content element text
+ * @param rich determines if [content] can contain HTML code
+ * @param align content align
+ * @param classes a set of CSS class names
+ */
+internal class ProgressIndicator(
+    progress: Int, min: Int = DEFAULT_MIN, max: Int = DEFAULT_MAX, style: ProgressBarStyle? = null,
+    striped: Boolean = false, animated: Boolean = false,
+    content: String? = null, rich: Boolean = false, align: Align? = null,
+    classes: Set<String> = setOf()
+) :
+    Div(content ?: "", rich, align, classes) {
+
+    /**
+     * The current progress.
+     */
+    var progress by refreshOnUpdate(progress, { refreshWidth() })
+    /**
+     * The minimal progress.
+     */
+    var min by refreshOnUpdate(min, { refreshWidth() })
+    /**
+     * The maximal progress.
+     */
+    var max by refreshOnUpdate(max, { refreshWidth() })
+    /**
+     * The style of the progress indicator.
+     */
+    var style by refreshOnUpdate(style)
+    /**
+     * Determines if the progress indicator is striped.
+     */
+    var striped by refreshOnUpdate(striped)
+    /**
+     * Determines if the progress indicator is animated.
+     */
+    var animated by refreshOnUpdate(animated)
+
+    init {
+        role = "progressbar"
+        refreshWidth()
+    }
+
+    private fun refreshWidth() {
+        val value = (if (max - min > 0) (progress - min) * DEFAULT_MAX.toFloat() / (max - min) else 0f).toInt()
+        val percent = if (value < 0) 0 else if (value > DEFAULT_MAX) DEFAULT_MAX else value
+        width = percent.perc
+    }
+
+    override fun getSnClass(): List<StringBoolPair> {
+        val cl = super.getSnClass().toMutableList()
+        cl.add("progress-bar" to true)
+        style?.let {
+            cl.add(it.className to true)
+        }
+        if (striped || animated) {
+            cl.add("progress-bar-striped" to true)
+        }
+        if (animated) {
+            cl.add("active" to true)
+        }
+        return cl
+    }
+
+    override fun getSnAttrs(): List<StringPair> {
+        val sn = super.getSnAttrs().toMutableList()
+        sn.add("aria-valuenow" to "$progress")
+        sn.add("aria-valuemin" to "$min")
+        sn.add("aria-valuemax" to "$max")
+        return sn
+    }
+}