Context menu component based on Bootstrap dropdown.

8 files changed, 243 insertions, 14 deletions

diff --git a/src/main/kotlin/pl/treksoft/kvision/core/Widget.kt b/src/main/kotlin/pl/treksoft/kvision/core/Widget.kt
index 03222d6f..61e9ba4e 100644
--- a/src/main/kotlin/pl/treksoft/kvision/core/Widget.kt
+++ b/src/main/kotlin/pl/treksoft/kvision/core/Widget.kt
@@ -27,9 +27,11 @@ import com.github.snabbdom.h
 import org.w3c.dom.CustomEventInit
 import org.w3c.dom.DragEvent
 import org.w3c.dom.Node
+import org.w3c.dom.events.MouseEvent
 import pl.treksoft.jquery.JQuery
 import pl.treksoft.jquery.jQuery
 import pl.treksoft.kvision.KVManager
+import pl.treksoft.kvision.dropdown.ContextMenu
 import pl.treksoft.kvision.panel.Root
 import pl.treksoft.kvision.utils.SnOn
 import pl.treksoft.kvision.utils.hooks
@@ -55,7 +57,7 @@ open class Widget(classes: Set<String> = setOf()) : StyledComponent() {
     internal val internalListeners = mutableListOf<SnOn<Widget>.() -> Unit>()
     internal val listeners = mutableListOf<SnOn<Widget>.() -> Unit>()
 
-    override var parent: Component? = null
+    override var parent: Container? = null
 
     override var visible: Boolean = true
         set(value) {
@@ -542,6 +544,21 @@ open class Widget(classes: Set<String> = setOf()) : StyledComponent() {
     }
 
     /**
+     * Sets context menu for the current widget.
+     * @param contextMenu a context menu
+     * @return current widget
+     */
+    open fun setContextMenu(contextMenu: ContextMenu): Widget {
+        setEventListener<Widget> {
+            contextmenu = { e: MouseEvent ->
+                e.preventDefault()
+                contextMenu.positionMenu(e)
+            }
+        }
+        return this
+    }
+
+    /**
      * @suppress
      * Internal function
      */
diff --git a/src/main/kotlin/pl/treksoft/kvision/dropdown/ContextMenu.kt b/src/main/kotlin/pl/treksoft/kvision/dropdown/ContextMenu.kt
new file mode 100644
index 00000000..ed788ab7
--- /dev/null
+++ b/src/main/kotlin/pl/treksoft/kvision/dropdown/ContextMenu.kt
@@ -0,0 +1,66 @@
+/*
+ * Copyright (c) 2018. Robert Jaros
+ */
+package pl.treksoft.kvision.dropdown
+
+import org.w3c.dom.events.MouseEvent
+import pl.treksoft.kvision.core.Display
+import pl.treksoft.kvision.core.Widget
+import pl.treksoft.kvision.html.ListTag
+import pl.treksoft.kvision.html.ListType
+import pl.treksoft.kvision.panel.Root
+import pl.treksoft.kvision.utils.px
+
+/**
+ * Context menu component.
+ *
+ * @constructor
+ * @param classes a set of CSS class names
+ */
+open class ContextMenu(
+    classes: Set<String> = setOf(), init: (ContextMenu.() -> Unit)? = null
+) : ListTag(ListType.UL, classes = classes + "dropdown-menu") {
+
+    init {
+        @Suppress("LeakingThis")
+        hide()
+        @Suppress("LeakingThis")
+        display = Display.BLOCK
+        val root = Root.getLastRoot()
+        if (root != null) {
+            @Suppress("LeakingThis")
+            root.addContextMenu(this)
+        } else {
+            println("At least one Root object is required to create a context menu!")
+        }
+        @Suppress("LeakingThis")
+        init?.invoke(this)
+    }
+
+    /**
+     * Positions and shows a context menu based on a mouse event.
+     * @param mouseEvent mouse event
+     * @return current context menu
+     */
+    open fun positionMenu(mouseEvent: MouseEvent): ContextMenu {
+        this.top = mouseEvent.pageY.toInt().px
+        this.left = mouseEvent.pageX.toInt().px
+        this.show()
+        return this
+    }
+
+    companion object {
+        /**
+         * DSL builder extension function.
+         *
+         * It takes the same parameters as the constructor of the built component.
+         */
+        fun Widget.contextMenu(
+            classes: Set<String> = setOf(), init: (ContextMenu.() -> Unit)? = null
+        ): ContextMenu {
+            val contextMenu = ContextMenu(classes).apply { init?.invoke(this) }
+            this.setContextMenu(contextMenu)
+            return contextMenu
+        }
+    }
+}
diff --git a/src/main/kotlin/pl/treksoft/kvision/dropdown/DropDown.kt b/src/main/kotlin/pl/treksoft/kvision/dropdown/DropDown.kt
index 9a349707..4622ceca 100644
--- a/src/main/kotlin/pl/treksoft/kvision/dropdown/DropDown.kt
+++ b/src/main/kotlin/pl/treksoft/kvision/dropdown/DropDown.kt
@@ -186,15 +186,11 @@ open class DropDown(
         elements?.let { elems ->
             val c = elems.map {
                 when (it.second) {
-                    DD.HEADER.option -> Tag(TAG.LI, it.first, classes = setOf("dropdown-header"))
-                    DD.SEPARATOR.option -> {
-                        val tag = Tag(TAG.LI, it.first, classes = setOf("divider"))
-                        tag.role = "separator"
-                        tag
-                    }
+                    DD.HEADER.option -> Header(it.first)
+                    DD.SEPARATOR.option -> Separator()
                     DD.DISABLED.option -> {
                         val tag = Tag(TAG.LI, classes = setOf("disabled"))
-                        tag.add(Link(it.first, "#"))
+                        tag.add(Link(it.first, "javascript:void(0)"))
                         tag
                     }
                     else -> Link(it.first, it.second)
@@ -246,10 +242,11 @@ open class DropDown(
          */
         fun Container.dropDown(
             text: String, elements: List<StringPair>? = null, icon: String? = null,
-            style: ButtonStyle = ButtonStyle.DEFAULT, disabled: Boolean = false, navbar: Boolean = false,
+            style: ButtonStyle = ButtonStyle.DEFAULT, disabled: Boolean = false, forNavbar: Boolean = false,
             classes: Set<String> = setOf(), init: (DropDown.() -> Unit)? = null
         ): DropDown {
-            val dropDown = DropDown(text, elements, icon, style, disabled, navbar, classes).apply { init?.invoke(this) }
+            val dropDown =
+                DropDown(text, elements, icon, style, disabled, forNavbar, classes).apply { init?.invoke(this) }
             this.add(dropDown)
             return dropDown
         }
@@ -264,6 +261,11 @@ internal class DropDownButton(
 
     init {
         this.id = id
+        setInternalEventListener<DropDownButton> {
+            click = { e ->
+                if (parent?.parent is ContextMenu) e.asDynamic().dropDownCM = true
+            }
+        }
     }
 
     override fun render(): VNode {
diff --git a/src/main/kotlin/pl/treksoft/kvision/dropdown/Header.kt b/src/main/kotlin/pl/treksoft/kvision/dropdown/Header.kt
new file mode 100644
index 00000000..e09d0246
--- /dev/null
+++ b/src/main/kotlin/pl/treksoft/kvision/dropdown/Header.kt
@@ -0,0 +1,44 @@
+/*
+ * Copyright (c) 2018. Robert Jaros
+ */
+package pl.treksoft.kvision.dropdown
+
+import pl.treksoft.kvision.html.ListTag
+import pl.treksoft.kvision.html.TAG
+import pl.treksoft.kvision.html.Tag
+
+/**
+ * Menu header component.
+ *
+ * @constructor
+ * @param content header content text
+ * @param classes a set of CSS class names
+ */
+open class Header(content: String? = null, classes: Set<String> = setOf()) :
+    Tag(TAG.LI, content, classes = classes + "dropdown-header") {
+
+
+    companion object {
+        /**
+         * DSL builder extension function.
+         *
+         * It takes the same parameters as the constructor of the built component.
+         */
+        fun ListTag.header(content: String? = null, classes: Set<String> = setOf()): Header {
+            val header = Header(content, classes)
+            this.add(header)
+            return header
+        }
+
+        /**
+         * DSL builder extension function.
+         *
+         * It takes the same parameters as the constructor of the built component.
+         */
+        fun DropDown.header(content: String? = null, classes: Set<String> = setOf()): Header {
+            val header = Header(content, classes)
+            this.add(header)
+            return header
+        }
+    }
+}
diff --git a/src/main/kotlin/pl/treksoft/kvision/dropdown/Separator.kt b/src/main/kotlin/pl/treksoft/kvision/dropdown/Separator.kt
new file mode 100644
index 00000000..e786b47a
--- /dev/null
+++ b/src/main/kotlin/pl/treksoft/kvision/dropdown/Separator.kt
@@ -0,0 +1,48 @@
+/*
+ * Copyright (c) 2018. Robert Jaros
+ */
+package pl.treksoft.kvision.dropdown
+
+import pl.treksoft.kvision.core.StringPair
+import pl.treksoft.kvision.html.ListTag
+import pl.treksoft.kvision.html.TAG
+import pl.treksoft.kvision.html.Tag
+
+/**
+ * Menu separator component.
+ *
+ * @constructor
+ * @param classes a set of CSS class names
+ */
+open class Separator(classes: Set<String> = setOf()) : Tag(TAG.LI, classes = classes + "divider") {
+
+    override fun getSnAttrs(): List<StringPair> {
+        val pr = super.getSnAttrs().toMutableList()
+        pr.add("role" to "separator")
+        return pr
+    }
+
+    companion object {
+        /**
+         * DSL builder extension function.
+         *
+         * It takes the same parameters as the constructor of the built component.
+         */
+        fun ListTag.separator(classes: Set<String> = setOf()): Separator {
+            val separator = Separator(classes)
+            this.add(separator)
+            return separator
+        }
+
+        /**
+         * DSL builder extension function.
+         *
+         * It takes the same parameters as the constructor of the built component.
+         */
+        fun DropDown.separator(classes: Set<String> = setOf()): Separator {
+            val separator = Separator(classes)
+            this.add(separator)
+            return separator
+        }
+    }
+}
diff --git a/src/main/kotlin/pl/treksoft/kvision/html/Link.kt b/src/main/kotlin/pl/treksoft/kvision/html/Link.kt
index 94c7c594..50a45047 100644
--- a/src/main/kotlin/pl/treksoft/kvision/html/Link.kt
+++ b/src/main/kotlin/pl/treksoft/kvision/html/Link.kt
@@ -25,6 +25,7 @@ import com.github.snabbdom.VNode
 import pl.treksoft.kvision.core.Container
 import pl.treksoft.kvision.core.ResString
 import pl.treksoft.kvision.core.StringPair
+import pl.treksoft.kvision.dropdown.DropDown
 import pl.treksoft.kvision.panel.SimplePanel
 
 /**
@@ -81,5 +82,37 @@ open class Link(
             this.add(link)
             return link
         }
+
+        /**
+         * DSL builder extension function for a disabled link in a dropdown list.
+         *
+         * It takes the same parameters as the constructor of the built component.
+         */
+        fun ListTag.linkDisabled(
+            label: String, icon: String? = null, image: ResString? = null,
+            classes: Set<String> = setOf(), init: (Link.() -> Unit)? = null
+        ): Link {
+            val link = Link(label, "javascript:void(0)", icon, image, classes).apply { init?.invoke(this) }
+            val tag = Tag(TAG.LI, classes = setOf("disabled"))
+            tag.add(link)
+            this.add(tag)
+            return link
+        }
+
+        /**
+         * DSL builder extension function for a disabled link in a dropdown list.
+         *
+         * It takes the same parameters as the constructor of the built component.
+         */
+        fun DropDown.linkDisabled(
+            label: String, icon: String? = null, image: ResString? = null,
+            classes: Set<String> = setOf(), init: (Link.() -> Unit)? = null
+        ): Link {
+            val link = Link(label, "javascript:void(0)", icon, image, classes).apply { init?.invoke(this) }
+            val tag = Tag(TAG.LI, classes = setOf("disabled"))
+            tag.add(link)
+            this.add(tag)
+            return link
+        }
     }
 }
diff --git a/src/main/kotlin/pl/treksoft/kvision/html/List.kt b/src/main/kotlin/pl/treksoft/kvision/html/List.kt
index fb49cd62..020806ce 100644
--- a/src/main/kotlin/pl/treksoft/kvision/html/List.kt
+++ b/src/main/kotlin/pl/treksoft/kvision/html/List.kt
@@ -27,6 +27,7 @@ import pl.treksoft.kvision.KVManager
 import pl.treksoft.kvision.core.Component
 import pl.treksoft.kvision.core.Container
 import pl.treksoft.kvision.core.StringBoolPair
+import pl.treksoft.kvision.dropdown.DropDown
 import pl.treksoft.kvision.panel.SimplePanel
 
 /**
@@ -96,14 +97,14 @@ open class ListTag(
         val childrenElements = children.filter { it.visible }
         val res = when (type) {
             ListType.UL, ListType.OL, ListType.UNSTYLED, ListType.INLINE -> childrenElements.map { v ->
-                if (v is Tag && v.type == TAG.LI) {
+                if (v is Tag && v.type == TAG.LI || v is DropDown && v.forNavbar) {
                     v.renderVNode()
                 } else {
                     h("li", arrayOf(v.renderVNode()))
                 }
             }
             ListType.DL, ListType.DL_HORIZ -> childrenElements.mapIndexed { index, v ->
-                if (v is Tag && v.type == TAG.LI) {
+                if (v is Tag && v.type == TAG.LI || v is DropDown && v.forNavbar) {
                     v.renderVNode()
                 } else {
                     h(if (index % 2 == 0) "dt" else "dd", arrayOf(v.renderVNode()))
diff --git a/src/main/kotlin/pl/treksoft/kvision/panel/Root.kt b/src/main/kotlin/pl/treksoft/kvision/panel/Root.kt
index a51191d4..7ab68fdd 100644
--- a/src/main/kotlin/pl/treksoft/kvision/panel/Root.kt
+++ b/src/main/kotlin/pl/treksoft/kvision/panel/Root.kt
@@ -25,6 +25,7 @@ import com.github.snabbdom.VNode
 import com.github.snabbdom.h
 import pl.treksoft.kvision.KVManager
 import pl.treksoft.kvision.core.StringBoolPair
+import pl.treksoft.kvision.dropdown.ContextMenu
 import pl.treksoft.kvision.modal.Modal
 import pl.treksoft.kvision.utils.snClasses
 import pl.treksoft.kvision.utils.snOpt
@@ -44,6 +45,7 @@ import pl.treksoft.kvision.utils.snOpt
  */
 class Root(id: String, private val fixed: Boolean = false, init: (Root.() -> Unit)? = null) : SimplePanel() {
     private val modals: MutableList<Modal> = mutableListOf()
+    private val contextMenus: MutableList<ContextMenu> = mutableListOf()
     private var rootVnode: VNode = renderVNode()
 
     internal var renderDisabled = false
@@ -60,9 +62,9 @@ class Root(id: String, private val fixed: Boolean = false, init: (Root.() -> Uni
         return if (!fixed) {
             render("div#$id", arrayOf(h("div", snOpt {
                 `class` = snClasses(listOf("row" to true))
-            }, childrenVNodes() + modalsVNodes())))
+            }, childrenVNodes() + modalsVNodes() + contextMenusVNodes())))
         } else {
-            render("div#$id", childrenVNodes() + modalsVNodes())
+            render("div#$id", childrenVNodes() + modalsVNodes() + contextMenusVNodes())
         }
     }
 
@@ -72,10 +74,26 @@ class Root(id: String, private val fixed: Boolean = false, init: (Root.() -> Uni
         refresh()
     }
 
+    internal fun addContextMenu(contextMenu: ContextMenu) {
+        contextMenus.add(contextMenu)
+        contextMenu.parent = this
+        this.setInternalEventListener<Root> {
+            click = { e ->
+                @Suppress("UnsafeCastFromDynamic")
+                if (!e.asDynamic().dropDownCM) contextMenu.hide()
+            }
+        }
+        refresh()
+    }
+
     private fun modalsVNodes(): Array<VNode> {
         return modals.filter { it.visible }.map { it.renderVNode() }.toTypedArray()
     }
 
+    private fun contextMenusVNodes(): Array<VNode> {
+        return contextMenus.filter { it.visible }.map { it.renderVNode() }.toTypedArray()
+    }
+
     override fun getSnClass(): List<StringBoolPair> {
         val css = if (!fixed) "container-fluid" else "container"
         return super.getSnClass() + (css to true)