Modals

9 files changed, 419 insertions, 10 deletions

diff --git a/src/main/kotlin/pl/treksoft/kvision/Showcase.kt b/src/main/kotlin/pl/treksoft/kvision/Showcase.kt
index 258e870d..1e93d95a 100644
--- a/src/main/kotlin/pl/treksoft/kvision/Showcase.kt
+++ b/src/main/kotlin/pl/treksoft/kvision/Showcase.kt
@@ -8,7 +8,12 @@ import pl.treksoft.kvision.dropdown.DD.*
 import pl.treksoft.kvision.dropdown.DropDown
 import pl.treksoft.kvision.html.*
 import pl.treksoft.kvision.html.TAG.H1
+import pl.treksoft.kvision.modal.Alert
+import pl.treksoft.kvision.modal.Confirm
+import pl.treksoft.kvision.modal.MODALSIZE
+import pl.treksoft.kvision.modal.Modal
 import pl.treksoft.kvision.routing.routing
+import kotlin.browser.window
 
 class Showcase : ApplicationBase() {
 
@@ -73,6 +78,11 @@ class Showcase : ApplicationBase() {
         val img = Image(Img("kotlin.png"), "Image", true, IMAGESHAPE.ROUNDED)
         root.add(img)
 
+        val modal = Modal("Test okienka")
+        modal.add(Tag(TAG.H4, "ABC"))
+        modal.add(Image(Img("kotlin.png")))
+        modal.addButton(Button("To jest button"))
+
         val button = Button("To jest przycisk FA", "fa-flag", BUTTONSTYLE.DANGER)
         button.setEventListener<Button> {
             click = { _ ->
@@ -80,9 +90,24 @@ class Showcase : ApplicationBase() {
                 dd3.text = "Zmiana"
                 dd3.style = BUTTONSTYLE.WARNING
                 dd3.disabled = true
+                modal.show()
+                window.setTimeout({
+                    modal.size = MODALSIZE.SMALL
+                    modal.animation = false
+                }, 2000)
             }
         }
         root.add(button)
+
+        fun alerts() {
+            Alert.show("This is alert", "A text of the <b>alert</b>", true) {
+                println("abc")
+                Alert.show("This is alert 2", "A text of the <b>alert</b> 2", true) {
+                    println("def")
+                }
+            }
+        }
+
         val button2 = Button("To jest przycisk", "flag", BUTTONSTYLE.DANGER)
         button2.setEventListener {
             click = { e ->
@@ -91,17 +116,20 @@ class Showcase : ApplicationBase() {
                 button.setEventListener {
                     click = null
                 }
+                alerts()
             }
         }
         root.add(button2)
         val button3 = Button("To jest przycisk IMG", image = Img("kotlin.png"))
         button3.setEventListener {
             click = { e ->
-                dd.show()
-                println("3" + e)
-                button.setEventListener<Button> {
-                    click = { _ -> println(self.text) }
-                    dblclick = { e -> println("111" + e) }
+                Confirm.show("Pytanie", "Czy na pewno chcesz kliknąć przycisk?", noCallback = { println("no") }) {
+                    dd.show()
+                    println("3" + e)
+                    button.setEventListener<Button> {
+                        click = { _ -> println(self.text) }
+                        dblclick = { e -> println("111" + e) }
+                    }
                 }
             }
         }
@@ -112,7 +140,6 @@ class Showcase : ApplicationBase() {
                 .on("/abc", { -> println("abc") })
                 .on("/test", { -> println("test") })
                 .resolve()
-
 //        jQuery(document).off(".data-api")
 
 //        routing.on(RegExp("/abc/def/(.*)/(.*)/(.*)"), { x,y,z,u,v -> println(x) })
diff --git a/src/main/kotlin/pl/treksoft/kvision/core/Root.kt b/src/main/kotlin/pl/treksoft/kvision/core/Root.kt
index ef2e7616..abb5d3cf 100644
--- a/src/main/kotlin/pl/treksoft/kvision/core/Root.kt
+++ b/src/main/kotlin/pl/treksoft/kvision/core/Root.kt
@@ -1,18 +1,31 @@
 package pl.treksoft.kvision.core
 
 import com.github.snabbdom.VNode
+import pl.treksoft.kvision.modal.Modal
 import pl.treksoft.kvision.snabbdom.StringBoolPair
 
 class Root(id: String, private val fluid: Boolean = false) : Container() {
+    private val modals: MutableList<Modal> = mutableListOf()
     private var rootVnode: VNode = render()
 
     init {
         rootVnode = KVManager.patch(id, this.render())
         this.id = id
+        roots.add(this)
     }
 
     override fun render(): VNode {
-        return kvh("div#" + id, childrenVNodes())
+        return kvh("div#" + id, childrenVNodes() + modalsVNodes())
+    }
+
+    private fun modalsVNodes(): Array<VNode> {
+        return modals.filter { it.visible }.map { it.render() }.toTypedArray()
+    }
+
+    internal fun addModal(modal: Modal) {
+        modals.add(modal)
+        modal.parent = this
+        refresh()
     }
 
     override fun getSnClass(): List<StringBoolPair> {
@@ -28,4 +41,14 @@ class Root(id: String, private val fluid: Boolean = false) : Container() {
         return this
     }
 
+    companion object {
+        private val roots: MutableList<Root> = mutableListOf()
+
+        internal fun getLastRoot(): Root? {
+            if (roots.size > 0)
+                return roots[roots.size - 1]
+            else
+                return null
+        }
+    }
 }
diff --git a/src/main/kotlin/pl/treksoft/kvision/dropdown/DropDown.kt b/src/main/kotlin/pl/treksoft/kvision/dropdown/DropDown.kt
index 7ee9a28f..e2f88e72 100644
--- a/src/main/kotlin/pl/treksoft/kvision/dropdown/DropDown.kt
+++ b/src/main/kotlin/pl/treksoft/kvision/dropdown/DropDown.kt
@@ -73,10 +73,10 @@ open class DropDown(text: String, elements: List<StringPair>? = null, icon: Stri
             refresh()
         }
 
-    val idc = "kv_dropdown_" + counter
-    val button: DropDownButton = DropDownButton(idc, text, icon, style, size, block,
+    private val idc = "kv_dropdown_" + counter
+    protected val button: DropDownButton = DropDownButton(idc, text, icon, style, size, block,
             disabled, image, setOf("dropdown"))
-    val list: DropDownListTag = DropDownListTag(idc, setOf("dropdown-menu"))
+    protected val list: DropDownListTag = DropDownListTag(idc, setOf("dropdown-menu"))
 
     init {
         button.setEventListener {
diff --git a/src/main/kotlin/pl/treksoft/kvision/helpers/CloseIcon.kt b/src/main/kotlin/pl/treksoft/kvision/helpers/CloseIcon.kt
new file mode 100644
index 00000000..b5f1a642
--- /dev/null
+++ b/src/main/kotlin/pl/treksoft/kvision/helpers/CloseIcon.kt
@@ -0,0 +1,25 @@
+package pl.treksoft.kvision.helpers
+
+import com.github.snabbdom.VNode
+import pl.treksoft.kvision.core.KVManager
+import pl.treksoft.kvision.core.Widget
+import pl.treksoft.kvision.snabbdom.StringBoolPair
+import pl.treksoft.kvision.snabbdom.StringPair
+
+open class CloseIcon(classes: Set<String> = setOf()) : Widget(classes) {
+
+    override fun render(): VNode {
+        return kvh("button", arrayOf(KVManager.virtualize("<span aria-hidden='true'>&times;</span>")))
+    }
+
+    override fun getSnClass(): List<StringBoolPair> {
+        val cl = super.getSnClass().toMutableList()
+        cl.add("close" to true)
+        return cl
+    }
+
+    override fun getSnAttrs(): List<StringPair> {
+        return super.getSnAttrs() + listOf("type" to "button", "aria-label" to "Close")
+    }
+
+}
diff --git a/src/main/kotlin/pl/treksoft/kvision/html/Tag.kt b/src/main/kotlin/pl/treksoft/kvision/html/Tag.kt
index 37a7bf98..febee81b 100644
--- a/src/main/kotlin/pl/treksoft/kvision/html/Tag.kt
+++ b/src/main/kotlin/pl/treksoft/kvision/html/Tag.kt
@@ -19,6 +19,7 @@ enum class TAG(val tagName: String) {
     BLOCKQUOTE("blockquote"),
     FOOTER("footer"),
     PRE("pre"),
+    DIV("div"),
 
     MARK("mark"),
     DEL("del"),
diff --git a/src/main/kotlin/pl/treksoft/kvision/modal/Alert.kt b/src/main/kotlin/pl/treksoft/kvision/modal/Alert.kt
new file mode 100644
index 00000000..5e0e910a
--- /dev/null
+++ b/src/main/kotlin/pl/treksoft/kvision/modal/Alert.kt
@@ -0,0 +1,54 @@
+package pl.treksoft.kvision.modal
+
+import pl.treksoft.kvision.html.ALIGN
+import pl.treksoft.kvision.html.BUTTONSTYLE
+import pl.treksoft.kvision.html.Button
+import pl.treksoft.kvision.html.TAG
+import pl.treksoft.kvision.html.Tag
+
+open class Alert(caption: String? = null, text: String? = null, rich: Boolean = false,
+                 align: ALIGN = ALIGN.NONE, size: MODALSIZE? = null, animation: Boolean = true,
+                 private val callback: (() -> Unit)? = null) : Modal(caption, true, size, animation) {
+    var text
+        get() = content.text
+        set(value) {
+            content.text = value
+        }
+    var rich
+        get() = content.rich
+        set(value) {
+            content.rich = value
+        }
+    var align
+        get() = content.align
+        set(value) {
+            content.align = value
+        }
+
+    val content = Tag(TAG.SPAN, text, rich, align)
+
+    init {
+        body.add(content)
+        val okButton = Button("OK", "ok", BUTTONSTYLE.PRIMARY)
+        okButton.setEventListener {
+            click = {
+                hide()
+            }
+        }
+        this.addButton(okButton)
+    }
+
+    override fun hide() {
+        super.hide()
+        this.callback?.invoke()
+    }
+
+    companion object {
+        @Suppress("LongParameterList")
+        fun show(caption: String? = null, text: String? = null, rich: Boolean = false,
+                 align: ALIGN = ALIGN.NONE, size: MODALSIZE? = null, animation: Boolean = true,
+                 callback: (() -> Unit)? = null) {
+            Alert(caption, text, rich, align, size, animation, callback).show()
+        }
+    }
+}
diff --git a/src/main/kotlin/pl/treksoft/kvision/modal/Confirm.kt b/src/main/kotlin/pl/treksoft/kvision/modal/Confirm.kt
new file mode 100644
index 00000000..366eec52
--- /dev/null
+++ b/src/main/kotlin/pl/treksoft/kvision/modal/Confirm.kt
@@ -0,0 +1,84 @@
+package pl.treksoft.kvision.modal
+
+import pl.treksoft.kvision.html.ALIGN
+import pl.treksoft.kvision.html.BUTTONSTYLE
+import pl.treksoft.kvision.html.Button
+import pl.treksoft.kvision.html.TAG
+import pl.treksoft.kvision.html.Tag
+
+open class Confirm(caption: String? = null, text: String? = null, rich: Boolean = false,
+                   align: ALIGN = ALIGN.NONE, size: MODALSIZE? = null, animation: Boolean = true,
+                   cancelVisible: Boolean = false,
+                   private val noCallback: (() -> Unit)? = null,
+                   private val yesCallback: (() -> Unit)? = null) : Modal(caption, false, size, animation, false) {
+    var text
+        get() = content.text
+        set(value) {
+            content.text = value
+        }
+    var rich
+        get() = content.rich
+        set(value) {
+            content.rich = value
+        }
+    var align
+        get() = content.align
+        set(value) {
+            content.align = value
+        }
+    var cancelVisible = cancelVisible
+        set(value) {
+            field = value
+            refreshCancelButton()
+        }
+
+    val content = Tag(TAG.SPAN, text, rich, align)
+    val cancelButton = Button("Cancel", "remove")
+
+    init {
+        body.add(content)
+        cancelButton.setEventListener {
+            click = {
+                hide()
+            }
+        }
+        this.addButton(cancelButton)
+        val noButton = Button("No", "ban-circle")
+        noButton.setEventListener {
+            click = {
+                hide()
+                noCallback?.invoke()
+            }
+        }
+        this.addButton(noButton)
+        val yesButton = Button("Yes", "ok", BUTTONSTYLE.PRIMARY)
+        yesButton.setEventListener {
+            click = {
+                hide()
+                yesCallback?.invoke()
+            }
+        }
+        this.addButton(yesButton)
+        refreshCancelButton()
+    }
+
+    private fun refreshCancelButton() {
+        if (cancelVisible) {
+            cancelButton.show()
+            closeIcon.show()
+        } else {
+            cancelButton.hide()
+            closeIcon.hide()
+        }
+    }
+
+    companion object {
+        @Suppress("LongParameterList")
+        fun show(caption: String? = null, text: String? = null, rich: Boolean = false,
+                 align: ALIGN = ALIGN.NONE, size: MODALSIZE? = null, animation: Boolean = true,
+                 cancelVisible: Boolean = false,
+                 noCallback: (() -> Unit)? = null, yesCallback: (() -> Unit)? = null) {
+            Confirm(caption, text, rich, align, size, animation, cancelVisible, noCallback, yesCallback).show()
+        }
+    }
+}
diff --git a/src/main/kotlin/pl/treksoft/kvision/modal/Modal.kt b/src/main/kotlin/pl/treksoft/kvision/modal/Modal.kt
new file mode 100644
index 00000000..0b11d45f
--- /dev/null
+++ b/src/main/kotlin/pl/treksoft/kvision/modal/Modal.kt
@@ -0,0 +1,191 @@
+package pl.treksoft.kvision.modal
+
+import com.github.snabbdom.VNode
+import org.w3c.dom.CustomEvent
+import pl.treksoft.kvision.core.Container
+import pl.treksoft.kvision.core.Root
+import pl.treksoft.kvision.core.Widget
+import pl.treksoft.kvision.helpers.CloseIcon
+import pl.treksoft.kvision.html.Button
+import pl.treksoft.kvision.html.TAG
+import pl.treksoft.kvision.html.Tag
+import pl.treksoft.kvision.snabbdom.StringBoolPair
+import pl.treksoft.kvision.snabbdom.StringPair
+import pl.treksoft.kvision.snabbdom.obj
+
+enum class MODALSIZE(val className: String) {
+    LARGE("modal-lg"),
+    SMALL("modal-sm")
+}
+
+@Suppress("TooManyFunctions")
+open class Modal(caption: String? = null, closeButton: Boolean = true,
+                 size: MODALSIZE? = null, animation: Boolean = true, val escape: Boolean = true,
+                 classes: Set<String> = setOf()) : Container(classes) {
+    var caption
+        get() = captionTag.text
+        set(value) {
+            captionTag.text = value
+            checkHeaderVisibility()
+        }
+    var closeButton
+        get() = closeIcon.visible
+        set(value) {
+            closeIcon.visible = value
+            checkHeaderVisibility()
+        }
+    var size
+        get() = dialog.size
+        set(value) {
+            dialog.size = value
+        }
+    var animation = animation
+        set(value) {
+            field = value
+            refresh()
+        }
+
+    protected val dialog = ModalDialog(size)
+    protected val header = Container(setOf("modal-header"))
+    protected val closeIcon = CloseIcon()
+    protected val captionTag = Tag(TAG.H4, caption, classes = setOf("modal-title"))
+    protected val body = Container(setOf("modal-body"))
+    protected val footer = Container(setOf("modal-footer"))
+
+    init {
+        this.hide()
+        this.role = "dialog"
+        this.addInternal(dialog)
+        val content = Container(setOf("modal-content"))
+        dialog.role = "document"
+        dialog.add(content)
+        closeIcon.visible = closeButton
+        closeIcon.setEventListener {
+            click = {
+                hide()
+            }
+        }
+        header.add(closeIcon)
+        header.add(captionTag)
+        checkHeaderVisibility()
+        content.add(header)
+        content.add(body)
+        content.add(footer)
+        val root = Root.getLastRoot()
+        if (root != null) {
+            root.addModal(this)
+        } else {
+            println("At least one Root object is required to create a modal!")
+        }
+    }
+
+    private fun checkHeaderVisibility() {
+        if (!closeButton && caption == null) {
+            header.hide()
+        } else {
+            header.show()
+        }
+    }
+
+    override fun add(child: Widget) {
+        body.add(child)
+    }
+
+    override fun addAll(children: List<Widget>) {
+        body.addAll(children)
+    }
+
+    open fun addButton(button: Button) {
+        footer.add(button)
+    }
+
+    open fun removeButton(button: Button) {
+        footer.remove(button)
+    }
+
+    open fun removeButtonAt(index: Int) {
+        footer.removeAt(index)
+    }
+
+    open fun removeAllButtons() {
+        footer.removeAll()
+    }
+
+    override fun getSnAttrs(): List<StringPair> {
+        val pr = super.getSnAttrs().toMutableList()
+        pr.add("tabindex" to "-1")
+        return pr
+    }
+
+    override fun getSnClass(): List<StringBoolPair> {
+        val cl = super.getSnClass().toMutableList()
+        cl.add("modal" to true)
+        if (animation) {
+            cl.add("fade" to true)
+        }
+        return cl
+    }
+
+    @Suppress("UnsafeCastFromDynamic")
+    override fun afterInsert(node: VNode) {
+        getElementJQueryD()?.modal(obj {
+            keyboard = escape
+            backdrop = if (escape) "true" else "static"
+        })
+        this.getElementJQuery()?.on("show.bs.modal", { _, _ ->
+            val event = CustomEvent("showBsModal")
+            this.getElement()?.dispatchEvent(event)
+        })
+        this.getElementJQuery()?.on("shown.bs.modal", { _, _ ->
+            val event = CustomEvent("shownBsModal")
+            this.getElement()?.dispatchEvent(event)
+        })
+        this.getElementJQuery()?.on("hide.bs.modal", { _, _ ->
+            val event = CustomEvent("hideBsModal")
+            this.getElement()?.dispatchEvent(event)
+        })
+        this.getElementJQuery()?.on("hidden.bs.modal", { _, _ ->
+            this.visible = false
+            val event = CustomEvent("hiddenBsModal")
+            this.getElement()?.dispatchEvent(event)
+        })
+    }
+
+    override fun hide() {
+        if (visible) hideInternal()
+        super.hide()
+    }
+
+    open fun toggle() {
+        if (visible)
+            hide()
+        else
+            show()
+    }
+
+    @Suppress("UnsafeCastFromDynamic")
+    private fun showInternal() {
+        getElementJQueryD()?.modal("show")
+    }
+
+    @Suppress("UnsafeCastFromDynamic")
+    private fun hideInternal() {
+        getElementJQueryD()?.modal("hide")
+    }
+}
+
+open class ModalDialog(size: MODALSIZE?) : Container(setOf("modal-dialog")) {
+    var size = size
+        set(value) {
+            field = value
+            refresh()
+        }
+
+    override fun getSnClass(): List<StringBoolPair> {
+        val cl = super.getSnClass().toMutableList()
+        if (size != null) {
+            cl.add(size?.className.orEmpty() to true)
+        }
+        return cl
+    }
+}
diff --git a/src/main/kotlin/pl/treksoft/kvision/snabbdom/Types.kt b/src/main/kotlin/pl/treksoft/kvision/snabbdom/Types.kt
index 8a292910..a9ee9442 100644
--- a/src/main/kotlin/pl/treksoft/kvision/snabbdom/Types.kt
+++ b/src/main/kotlin/pl/treksoft/kvision/snabbdom/Types.kt
@@ -30,6 +30,10 @@ interface BtOn : On {
     var shownBsDropdown: ((DropDownEvent) -> kotlin.Unit)?
     var hideBsDropdown: ((DropDownEvent) -> kotlin.Unit)?
     var hiddenBsDropdown: ((DropDownEvent) -> kotlin.Unit)?
+    var showBsModal: ((CustomEvent) -> kotlin.Unit)?
+    var shownBsModal: ((CustomEvent) -> kotlin.Unit)?
+    var hideBsModal: ((CustomEvent) -> kotlin.Unit)?
+    var hiddenBsModal: ((CustomEvent) -> kotlin.Unit)?
 }
 
 interface SnOn<T> : BtOn {