diff --git a/src/main/docsite/app.kt b/src/main/docsite/app.kt index a7abc61..38f6b9d 100644 --- a/src/main/docsite/app.kt +++ b/src/main/docsite/app.kt @@ -9,7 +9,7 @@ import net.yested.bootstrap.Navbar import net.yested.bootstrap.navbar import net.yested.registerHashChangeListener import net.yested.div -import bootstrap.boostrapPage +import bootstrap.bootstrapPage import basics.basicPage import html.htmlPage import ajax.ajaxPage @@ -25,48 +25,55 @@ import net.yested.bootstrap.NavbarPosition fun main(args: Array) { - val navbar = Navbar(look = NavbarLook.INVERSE, position = NavbarPosition.FIXED_TOP) with { - brand(href = "#") { +"Yested" } - item(href = "#/gettingstarted") { +"Getting Started" } - dropdown(label = { +"Examples" }) { - item(href = "#/html") { +"Basic HTML" } - item(href = "#/bootstrapComponents") { +"Twitter Bootstrap" } - item(href = "#/ajax") { +"Ajax Call" } - item(href = "#/masterdetail") { +"Master/Detail"} - item(href = "#/spinner") { +"Spinner"} - } - } + val navbar = Navbar(id = "appMenuBar", look = NavbarLook.INVERSE, position = NavbarPosition.FIXED_TOP) with { + brand(href = "#") { +"Yested" } + item(href = "#gettingstarted") { +"Getting Started" } + dropdown(label = { +"Examples" }) { + item(href = "#html") { +"Basic HTML" } + item(href = "#bootstrapComponents") { +"Twitter Bootstrap" } + item(href = "#ajax") { +"Ajax Call" } + item(href = "#masterdetail") { +"Master/Detail" } + item(href = "#spinner") { +"Spinner" } + } + } - val divContainer = div {} + val divContainer = div {} - registerHashChangeListener { - hash -> - when { - hash.size() == 1 -> divContainer.fade(basicPage()) - hash.get(1) == "gettingstarted" -> divContainer.fade(gettingStartedSection()) - hash.get(1) == "html" -> divContainer.fade(htmlPage()) - hash.get(1) == "bootstrapComponents" -> divContainer.fade(boostrapPage()) - hash.get(1) == "ajax" -> divContainer.fade(ajaxPage()) - hash.get(1) == "masterdetail" -> divContainer.fade(masterDetail()) - hash.get(1) == "spinner" -> divContainer.fade(createSpinner()) - } - } + registerHashChangeListener { hash -> + when (hash.get(0)) { + "#", "" -> divContainer.fade(basicPage()) + "#gettingstarted" -> divContainer.fade(gettingStartedSection()) + "#html" -> divContainer.fade(htmlPage()) + "#bootstrapComponents" -> { + if (hash.size() == 1) { + divContainer.fade(bootstrapPage()) { + // TODO: change it to a more type safe version, unfortunately currently I don't know how to + // pass a Javascript map (e.g. {target: '#bootstrapNavbar'} ) to a function. + js("$('body').scrollspy({ target: '#bootstrapNavbar' })") + } + } + } + "#ajax" -> divContainer.fade(ajaxPage()) + "#masterdetail" -> divContainer.fade(masterDetail()) + "#spinner" -> divContainer.fade(createSpinner()) + } + } - page("page") { - topMenu(navbar) - content { - div { - br(); br(); - +divContainer - } - } - footer { - small { - emph { +"Contact: " } - a(href = "mailto:jan.kovar79@gmail.com") { +"jan.kovar79@gmail.com" } - } - br(); br() - } - } + page("page") { + topMenu(navbar) + content { + div { + br(); br(); + +divContainer + } + } + footer { + small { + emph { +"Contact: " } + a(href = "mailto:jan.kovar79@gmail.com") { +"jan.kovar79@gmail.com" } + } + br(); br() + } + } } \ No newline at end of file diff --git a/src/main/docsite/bootstrap/bootstrap.kt b/src/main/docsite/bootstrap/bootstrap.kt index 0eecf8d..5186f19 100644 --- a/src/main/docsite/bootstrap/bootstrap.kt +++ b/src/main/docsite/bootstrap/bootstrap.kt @@ -6,30 +6,63 @@ import net.yested.bootstrap.row import net.yested.bootstrap.pageHeader import net.yested.bootstrap.Medium -/** - * Created by jean on 20.12.2014. - */ -fun boostrapPage():Div = - div { - row { - col(Medium(12)) { - pageHeader { - h3 { +"Twitter Bootstrap wrappers"} - } - +"Yested Framework provides simple wrappers for some Twitter Boootstrap components." - } - } - +createButtons() - +createTypographySection() - +buttonGroupsSection() - +createForm() - +createSelectSection() - +createInputs() - +createGrid() - +createTabs() - +createPanelSection() - +createDialogs() - +createMediaObjectSection() - +createPaginationSection() - +createNavbarSection() - } \ No newline at end of file +import jquery.jq +import jquery.JQuery +import net.yested.bootstrap.navbar +import net.yested.ParentComponent +import net.yested.with +import net.yested.HTMLParentComponent + + + +fun bootstrapPage(): Div = + div { + row { + row { + col(Medium(12)) { + pageHeader { + h3 { +"Twitter Bootstrap wrappers" } + } + +"Yested Framework provides simple wrappers for some Twitter Boootstrap components." + } + } + row { + col(Medium(10)) { + +createButtons(id = "bootstrapComponents_Buttons") + +createTypographySection(id = "bootstrapComponents_Typography") + +buttonGroupsSection(id = "bootstrapComponents_ButtonGroups") + +createForm(id = "bootstrapComponents_Form") + +createSelectSection(id = "bootstrapComponents_Select") + +createInputs(id = "bootstrapComponents_Inputs") + +createGrid(id = "bootstrapComponents_Grid") + +createTabs(id = "bootstrapComponents_Tabs") + +createPanelSection(id = "bootstrapComponents_Panel") + +createDialogs(id = "bootstrapComponents_Dialogs") + +createMediaObjectSection(id = "bootstrapComponents_MediaObject") + +createPaginationSection(id = "bootstrapComponents_Pagination") + +createNavbarSection(id = "bootstrapComponents_Navbar") + } + col(Medium(2)) { + div { + id = "bootstrapNavbar" + ul { + clazz = "nav nav-pills nav-stacked affix" + li { a(href = "#bootstrapComponents_Buttons") { +"Buttons" }; clazz = "active" } + li { a(href = "#bootstrapComponents_Typography") { +"Typography" } } + li { a(href = "#bootstrapComponents_ButtonGroups") { +"Button Group" } } + li { a(href = "#bootstrapComponents_Form") { +"Form" } } + li { a(href = "#bootstrapComponents_Select") { +"Select" } } + li { a(href = "#bootstrapComponents_Inputs") { +"Text Input with Validation" } } + li { a(href = "#bootstrapComponents_Grid") { +"Grid" } } + li { a(href = "#bootstrapComponents_Tabs") { +"Tabs" } } + li { a(href = "#bootstrapComponents_Panel") { +"Panels" } } + li { a(href = "#bootstrapComponents_Dialogs") { +"Dialogs" } } + li { a(href = "#bootstrapComponents_MediaObject") { +"Media Object" } } + li { a(href = "#bootstrapComponents_Pagination") { +"Pagination" } } + li { a(href = "#bootstrapComponents_Navbar") { +"Navbar" } } + } + } + } + } + } + } \ No newline at end of file diff --git a/src/main/docsite/bootstrap/buttonGroups.kt b/src/main/docsite/bootstrap/buttonGroups.kt index 3a9ebad..8b66da0 100644 --- a/src/main/docsite/bootstrap/buttonGroups.kt +++ b/src/main/docsite/bootstrap/buttonGroups.kt @@ -14,7 +14,7 @@ import net.yested.bootstrap.Medium /** * Created by jean on 25.12.2014. */ -fun buttonGroupsSection(): Div { +fun buttonGroupsSection(id: String): Div { val span = Span() val btnGroup = ButtonGroup( @@ -26,6 +26,7 @@ fun buttonGroupsSection(): Div { } return div { + this.id = id row { col(Medium(12)) { pageHeader { h3 { +"Button Group" }} diff --git a/src/main/docsite/bootstrap/buttons.kt b/src/main/docsite/bootstrap/buttons.kt index 2fa3a08..83afcf9 100644 --- a/src/main/docsite/bootstrap/buttons.kt +++ b/src/main/docsite/bootstrap/buttons.kt @@ -13,9 +13,10 @@ import net.yested.bootstrap.ButtonLook import net.yested.bootstrap.ButtonSize import net.yested.bootstrap.Medium -fun createButtons(): Div { +fun createButtons(id: String): Div { return div { + this.id = id row { col(Medium(12)) { pageHeader { h3 { +"Buttons" } } diff --git a/src/main/docsite/bootstrap/dialogs.kt b/src/main/docsite/bootstrap/dialogs.kt index 3b79171..0bea4fa 100644 --- a/src/main/docsite/bootstrap/dialogs.kt +++ b/src/main/docsite/bootstrap/dialogs.kt @@ -17,7 +17,7 @@ import net.yested.bootstrap.btsButton import net.yested.bootstrap.textInput import net.yested.bootstrap.Medium -fun createDialogs(): Div { +fun createDialogs(id: String): Div { val dialog = Dialog() @@ -26,7 +26,7 @@ fun createDialogs(): Div { body { btsForm { item(forId = "nameId", label = { + "Name" }) { - textInput(placeholder = "Name") { id = "nameId"} + textInput(placeholder = "Name") { this.id = "nameId"} } } } @@ -41,6 +41,7 @@ fun createDialogs(): Div { } return div { + this.id = id row { col(Medium(12)) { pageHeader { h3 { +"Dialogs" } } diff --git a/src/main/docsite/bootstrap/forms.kt b/src/main/docsite/bootstrap/forms.kt index 4c3fc4f..ae6f13c 100644 --- a/src/main/docsite/bootstrap/forms.kt +++ b/src/main/docsite/bootstrap/forms.kt @@ -12,9 +12,10 @@ import net.yested.bootstrap.inputAddOn import net.yested.bootstrap.TextInput import net.yested.bootstrap.Medium -fun createForm(): Div { +fun createForm(id: String): Div { return div { + this.id = id row { col(Medium(12)) { pageHeader { h3 { +"Form" } } diff --git a/src/main/docsite/bootstrap/grid.kt b/src/main/docsite/bootstrap/grid.kt index 7a6917f..3acb651 100644 --- a/src/main/docsite/bootstrap/grid.kt +++ b/src/main/docsite/bootstrap/grid.kt @@ -21,7 +21,7 @@ fun > compareBy(get: (T) -> V?): (T, T) -> Int { return {(l, r) -> compareValues(get(l), get(r)) } } -fun createGrid(): Div { +fun createGrid(id: String): Div { val data = listOf(Person("Jan", 15), Person("Peter", 30), Person("Martin", 31)) @@ -34,6 +34,7 @@ fun createGrid(): Div { grid.list = data; return div { + this.id = id row { col(Medium(12)) { pageHeader { h3 { +"Grid" } } diff --git a/src/main/docsite/bootstrap/inputs.kt b/src/main/docsite/bootstrap/inputs.kt index 3e4600d..bdaab3b 100644 --- a/src/main/docsite/bootstrap/inputs.kt +++ b/src/main/docsite/bootstrap/inputs.kt @@ -14,7 +14,7 @@ import net.yested.bootstrap.btsForm import net.yested.bootstrap.BtsButton import net.yested.bootstrap.Medium -fun createInputs(): Div { +fun createInputs(id: String): Div { val textInput = TextInput(placeholder = "Mandatory field") @@ -29,6 +29,7 @@ fun createInputs(): Div { val button = BtsButton(label = { +"Send" }, onclick = ::submit) return div { + this.id = id row { col(Medium(12)) { pageHeader { h3 { +"Text Input with Validation" } } diff --git a/src/main/docsite/bootstrap/mediaObject.kt b/src/main/docsite/bootstrap/mediaObject.kt index c9ffd97..71db23e 100644 --- a/src/main/docsite/bootstrap/mediaObject.kt +++ b/src/main/docsite/bootstrap/mediaObject.kt @@ -17,9 +17,10 @@ import net.yested.bootstrap.mediaObject import net.yested.bootstrap.MediaAlign import net.yested.replace -fun createMediaObjectSection(): Div { +fun createMediaObjectSection(id: String): Div { return div { + this.id = id row { col(Medium(12)) { pageHeader { h3 { +"Media Object" } } diff --git a/src/main/docsite/bootstrap/navbar.kt b/src/main/docsite/bootstrap/navbar.kt index 4b0f6ef..9832541 100644 --- a/src/main/docsite/bootstrap/navbar.kt +++ b/src/main/docsite/bootstrap/navbar.kt @@ -18,9 +18,10 @@ import net.yested.bootstrap.NavbarLook import net.yested.bootstrap.NavbarPosition import net.yested.with -fun createNavbarSection(): Div { +fun createNavbarSection(id: String): Div { return div { + this.id = id row { col(Medium(12)) { pageHeader { h3 { +"Navbar" } } @@ -80,14 +81,14 @@ fun createNavbarSection(): Div { col(Medium(12)) { h4 { +"Demo" } navbar(id = "navbarDemo", look = NavbarLook.INVERSE) { - brand(href = "#/bootstrapComponents") { glyphicon(icon = "home"); nbsp(); +"Home" } - item(href = "#/bootstrapComponents") { +"Some Link 1" } - item(href = "#/bootstrapComponents", onclick = { println("clicked")}) { +"Some Link 2" } + brand(href = "#bootstrapComponents") { glyphicon(icon = "home"); nbsp(); +"Home" } + item(href = "#bootstrapComponents") { +"Some Link 1" } + item(href = "#bootstrapComponents", onclick = { println("clicked")}) { +"Some Link 2" } dropdown(label = { +"Dropdown"}) { - item(href = "#/bootstrapComponents", onclick = { println("clicked")}) { +"Link 1" } - item(href = "#/bootstrapComponents", onclick = { println("clicked")}) { +"Link 2" } + item(href = "#bootstrapComponents", onclick = { println("clicked")}) { +"Link 1" } + item(href = "#bootstrapComponents", onclick = { println("clicked")}) { +"Link 2" } divider() - item(href = "#/bootstrapComponents", onclick = { println("clicked")}) { +"Link 3" } + item(href = "#bootstrapComponents", onclick = { println("clicked")}) { +"Link 3" } } left { form { "class".."navbar-form" @@ -110,14 +111,14 @@ fun createNavbarSection(): Div { h4 { +"Code" } code(lang = "kotlin", content = """navbar(id = "navbarDemo", look = NavbarLook.INVERSE) { - brand(href = "#/bootstrapComponents") {glyphicon(icon = "home"); nbsp(); +" Home" } - item(href = "#/bootstrapComponents") { +"Some Link 1" } - item(href = "#/bootstrapComponents", onclick = { println("clicked")}) { +"Some Link 2" } + brand(href = "#bootstrapComponents") {glyphicon(icon = "home"); nbsp(); +" Home" } + item(href = "#bootstrapComponents") { +"Some Link 1" } + item(href = "#bootstrapComponents", onclick = { println("clicked")}) { +"Some Link 2" } dropdown(label = { +"Dropdown"}) { - item(href = "#/bootstrapComponents", onclick = { println("clicked")}) { +"Link 1" } - item(href = "#/bootstrapComponents", onclick = { println("clicked")}) { +"Link 2" } + item(href = "#bootstrapComponents", onclick = { println("clicked")}) { +"Link 1" } + item(href = "#bootstrapComponents", onclick = { println("clicked")}) { +"Link 2" } divider() - item(href = "#/bootstrapComponents", onclick = { println("clicked")}) { +"Link 3" } + item(href = "#bootstrapComponents", onclick = { println("clicked")}) { +"Link 3" } } left { form { "class".."navbar-form" diff --git a/src/main/docsite/bootstrap/pagination.kt b/src/main/docsite/bootstrap/pagination.kt index 81b649d..d694bd0 100644 --- a/src/main/docsite/bootstrap/pagination.kt +++ b/src/main/docsite/bootstrap/pagination.kt @@ -12,11 +12,12 @@ import net.yested.Span import net.yested.bootstrap.pagination -fun createPaginationSection(): Div { +fun createPaginationSection(id: String): Div { val result = Span() return div { + this.id = id row { col(Medium(12)) { pageHeader { h3 { +"Pagination" } } diff --git a/src/main/docsite/bootstrap/panels.kt b/src/main/docsite/bootstrap/panels.kt index ec284a8..a1f11f9 100644 --- a/src/main/docsite/bootstrap/panels.kt +++ b/src/main/docsite/bootstrap/panels.kt @@ -15,9 +15,10 @@ import net.yested.bootstrap.Medium /** * Created by jean on 28.12.2014. */ -fun createPanelSection(): Div { +fun createPanelSection(id: String): Div { return div { + this.id = id row { col(Medium(12)) { pageHeader { h3 { +"Panels" } } diff --git a/src/main/docsite/bootstrap/select.kt b/src/main/docsite/bootstrap/select.kt index 929d8a2..78bc0cf 100644 --- a/src/main/docsite/bootstrap/select.kt +++ b/src/main/docsite/bootstrap/select.kt @@ -18,7 +18,7 @@ import net.yested.bootstrap.Medium data class Car(val model:String, val color:String) -fun createSelectSection(): Div { +fun createSelectSection(id: String): Div { val someData = listOf( Car("Ford", "Black"), @@ -45,6 +45,7 @@ fun createSelectSection(): Div { } return div { + this.id = id row { col(Medium(12)) { pageHeader { h3 { +"Select" } } diff --git a/src/main/docsite/bootstrap/tabs.kt b/src/main/docsite/bootstrap/tabs.kt index 0ec150d..ab2a919 100644 --- a/src/main/docsite/bootstrap/tabs.kt +++ b/src/main/docsite/bootstrap/tabs.kt @@ -14,9 +14,10 @@ import net.yested.bootstrap.Medium /** * Created by jean on 20.12.2014. */ -fun createTabs(): Div { +fun createTabs(id: String): Div { return div { + this.id = id row { col(Medium(12)) { pageHeader { h3 { +"Tabs" } } diff --git a/src/main/docsite/bootstrap/typography.kt b/src/main/docsite/bootstrap/typography.kt index a4a7d4a..78b2b35 100644 --- a/src/main/docsite/bootstrap/typography.kt +++ b/src/main/docsite/bootstrap/typography.kt @@ -17,9 +17,10 @@ import net.yested.bootstrap.Medium /** * Created by jean on 20.12.2014. */ -fun createTypographySection(): Div { +fun createTypographySection(id: String): Div { return div { + this.id = id row { col(Medium(12)) { pageHeader { h3 { +"Typography" } } diff --git a/src/main/kotlin/net/yested/bootstrap/inputs.kt b/src/main/kotlin/net/yested/bootstrap/inputs.kt index 36813de..0e4ec2c 100644 --- a/src/main/kotlin/net/yested/bootstrap/inputs.kt +++ b/src/main/kotlin/net/yested/bootstrap/inputs.kt @@ -29,7 +29,7 @@ public trait InputElement { fun decorate(valid:Boolean) } -public class TextInput(placeholder:String? = null) : ParentComponent("input"), InputElement { +public class TextInput(placeholder:String? = null) : HTMLParentComponent("input"), InputElement { private val onChangeListeners: ArrayList> = ArrayList(); private val onChangeLiveListeners: ArrayList> = ArrayList(); diff --git a/src/main/kotlin/net/yested/bootstrap/navbar.kt b/src/main/kotlin/net/yested/bootstrap/navbar.kt index 1f4823b..3fcb1a7 100644 --- a/src/main/kotlin/net/yested/bootstrap/navbar.kt +++ b/src/main/kotlin/net/yested/bootstrap/navbar.kt @@ -61,7 +61,7 @@ public enum class NavbarLook(val code:String) { INVERSE : NavbarLook("inverse") } -public class Navbar(id:String = "navbar", position: NavbarPosition? = null, look:NavbarLook = NavbarLook.DEFAULT) : ParentComponent("nav") { +public class Navbar(id:String, position: NavbarPosition? = null, look:NavbarLook = NavbarLook.DEFAULT) : ParentComponent("nav") { private val ul = UL() with { clazz = "nav navbar-nav" } private val collapsible = div(id = id, clazz = "navbar-collapse collapse") { +ul } @@ -184,6 +184,6 @@ class NavBarDropdown(private val deselectFun:() -> Unit, label: Anchor.()->Unit) } -public fun HTMLParentComponent.navbar(id:String = "navbar", position: NavbarPosition? = null, look:NavbarLook = NavbarLook.DEFAULT, init: Navbar.() -> Unit):Unit { +public fun HTMLParentComponent.navbar(id:String, position: NavbarPosition? = null, look:NavbarLook = NavbarLook.DEFAULT, init: Navbar.() -> Unit):Unit { add(Navbar(id = id, position = position, look = look) with { init() }) } diff --git a/src/main/kotlin/net/yested/html.kt b/src/main/kotlin/net/yested/html.kt index ba0ca78..46e4b9e 100644 --- a/src/main/kotlin/net/yested/html.kt +++ b/src/main/kotlin/net/yested/html.kt @@ -93,11 +93,11 @@ public open class HTMLParentComponent(tagName:String) : ParentComponent(tagName) element.appendChild(component.element) } - public fun fade(component:Component) { + public fun fade(component:Component, callback: () -> Unit = {}) { jq(element).fadeOut(200) { element.innerHTML = "" element.appendChild(component.element) - jq(element).fadeIn(200, {}) + jq(element).fadeIn(200, callback) } } diff --git a/src/main/kotlin/net/yested/router.kt b/src/main/kotlin/net/yested/router.kt index d14ae1e..527b11b 100644 --- a/src/main/kotlin/net/yested/router.kt +++ b/src/main/kotlin/net/yested/router.kt @@ -10,7 +10,7 @@ private trait JQRouter { native("$(window)") private var routerJQuery: JQRouter = null!! private fun getHashSplitted(): Array { - return window.location.hash.split("/") + return window.location.hash.split("_") } public fun registerHashChangeListener(runNow:Boolean = true, listener:(Array) -> Unit) {