diff options
Diffstat (limited to 'src/main/kotlin/pl/treksoft/kvision')
25 files changed, 446 insertions, 189 deletions
diff --git a/src/main/kotlin/pl/treksoft/kvision/Showcase.kt b/src/main/kotlin/pl/treksoft/kvision/Showcase.kt index f1406505..282ea510 100644 --- a/src/main/kotlin/pl/treksoft/kvision/Showcase.kt +++ b/src/main/kotlin/pl/treksoft/kvision/Showcase.kt @@ -1,10 +1,27 @@ package pl.treksoft.kvision +import com.lightningkite.kotlin.observable.list.observableListOf import pl.treksoft.kvision.basic.Label -import pl.treksoft.kvision.core.* +import pl.treksoft.kvision.core.BGATTACH +import pl.treksoft.kvision.core.BGREPEAT +import pl.treksoft.kvision.core.BGSIZE +import pl.treksoft.kvision.core.BORDERSTYLE +import pl.treksoft.kvision.core.Background +import pl.treksoft.kvision.core.Border +import pl.treksoft.kvision.core.COLOR +import pl.treksoft.kvision.core.Img +import pl.treksoft.kvision.core.Root +import pl.treksoft.kvision.data.DataComponent +import pl.treksoft.kvision.data.DataContainer import pl.treksoft.kvision.dropdown.DD.* import pl.treksoft.kvision.dropdown.DropDown -import pl.treksoft.kvision.form.* +import pl.treksoft.kvision.form.CheckBox +import pl.treksoft.kvision.form.INPUTSIZE +import pl.treksoft.kvision.form.TEXTINPUTTYPE +import pl.treksoft.kvision.form.Text +import pl.treksoft.kvision.form.TextArea +import pl.treksoft.kvision.form.TextAreaInput +import pl.treksoft.kvision.form.TextInput import pl.treksoft.kvision.html.* import pl.treksoft.kvision.html.TAG.DIV import pl.treksoft.kvision.html.TAG.H1 @@ -21,7 +38,51 @@ class Showcase : ApplicationBase() { override fun start(state: Map<String, Any>) { val root = Root("showcase") - val container = Container(setOf("abc", "def")) + class Model(p: Boolean, t: String) : DataComponent() { + var p: Boolean by obs(p) + var t: String by obs(t) + } + + val model = observableListOf(Model(true, "Pierwszy"), Model(false, "Drugi"), Model(false, "Trzeci")) + val datac = DataContainer(model, { element, index -> + CheckBox(value = element.p, + label = if (element.p) "<b>" + (index + 1) + " " + element.t + "</b>" else element.t, + rich = true).setEventListener<CheckBox>({ + click = { + element.p = self.value + } + }) + }) + root.add(datac) + + val mbutton = Button("Pokaż wartości").setEventListener<Button> { + click = { + println(model.collection) + } + dblclick = { + model.add(Model(true, "XXX")) + } + } + root.add(mbutton) + val mbutton2 = Button("Zaznacz").setEventListener<Button> { + click = { + model.forEach { it.p = true } + } + dblclick = { + model.forEach { it.p = false } + } + } + root.add(mbutton2) + val textField = TextInput(placeholder = "Wprowadź hasło ...", value = "abc") + val mbutton3 = Button("Ukryj/Pokaż").setEventListener<Button> { + click = { + if (datac.visible) datac.hide() else datac.show() + if (textField.visible) textField.hide() else textField.show() + } + } + root.add(mbutton3) + + val container = SimplePanel(setOf("abc", "def")) val h1 = Tag(H1, "To jest <i>test pisania</i> tekstu", false, null, classes = setOf("test", "test2")) container.add(h1) val label = Label("KVLabel1") @@ -36,7 +97,6 @@ class Showcase : ApplicationBase() { link.add(Tag(TAG.P, "Cośtam")) root.add(link) - val textField = TextInput(placeholder = "Wprowadź hasło ...", value = "abc") root.add(textField) textField.setEventListener<TextInput> { input = { e -> @@ -54,7 +114,7 @@ class Showcase : ApplicationBase() { textField2.size = INPUTSIZE.LARGE root.add(textField2) - val checkbox = CheckBox(true, label = "Kliknij aby <b>przetestować</b>", rich = true, circled = true, +/* val checkbox = CheckBox(true, label = "Kliknij aby <b>przetestować</b>", rich = true, circled = true, style = CHECKBOXSTYLE.DANGER) root.add(checkbox) checkbox.setEventListener<CheckBox> { @@ -62,9 +122,9 @@ class Showcase : ApplicationBase() { println("click" + self.value) } change = { e -> println("change" + self.value) } - } + }*/ - val radio = Radio(true, name = "radios", label = "Opcja 1", inline = true, +/* val radio = Radio(true, name = "radios", label = "Opcja 1", inline = true, style = RADIOSTYLE.DANGER, extraValue = "o1") val radio2 = Radio(false, name = "radios", label = "Opcja 2", rich = true, inline = true, style = RADIOSTYLE.WARNING, extraValue = "o2") @@ -78,7 +138,7 @@ class Showcase : ApplicationBase() { println("rclick" + self.value) } change = { e -> println("rchange" + self.value) } - } + }*/ val text = Text(placeholder = "Pole formularza", maxlength = 5, label = "To jest pole") root.add(text) @@ -258,9 +318,10 @@ class Showcase : ApplicationBase() { val button = Button("To jest przycisk FA", "fa-flag", BUTTONSTYLE.DANGER) button.setEventListener<Button> { click = { _ -> + println(model.collection) println(self.text) println(textField.value) - println(checkbox.value) +// println(checkbox.value) textField2.disabled = false grid4.colorHex = 0xff0000 dd3.text = "Zmiana" @@ -340,7 +401,7 @@ class Showcase : ApplicationBase() { props = snProps("href" to "/foo", "target" to "_blank") }, "I\'ll take you places!") )) - val v = patch(container, vnode) + val v = patch(child, vnode) val vnode2 = virtualize("<a href='/top' target='_top'>Test2</a>") patch(v, vnode2)*/ } diff --git a/src/main/kotlin/pl/treksoft/kvision/core/Container.kt b/src/main/kotlin/pl/treksoft/kvision/core/Container.kt index df854637..4621a050 100644 --- a/src/main/kotlin/pl/treksoft/kvision/core/Container.kt +++ b/src/main/kotlin/pl/treksoft/kvision/core/Container.kt @@ -2,56 +2,13 @@ package pl.treksoft.kvision.core import com.github.snabbdom.VNode -open class Container(classes: Set<String> = setOf()) : Widget(classes) { - internal val children: MutableList<Widget> = mutableListOf() - - override fun render(): VNode { - return kvh("div", childrenVNodes()) - } - - protected open fun childrenVNodes(): Array<VNode> { - return children.filter { it.visible }.map { it.renderVNode() }.toTypedArray() - } - - protected fun addInternal(child: Widget): Container { - children.add(child) - child.parent = this - refresh() - return this - } - - open fun add(child: Widget): Container { - return addInternal(child) - } - - open fun addAll(children: List<Widget>): Container { - this.children.addAll(children) - children.map { it.parent = this } - refresh() - return this - } - - open fun remove(child: Widget): Container { - if (children.remove(child)) { - child.clearParent() - refresh() - } - return this - } - - open fun removeAll(): Container { - children.map { it.clearParent() } - children.clear() - refresh() - return this - } - - open fun getChildren(): List<Widget> { - return ArrayList(children) - } - - override fun dispose() { - children.forEach { it.dispose() } - removeAll() - } +interface Container { + var parent: Widget? + var visible: Boolean + fun renderVNode(): VNode + fun add(child: Widget): Container + fun addAll(children: List<Widget>): Container + fun remove(child: Widget): Container + fun removeAll(): Container + fun getChildren(): List<Widget> } diff --git a/src/main/kotlin/pl/treksoft/kvision/core/Root.kt b/src/main/kotlin/pl/treksoft/kvision/core/Root.kt index 0c8a80f6..9d968874 100644 --- a/src/main/kotlin/pl/treksoft/kvision/core/Root.kt +++ b/src/main/kotlin/pl/treksoft/kvision/core/Root.kt @@ -2,12 +2,15 @@ package pl.treksoft.kvision.core import com.github.snabbdom.VNode import pl.treksoft.kvision.modal.Modal +import pl.treksoft.kvision.panel.SimplePanel import pl.treksoft.kvision.snabbdom.StringBoolPair -class Root(id: String, private val fixed: Boolean = false) : Container() { +class Root(id: String, private val fixed: Boolean = false) : SimplePanel() { private val modals: MutableList<Modal> = mutableListOf() private var rootVnode: VNode = renderVNode() + internal var renderDisabled = false + init { rootVnode = KVManager.patch(id, this.renderVNode()) this.id = id @@ -34,7 +37,9 @@ class Root(id: String, private val fixed: Boolean = false) : Container() { } internal fun reRender(): Root { - rootVnode = KVManager.patch(rootVnode, renderVNode()) + if (!renderDisabled) { + rootVnode = KVManager.patch(rootVnode, renderVNode()) + } return this } diff --git a/src/main/kotlin/pl/treksoft/kvision/core/Widget.kt b/src/main/kotlin/pl/treksoft/kvision/core/Widget.kt index d56e7614..6ce1eade 100644 --- a/src/main/kotlin/pl/treksoft/kvision/core/Widget.kt +++ b/src/main/kotlin/pl/treksoft/kvision/core/Widget.kt @@ -17,11 +17,12 @@ import pl.treksoft.kvision.snabbdom.snClasses import pl.treksoft.kvision.snabbdom.snOpt import pl.treksoft.kvision.snabbdom.snStyle -@Suppress("TooManyFunctions") +@Suppress("TooManyFunctions", "LargeClass") open class Widget(classes: Set<String> = setOf()) : StyledComponent() { - val classes = classes.toMutableSet() - val listeners = mutableListOf<SnOn<Widget>.() -> Unit>() + internal val classes = classes.toMutableSet() + internal val internalListeners = mutableListOf<SnOn<Widget>.() -> Unit>() + internal val listeners = mutableListOf<SnOn<Widget>.() -> Unit>() var parent: Widget? = null internal set @@ -55,7 +56,15 @@ open class Widget(classes: Set<String> = setOf()) : StyledComponent() { private var snOnCache: com.github.snabbdom.On? = null private var snHooksCache: com.github.snabbdom.Hooks? = null - internal open fun renderVNode(): VNode { + protected fun <T> singleRender(block: () -> T): T { + getRoot()?.renderDisabled = true + val t = block() + getRoot()?.renderDisabled = false + getRoot()?.reRender() + return t + } + + open fun renderVNode(): VNode { return render() } @@ -132,9 +141,47 @@ open class Widget(classes: Set<String> = setOf()) : StyledComponent() { } protected open fun getSnOn(): com.github.snabbdom.On? { - return if (listeners.size > 0) { + return if (internalListeners.size > 0 || listeners.size > 0) { + val internalHandlers = on(this) + internalListeners.forEach { l -> (internalHandlers::apply)(l) } val handlers = on(this) listeners.forEach { l -> (handlers::apply)(l) } + if (internalHandlers.click != null) { + if (handlers.click == null) { + handlers.click = internalHandlers.click + } else { + val intc = internalHandlers.click + val c = handlers.click + handlers.click = { e -> + intc?.invoke(e) + c?.invoke(e) + } + } + } + if (internalHandlers.change != null) { + if (handlers.change == null) { + handlers.change = internalHandlers.change + } else { + val intc = internalHandlers.change + val c = handlers.change + handlers.change = { e -> + intc?.invoke(e) + c?.invoke(e) + } + } + } + if (internalHandlers.input != null) { + if (handlers.input == null) { + handlers.input = internalHandlers.input + } else { + val intc = internalHandlers.input + val c = handlers.input + handlers.input = { e -> + intc?.invoke(e) + c?.invoke(e) + } + } + } handlers } else { null @@ -144,13 +191,21 @@ open class Widget(classes: Set<String> = setOf()) : StyledComponent() { protected open fun getSnHooks(): com.github.snabbdom.Hooks? { val hooks = hooks() hooks.apply { + create = { _, v -> + vnode = v + afterCreate(v) + } insert = { v -> vnode = v afterInsert(v) } postpatch = { ov, v -> vnode = v - if (ov.elm !== v.elm) afterInsert(v) + if (ov.elm !== v.elm) { + afterInsert(v) + } else { + afterPostpatch(v) + } } destroy = { _ -> vnode = null @@ -160,6 +215,12 @@ open class Widget(classes: Set<String> = setOf()) : StyledComponent() { return hooks } + protected fun setInternalEventListener(block: SnOn<Widget>.() -> Unit): Widget { + internalListeners.add(block) + refresh() + return this + } + @Suppress("UNCHECKED_CAST") open fun <T : Widget> setEventListener(block: SnOn<T>.() -> Unit): Widget { listeners.add(block as SnOn<Widget>.() -> Unit) @@ -228,9 +289,15 @@ open class Widget(classes: Set<String> = setOf()) : StyledComponent() { return this } + protected open fun afterCreate(node: VNode) { + } + protected open fun afterInsert(node: VNode) { } + protected open fun afterPostpatch(node: VNode) { + } + protected open fun afterDestroy() { } diff --git a/src/main/kotlin/pl/treksoft/kvision/data/DataComponent.kt b/src/main/kotlin/pl/treksoft/kvision/data/DataComponent.kt new file mode 100644 index 00000000..605e1e2e --- /dev/null +++ b/src/main/kotlin/pl/treksoft/kvision/data/DataComponent.kt @@ -0,0 +1,15 @@ +package pl.treksoft.kvision.data + +import kotlin.properties.ObservableProperty +import kotlin.properties.ReadWriteProperty +import kotlin.reflect.KProperty + +open class DataComponent { + var container: DataUpdatable? = null + + fun <T> obs(initialValue: T): ReadWriteProperty<Any?, T> = object : ObservableProperty<T>(initialValue) { + override fun afterChange(property: KProperty<*>, oldValue: T, newValue: T) { + container?.update() + } + } +} diff --git a/src/main/kotlin/pl/treksoft/kvision/data/DataContainer.kt b/src/main/kotlin/pl/treksoft/kvision/data/DataContainer.kt new file mode 100644 index 00000000..3b6d3aa8 --- /dev/null +++ b/src/main/kotlin/pl/treksoft/kvision/data/DataContainer.kt @@ -0,0 +1,60 @@ +package pl.treksoft.kvision.data + +import com.github.snabbdom.VNode +import com.lightningkite.kotlin.observable.list.ObservableList +import pl.treksoft.kvision.core.Container +import pl.treksoft.kvision.core.Widget +import pl.treksoft.kvision.panel.VPanel + +class DataContainer<M : DataComponent, C : Widget>(val model: ObservableList<M>, + private val binding: (M, Int) -> C, + private val child: Container = VPanel()) : + Widget(setOf()), Container, DataUpdatable { + + override var visible + get() = child.visible + set(value) { + child.visible = value + } + + init { + child.parent = this + model.onUpdate += { _ -> + update() + } + update() + } + + override fun add(child: Widget): Container { + return this.child.add(child) + } + + override fun addAll(children: List<Widget>): Container { + return this.child.addAll(children) + } + + override fun remove(child: Widget): Container { + return this.child.remove(child) + } + + override fun removeAll(): Container { + return this.child.removeAll() + } + + override fun getChildren(): List<Widget> { + return this.child.getChildren() + } + + override fun renderVNode(): VNode { + return this.child.renderVNode() + } + + override fun update() { + model.forEach { it.container = this } + singleRender { + child.removeAll() + child.addAll(model.mapIndexed { index, m -> binding(m, index) }) + } + } + +} diff --git a/src/main/kotlin/pl/treksoft/kvision/data/DataUpdatable.kt b/src/main/kotlin/pl/treksoft/kvision/data/DataUpdatable.kt new file mode 100644 index 00000000..5f9b7563 --- /dev/null +++ b/src/main/kotlin/pl/treksoft/kvision/data/DataUpdatable.kt @@ -0,0 +1,5 @@ +package pl.treksoft.kvision.data + +interface DataUpdatable { + fun update() +} diff --git a/src/main/kotlin/pl/treksoft/kvision/dropdown/DropDown.kt b/src/main/kotlin/pl/treksoft/kvision/dropdown/DropDown.kt index 92f06591..1ba20211 100644 --- a/src/main/kotlin/pl/treksoft/kvision/dropdown/DropDown.kt +++ b/src/main/kotlin/pl/treksoft/kvision/dropdown/DropDown.kt @@ -1,7 +1,7 @@ package pl.treksoft.kvision.dropdown import com.github.snabbdom.VNode -import pl.treksoft.kvision.core.Container +import pl.treksoft.kvision.panel.SimplePanel import pl.treksoft.kvision.core.ResString import pl.treksoft.kvision.core.Widget import pl.treksoft.kvision.html.BUTTONSTYLE @@ -23,7 +23,7 @@ enum class DD(val type: String) { open class DropDown(text: String, elements: List<StringPair>? = null, icon: String? = null, style: BUTTONSTYLE = BUTTONSTYLE.DEFAULT, disabled: Boolean = false, image: ResString? = null, - dropup: Boolean = false, classes: Set<String> = setOf()) : Container(classes) { + dropup: Boolean = false, classes: Set<String> = setOf()) : SimplePanel(classes) { var text get() = button.text set(value) { @@ -93,12 +93,12 @@ open class DropDown(text: String, elements: List<StringPair>? = null, icon: Stri var counter = 0 } - override fun add(child: Widget): Container { + override fun add(child: Widget): SimplePanel { list.add(child) return this } - override fun addAll(children: List<Widget>): Container { + override fun addAll(children: List<Widget>): SimplePanel { list.addAll(children) return this } diff --git a/src/main/kotlin/pl/treksoft/kvision/form/AbstractText.kt b/src/main/kotlin/pl/treksoft/kvision/form/AbstractText.kt index 98619dbc..dfa4233b 100644 --- a/src/main/kotlin/pl/treksoft/kvision/form/AbstractText.kt +++ b/src/main/kotlin/pl/treksoft/kvision/form/AbstractText.kt @@ -1,11 +1,11 @@ package pl.treksoft.kvision.form -import pl.treksoft.kvision.core.Container +import pl.treksoft.kvision.panel.SimplePanel import pl.treksoft.kvision.core.Widget import pl.treksoft.kvision.snabbdom.SnOn abstract class AbstractText(label: String? = null, rich: Boolean = false) : - Container(setOf("form-group")), StringFormField { + SimplePanel(setOf("form-group")), StringFormField { override var value get() = input.value diff --git a/src/main/kotlin/pl/treksoft/kvision/form/AbstractTextInput.kt b/src/main/kotlin/pl/treksoft/kvision/form/AbstractTextInput.kt index 017e7fef..82846012 100644 --- a/src/main/kotlin/pl/treksoft/kvision/form/AbstractTextInput.kt +++ b/src/main/kotlin/pl/treksoft/kvision/form/AbstractTextInput.kt @@ -1,16 +1,25 @@ package pl.treksoft.kvision.form -import com.github.snabbdom.VNode import pl.treksoft.kvision.core.Widget import pl.treksoft.kvision.snabbdom.StringBoolPair import pl.treksoft.kvision.snabbdom.StringPair abstract class AbstractTextInput(placeholder: String? = null, - override var value: String? = null, name: String? = null, maxlength: Int? = null, - disabled: Boolean = false, id: String? = null, - classes: Set<String> = setOf()) : Widget(classes + "form-control"), StringFormField { + override var value: String? = null, name: String? = null, maxlength: Int? = null, + disabled: Boolean = false, id: String? = null, + classes: Set<String> = setOf()) : Widget(classes + "form-control"), StringFormField { init { this.id = id + this.setInternalEventListener { + input = { + val v = getElementJQuery()?.`val`() as String? + if (v != null && v.isNotEmpty()) { + value = v + } else { + value = null + } + } + } } @Suppress("LeakingThis") @@ -90,15 +99,4 @@ abstract class AbstractTextInput(placeholder: String? = null, } return sn } - - override fun afterInsert(node: VNode) { - this.getElementJQuery()?.on("input", { _, _ -> - val v = getElementJQuery()?.`val`() as String? - if (v != null && v.isNotEmpty()) { - value = v - } else { - value = null - } - }) - } } diff --git a/src/main/kotlin/pl/treksoft/kvision/form/CheckBox.kt b/src/main/kotlin/pl/treksoft/kvision/form/CheckBox.kt index 325c1982..65941495 100644 --- a/src/main/kotlin/pl/treksoft/kvision/form/CheckBox.kt +++ b/src/main/kotlin/pl/treksoft/kvision/form/CheckBox.kt @@ -1,6 +1,6 @@ package pl.treksoft.kvision.form -import pl.treksoft.kvision.core.Container +import pl.treksoft.kvision.panel.SimplePanel import pl.treksoft.kvision.core.Widget import pl.treksoft.kvision.snabbdom.SnOn import pl.treksoft.kvision.snabbdom.StringBoolPair @@ -16,7 +16,7 @@ enum class CHECKBOXSTYLE(val className: String) { open class CheckBox(value: Boolean = false, name: String? = null, style: CHECKBOXSTYLE? = null, circled: Boolean = false, inline: Boolean = false, disabled: Boolean = false, - label: String? = null, rich: Boolean = false) : Container(setOf("checkbox")), BoolFormField { + label: String? = null, rich: Boolean = false) : SimplePanel(setOf("checkbox")), BoolFormField { override var value get() = input.value diff --git a/src/main/kotlin/pl/treksoft/kvision/form/CheckInput.kt b/src/main/kotlin/pl/treksoft/kvision/form/CheckInput.kt index 131793b8..07008ddd 100644 --- a/src/main/kotlin/pl/treksoft/kvision/form/CheckInput.kt +++ b/src/main/kotlin/pl/treksoft/kvision/form/CheckInput.kt @@ -17,6 +17,16 @@ open class CheckInput(type: CHECKINPUTTYPE = CHECKINPUTTYPE.CHECKBOX, override v init { this.id = id + this.setInternalEventListener { + click = { + val v = getElementJQuery()?.prop("checked") as Boolean? + value = (v == true) + } + change = { + val v = getElementJQuery()?.prop("checked") as Boolean? + value = (v == true) + } + } } @Suppress("LeakingThis") @@ -83,15 +93,17 @@ open class CheckInput(type: CHECKINPUTTYPE = CHECKINPUTTYPE.CHECKBOX, override v } override fun afterInsert(node: VNode) { - this.getElementJQuery()?.on("change", { _, _ -> - val v = getElementJQuery()?.prop("checked") as Boolean? - value = (v == true) - true - }) - this.getElementJQuery()?.on("click", { _, _ -> - val v = getElementJQuery()?.prop("checked") as Boolean? - value = (v == true) - true - }) + refreshCheckedState() + } + + override fun afterPostpatch(node: VNode) { + refreshCheckedState() + } + + private fun refreshCheckedState() { + val v = getElementJQuery()?.prop("checked") as Boolean? + if (this.value != v) { + getElementJQuery()?.prop("checked", this.value) + } } } diff --git a/src/main/kotlin/pl/treksoft/kvision/form/Radio.kt b/src/main/kotlin/pl/treksoft/kvision/form/Radio.kt index eebbe65a..66c2d75c 100644 --- a/src/main/kotlin/pl/treksoft/kvision/form/Radio.kt +++ b/src/main/kotlin/pl/treksoft/kvision/form/Radio.kt @@ -1,6 +1,6 @@ package pl.treksoft.kvision.form -import pl.treksoft.kvision.core.Container +import pl.treksoft.kvision.panel.SimplePanel import pl.treksoft.kvision.core.Widget import pl.treksoft.kvision.snabbdom.SnOn import pl.treksoft.kvision.snabbdom.StringBoolPair @@ -16,7 +16,7 @@ enum class RADIOSTYLE(val className: String) { open class Radio(value: Boolean = false, extraValue: String? = null, name: String? = null, style: RADIOSTYLE? = null, squared: Boolean = false, inline: Boolean = false, disabled: Boolean = false, - label: String? = null, rich: Boolean = false) : Container(), BoolFormField { + label: String? = null, rich: Boolean = false) : SimplePanel(), BoolFormField { override var value get() = input.value diff --git a/src/main/kotlin/pl/treksoft/kvision/html/Link.kt b/src/main/kotlin/pl/treksoft/kvision/html/Link.kt index dc93d0e7..f103323b 100644 --- a/src/main/kotlin/pl/treksoft/kvision/html/Link.kt +++ b/src/main/kotlin/pl/treksoft/kvision/html/Link.kt @@ -1,12 +1,12 @@ package pl.treksoft.kvision.html import com.github.snabbdom.VNode -import pl.treksoft.kvision.core.Container +import pl.treksoft.kvision.panel.SimplePanel import pl.treksoft.kvision.core.ResString import pl.treksoft.kvision.snabbdom.StringPair open class Link(label: String, url: String, icon: String? = null, image: ResString? = null, - classes: Set<String> = setOf()) : Container(classes) { + classes: Set<String> = setOf()) : SimplePanel(classes) { private var label = label set(value) { field = value diff --git a/src/main/kotlin/pl/treksoft/kvision/html/List.kt b/src/main/kotlin/pl/treksoft/kvision/html/List.kt index 9bac3f41..40ebc50b 100644 --- a/src/main/kotlin/pl/treksoft/kvision/html/List.kt +++ b/src/main/kotlin/pl/treksoft/kvision/html/List.kt @@ -2,7 +2,7 @@ package pl.treksoft.kvision.html import com.github.snabbdom.VNode import com.github.snabbdom.h -import pl.treksoft.kvision.core.Container +import pl.treksoft.kvision.panel.SimplePanel import pl.treksoft.kvision.core.KVManager import pl.treksoft.kvision.snabbdom.StringBoolPair @@ -16,7 +16,7 @@ enum class LIST(val tagName: String) { } open class ListTag(type: LIST, elements: List<String>? = null, rich: Boolean = false, - classes: Set<String> = setOf()) : Container(classes) { + classes: Set<String> = setOf()) : SimplePanel(classes) { var type = type set(value) { field = value diff --git a/src/main/kotlin/pl/treksoft/kvision/html/Tag.kt b/src/main/kotlin/pl/treksoft/kvision/html/Tag.kt index 70725d97..71856627 100644 --- a/src/main/kotlin/pl/treksoft/kvision/html/Tag.kt +++ b/src/main/kotlin/pl/treksoft/kvision/html/Tag.kt @@ -1,7 +1,7 @@ package pl.treksoft.kvision.html import com.github.snabbdom.VNode -import pl.treksoft.kvision.core.Container +import pl.treksoft.kvision.panel.SimplePanel import pl.treksoft.kvision.core.KVManager import pl.treksoft.kvision.snabbdom.StringBoolPair @@ -50,7 +50,7 @@ enum class ALIGN(val className: String) { } open class Tag(type: TAG, text: String? = null, rich: Boolean = false, align: ALIGN? = null, - classes: Set<String> = setOf()) : Container(classes) { + classes: Set<String> = setOf()) : SimplePanel(classes) { var type = type set(value) { field = value diff --git a/src/main/kotlin/pl/treksoft/kvision/modal/Modal.kt b/src/main/kotlin/pl/treksoft/kvision/modal/Modal.kt index 94796326..a4e14d5c 100644 --- a/src/main/kotlin/pl/treksoft/kvision/modal/Modal.kt +++ b/src/main/kotlin/pl/treksoft/kvision/modal/Modal.kt @@ -1,7 +1,7 @@ package pl.treksoft.kvision.modal import com.github.snabbdom.VNode -import pl.treksoft.kvision.core.Container +import pl.treksoft.kvision.panel.SimplePanel import pl.treksoft.kvision.core.Root import pl.treksoft.kvision.core.Widget import pl.treksoft.kvision.helpers.CloseIcon @@ -20,7 +20,7 @@ enum class MODALSIZE(val className: String) { @Suppress("TooManyFunctions") open class Modal(caption: String? = null, closeButton: Boolean = true, size: MODALSIZE? = null, animation: Boolean = true, private val escape: Boolean = true, - classes: Set<String> = setOf()) : Container(classes) { + classes: Set<String> = setOf()) : SimplePanel(classes) { private var caption get() = captionTag.text set(value) { @@ -45,17 +45,17 @@ open class Modal(caption: String? = null, closeButton: Boolean = true, } private val dialog = ModalDialog(size) - private val header = Container(setOf("modal-header")) + private val header = SimplePanel(setOf("modal-header")) protected val closeIcon = CloseIcon() private val captionTag = Tag(TAG.H4, caption, classes = setOf("modal-title")) - protected val body = Container(setOf("modal-body")) - private val footer = Container(setOf("modal-footer")) + protected val body = SimplePanel(setOf("modal-body")) + private val footer = SimplePanel(setOf("modal-footer")) init { this.hide() this.role = "dialog" this.addInternal(dialog) - val content = Container(setOf("modal-content")) + val content = SimplePanel(setOf("modal-content")) dialog.role = "document" dialog.add(content) closeIcon.visible = closeButton @@ -87,12 +87,12 @@ open class Modal(caption: String? = null, closeButton: Boolean = true, } } - override fun add(child: Widget): Container { + override fun add(child: Widget): SimplePanel { body.add(child) return this } - override fun addAll(children: List<Widget>): Container { + override fun addAll(children: List<Widget>): SimplePanel { body.addAll(children) return this } @@ -171,7 +171,7 @@ open class Modal(caption: String? = null, closeButton: Boolean = true, } } -open class ModalDialog(size: MODALSIZE?) : Container(setOf("modal-dialog")) { +open class ModalDialog(size: MODALSIZE?) : SimplePanel(setOf("modal-dialog")) { var size = size set(value) { field = value diff --git a/src/main/kotlin/pl/treksoft/kvision/panel/DockPanel.kt b/src/main/kotlin/pl/treksoft/kvision/panel/DockPanel.kt index 6d86727c..6e037c28 100644 --- a/src/main/kotlin/pl/treksoft/kvision/panel/DockPanel.kt +++ b/src/main/kotlin/pl/treksoft/kvision/panel/DockPanel.kt @@ -1,6 +1,5 @@ package pl.treksoft.kvision.panel -import pl.treksoft.kvision.core.Container import pl.treksoft.kvision.core.Widget enum class SIDE { @@ -11,7 +10,7 @@ enum class SIDE { DOWN } -open class DockPanel(classes: Set<String> = setOf()) : Container(classes = classes) { +open class DockPanel(classes: Set<String> = setOf()) : SimplePanel(classes = classes) { protected var left: Widget? = null protected var center: Widget? = null protected var right: Widget? = null @@ -59,16 +58,16 @@ open class DockPanel(classes: Set<String> = setOf()) : Container(classes = class return this } - override fun add(child: Widget): Container { + override fun add(child: Widget): DockPanel { return this.add(child, SIDE.CENTER) } - override fun addAll(children: List<Widget>): Container { + override fun addAll(children: List<Widget>): DockPanel { children.forEach { this.add(it) } return this } - override fun remove(child: Widget): Container { + override fun remove(child: Widget): DockPanel { if (child == left) removeAt(SIDE.LEFT) if (child == center) removeAt(SIDE.CENTER) if (child == right) removeAt(SIDE.RIGHT) @@ -77,7 +76,7 @@ open class DockPanel(classes: Set<String> = setOf()) : Container(classes = class return this } - open fun removeAt(position: SIDE): Container { + open fun removeAt(position: SIDE): DockPanel { when (position) { SIDE.UP -> { up?.let { mainContainer.remove(it) } @@ -103,7 +102,7 @@ open class DockPanel(classes: Set<String> = setOf()) : Container(classes = class return this } - override fun removeAll(): Container { + override fun removeAll(): DockPanel { removeAt(SIDE.LEFT) removeAt(SIDE.CENTER) removeAt(SIDE.RIGHT) diff --git a/src/main/kotlin/pl/treksoft/kvision/panel/FlexPanel.kt b/src/main/kotlin/pl/treksoft/kvision/panel/FlexPanel.kt index 10483a8d..6b6e11fb 100644 --- a/src/main/kotlin/pl/treksoft/kvision/panel/FlexPanel.kt +++ b/src/main/kotlin/pl/treksoft/kvision/panel/FlexPanel.kt @@ -1,6 +1,5 @@ package pl.treksoft.kvision.panel -import pl.treksoft.kvision.core.Container import pl.treksoft.kvision.core.Widget import pl.treksoft.kvision.core.WidgetWrapper import pl.treksoft.kvision.snabbdom.StringPair @@ -46,7 +45,7 @@ enum class FLEXALIGNCONTENT(val alignContent: String) { open class FlexPanel(direction: FLEXDIR? = null, wrap: FLEXWRAP? = null, justify: FLEXJUSTIFY? = null, alignItems: FLEXALIGNITEMS? = null, alignContent: FLEXALIGNCONTENT? = null, - classes: Set<String> = setOf()) : Container(classes) { + classes: Set<String> = setOf()) : SimplePanel(classes) { var direction = direction set(value) { field = value @@ -75,20 +74,21 @@ open class FlexPanel(direction: FLEXDIR? = null, wrap: FLEXWRAP? = null, justify @Suppress("LongParameterList") fun add(child: Widget, order: Int? = null, grow: Int? = null, shrink: Int? = null, - basis: Int? = null, alignSelf: FLEXALIGNITEMS? = null, classes: Set<String> = setOf()): Container { - return addInternal(FlexWrapper(child, order, grow, shrink, basis, alignSelf, classes)) + basis: Int? = null, alignSelf: FLEXALIGNITEMS? = null, classes: Set<String> = setOf()): FlexPanel { + addInternal(FlexWrapper(child, order, grow, shrink, basis, alignSelf, classes)) + return this } - override fun add(child: Widget): Container { + override fun add(child: Widget): FlexPanel { return add(child, null) } - override fun addAll(children: List<Widget>): Container { + override fun addAll(children: List<Widget>): FlexPanel { children.forEach { add(it, null) } return this } - override fun remove(child: Widget): Container { + override fun remove(child: Widget): FlexPanel { children.find { (it as FlexWrapper).delegate == child }?.let { super.remove(it) it.dispose() @@ -96,7 +96,7 @@ open class FlexPanel(direction: FLEXDIR? = null, wrap: FLEXWRAP? = null, justify return this } - override fun removeAll(): Container { + override fun removeAll(): FlexPanel { children.map { it.clearParent() it.dispose() diff --git a/src/main/kotlin/pl/treksoft/kvision/panel/GridPanel.kt b/src/main/kotlin/pl/treksoft/kvision/panel/GridPanel.kt index 44ba509f..cac5c79b 100644 --- a/src/main/kotlin/pl/treksoft/kvision/panel/GridPanel.kt +++ b/src/main/kotlin/pl/treksoft/kvision/panel/GridPanel.kt @@ -1,6 +1,5 @@ package pl.treksoft.kvision.panel -import pl.treksoft.kvision.core.Container import pl.treksoft.kvision.core.Widget import pl.treksoft.kvision.core.WidgetWrapper import pl.treksoft.kvision.snabbdom.StringPair @@ -50,7 +49,7 @@ open class GridPanel(autoColumns: String? = null, autoRows: String? = null, auto templateColumns: String? = null, templateRows: String? = null, templateAreas: List<String>? = null, columnGap: Int? = null, rowGap: Int? = null, justifyItems: GRIDJUSTIFY? = null, alignItems: GRIDALIGN? = null, justifyContent: GRIDJUSTIFYCONTENT? = null, - alignContent: GRIDALIGNCONTENT? = null, classes: Set<String> = setOf()) : Container(classes) { + alignContent: GRIDALIGNCONTENT? = null, classes: Set<String> = setOf()) : SimplePanel(classes) { var autoColumns = autoColumns set(value) { field = value @@ -115,21 +114,21 @@ open class GridPanel(autoColumns: String? = null, autoRows: String? = null, auto @Suppress("LongParameterList") fun add(child: Widget, columnStart: Int? = null, rowStart: Int? = null, columnEnd: String? = null, rowEnd: String? = null, area: String? = null, justifySelf: GRIDJUSTIFY? = null, - alignSelf: GRIDALIGN? = null, classes: Set<String> = setOf()): Container { - return addInternal(GridWrapper(child, columnStart, rowStart, columnEnd, rowEnd, area, justifySelf, - alignSelf, classes)) + alignSelf: GRIDALIGN? = null, classes: Set<String> = setOf()): GridPanel { + addInternal(GridWrapper(child, columnStart, rowStart, columnEnd, rowEnd, area, justifySelf, alignSelf, classes)) + return this } - override fun add(child: Widget): Container { + override fun add(child: Widget): GridPanel { return add(child, null, null) } - override fun addAll(children: List<Widget>): Container { + override fun addAll(children: List<Widget>): GridPanel { children.forEach { add(it, null, null) } return this } - override fun remove(child: Widget): Container { + override fun remove(child: Widget): GridPanel { children.find { (it as GridWrapper).delegate == child }?.let { super.remove(it) it.dispose() @@ -137,7 +136,7 @@ open class GridPanel(autoColumns: String? = null, autoRows: String? = null, auto return this } - override fun removeAll(): Container { + override fun removeAll(): GridPanel { children.map { it.clearParent() it.dispose() diff --git a/src/main/kotlin/pl/treksoft/kvision/panel/ResponsiveGridPanel.kt b/src/main/kotlin/pl/treksoft/kvision/panel/ResponsiveGridPanel.kt index 17b3803f..3587ea8e 100644 --- a/src/main/kotlin/pl/treksoft/kvision/panel/ResponsiveGridPanel.kt +++ b/src/main/kotlin/pl/treksoft/kvision/panel/ResponsiveGridPanel.kt @@ -1,6 +1,5 @@ package pl.treksoft.kvision.panel -import pl.treksoft.kvision.core.Container import pl.treksoft.kvision.core.Widget import pl.treksoft.kvision.core.WidgetWrapper import pl.treksoft.kvision.html.ALIGN @@ -20,7 +19,7 @@ internal data class WidgetParam(val widget: Widget, val size: Int, val offset: I open class ResponsiveGridPanel(private val gridsize: GRIDSIZE = GRIDSIZE.MD, private var rows: Int = 0, private var cols: Int = 0, align: ALIGN? = null, - classes: Set<String> = setOf()) : Container(classes) { + classes: Set<String> = setOf()) : SimplePanel(classes) { protected var align = align set(value) { field = value @@ -30,7 +29,7 @@ open class ResponsiveGridPanel(private val gridsize: GRIDSIZE = GRIDSIZE.MD, internal val map = mutableMapOf<Int, MutableMap<Int, WidgetParam>>() private var auto: Boolean = true - open fun add(child: Widget, row: Int, col: Int, size: Int = 0, offset: Int = 0): Container { + open fun add(child: Widget, row: Int, col: Int, size: Int = 0, offset: Int = 0): ResponsiveGridPanel { val cRow = if (row < 0) 0 else row val cCol = if (col < 0) 0 else col if (row > rows - 1) rows = cRow + 1 @@ -41,17 +40,17 @@ open class ResponsiveGridPanel(private val gridsize: GRIDSIZE = GRIDSIZE.MD, return this } - override fun add(child: Widget): Container { + override fun add(child: Widget): ResponsiveGridPanel { return this.add(child, 0, this.cols) } - override fun addAll(children: List<Widget>): Container { + override fun addAll(children: List<Widget>): ResponsiveGridPanel { children.forEach { this.add(it) } return this } @Suppress("NestedBlockDepth") - override fun remove(child: Widget): Container { + override fun remove(child: Widget): ResponsiveGridPanel { for (i in 0 until rows) { val row = map[i] if (row != null) { @@ -67,7 +66,7 @@ open class ResponsiveGridPanel(private val gridsize: GRIDSIZE = GRIDSIZE.MD, return this } - open fun removeAt(row: Int, col: Int): Container { + open fun removeAt(row: Int, col: Int): ResponsiveGridPanel { map[row]?.remove(col) refreshRowContainers() return this @@ -75,38 +74,40 @@ open class ResponsiveGridPanel(private val gridsize: GRIDSIZE = GRIDSIZE.MD, @Suppress("ComplexMethod", "NestedBlockDepth") protected open fun refreshRowContainers() { - clearRowContainers() - val num = MAX_COLUMNS / cols - for (i in 0 until rows) { - val rowContainer = Container(setOf("row")) - val row = map[i] - if (row != null) { - for (j in 0 until cols) { - val wp = row[j] - if (auto) { - val widget = wp?.widget?.let { - WidgetWrapper(it, setOf("col-" + gridsize.size + "-" + num)) - } ?: Tag(TAG.DIV, classes = setOf("col-" + gridsize.size + "-" + num)) - align?.let { - widget.addCssClass(it.className) - } - rowContainer.add(widget) - } else { - if (wp != null) { - val s = if (wp.size > 0) wp.size else num - val widget = WidgetWrapper(wp.widget, setOf("col-" + gridsize.size + "-" + s)) - if (wp.offset > 0) { - widget.addCssClass("col-" + gridsize.size + "-offset-" + wp.offset) - } + singleRender { + clearRowContainers() + val num = MAX_COLUMNS / cols + for (i in 0 until rows) { + val rowContainer = SimplePanel(setOf("row")) + val row = map[i] + if (row != null) { + for (j in 0 until cols) { + val wp = row[j] + if (auto) { + val widget = wp?.widget?.let { + WidgetWrapper(it, setOf("col-" + gridsize.size + "-" + num)) + } ?: Tag(TAG.DIV, classes = setOf("col-" + gridsize.size + "-" + num)) align?.let { widget.addCssClass(it.className) } rowContainer.add(widget) + } else { + if (wp != null) { + val s = if (wp.size > 0) wp.size else num + val widget = WidgetWrapper(wp.widget, setOf("col-" + gridsize.size + "-" + s)) + if (wp.offset > 0) { + widget.addCssClass("col-" + gridsize.size + "-offset-" + wp.offset) + } + align?.let { + widget.addCssClass(it.className) + } + rowContainer.add(widget) + } } } } + addInternal(rowContainer) } - addInternal(rowContainer) } } diff --git a/src/main/kotlin/pl/treksoft/kvision/panel/SimplePanel.kt b/src/main/kotlin/pl/treksoft/kvision/panel/SimplePanel.kt new file mode 100644 index 00000000..e9cf503b --- /dev/null +++ b/src/main/kotlin/pl/treksoft/kvision/panel/SimplePanel.kt @@ -0,0 +1,59 @@ +package pl.treksoft.kvision.panel + +import com.github.snabbdom.VNode +import pl.treksoft.kvision.core.Container +import pl.treksoft.kvision.core.Widget + +open class SimplePanel(classes: Set<String> = setOf()) : Widget(classes), Container { + internal val children: MutableList<Widget> = mutableListOf() + + override fun render(): VNode { + return kvh("div", childrenVNodes()) + } + + protected open fun childrenVNodes(): Array<VNode> { + return children.filter { it.visible }.map { it.renderVNode() }.toTypedArray() + } + + protected fun addInternal(child: Widget): SimplePanel { + children.add(child) + child.parent = this + refresh() + return this + } + + override fun add(child: Widget): SimplePanel { + return addInternal(child) + } + + override fun addAll(children: List<Widget>): SimplePanel { + this.children.addAll(children) + children.map { it.parent = this } + refresh() + return this + } + + override fun remove(child: Widget): SimplePanel { + if (children.remove(child)) { + child.clearParent() + refresh() + } + return this + } + + override fun removeAll(): SimplePanel { + children.map { it.clearParent() } + children.clear() + refresh() + return this + } + + override fun getChildren(): List<Widget> { + return ArrayList(children) + } + + override fun dispose() { + children.forEach { it.dispose() } + removeAll() + } +} diff --git a/src/main/kotlin/pl/treksoft/kvision/panel/SplitPanel.kt b/src/main/kotlin/pl/treksoft/kvision/panel/SplitPanel.kt index 03740222..02811639 100644 --- a/src/main/kotlin/pl/treksoft/kvision/panel/SplitPanel.kt +++ b/src/main/kotlin/pl/treksoft/kvision/panel/SplitPanel.kt @@ -3,7 +3,6 @@ package pl.treksoft.kvision.panel import com.github.snabbdom.VNode import pl.treksoft.jquery.JQuery import pl.treksoft.jquery.JQueryEventObject -import pl.treksoft.kvision.core.Container import pl.treksoft.kvision.core.UNIT import pl.treksoft.kvision.html.TAG import pl.treksoft.kvision.html.Tag @@ -15,7 +14,7 @@ enum class DIRECTION(val dir: String) { } open class SplitPanel(private val direction: DIRECTION = DIRECTION.VERTICAL, - classes: Set<String> = setOf()) : Container(classes + ("splitpanel-" + direction.dir)) { + classes: Set<String> = setOf()) : SimplePanel(classes + ("splitpanel-" + direction.dir)) { @Suppress("LeakingThis") internal val splitter = Splitter(this, direction) diff --git a/src/main/kotlin/pl/treksoft/kvision/panel/StackPanel.kt b/src/main/kotlin/pl/treksoft/kvision/panel/StackPanel.kt index c5162c0a..e8975dce 100644 --- a/src/main/kotlin/pl/treksoft/kvision/panel/StackPanel.kt +++ b/src/main/kotlin/pl/treksoft/kvision/panel/StackPanel.kt @@ -1,11 +1,10 @@ package pl.treksoft.kvision.panel import com.github.snabbdom.VNode -import pl.treksoft.kvision.core.Container import pl.treksoft.kvision.core.Widget open class StackPanel(private val activateLast: Boolean = true, - classes: Set<String> = setOf()) : Container(classes) { + classes: Set<String> = setOf()) : SimplePanel(classes) { var activeIndex = -1 set(value) { field = value @@ -20,27 +19,27 @@ open class StackPanel(private val activateLast: Boolean = true, } } - override fun add(child: Widget): Container { + override fun add(child: Widget): StackPanel { super.add(child) if (activateLast) activeIndex = children.size - 1 else if (activeIndex == -1) activeIndex = 0 return this } - override fun addAll(children: List<Widget>): Container { + override fun addAll(children: List<Widget>): StackPanel { super.addAll(children) if (activateLast) activeIndex = this.children.size - 1 else if (activeIndex == -1) activeIndex = 0 return this } - override fun remove(child: Widget): Container { + override fun remove(child: Widget): StackPanel { super.remove(child) if (activeIndex > children.size - 1) activeIndex = children.size - 1 return this } - override fun removeAll(): Container { + override fun removeAll(): StackPanel { super.removeAll() if (activeIndex > children.size - 1) activeIndex = children.size - 1 return this diff --git a/src/main/kotlin/pl/treksoft/kvision/panel/TabPanel.kt b/src/main/kotlin/pl/treksoft/kvision/panel/TabPanel.kt index 817ecaa0..4190dbae 100644 --- a/src/main/kotlin/pl/treksoft/kvision/panel/TabPanel.kt +++ b/src/main/kotlin/pl/treksoft/kvision/panel/TabPanel.kt @@ -1,15 +1,12 @@ package pl.treksoft.kvision.panel -import pl.treksoft.kvision.core.Container import pl.treksoft.kvision.core.ResString import pl.treksoft.kvision.core.Widget import pl.treksoft.kvision.html.Link import pl.treksoft.kvision.html.TAG import pl.treksoft.kvision.html.Tag -open class TabPanel : Container(setOf()) { - private var nav = Tag(TAG.UL, classes = setOf("nav", "nav-tabs")) - private var content = StackPanel(false) +open class TabPanel : SimplePanel(setOf()) { var activeIndex get() = content.activeIndex set(value) { @@ -20,9 +17,12 @@ open class TabPanel : Container(setOf()) { } } + private var nav = Tag(TAG.UL, classes = setOf("nav", "nav-tabs")) + private var content = StackPanel(false) + init { - this.add(nav) - this.add(content) + this.addInternal(nav) + this.addInternal(content) } open fun addTab(title: String, panel: Widget, icon: String? = null, @@ -52,4 +52,25 @@ open class TabPanel : Container(setOf()) { activeIndex = content.activeIndex return this } + + override fun add(child: Widget): TabPanel { + return addTab("", child) + } + + override fun addAll(children: List<Widget>): TabPanel { + children.forEach { add(it) } + return this + } + + override fun remove(child: Widget): TabPanel { + val index = content.children.indexOf(child) + return removeTab(index) + } + + override fun removeAll(): TabPanel { + content.removeAll() + nav.removeAll() + refresh() + return this + } } |