diff options
Diffstat (limited to 'examples/showcase/src/main')
| -rw-r--r-- | examples/showcase/src/main/kotlin/com/example/BasicTab.kt | 38 | ||||
| -rw-r--r-- | examples/showcase/src/main/kotlin/com/example/ButtonsTab.kt | 48 | ||||
| -rw-r--r-- | examples/showcase/src/main/kotlin/com/example/ContainersTab.kt | 95 | ||||
| -rw-r--r-- | examples/showcase/src/main/kotlin/com/example/DataTab.kt | 74 | ||||
| -rw-r--r-- | examples/showcase/src/main/kotlin/com/example/DropDownTab.kt | 63 | ||||
| -rw-r--r-- | examples/showcase/src/main/kotlin/com/example/FormTab.kt | 137 | ||||
| -rw-r--r-- | examples/showcase/src/main/kotlin/com/example/LayoutsTab.kt | 160 | ||||
| -rw-r--r-- | examples/showcase/src/main/kotlin/com/example/Main.kt | 42 | ||||
| -rw-r--r-- | examples/showcase/src/main/kotlin/com/example/ModalsTab.kt | 78 | ||||
| -rw-r--r-- | examples/showcase/src/main/kotlin/com/example/Showcase.kt | 43 | ||||
| -rw-r--r-- | examples/showcase/src/main/resources/css/style.css | 0 | ||||
| -rw-r--r-- | examples/showcase/src/main/resources/img/cat.jpg | bin | 39488 -> 0 bytes | |||
| -rw-r--r-- | examples/showcase/src/main/resources/img/dog.jpg | bin | 119870 -> 0 bytes | |||
| -rw-r--r-- | examples/showcase/src/main/web/index.html | 19 |
14 files changed, 0 insertions, 797 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, " ", 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 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") - } -} diff --git a/examples/showcase/src/main/resources/css/style.css b/examples/showcase/src/main/resources/css/style.css deleted file mode 100644 index e69de29b..00000000 --- a/examples/showcase/src/main/resources/css/style.css +++ /dev/null diff --git a/examples/showcase/src/main/resources/img/cat.jpg b/examples/showcase/src/main/resources/img/cat.jpg Binary files differdeleted file mode 100644 index 235fd677..00000000 --- a/examples/showcase/src/main/resources/img/cat.jpg +++ /dev/null diff --git a/examples/showcase/src/main/resources/img/dog.jpg b/examples/showcase/src/main/resources/img/dog.jpg Binary files differdeleted file mode 100644 index 9c33275b..00000000 --- a/examples/showcase/src/main/resources/img/dog.jpg +++ /dev/null diff --git a/examples/showcase/src/main/web/index.html b/examples/showcase/src/main/web/index.html deleted file mode 100644 index 4dfaccf4..00000000 --- a/examples/showcase/src/main/web/index.html +++ /dev/null @@ -1,19 +0,0 @@ -<!DOCTYPE html> -<html> -<head> - <meta charset="utf-8"> - <meta http-equiv="X-UA-Compatible" content="IE=edge"> - <meta name="viewport" content="width=device-width, initial-scale=1"> - <title>KVision Showcase</title> - <script type="text/javascript" src="main.bundle.js"></script> - <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --> - <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> - <!--[if lt IE 9]> - <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script> - <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> - <![endif]--> -</head> -<body> -<div id="showcase"></div> -</body> -</html> |
