diff options
| -rw-r--r-- | src/main/kotlin/pl/treksoft/kvision/dropdown/DropDown.kt | 17 | ||||
| -rw-r--r-- | src/test/kotlin/test/pl/treksoft/kvision/dropdown/DropDownSpec.kt | 18 |
2 files changed, 17 insertions, 18 deletions
diff --git a/src/main/kotlin/pl/treksoft/kvision/dropdown/DropDown.kt b/src/main/kotlin/pl/treksoft/kvision/dropdown/DropDown.kt index 53d722b1..80329d92 100644 --- a/src/main/kotlin/pl/treksoft/kvision/dropdown/DropDown.kt +++ b/src/main/kotlin/pl/treksoft/kvision/dropdown/DropDown.kt @@ -2,6 +2,7 @@ package pl.treksoft.kvision.dropdown import com.github.snabbdom.VNode import pl.treksoft.kvision.core.Component +import pl.treksoft.kvision.core.CssSize import pl.treksoft.kvision.html.BUTTONSTYLE import pl.treksoft.kvision.html.Button import pl.treksoft.kvision.html.LIST @@ -71,6 +72,12 @@ open class DropDown( field = value refresh() } + override var width: CssSize? + get() = super.width + set(value) { + super.width = value + button.width = value + } private val idc = "kv_dropdown_" + counter internal val button: DropDownButton = DropDownButton( @@ -80,7 +87,6 @@ open class DropDown( internal val list: DropDownListTag = DropDownListTag(idc, setOf("dropdown-menu")) init { - list.hide() setChildrenFromElements() this.addInternal(button) this.addInternal(list) @@ -142,7 +148,6 @@ open class DropDown( @Suppress("UnsafeCastFromDynamic") override fun afterInsert(node: VNode) { this.getElementJQuery()?.on("show.bs.dropdown", { e, _ -> - if (!list.visible) list.visible = true this.dispatchEvent("showBsDropdown", obj { detail = e }) }) this.getElementJQuery()?.on("shown.bs.dropdown", { e, _ -> @@ -152,7 +157,6 @@ open class DropDown( this.dispatchEvent("hideBsDropdown", obj { detail = e }) }) this.getElementJQuery()?.on("hidden.bs.dropdown", { e, _ -> - if (list.visible) list.visible = false this.dispatchEvent("hiddenBsDropdown", obj { detail = e }) }) } @@ -167,12 +171,7 @@ open class DropDown( } open fun toggle() { - if (this.list.visible) { - this.list.getElementJQueryD()?.dropdown("toggle") - } else { - this.list.visible = true - window.setTimeout({ this.list.getElementJQueryD()?.dropdown("toggle") }, 0) - } + this.list.getElementJQueryD()?.dropdown("toggle") } } diff --git a/src/test/kotlin/test/pl/treksoft/kvision/dropdown/DropDownSpec.kt b/src/test/kotlin/test/pl/treksoft/kvision/dropdown/DropDownSpec.kt index cd4f8930..41931abd 100644 --- a/src/test/kotlin/test/pl/treksoft/kvision/dropdown/DropDownSpec.kt +++ b/src/test/kotlin/test/pl/treksoft/kvision/dropdown/DropDownSpec.kt @@ -21,7 +21,7 @@ class DropDownSpec : DomSpec { val element = document.getElementById("test") val id = dd.button.id assertEquals( - "<div class=\"dropdown\"><button class=\"dropdown btn btn-default\" id=\"$id\" type=\"button\" data-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\"><span class=\"glyphicon glyphicon-flag\"></span> Dropdown</button><ul class=\"dropdown-menu\" aria-labelledby=\"$id\"><li><a href=\"#!/x\">abc</a></li><li><a href=\"#!/y\">def</a></li></ul></div>", + "<div class=\"dropdown open\"><button class=\"dropdown btn btn-default\" id=\"$id\" type=\"button\" data-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\"><span class=\"glyphicon glyphicon-flag\"></span> Dropdown</button><ul class=\"dropdown-menu\" aria-labelledby=\"$id\" aria-expanded=\"true\"><li><a href=\"#!/x\">abc</a></li><li><a href=\"#!/y\">def</a></li></ul></div>", element?.innerHTML, "Should render correct drop down" ) @@ -38,7 +38,7 @@ class DropDownSpec : DomSpec { val element = document.getElementById("test") val id = dd.button.id assertEquals( - "<div class=\"dropup\"><button class=\"dropdown btn btn-default\" id=\"$id\" type=\"button\" data-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\"><span class=\"glyphicon glyphicon-flag\"></span> Dropdown</button><ul class=\"dropdown-menu\" aria-labelledby=\"$id\"><li><a href=\"#!/x\">abc</a></li><li><a href=\"#!/y\">def</a></li></ul></div>", + "<div class=\"dropup open\"><button class=\"dropdown btn btn-default\" id=\"$id\" type=\"button\" data-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\"><span class=\"glyphicon glyphicon-flag\"></span> Dropdown</button><ul class=\"dropdown-menu\" aria-labelledby=\"$id\" aria-expanded=\"true\"><li><a href=\"#!/x\">abc</a></li><li><a href=\"#!/y\">def</a></li></ul></div>", element?.innerHTML, "Should render correct drop down" ) @@ -55,7 +55,7 @@ class DropDownSpec : DomSpec { val element = document.getElementById("test") val id = dd.button.id assertEquals( - "<div class=\"dropdown\"><button class=\"dropdown btn btn-default\" id=\"$id\" type=\"button\" data-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\"><span class=\"glyphicon glyphicon-flag\"></span> Dropdown</button><ul class=\"dropdown-menu\" aria-labelledby=\"$id\"><li class=\"dropdown-header\">abc</li></ul></div>", + "<div class=\"dropdown open\"><button class=\"dropdown btn btn-default\" id=\"$id\" type=\"button\" data-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\"><span class=\"glyphicon glyphicon-flag\"></span> Dropdown</button><ul class=\"dropdown-menu\" aria-labelledby=\"$id\" aria-expanded=\"true\"><li class=\"dropdown-header\">abc</li></ul></div>", element?.innerHTML, "Should render correct drop down" ) @@ -72,7 +72,7 @@ class DropDownSpec : DomSpec { val element = document.getElementById("test") val id = dd.button.id assertEquals( - "<div class=\"dropdown\"><button class=\"dropdown btn btn-default\" id=\"$id\" type=\"button\" data-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\"><span class=\"glyphicon glyphicon-flag\"></span> Dropdown</button><ul class=\"dropdown-menu\" aria-labelledby=\"$id\"><li class=\"divider\" role=\"separator\">abc</li></ul></div>", + "<div class=\"dropdown open\"><button class=\"dropdown btn btn-default\" id=\"$id\" type=\"button\" data-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\"><span class=\"glyphicon glyphicon-flag\"></span> Dropdown</button><ul class=\"dropdown-menu\" aria-labelledby=\"$id\" aria-expanded=\"true\"><li class=\"divider\" role=\"separator\">abc</li></ul></div>", element?.innerHTML, "Should render correct drop down" ) @@ -89,7 +89,7 @@ class DropDownSpec : DomSpec { val element = document.getElementById("test") val id = dd.button.id assertEquals( - "<div class=\"dropdown\"><button class=\"dropdown btn btn-default\" id=\"$id\" type=\"button\" data-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\"><span class=\"glyphicon glyphicon-flag\"></span> Dropdown</button><ul class=\"dropdown-menu\" aria-labelledby=\"$id\"><li class=\"disabled\"><a href=\"#\">abc</a></li></ul></div>", + "<div class=\"dropdown open\"><button class=\"dropdown btn btn-default\" id=\"$id\" type=\"button\" data-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\"><span class=\"glyphicon glyphicon-flag\"></span> Dropdown</button><ul class=\"dropdown-menu\" aria-labelledby=\"$id\" aria-expanded=\"true\"><li class=\"disabled\"><a href=\"#\">abc</a></li></ul></div>", element?.innerHTML, "Should render correct drop down" ) @@ -102,11 +102,11 @@ class DropDownSpec : DomSpec { val root = Root("test") val dd = DropDown("Dropdown", listOf("abc" to "#!/x", "def" to "#!/y"), "flag") root.add(dd) - val menu = dd.list.getElementJQuery() - assertTrue("Dropdown menu is not rendered before toggle") { menu == null } + val visible = dd.getElementJQuery()?.hasClass("open") ?: false + assertTrue("Dropdown menu is not visible before toggle") { !visible } dd.toggle() - val menu2 = dd.list.getElementJQuery() - assertTrue("Dropdown menu is rendered after toggle") { menu2 != null } + val visible2 = dd.getElementJQuery()?.hasClass("open") ?: false + assertTrue("Dropdown menu is visible after toggle") { visible2 } } } }
\ No newline at end of file |