Allow constructing Root containers from HTMLElement objects.

64 files changed, 102 insertions, 82 deletions

diff --git a/src/main/kotlin/pl/treksoft/kvision/KVManager.kt b/src/main/kotlin/pl/treksoft/kvision/KVManager.kt
index faa0b77c..d1a4a8be 100644
--- a/src/main/kotlin/pl/treksoft/kvision/KVManager.kt
+++ b/src/main/kotlin/pl/treksoft/kvision/KVManager.kt
@@ -29,6 +29,7 @@ import com.github.snabbdom.datasetModule
 import com.github.snabbdom.eventListenersModule
 import com.github.snabbdom.propsModule
 import com.github.snabbdom.styleModule
+import org.w3c.dom.HTMLElement
 import pl.treksoft.kvision.core.Component
 import pl.treksoft.kvision.utils.isIE11
 import kotlin.browser.document
@@ -72,6 +73,10 @@ internal object KVManager {
         return sdPatch(container, vnode)
     }
 
+    internal fun patch(element: HTMLElement, vnode: VNode): VNode {
+        return sdPatch(element, vnode)
+    }
+
     internal fun patch(oldVNode: VNode, newVNode: VNode): VNode {
         return sdPatch(oldVNode, newVNode)
     }
diff --git a/src/main/kotlin/pl/treksoft/kvision/panel/Root.kt b/src/main/kotlin/pl/treksoft/kvision/panel/Root.kt
index c17ea1a4..dd3d39b6 100644
--- a/src/main/kotlin/pl/treksoft/kvision/panel/Root.kt
+++ b/src/main/kotlin/pl/treksoft/kvision/panel/Root.kt
@@ -23,6 +23,7 @@ package pl.treksoft.kvision.panel
 
 import com.github.snabbdom.VNode
 import com.github.snabbdom.h
+import org.w3c.dom.HTMLElement
 import pl.treksoft.kvision.KVManager
 import pl.treksoft.kvision.core.StringBoolPair
 import pl.treksoft.kvision.core.Style
@@ -45,7 +46,12 @@ import pl.treksoft.kvision.utils.snOpt
  * @param init an initializer extension function
  */
 @Suppress("TooManyFunctions")
