From 2c7ca3f8808935fc0c56458dca54f7bf417141f7 Mon Sep 17 00:00:00 2001 From: Robert Jaros Date: Mon, 29 Jan 2018 21:03:34 +0100 Subject: Showcase example --- .../src/main/kotlin/com/example/BasicTab.kt | 38 +++++ .../src/main/kotlin/com/example/ButtonsTab.kt | 47 ++++++ .../src/main/kotlin/com/example/ContainersTab.kt | 95 ++++++++++++ .../src/main/kotlin/com/example/DataTab.kt | 76 ++++++++++ .../src/main/kotlin/com/example/DropDownTab.kt | 63 ++++++++ .../src/main/kotlin/com/example/FormTab.kt | 137 ++++++++++++++++++ .../src/main/kotlin/com/example/LayoutsTab.kt | 160 +++++++++++++++++++++ .../showcase/src/main/kotlin/com/example/Main.kt | 41 ++++++ .../src/main/kotlin/com/example/ModalsTab.kt | 78 ++++++++++ .../src/main/kotlin/com/example/Showcase.kt | 38 +++++ 10 files changed, 773 insertions(+) create mode 100644 examples/showcase/src/main/kotlin/com/example/BasicTab.kt create mode 100644 examples/showcase/src/main/kotlin/com/example/ButtonsTab.kt create mode 100644 examples/showcase/src/main/kotlin/com/example/ContainersTab.kt create mode 100644 examples/showcase/src/main/kotlin/com/example/DataTab.kt create mode 100644 examples/showcase/src/main/kotlin/com/example/DropDownTab.kt create mode 100644 examples/showcase/src/main/kotlin/com/example/FormTab.kt create mode 100644 examples/showcase/src/main/kotlin/com/example/LayoutsTab.kt create mode 100644 examples/showcase/src/main/kotlin/com/example/Main.kt create mode 100644 examples/showcase/src/main/kotlin/com/example/ModalsTab.kt create mode 100644 examples/showcase/src/main/kotlin/com/example/Showcase.kt (limited to 'examples/showcase/src/main/kotlin/com/example') diff --git a/examples/showcase/src/main/kotlin/com/example/BasicTab.kt b/examples/showcase/src/main/kotlin/com/example/BasicTab.kt new file mode 100644 index 00000000..84e52b45 --- /dev/null +++ b/examples/showcase/src/main/kotlin/com/example/BasicTab.kt @@ -0,0 +1,38 @@ +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 HTML tag.")) + panel.add( + Tag( + TAG.DIV, + "Rich text written with " + + "any formatting.", + 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 new file mode 100644 index 00000000..a09e005f --- /dev/null +++ b/examples/showcase/src/main/kotlin/com/example/ButtonsTab.kt @@ -0,0 +1,47 @@ +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.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(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 new file mode 100644 index 00000000..66a45c39 --- /dev/null +++ b/examples/showcase/src/main/kotlin/com/example/ContainersTab.kt @@ -0,0 +1,95 @@ +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, " ", rich = true).apply { + background = Background(COLOR.BLUE) + height = 40.px() + }, "/containers/blue") + stack.add(Tag(TAG.DIV, " ", 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, " ", rich = true).apply { + background = Background(COLOR.BLUE) + height = 40.px() + }) + tabs.addTab("Green panel", Tag(TAG.DIV, " ", 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, " ", rich = true).apply { + background = Background(COLOR.BLUE) + height = 200.px() + }) + split.add(Tag(TAG.DIV, " ", 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, " ", rich = true).apply { + background = Background(COLOR.BLUE) + height = 100.px() + }) + split.add(Tag(TAG.DIV, " ", 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 new file mode 100644 index 00000000..177167c4 --- /dev/null +++ b/examples/showcase/src/main/kotlin/com/example/DataTab.kt @@ -0,0 +1,76 @@ +package com.example + +import com.lightningkite.kotlin.observable.list.observableListOf +import pl.treksoft.kvision.data.DataComponent +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.FLEXDIR +import pl.treksoft.kvision.panel.FLEXWRAP +import pl.treksoft.kvision.panel.FlexPanel +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) : DataComponent() { + 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) "${list[index].text}" else "${list[index].text}" + ).apply { + rich = true + style = CHECKBOXSTYLE.PRIMARY + onClick { + list[index].checked = this.value + } + } + }, child = FlexPanel(FLEXDIR.ROW, spacing = 10, wrap = FLEXWRAP.WRAP)) + panel.add(dataContainer) + + val butPanel = HPanel(spacing = 10) + 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 new file mode 100644 index 00000000..b98815f0 --- /dev/null +++ b/examples/showcase/src/main/kotlin/com/example/DropDownTab.kt @@ -0,0 +1,63 @@ +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 new file mode 100644 index 00000000..49c1f6fe --- /dev/null +++ b/examples/showcase/src/main/kotlin/com/example/FormTab.kt @@ -0,0 +1,137 @@ +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) { + 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 new file mode 100644 index 00000000..f25da4fe --- /dev/null +++ b/examples/showcase/src/main/kotlin/com/example/LayoutsTab.kt @@ -0,0 +1,160 @@ +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 new file mode 100644 index 00000000..98c94f25 --- /dev/null +++ b/examples/showcase/src/main/kotlin/com/example/Main.kt @@ -0,0 +1,41 @@ +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) { + 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) { + 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 new file mode 100644 index 00000000..46da97f7 --- /dev/null +++ b/examples/showcase/src/main/kotlin/com/example/ModalsTab.kt @@ -0,0 +1,78 @@ +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 new file mode 100644 index 00000000..40a231e8 --- /dev/null +++ b/examples/showcase/src/main/kotlin/com/example/Showcase.kt @@ -0,0 +1,38 @@ +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.px + +class Showcase : ApplicationBase() { + + override fun start(state: Map) { + val root = Root("showcase", true) + val tabPanel = TabPanel().apply { + margin = 20.px() + 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 { + return mapOf() + } + + companion object { + val css = require("./css/style.css") + } +} -- cgit