aboutsummaryrefslogtreecommitdiff
path: root/examples/showcase/src/main/kotlin
diff options
context:
space:
mode:
authorRobert Jaros <rjaros@finn.pl>2018-02-03 23:21:46 +0100
committerRobert Jaros <rjaros@finn.pl>2018-02-03 23:21:46 +0100
commit9665fe692681bc958e55d00cc0d0b238b7aee694 (patch)
treedd222dec725f64b8065a09311d9b034e9b9751b3 /examples/showcase/src/main/kotlin
parent180528f620e53e4a828d6f4d427ce83817572f44 (diff)
downloadkvision-9665fe692681bc958e55d00cc0d0b238b7aee694.tar.gz
kvision-9665fe692681bc958e55d00cc0d0b238b7aee694.tar.bz2
kvision-9665fe692681bc958e55d00cc0d0b238b7aee694.zip
Refactoring for kdoc API documentation with dokka
Diffstat (limited to 'examples/showcase/src/main/kotlin')
-rw-r--r--examples/showcase/src/main/kotlin/com/example/BasicTab.kt38
-rw-r--r--examples/showcase/src/main/kotlin/com/example/ButtonsTab.kt48
-rw-r--r--examples/showcase/src/main/kotlin/com/example/ContainersTab.kt95
-rw-r--r--examples/showcase/src/main/kotlin/com/example/DataTab.kt74
-rw-r--r--examples/showcase/src/main/kotlin/com/example/DropDownTab.kt63
-rw-r--r--examples/showcase/src/main/kotlin/com/example/FormTab.kt137
-rw-r--r--examples/showcase/src/main/kotlin/com/example/LayoutsTab.kt160
-rw-r--r--examples/showcase/src/main/kotlin/com/example/Main.kt42
-rw-r--r--examples/showcase/src/main/kotlin/com/example/ModalsTab.kt78
-rw-r--r--examples/showcase/src/main/kotlin/com/example/Showcase.kt43
10 files changed, 0 insertions, 778 deletions
diff --git a/examples/showcase/src/main/kotlin/com/example/BasicTab.kt b/examples/showcase/src/main/kotlin/com/example/BasicTab.kt
deleted file mode 100644
index 84e52b45..00000000
--- a/examples/showcase/src/main/kotlin/com/example/BasicTab.kt
+++ /dev/null
@@ -1,38 +0,0 @@
-package com.example
-
-import pl.treksoft.kvision.basic.Label
-import pl.treksoft.kvision.html.IMAGESHAPE
-import pl.treksoft.kvision.html.Image
-import pl.treksoft.kvision.html.LIST
-import pl.treksoft.kvision.html.Link
-import pl.treksoft.kvision.html.ListTag
-import pl.treksoft.kvision.html.TAG
-import pl.treksoft.kvision.html.Tag
-import pl.treksoft.kvision.panel.FLEXALIGNITEMS
-import pl.treksoft.kvision.panel.SimplePanel
-import pl.treksoft.kvision.panel.VPanel
-import pl.treksoft.kvision.utils.px
-
-class BasicTab : SimplePanel() {
- init {
- this.marginTop = 10.px()
- this.minHeight = 400.px()
- val panel = VPanel(spacing = 3)
- panel.add(Label("A simple label"))
- panel.add(Label("A list:"))
- panel.add(ListTag(LIST.UL, listOf("First list element", "Second list element", "Third list element")))
- panel.add(Label("An image:"))
- panel.add(Image(require("./img/dog.jpg"), shape = IMAGESHAPE.CIRCLE))
- panel.add(Tag(TAG.CODE, "Some text written in <code></code> HTML tag."))
- panel.add(
- Tag(
- TAG.DIV,
- "Rich <b>text</b> <i>written</i> with <span style=\"font-family: Verdana; font-size: 14pt\">" +
- "any <strong>forma</strong>tting</span>.",
- rich = true
- )
- )
- panel.add(Link("A link to Google", "http://www.google.com"))
- this.add(panel)
- }
-} \ No newline at end of file
diff --git a/examples/showcase/src/main/kotlin/com/example/ButtonsTab.kt b/examples/showcase/src/main/kotlin/com/example/ButtonsTab.kt
deleted file mode 100644
index 93f32694..00000000
--- a/examples/showcase/src/main/kotlin/com/example/ButtonsTab.kt
+++ /dev/null
@@ -1,48 +0,0 @@
-package com.example
-
-import pl.treksoft.kvision.form.check.CHECKBOXSTYLE
-import pl.treksoft.kvision.form.check.CheckBox
-import pl.treksoft.kvision.form.check.RADIOSTYLE
-import pl.treksoft.kvision.form.check.Radio
-import pl.treksoft.kvision.html.BUTTONSTYLE
-import pl.treksoft.kvision.html.Button
-import pl.treksoft.kvision.panel.FLEXWRAP
-import pl.treksoft.kvision.panel.HPanel
-import pl.treksoft.kvision.panel.SimplePanel
-import pl.treksoft.kvision.panel.VPanel
-import pl.treksoft.kvision.utils.px
-
-class ButtonsTab : SimplePanel() {
- init {
- this.marginTop = 10.px()
- val mainPanel = HPanel(wrap = FLEXWRAP.WRAP, spacing = 100)
- val buttonsPanel = VPanel(spacing = 7)
- buttonsPanel.add(Button("Default button", style = BUTTONSTYLE.DEFAULT).apply { width = 200.px() })
- buttonsPanel.add(Button("Primary button", style = BUTTONSTYLE.PRIMARY).apply { width = 200.px() })
- buttonsPanel.add(Button("Success button", style = BUTTONSTYLE.SUCCESS).apply { width = 200.px() })
- buttonsPanel.add(Button("Info button", style = BUTTONSTYLE.INFO).apply { width = 200.px() })
- buttonsPanel.add(Button("Warning button", style = BUTTONSTYLE.WARNING).apply { width = 200.px() })
- buttonsPanel.add(Button("Danger button", style = BUTTONSTYLE.DANGER).apply { width = 200.px() })
- buttonsPanel.add(Button("Link button", style = BUTTONSTYLE.LINK).apply { width = 200.px() })
- mainPanel.add(buttonsPanel)
- val ckPanel = VPanel()
- ckPanel.add(CheckBox(true, label = "Default checkbox").apply { style = CHECKBOXSTYLE.DEFAULT })
- ckPanel.add(CheckBox(true, label = "Primary checkbox").apply { style = CHECKBOXSTYLE.PRIMARY })
- ckPanel.add(CheckBox(true, label = "Success checkbox").apply { style = CHECKBOXSTYLE.SUCCESS })
- ckPanel.add(CheckBox(true, label = "Info checkbox").apply { style = CHECKBOXSTYLE.INFO })
- ckPanel.add(CheckBox(true, label = "Warning checkbox").apply { style = CHECKBOXSTYLE.WARNING })
- ckPanel.add(CheckBox(true, label = "Danger checkbox").apply { style = CHECKBOXSTYLE.DANGER })
- ckPanel.add(CheckBox(true, label = "Circled checkbox").apply { circled = true })
- mainPanel.add(ckPanel)
- val radioPanel = VPanel()
- radioPanel.add(Radio(name = "radio", label = "Default radiobutton").apply { style = RADIOSTYLE.DEFAULT })
- radioPanel.add(Radio(name = "radio", label = "Primary radiobutton").apply { style = RADIOSTYLE.PRIMARY })
- radioPanel.add(Radio(name = "radio", label = "Success radiobutton").apply { style = RADIOSTYLE.SUCCESS })
- radioPanel.add(Radio(name = "radio", label = "Info radiobutton").apply { style = RADIOSTYLE.INFO })
- radioPanel.add(Radio(name = "radio", label = "Warning radiobutton").apply { style = RADIOSTYLE.WARNING })
- radioPanel.add(Radio(name = "radio", label = "Danger radiobutton").apply { style = RADIOSTYLE.DANGER })
- radioPanel.add(Radio(name = "radio", label = "Squared radiobutton").apply { squared = true })
- mainPanel.add(radioPanel)
- this.add(mainPanel)
- }
-} \ No newline at end of file
diff --git a/examples/showcase/src/main/kotlin/com/example/ContainersTab.kt b/examples/showcase/src/main/kotlin/com/example/ContainersTab.kt
deleted file mode 100644
index 66a45c39..00000000
--- a/examples/showcase/src/main/kotlin/com/example/ContainersTab.kt
+++ /dev/null
@@ -1,95 +0,0 @@
-package com.example
-
-import pl.treksoft.kvision.core.Background
-import pl.treksoft.kvision.core.COLOR
-import pl.treksoft.kvision.core.Container
-import pl.treksoft.kvision.dropdown.DropDown
-import pl.treksoft.kvision.html.TAG
-import pl.treksoft.kvision.html.Tag
-import pl.treksoft.kvision.panel.DIRECTION
-import pl.treksoft.kvision.panel.SimplePanel
-import pl.treksoft.kvision.panel.SplitPanel
-import pl.treksoft.kvision.panel.StackPanel
-import pl.treksoft.kvision.panel.TabPanel
-import pl.treksoft.kvision.panel.VPanel
-import pl.treksoft.kvision.utils.px
-
-class ContainersTab : SimplePanel() {
- init {
- this.marginTop = 10.px()
- val panel = VPanel(spacing = 5)
- addStackPanel(panel)
- addTabPanel(panel)
- addVerticalSplitPanel(panel)
- addHorizontalSplitPanel(panel)
- this.add(panel)
- }
-
- private fun addStackPanel(panel: Container) {
- panel.add(Tag(TAG.H4, "Stack panel"))
-
- val stack = StackPanel()
- stack.add(Tag(TAG.DIV, "&nbsp;", rich = true).apply {
- background = Background(COLOR.BLUE)
- height = 40.px()
- }, "/containers/blue")
- stack.add(Tag(TAG.DIV, "&nbsp;", rich = true).apply {
- background = Background(COLOR.GREEN)
- height = 40.px()
- }, "/containers/green")
- panel.add(stack)
-
- val ldd = DropDown(
- "Activate panel from the stack", listOf(
- "Blue panel" to "#!/containers/blue",
- "Green panel" to "#!/containers/green"
- )
- )
- panel.add(ldd)
- }
-
- private fun addTabPanel(panel: Container) {
- panel.add(Tag(TAG.H4, "Tab panel"))
-
- val tabs = TabPanel()
- tabs.addTab("Blue panel", Tag(TAG.DIV, "&nbsp;", rich = true).apply {
- background = Background(COLOR.BLUE)
- height = 40.px()
- })
- tabs.addTab("Green panel", Tag(TAG.DIV, "&nbsp;", rich = true).apply {
- background = Background(COLOR.GREEN)
- height = 40.px()
- })
- panel.add(tabs)
- }
-
- private fun addVerticalSplitPanel(panel: Container) {
- panel.add(Tag(TAG.H4, "Vertical split panel"))
-
- val split = SplitPanel()
- split.add(Tag(TAG.DIV, "&nbsp;", rich = true).apply {
- background = Background(COLOR.BLUE)
- height = 200.px()
- })
- split.add(Tag(TAG.DIV, "&nbsp;", rich = true).apply {
- background = Background(COLOR.GREEN)
- height = 200.px()
- })
- panel.add(split)
- }
-
- private fun addHorizontalSplitPanel(panel: Container) {
- panel.add(Tag(TAG.H4, "Horizontal split panel"))
-
- val split = SplitPanel(direction = DIRECTION.HORIZONTAL).apply { height = 220.px() }
- split.add(Tag(TAG.DIV, "&nbsp;", rich = true).apply {
- background = Background(COLOR.BLUE)
- height = 100.px()
- })
- split.add(Tag(TAG.DIV, "&nbsp;", rich = true).apply {
- background = Background(COLOR.GREEN)
- height = 100.px()
- })
- panel.add(split)
- }
-}
diff --git a/examples/showcase/src/main/kotlin/com/example/DataTab.kt b/examples/showcase/src/main/kotlin/com/example/DataTab.kt
deleted file mode 100644
index ed690340..00000000
--- a/examples/showcase/src/main/kotlin/com/example/DataTab.kt
+++ /dev/null
@@ -1,74 +0,0 @@
-package com.example
-
-import com.lightningkite.kotlin.observable.list.observableListOf
-import pl.treksoft.kvision.data.BaseDataComponent
-import pl.treksoft.kvision.data.DataContainer
-import pl.treksoft.kvision.form.check.CHECKBOXSTYLE
-import pl.treksoft.kvision.form.check.CheckBox
-import pl.treksoft.kvision.html.BUTTONSTYLE
-import pl.treksoft.kvision.html.Button
-import pl.treksoft.kvision.panel.FLEXWRAP
-import pl.treksoft.kvision.panel.HPanel
-import pl.treksoft.kvision.panel.SimplePanel
-import pl.treksoft.kvision.panel.VPanel
-import pl.treksoft.kvision.utils.px
-
-class DataTab : SimplePanel() {
- init {
- this.marginTop = 10.px()
- this.minHeight = 400.px()
-
- val panel = VPanel(spacing = 5)
-
- class DataModel(checked: Boolean, text: String) : BaseDataComponent() {
- var checked: Boolean by obs(checked)
- var text: String by obs(text)
- }
-
- val list = observableListOf(
- DataModel(false, "January"),
- DataModel(false, "February"),
- DataModel(false, "March"),
- DataModel(false, "April"),
- DataModel(false, "May"),
- DataModel(false, "June"),
- DataModel(false, "July"),
- DataModel(false, "August"),
- DataModel(false, "September"),
- DataModel(false, "October"),
- DataModel(false, "November")
- )
- val dataContainer = DataContainer(list, { index ->
- CheckBox(
- value = list[index].checked,
- label = if (list[index].checked) "<b>${list[index].text}</b>" else "${list[index].text}"
- ).apply {
- rich = true
- style = CHECKBOXSTYLE.PRIMARY
- onClick {
- list[index].checked = this.value
- }
- }
- }, child = HPanel(spacing = 10, wrap = FLEXWRAP.WRAP))
- panel.add(dataContainer)
-
- val butPanel = HPanel(spacing = 10, wrap = FLEXWRAP.WRAP)
- butPanel.add(Button("Add December", style = BUTTONSTYLE.SUCCESS).onClick {
- list.add(DataModel(true, "December"))
- })
- butPanel.add(Button("Check all", style = BUTTONSTYLE.INFO).onClick {
- list.forEach { it.checked = true }
- })
- butPanel.add(Button("Uncheck all", style = BUTTONSTYLE.INFO).onClick {
- list.forEach { it.checked = false }
- })
- butPanel.add(Button("Reverse list", style = BUTTONSTYLE.DANGER).onClick {
- list.reverse()
- })
- butPanel.add(Button("Remove checked", style = BUTTONSTYLE.DANGER).onClick {
- list.filter { it.checked }.forEach { list.remove(it) }
- })
- panel.add(butPanel)
- this.add(panel)
- }
-}
diff --git a/examples/showcase/src/main/kotlin/com/example/DropDownTab.kt b/examples/showcase/src/main/kotlin/com/example/DropDownTab.kt
deleted file mode 100644
index b98815f0..00000000
--- a/examples/showcase/src/main/kotlin/com/example/DropDownTab.kt
+++ /dev/null
@@ -1,63 +0,0 @@
-package com.example
-
-import pl.treksoft.kvision.dropdown.DD
-import pl.treksoft.kvision.dropdown.DropDown
-import pl.treksoft.kvision.html.BUTTONSTYLE
-import pl.treksoft.kvision.html.Button
-import pl.treksoft.kvision.html.Image
-import pl.treksoft.kvision.panel.HPanel
-import pl.treksoft.kvision.panel.SimplePanel
-import pl.treksoft.kvision.panel.VPanel
-import pl.treksoft.kvision.utils.px
-
-class DropDownTab : SimplePanel() {
- init {
- this.marginTop = 10.px()
- this.minHeight = 400.px()
- val panel = VPanel(spacing = 30)
- val ndd = DropDown(
- "Dropdown with navigation menu", listOf(
- "Basic formatting" to "#!/basic",
- "Forms" to "#!/forms",
- "Buttons" to "#!/buttons",
- "Dropdowns" to "#!/dropdowns",
- "Containers" to "#!/containers"
- ), "fa-arrow-right", style = BUTTONSTYLE.SUCCESS
- ).apply {
- width = 250.px()
- }
- panel.add(ndd)
-
- val idd = DropDown("Dropdown with custom list", icon = "fa-picture-o", style = BUTTONSTYLE.WARNING).apply {
- width = 250.px()
- }
- idd.add(Image(require("./img/cat.jpg")).apply { margin = 10.px(); title = "Cat" })
- idd.add(Image(require("./img/dog.jpg")).apply { margin = 10.px(); title = "Dog" })
- panel.add(idd)
-
- val hpanel = HPanel(spacing = 5)
- val fdd = DropDown(
- "Dropdown with special options", listOf(
- "Header" to DD.HEADER.type,
- "Basic formatting" to "#!/basic",
- "Forms" to "#!/forms",
- "Buttons" to "#!/buttons",
- "Separator" to DD.SEPARATOR.type,
- "Dropdowns (disabled)" to DD.DISABLED.type,
- "Separator" to DD.SEPARATOR.type,
- "Containers" to "#!/containers"
- ), "fa-asterisk", style = BUTTONSTYLE.PRIMARY
- ).apply {
- dropup = true
- width = 250.px()
- }
- hpanel.add(fdd)
- val ddbutton = Button("Toggle dropdown", style = BUTTONSTYLE.INFO).onClick { e ->
- fdd.toggle()
- e.stopPropagation()
- }
- hpanel.add(ddbutton)
- panel.add(hpanel)
- this.add(panel)
- }
-} \ No newline at end of file
diff --git a/examples/showcase/src/main/kotlin/com/example/FormTab.kt b/examples/showcase/src/main/kotlin/com/example/FormTab.kt
deleted file mode 100644
index 49c1f6fe..00000000
--- a/examples/showcase/src/main/kotlin/com/example/FormTab.kt
+++ /dev/null
@@ -1,137 +0,0 @@
-package com.example
-
-import pl.treksoft.kvision.form.FormPanel
-import pl.treksoft.kvision.form.check.CheckBox
-import pl.treksoft.kvision.form.check.Radio
-import pl.treksoft.kvision.form.check.RadioGroup
-import pl.treksoft.kvision.form.select.AjaxOptions
-import pl.treksoft.kvision.form.select.Select
-import pl.treksoft.kvision.form.spinner.Spinner
-import pl.treksoft.kvision.form.text.Password
-import pl.treksoft.kvision.form.text.RichText
-import pl.treksoft.kvision.form.text.Text
-import pl.treksoft.kvision.form.text.TextArea
-import pl.treksoft.kvision.form.time.DateTime
-import pl.treksoft.kvision.html.BUTTONSTYLE
-import pl.treksoft.kvision.html.Button
-import pl.treksoft.kvision.modal.Alert
-import pl.treksoft.kvision.modal.Confirm
-import pl.treksoft.kvision.panel.HPanel
-import pl.treksoft.kvision.panel.SimplePanel
-import pl.treksoft.kvision.snabbdom.obj
-import pl.treksoft.kvision.utils.px
-import kotlin.js.Date
-
-class Form(val map: Map<String, Any?>) {
- val text: String? by map
- val password: String? by map
- val password2: String? by map
- val textarea: String? by map
- val richtext: String? by map
- val date: Date? by map
- val time: Date? by map
- val checkbox: Boolean by map
- val radio: Boolean by map
- val select: String? by map
- val spinner: Double? by map
- val radiogroup: String? by map
-}
-
-
-class FormTab : SimplePanel() {
- init {
- this.marginTop = 10.px()
- val formPanel = FormPanel {
- Form(it)
- }.apply {
- add(
- "text",
- Text(label = "Required text field with regexp [0-9] validator").apply {
- placeholder = "Enter your age"
- },
- required = true,
- validatorMessage = { "Only numbers are allowed" }) {
- it.getValue()?.matches("^[0-9]+$")
- }
- add("password", Password(label = "Password field with minimum length validator"),
- validatorMessage = { "Password too short" }) {
- (it.getValue()?.length ?: 0) >= 8
- }
- add("password2", Password(label = "Password confirmation"),
- validatorMessage = { "Password too short" }) {
- (it.getValue()?.length ?: 0) >= 8
- }
- add("textarea", TextArea(label = "Text area field"))
- add(
- "richtext",
- RichText(label = "Rich text field with a placeholder").apply { placeholder = "Add some info" })
- add(
- "date",
- DateTime(format = "YYYY-MM-DD", label = "Date field with a placeholder").apply {
- placeholder = "Enter date"
- })
- add(
- "time",
- DateTime(format = "HH:mm", label = "Time field")
- )
- add("checkbox", CheckBox(label = "Required checkbox")) { it.getValue() }
- add("radio", Radio(label = "Radio button"))
- add(
- "select", Select(
- options = listOf("first" to "First option", "second" to "Second option"),
- label = "Simple select"
- )
- )
-
- add("ajaxselect", Select(label = "Select with remote data source").apply {
- emptyOption = true
- ajaxOptions = AjaxOptions("https://api.github.com/search/repositories", processData = {
- it.items.map { item ->
- obj {
- this.value = item.id
- this.text = item.name
- this.data = obj {
- this.subtext = item.owner.login
- }
- }
- }
- }, processParams = obj {
- q = "{{{q}}}"
- }, minLength = 3, requestDelay = 1000)
- })
- add("spinner", Spinner(label = "Spinner field 10 - 20", min = 10, max = 20))
- add(
- "radiogroup", RadioGroup(
- listOf("option1" to "First option", "option2" to "Second option"),
- inline = true, label = "Radio button group"
- )
- )
- validator = {
- val result = it["password"] == it["password2"]
- if (!result) {
- it.getControl("password")?.validatorError = "Passwords are not the same"
- it.getControl("password2")?.validatorError = "Passwords are not the same"
- }
- result
- }
- validatorMessage = { "The passwords are not the same." }
- }
- this.add(formPanel)
- val buttonsPanel = HPanel(spacing = 10)
- val validButton = Button("Validate", "fa-check", BUTTONSTYLE.INFO).onClick {
- formPanel.validate()
- }
- buttonsPanel.add(validButton)
- val dataButton = Button("Show data", "fa-info", BUTTONSTYLE.SUCCESS).onClick {
- Alert.show("Form data in plain JSON", JSON.stringify(formPanel.getDataJson(), space = 1))
- }
- buttonsPanel.add(dataButton)
- val clearButton = Button("Clear data", "fa-times", BUTTONSTYLE.DANGER).onClick {
- Confirm.show("Are you sure?", "Do you want to clear your data?") {
- formPanel.clearData()
- }
- }
- buttonsPanel.add(clearButton)
- formPanel.add(buttonsPanel)
- }
-} \ No newline at end of file
diff --git a/examples/showcase/src/main/kotlin/com/example/LayoutsTab.kt b/examples/showcase/src/main/kotlin/com/example/LayoutsTab.kt
deleted file mode 100644
index f25da4fe..00000000
--- a/examples/showcase/src/main/kotlin/com/example/LayoutsTab.kt
+++ /dev/null
@@ -1,160 +0,0 @@
-package com.example
-
-import pl.treksoft.kvision.core.Background
-import pl.treksoft.kvision.core.COLOR
-import pl.treksoft.kvision.core.Container
-import pl.treksoft.kvision.core.CssSize
-import pl.treksoft.kvision.html.ALIGN
-import pl.treksoft.kvision.html.TAG
-import pl.treksoft.kvision.html.Tag
-import pl.treksoft.kvision.panel.*
-import pl.treksoft.kvision.utils.perc
-import pl.treksoft.kvision.utils.px
-
-class LayoutsTab : SimplePanel() {
- init {
- this.marginTop = 10.px()
- this.minHeight = 400.px()
- val panel = VPanel(spacing = 5)
- addHPanel(panel)
- addVPanel(panel)
- addFlexPanel1(panel)
- addFlexPanel2(panel)
- addFlexPanel3(panel)
- addFlexPanel4(panel)
- addFlexPanel5(panel)
- addGridPanel1(panel)
- addGridPanel2(panel)
- addRespGridPanel(panel)
- addDockPanel(panel)
- this.add(panel)
- }
-
- private fun addHPanel(panel: Container) {
- panel.add(Tag(TAG.H4, "Horizontal layout"))
- val hpanel = HPanel(spacing = 5)
- hpanel.add(getDiv("1", 100))
- hpanel.add(getDiv("2", 150))
- hpanel.add(getDiv("3", 200))
- panel.add(hpanel)
- }
-
- private fun addVPanel(panel: Container) {
- panel.add(Tag(TAG.H4, "Vertical layout"))
- val vpanel = VPanel(spacing = 5)
- vpanel.add(getDiv("1", 100))
- vpanel.add(getDiv("2", 150))
- vpanel.add(getDiv("3", 200))
- panel.add(vpanel)
- }
-
- private fun addFlexPanel1(panel: Container) {
- panel.add(Tag(TAG.H4, "CSS flexbox layouts"))
- val flexpanel = FlexPanel(
- FLEXDIR.ROW, FLEXWRAP.WRAP, FLEXJUSTIFY.FLEXEND, FLEXALIGNITEMS.CENTER,
- spacing = 5
- )
- flexpanel.add(getDiv("1", 100))
- flexpanel.add(getDiv("2", 150))
- flexpanel.add(getDiv("3", 200))
- panel.add(flexpanel)
- }
-
- private fun addFlexPanel2(panel: Container) {
- val flexpanel = FlexPanel(
- FLEXDIR.ROW, FLEXWRAP.WRAP, FLEXJUSTIFY.SPACEBETWEEN, FLEXALIGNITEMS.CENTER,
- spacing = 5
- )
- flexpanel.add(getDiv("1", 100))
- flexpanel.add(getDiv("2", 150))
- flexpanel.add(getDiv("3", 200))
- panel.add(flexpanel)
- }
-
- private fun addFlexPanel3(panel: Container) {
- val flexpanel = FlexPanel(
- FLEXDIR.ROW, FLEXWRAP.WRAP, FLEXJUSTIFY.CENTER, FLEXALIGNITEMS.CENTER,
- spacing = 5
- )
- flexpanel.add(getDiv("1", 100))
- flexpanel.add(getDiv("2", 150))
- flexpanel.add(getDiv("3", 200))
- panel.add(flexpanel)
- }
-
- private fun addFlexPanel4(panel: Container) {
- val flexpanel = FlexPanel(
- FLEXDIR.ROW, FLEXWRAP.WRAP, FLEXJUSTIFY.FLEXSTART, FLEXALIGNITEMS.CENTER,
- spacing = 5
- )
- flexpanel.add(getDiv("1", 100), order = 3)
- flexpanel.add(getDiv("2", 150), order = 1)
- flexpanel.add(getDiv("3", 200), order = 2)
- panel.add(flexpanel)
- }
-
- private fun addFlexPanel5(panel: Container) {
- val flexpanel = FlexPanel(
- FLEXDIR.COLUMN, FLEXWRAP.WRAP, FLEXJUSTIFY.FLEXSTART, FLEXALIGNITEMS.FLEXEND,
- spacing = 5
- )
- flexpanel.add(getDiv("1", 100), order = 3)
- flexpanel.add(getDiv("2", 150), order = 1)
- flexpanel.add(getDiv("3", 200), order = 2)
- panel.add(flexpanel)
- }
-
- private fun addGridPanel1(panel: Container) {
- panel.add(Tag(TAG.H4, "CSS grid layouts"))
- val gridpanel = GridPanel(columnGap = 5, rowGap = 5, justifyItems = GRIDJUSTIFY.CENTER)
- gridpanel.background = Background(COLOR.KHAKI)
- gridpanel.add(getDiv("1,1", 100), 1, 1)
- gridpanel.add(getDiv("1,2", 100), 1, 2)
- gridpanel.add(getDiv("2,1", 100), 2, 1)
- gridpanel.add(getDiv("2,2", 100), 2, 2)
- panel.add(gridpanel)
- }
-
- private fun addGridPanel2(panel: Container) {
- val gridpanel = GridPanel(columnGap = 5, rowGap = 5, justifyItems = GRIDJUSTIFY.CENTER)
- gridpanel.background = Background(COLOR.CORNFLOWERBLUE)
- gridpanel.add(getDiv("1,1", 150), 1, 1)
- gridpanel.add(getDiv("2,2", 150), 2, 2)
- gridpanel.add(getDiv("3,3", 150), 3, 3)
- panel.add(gridpanel)
- }
-
- private fun addRespGridPanel(panel: Container) {
- panel.add(Tag(TAG.H4, "Responsive grid layout"))
- val gridpanel = ResponsiveGridPanel()
- gridpanel.background = Background(COLOR.SILVER)
- gridpanel.add(getDiv("1,1", 150), 1, 1)
- gridpanel.add(getDiv("3,1", 150), 3, 1)
- gridpanel.add(getDiv("2,2", 150), 2, 2)
- gridpanel.add(getDiv("3,3", 150), 3, 3)
- panel.add(gridpanel)
- }
-
- private fun addDockPanel(panel: Container) {
- panel.add(Tag(TAG.H4, "Dock layout"))
- val dockpanel = DockPanel()
- dockpanel.background = Background(COLOR.YELLOW)
- dockpanel.add(getDiv("CENTER", 150), SIDE.CENTER)
- dockpanel.add(getDiv("LEFT", 150), SIDE.LEFT)
- dockpanel.add(getDiv("RIGHT", 150), SIDE.RIGHT)
- dockpanel.add(getDiv("UP", 150).apply { marginBottom = 10.px() }, SIDE.UP)
- dockpanel.add(getDiv("DOWN", 150).apply { marginTop = 10.px() }, SIDE.DOWN)
- panel.add(dockpanel)
- }
-
-
- private fun getDiv(value: String, size: Int): Tag {
- return Tag(TAG.DIV, value).apply {
- paddingTop = ((size / 2) - 10).px()
- align = ALIGN.CENTER
- background = Background(COLOR.GREEN)
- width = size.px()
- height = size.px()
- }
- }
-}
diff --git a/examples/showcase/src/main/kotlin/com/example/Main.kt b/examples/showcase/src/main/kotlin/com/example/Main.kt
deleted file mode 100644
index a3891526..00000000
--- a/examples/showcase/src/main/kotlin/com/example/Main.kt
+++ /dev/null
@@ -1,42 +0,0 @@
-package com.example
-
-import pl.treksoft.kvision.ApplicationBase
-import pl.treksoft.kvision.core.KVManager
-import pl.treksoft.kvision.module
-import kotlin.browser.document
-
-external fun require(name: String): String
-
-fun main(args: Array<String>) {
- var application: ApplicationBase? = null
-
- val state: dynamic = module.hot?.let { hot ->
- hot.accept()
-
- hot.dispose { data ->
- data.appState = application?.dispose()
- KVManager.shutdown()
- application = null
- }
-
- hot.data
- }
-
- if (document.body != null) {
- KVManager.start()
- application = start(state)
- } else {
- KVManager.init()
- application = null
- document.addEventListener("DOMContentLoaded", { application = start(state) })
- }
-}
-
-fun start(state: dynamic): ApplicationBase? {
- if (document.getElementById("showcase") == null) return null
- val application = Showcase()
- @Suppress("UnsafeCastFromDynamic")
- application.start(state?.appState ?: emptyMap())
- return application
-}
-
diff --git a/examples/showcase/src/main/kotlin/com/example/ModalsTab.kt b/examples/showcase/src/main/kotlin/com/example/ModalsTab.kt
deleted file mode 100644
index 46da97f7..00000000
--- a/examples/showcase/src/main/kotlin/com/example/ModalsTab.kt
+++ /dev/null
@@ -1,78 +0,0 @@
-package com.example
-
-import pl.treksoft.kvision.html.ALIGN
-import pl.treksoft.kvision.html.BUTTONSTYLE
-import pl.treksoft.kvision.html.Button
-import pl.treksoft.kvision.html.Image
-import pl.treksoft.kvision.html.TAG
-import pl.treksoft.kvision.html.Tag
-import pl.treksoft.kvision.modal.Alert
-import pl.treksoft.kvision.modal.Confirm
-import pl.treksoft.kvision.modal.Modal
-import pl.treksoft.kvision.panel.SimplePanel
-import pl.treksoft.kvision.panel.VPanel
-import pl.treksoft.kvision.utils.px
-
-class ModalsTab : SimplePanel() {
- init {
- this.marginTop = 10.px()
- this.minHeight = 400.px()
- val panel = VPanel(spacing = 30)
- val alertButton = Button("Alert dialog", style = BUTTONSTYLE.DANGER).onClick {
- Alert.show(
- "Alert dialog",
- "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce nec fringilla turpis, vel molestie dolor. Vestibulum ut ex eget orci porta gravida eu sit amet tortor."
- )
- }
- panel.add(alertButton)
- val confirmButton = Button("Confirm dialog", style = BUTTONSTYLE.WARNING).onClick {
- Confirm.show(
- "Confirm dialog",
- "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce nec fringilla turpis, vel molestie dolor. Vestibulum ut ex eget orci porta gravida eu sit amet tortor.",
- noCallback = {
- Alert.show("Result", "You pressed NO button.")
- }) {
- Alert.show("Result", "You pressed YES button.")
- }
- }
- panel.add(confirmButton)
- val confirmButtonC = Button("Cancelable confirm dialog", style = BUTTONSTYLE.INFO).onClick {
- Confirm.show(
- "Cancelable confirm dialog",
- "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce nec fringilla turpis, vel molestie dolor. Vestibulum ut ex eget orci porta gravida eu sit amet tortor.",
- align = ALIGN.CENTER,
- cancelVisible = true,
- noCallback = {
- Alert.show("Result", "You pressed NO button.")
- }) {
- Alert.show("Result", "You pressed YES button.")
- }
- }
- panel.add(confirmButtonC)
-
- val modal = Modal("Custom modal dialog")
- modal.add(
- Tag(
- TAG.H4,
- "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce nec fringilla turpis, vel molestie dolor. Vestibulum ut ex eget orci porta gravida eu sit amet tortor."
- )
- )
- modal.add(Image(require("./img/dog.jpg")))
- modal.addButton(Button("Close").onClick {
- modal.hide()
- })
- val modalButton = Button("Custom modal dialog", style = BUTTONSTYLE.SUCCESS).onClick {
- modal.show()
- }
- panel.add(modalButton)
- val fastAlertButton = Button("Alert dialog without animation", style = BUTTONSTYLE.PRIMARY).onClick {
- Alert.show(
- "Alert dialog without animation",
- "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce nec fringilla turpis, vel molestie dolor. Vestibulum ut ex eget orci porta gravida eu sit amet tortor.",
- animation = false
- )
- }
- panel.add(fastAlertButton)
- this.add(panel)
- }
-}
diff --git a/examples/showcase/src/main/kotlin/com/example/Showcase.kt b/examples/showcase/src/main/kotlin/com/example/Showcase.kt
deleted file mode 100644
index 58367600..00000000
--- a/examples/showcase/src/main/kotlin/com/example/Showcase.kt
+++ /dev/null
@@ -1,43 +0,0 @@
-package com.example
-
-import pl.treksoft.kvision.ApplicationBase
-import pl.treksoft.kvision.core.BORDERSTYLE
-import pl.treksoft.kvision.core.Border
-import pl.treksoft.kvision.core.COLOR
-import pl.treksoft.kvision.core.Root
-import pl.treksoft.kvision.panel.TabPanel
-import pl.treksoft.kvision.utils.auto
-import pl.treksoft.kvision.utils.perc
-import pl.treksoft.kvision.utils.px
-
-class Showcase : ApplicationBase() {
-
- override fun start(state: Map<String, Any>) {
- val root = Root("showcase")
- val tabPanel = TabPanel().apply {
- width = 80.perc()
- margin = 20.px()
- marginLeft = auto()
- marginRight = auto()
- padding = 20.px()
- border = Border(2.px(), BORDERSTYLE.SOLID, COLOR.SILVER)
- }
- tabPanel.addTab("Basic formatting", BasicTab(), "fa-bars", route = "/basic")
- tabPanel.addTab("Forms", FormTab(), "fa-edit", route = "/forms")
- tabPanel.addTab("Buttons", ButtonsTab(), "fa-check-square-o", route = "/buttons")
- tabPanel.addTab("Dropdowns", DropDownTab(), "fa-arrow-down", route = "/dropdowns")
- tabPanel.addTab("Containers", ContainersTab(), "fa-database", route = "/containers")
- tabPanel.addTab("Layouts", LayoutsTab(), "fa-th-list", route = "/layouts")
- tabPanel.addTab("Modals", ModalsTab(), "fa-window-maximize", route = "/modals")
- tabPanel.addTab("Data binding", DataTab(), "fa-retweet", route = "/data")
- root.add(tabPanel)
- }
-
- override fun dispose(): Map<String, Any> {
- return mapOf()
- }
-
- companion object {
- val css = require("./css/style.css")
- }
-}