-class Root(id: String, private val fixed: Boolean = false, init: (Root.() -> Unit)? = null) : SimplePanel() {
+class Root(
+    id: String? = null,
+    element: HTMLElement? = null,
+    private val fixed: Boolean = false,
+    init: (Root.() -> Unit)? = null
+) : SimplePanel() {
     private val contextMenus: MutableList<ContextMenu> = mutableListOf()
     private var rootVnode: VNode = renderVNode()
 
@@ -54,8 +60,15 @@ class Root(id: String, private val fixed: Boolean = false, init: (Root.() -> Uni
     val isFirstRoot = roots.isEmpty()
 
     init {
-        rootVnode = KVManager.patch(id, this.renderVNode())
-        this.id = id
+        if (id != null) {
+            rootVnode = KVManager.patch(id, this.renderVNode())
+            this.id = id
+        } else if (element != null) {
+            rootVnode = KVManager.patch(element, this.renderVNode())
+            this.id = "kv_root_${counter++}"
+        } else {
+            throw IllegalArgumentException("No root element specified!")
+        }
         roots.add(this)
         if (isFirstRoot) {
             Style.styles.forEach { it.parent = this }
@@ -144,6 +157,8 @@ class Root(id: String, private val fixed: Boolean = false, init: (Root.() -> Uni
     }
 
     companion object {
+        internal var counter = 0
+
         /**
          * @suppress internal function
          */
diff --git a/src/test/kotlin/test/pl/treksoft/kvision/TestUtil.kt b/src/test/kotlin/test/pl/treksoft/kvision/TestUtil.kt
index 37d7a9df..13c8531b 100644
--- a/src/test/kotlin/test/pl/treksoft/kvision/TestUtil.kt
+++ b/src/test/kotlin/test/pl/treksoft/kvision/TestUtil.kt
@@ -86,7 +86,7 @@ interface WSpec : DomSpec {
 
     fun runW(code: (widget: Widget, element: Element?) -> Unit) {
         run {
-            val root = Root("test", true)
+            val root = Root("test", fixed = true)
             val widget = Widget()
             widget.id = "test_id"
             root.add(widget)
diff --git a/src/test/kotlin/test/pl/treksoft/kvision/core/ContainerSpec.kt b/src/test/kotlin/test/pl/treksoft/kvision/core/ContainerSpec.kt
index 3e16fff8..960a18b6 100644
--- a/src/test/kotlin/test/pl/treksoft/kvision/core/ContainerSpec.kt
+++ b/src/test/kotlin/test/pl/treksoft/kvision/core/ContainerSpec.kt
@@ -34,7 +34,7 @@ class ContainerSpec : DomSpec {
     @Test
     fun add() {
         run {
-            val root = Root("test", true)
+            val root = Root("test", fixed = true)
             val container = SimplePanel()
             val child1 = Widget()
             child1.id = "child1"
@@ -52,7 +52,7 @@ class ContainerSpec : DomSpec {
     @Test
     fun addAll() {
         run {
-            val root = Root("test", true)
+            val root = Root("test", fixed = true)
             val container = SimplePanel()
             val child1 = Widget()
             child1.id = "child1"
@@ -69,7 +69,7 @@ class ContainerSpec : DomSpec {
     @Test
     fun remove() {
         run {
-            val root = Root("test", true)
+            val root = Root("test", fixed = true)
             val container = SimplePanel()
             val child1 = Widget()
             child1.id = "child1"
@@ -88,7 +88,7 @@ class ContainerSpec : DomSpec {
     @Test
     fun removeAll() {
         run {
-            val root = Root("test", true)
+            val root = Root("test", fixed = true)
             val container = SimplePanel()
             val child1 = Widget()
             child1.id = "child1"
@@ -107,7 +107,7 @@ class ContainerSpec : DomSpec {
     @Test
     fun getChildren() {
         run {
-            val root = Root("test", true)
+            val root = Root("test", fixed = true)
             val container = SimplePanel()
             val child1 = Widget()
             child1.id = "child1"
diff --git a/src/test/kotlin/test/pl/treksoft/kvision/core/StyleSpec.kt b/src/test/kotlin/test/pl/treksoft/kvision/core/StyleSpec.kt
index bdb93744..4fbe3d59 100644
--- a/src/test/kotlin/test/pl/treksoft/kvision/core/StyleSpec.kt
+++ b/src/test/kotlin/test/pl/treksoft/kvision/core/StyleSpec.kt
@@ -37,7 +37,7 @@ class StyleSpec : DomSpec {
     @Test
     fun render() {
         run {
-            Root("test", true) {
+            Root("test", fixed = true) {
                 widget {
                     style {
                         margin = 2.px
@@ -58,7 +58,7 @@ class StyleSpec : DomSpec {
     @Test
     fun renderCustomClass() {
         run {
-            Root("test", true) {
+            Root("test", fixed = true) {
                 widget {
                     style("customclass") {
                         margin = 2.px
@@ -79,7 +79,7 @@ class StyleSpec : DomSpec {
     @Test
     fun renderSubclass() {
         run {
-            Root("test", true) {
+            Root("test", fixed = true) {
                 widget {
                     style("customclass") {
                         margin = 2.px
diff --git a/src/test/kotlin/test/pl/treksoft/kvision/core/WidgetSpec.kt b/src/test/kotlin/test/pl/treksoft/kvision/core/WidgetSpec.kt
index fc1cc761..6b9be23d 100644
--- a/src/test/kotlin/test/pl/treksoft/kvision/core/WidgetSpec.kt
+++ b/src/test/kotlin/test/pl/treksoft/kvision/core/WidgetSpec.kt
@@ -130,7 +130,7 @@ class WidgetSpec : WSpec {
     @Test
     fun getRoot() {
         run {
-            val root = Root("test", true)
+            val root = Root("test", fixed = true)
             val widget = Widget()
             root.add(widget)
             val r = widget.getRoot()
diff --git a/src/test/kotlin/test/pl/treksoft/kvision/core/WidgetWrapperSpec.kt b/src/test/kotlin/test/pl/treksoft/kvision/core/WidgetWrapperSpec.kt
index aac92c50..0c28c327 100644
--- a/src/test/kotlin/test/pl/treksoft/kvision/core/WidgetWrapperSpec.kt
+++ b/src/test/kotlin/test/pl/treksoft/kvision/core/WidgetWrapperSpec.kt
@@ -35,7 +35,7 @@ class WidgetWrapperSpec : DomSpec {
     @Test
     fun render() {
         run {
-            val root = Root("test", true)
+            val root = Root("test", fixed = true)
             val widget = Widget()
             val wrapper = WidgetWrapper(widget)
             wrapper.width = 100 to UNIT.em
diff --git a/src/test/kotlin/test/pl/treksoft/kvision/dropdown/ContextMenuSpec.kt b/src/test/kotlin/test/pl/treksoft/kvision/dropdown/ContextMenuSpec.kt
index 7d320e2e..35172267 100644
--- a/src/test/kotlin/test/pl/treksoft/kvision/dropdown/ContextMenuSpec.kt
+++ b/src/test/kotlin/test/pl/treksoft/kvision/dropdown/ContextMenuSpec.kt
@@ -34,7 +34,7 @@ class ContextMenuSpec : DomSpec {
     @Test
     fun render() {
         run {
-            val root = Root("test", true)
+            val root = Root("test", fixed = true)
             val m = ContextMenu {
                 link("a", "b")
                 link("c", "d")
@@ -54,7 +54,7 @@ class ContextMenuSpec : DomSpec {
     @Test
     fun positionMenu() {
         run {
-            val root = Root("test", true)
+            val root = Root("test", fixed = true)
             val m = ContextMenu {
                 link("a", "b")
                 link("c", "d")
diff --git a/src/test/kotlin/test/pl/treksoft/kvision/dropdown/HeaderSpec.kt b/src/test/kotlin/test/pl/treksoft/kvision/dropdown/HeaderSpec.kt
index 5a9a050c..e75baf9e 100644
--- a/src/test/kotlin/test/pl/treksoft/kvision/dropdown/HeaderSpec.kt
+++ b/src/test/kotlin/test/pl/treksoft/kvision/dropdown/HeaderSpec.kt
@@ -32,7 +32,7 @@ class HeaderSpec : DomSpec {
     @Test
     fun render() {
         run {
-            val root = Root("test", true)
+            val root = Root("test", fixed = true)
             val h = Header("Test")
             root.add(h)
             val element = document.getElementById("test")
diff --git a/src/test/kotlin/test/pl/treksoft/kvision/dropdown/SeparatorSpec.kt b/src/test/kotlin/test/pl/treksoft/kvision/dropdown/SeparatorSpec.kt
index 2f2d22bf..86607ec7 100644
--- a/src/test/kotlin/test/pl/treksoft/kvision/dropdown/SeparatorSpec.kt
+++ b/src/test/kotlin/test/pl/treksoft/kvision/dropdown/SeparatorSpec.kt
@@ -32,7 +32,7 @@ class SeparatorSpec : DomSpec {
     @Test
     fun render() {
         run {
-            val root = Root("test", true)
+            val root = Root("test", fixed = true)
             val s = Separator()
             root.add(s)
             val element = document.getElementById("test")
diff --git a/src/test/kotlin/test/pl/treksoft/kvision/form/FieldLabelSpec.kt b/src/test/kotlin/test/pl/treksoft/kvision/form/FieldLabelSpec.kt
index d13bc920..5319d4bc 100644
--- a/src/test/kotlin/test/pl/treksoft/kvision/form/FieldLabelSpec.kt
+++ b/src/test/kotlin/test/pl/treksoft/kvision/form/FieldLabelSpec.kt
@@ -32,7 +32,7 @@ class FieldLabelSpec : DomSpec {
     @Test
     fun render() {
         run {
-            val root = Root("test", true)
+            val root = Root("test", fixed = true)
             val fl = FieldLabel("input", "Label")
             root.add(fl)
             val element = document.getElementById("test")
diff --git a/src/test/kotlin/test/pl/treksoft/kvision/form/HelpBlockSpec.kt b/src/test/kotlin/test/pl/treksoft/kvision/form/HelpBlockSpec.kt
index c7d0b0da..c7c4ede5 100644
--- a/src/test/kotlin/test/pl/treksoft/kvision/form/HelpBlockSpec.kt
+++ b/src/test/kotlin/test/pl/treksoft/kvision/form/HelpBlockSpec.kt
@@ -32,7 +32,7 @@ class HelpBlockSpec : DomSpec {
     @Test
     fun render() {
         run {
-            val root = Root("test", true)
+            val root = Root("test", fixed = true)
             val fl = HelpBlock("Form Error")
             root.add(fl)
             val element = document.getElementById("test")
diff --git a/src/test/kotlin/test/pl/treksoft/kvision/form/check/CheckBoxInputSpec.kt b/src/test/kotlin/test/pl/treksoft/kvision/form/check/CheckBoxInputSpec.kt
index 8a9f86d5..677a2b8e 100644
--- a/src/test/kotlin/test/pl/treksoft/kvision/form/check/CheckBoxInputSpec.kt
+++ b/src/test/kotlin/test/pl/treksoft/kvision/form/check/CheckBoxInputSpec.kt
@@ -32,7 +32,7 @@ class CheckBoxInputSpec : DomSpec {
     @Test
     fun render() {
         run {
-            val root = Root("test", true)
+            val root = Root("test", fixed = true)
             val ci = CheckBoxInput(value = true).apply {
                 name = "name"
                 id = "idti"
diff --git a/src/test/kotlin/test/pl/treksoft/kvision/form/check/CheckBoxSpec.kt b/src/test/kotlin/test/pl/treksoft/kvision/form/check/CheckBoxSpec.kt
index 9a178abb..16da0c70 100644
--- a/src/test/kotlin/test/pl/treksoft/kvision/form/check/CheckBoxSpec.kt
+++ b/src/test/kotlin/test/pl/treksoft/kvision/form/check/CheckBoxSpec.kt
@@ -33,7 +33,7 @@ class CheckBoxSpec : DomSpec {
     @Test
     fun render() {
         run {
-            val root = Root("test", true)
+            val root = Root("test", fixed = true)
             val ci = CheckBox(value = true, label = "Label").apply {
                 name = "name"
                 style = CheckBoxStyle.DANGER
diff --git a/src/test/kotlin/test/pl/treksoft/kvision/form/check/RadioGroupInputSpec.kt b/src/test/kotlin/test/pl/treksoft/kvision/form/check/RadioGroupInputSpec.kt
index f74a76f7..55788c84 100644
--- a/src/test/kotlin/test/pl/treksoft/kvision/form/check/RadioGroupInputSpec.kt
+++ b/src/test/kotlin/test/pl/treksoft/kvision/form/check/RadioGroupInputSpec.kt
@@ -33,7 +33,7 @@ class RadioGroupInputSpec : DomSpec {
     @Test
     fun render() {
         run {
-            val root = Root("test", true)
+            val root = Root("test", fixed = true)
             val ci = RadioGroupInput(options = listOf("a" to "A", "b" to "B"), value = "a").apply {
                 disabled = true
                 inline = true
diff --git a/src/test/kotlin/test/pl/treksoft/kvision/form/check/RadioGroupSpec.kt b/src/test/kotlin/test/pl/treksoft/kvision/form/check/RadioGroupSpec.kt
index e55e9913..2ed52b67 100644
--- a/src/test/kotlin/test/pl/treksoft/kvision/form/check/RadioGroupSpec.kt
+++ b/src/test/kotlin/test/pl/treksoft/kvision/form/check/RadioGroupSpec.kt
@@ -33,7 +33,7 @@ class RadioGroupSpec : DomSpec {
     @Test
     fun render() {
         run {
-            val root = Root("test", true)
+            val root = Root("test", fixed = true)
             val ci = RadioGroup(options = listOf("a" to "A", "b" to "B"), value = "a", label = "Label").apply {
                 disabled = true
                 inline = true
diff --git a/src/test/kotlin/test/pl/treksoft/kvision/form/check/RadioInputSpec.kt b/src/test/kotlin/test/pl/treksoft/kvision/form/check/RadioInputSpec.kt
index 55d4108a..5b4fe836 100644
--- a/src/test/kotlin/test/pl/treksoft/kvision/form/check/RadioInputSpec.kt
+++ b/src/test/kotlin/test/pl/treksoft/kvision/form/check/RadioInputSpec.kt
@@ -32,7 +32,7 @@ class RadioInputSpec : DomSpec {
     @Test
     fun render() {
         run {
-            val root = Root("test", true)
+            val root = Root("test", fixed = true)
             val ci = RadioInput(value = true).apply {
                 name = "name"
                 id = "idti"
diff --git a/src/test/kotlin/test/pl/treksoft/kvision/form/check/RadioSpec.kt b/src/test/kotlin/test/pl/treksoft/kvision/form/check/RadioSpec.kt
index 09763cc7..a8fbbcc5 100644
--- a/src/test/kotlin/test/pl/treksoft/kvision/form/check/RadioSpec.kt
+++ b/src/test/kotlin/test/pl/treksoft/kvision/form/check/RadioSpec.kt
@@ -33,7 +33,7 @@ class RadioSpec : DomSpec {
     @Test
     fun render() {
         run {
-            val root = Root("test", true)
+            val root = Root("test", fixed = true)
             val ci = Radio(value = true, label = "Label", extraValue = "abc").apply {
                 name = "name"
                 style = RadioStyle.DANGER
diff --git a/src/test/kotlin/test/pl/treksoft/kvision/form/text/PasswordSpec.kt b/src/test/kotlin/test/pl/treksoft/kvision/form/text/PasswordSpec.kt
index dc46782b..5d6c2738 100644
--- a/src/test/kotlin/test/pl/treksoft/kvision/form/text/PasswordSpec.kt
+++ b/