Skip to content

Commit

Permalink
Merge pull request #36 from bbodi/f
Browse files Browse the repository at this point in the history 
adding nav to the Bootstrap example page with scrollspy + affix
  • Loading branch information
@jean79
jean79 committed Jan 14, 2015
2 parents 400d9b7 + 1b4aed6 commit f47ee9f
Show file tree
Hide file tree
Showing 19 changed files with 153 additions and 100 deletions.
89 changes: 48 additions & 41 deletions src/main/docsite/app.kt
View file
Expand Up @@ -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
Expand All @@ -25,48 +25,55 @@ import net.yested.bootstrap.NavbarPosition

fun main(args: Array<String>) {

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()
}
}

}
87 changes: 60 additions & 27 deletions src/main/docsite/bootstrap/bootstrap.kt
View file
Expand Up @@ -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()
}
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" } }
}
}
}
}
}
}
3 changes: 2 additions & 1 deletion src/main/docsite/bootstrap/buttonGroups.kt
View file
Expand Up @@ -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(
Expand All @@ -26,6 +26,7 @@ fun buttonGroupsSection(): Div {
}

return div {
this.id = id
row {
col(Medium(12)) {
pageHeader { h3 { +"Button Group" }}
Expand Down
3 changes: 2 additions & 1 deletion src/main/docsite/bootstrap/buttons.kt
View file
Expand Up @@ -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" } }
Expand Down
5 changes: 3 additions & 2 deletions src/main/docsite/bootstrap/dialogs.kt
View file
Expand Up @@ -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()

Expand All @@ -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"}
}
}
}
Expand All @@ -41,6 +41,7 @@ fun createDialogs(): Div {
}

return div {
this.id = id
row {
col(Medium(12)) {
pageHeader { h3 { +"Dialogs" } }
Expand Down
3 changes: 2 additions & 1 deletion src/main/docsite/bootstrap/forms.kt
View file
Expand Up @@ -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" } }
Expand Down
3 changes: 2 additions & 1 deletion src/main/docsite/bootstrap/grid.kt
View file
Expand Up @@ -21,7 +21,7 @@ fun <T, V : Comparable<V>> 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))

Expand All @@ -34,6 +34,7 @@ fun createGrid(): Div {
grid.list = data;

return div {
this.id = id
row {
col(Medium(12)) {
pageHeader { h3 { +"Grid" } }
Expand Down
3 changes: 2 additions & 1 deletion src/main/docsite/bootstrap/inputs.kt
View file
Expand Up @@ -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")

Expand All @@ -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" } }
Expand Down
3 changes: 2 additions & 1 deletion src/main/docsite/bootstrap/mediaObject.kt
View file
Expand Up @@ -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" } }
Expand Down
27 changes: 14 additions & 13 deletions src/main/docsite/bootstrap/navbar.kt
View file
Expand Up @@ -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" } }
Expand Down Expand Up @@ -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"
Expand All @@ -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"
Expand Down
3 changes: 2 additions & 1 deletion src/main/docsite/bootstrap/pagination.kt
View file
Expand Up @@ -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" } }
Expand Down
3 changes: 2 additions & 1 deletion src/main/docsite/bootstrap/panels.kt
View file
Expand Up @@ -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" } }
Expand Down

0 comments on commit f47ee9f

Please sign in to comment.