significant work on MDL plugin, getting close to comprehensive coverage

gradlew

@@ -97,10 +97,10 @@ if [ "$cygwin" = "false" -a "$darwin" = "false" -a "$nonstop" = "false" ] ; then
         fi
         ulimit -n $MAX_FD
         if [ $? -ne 0 ] ; then
-            warn "Could not setString maximum file descriptor limit: $MAX_FD"
+            warn "Could not setString maximum file value limit: $MAX_FD"
         fi
     else
-        warn "Could not query maximum file descriptor limit: $MAX_FD_LIMIT"
+        warn "Could not query maximum file value limit: $MAX_FD_LIMIT"
     fi
 fi
 

src/main/kotlin/com/github/sanity/kweb/demos/bootstrap4/bootstrap4.kt

@@ -2,6 +2,10 @@ package com.github.sanity.kweb.demos.bootstrap4
 
 import com.github.sanity.kweb.KWeb
 import com.github.sanity.kweb.dom.element.creation.*
+import com.github.sanity.kweb.dom.element.creation.createElement
+import com.github.sanity.kweb.dom.element.creation.div
+import com.github.sanity.kweb.dom.element.creation.h1
+import com.github.sanity.kweb.dom.element.creation.p
 import com.github.sanity.kweb.dom.element.modification.addClasses
 import com.github.sanity.kweb.dom.element.modification.setAttribute
 import com.github.sanity.kweb.dom.element.modification.addText

src/main/kotlin/com/github/sanity/kweb/demos/jquery/jquery.kt

@@ -1,8 +1,8 @@
 package com.github.sanity.kweb.demos.jquery
 
 import com.github.sanity.kweb.KWeb
-import com.github.sanity.kweb.dom.element.creation.attr
-import com.github.sanity.kweb.dom.element.creation.classes
+import com.github.sanity.kweb.dom.attributes.attr
+import com.github.sanity.kweb.dom.attributes.classes
 import com.github.sanity.kweb.dom.element.creation.h1
 import com.github.sanity.kweb.dom.element.modification.addText
 import com.github.sanity.kweb.plugins.jqueryCore.jquery

src/main/kotlin/com/github/sanity/kweb/demos/materialDesignLite/materialDesignLite.kt

@@ -1,35 +1,77 @@
 package com.github.sanity.kweb.demos.materialDesignLite
 
 import com.github.sanity.kweb.KWeb
-import com.github.sanity.kweb.dom.element.creation.InputType.text
-import com.github.sanity.kweb.dom.element.modification.addText
-import com.github.sanity.kweb.plugins.materialdesignlite.layout.drawerLayout
+import com.github.sanity.kweb.dom.element.creation.a
+import com.github.sanity.kweb.dom.element.creation.h1
+import com.github.sanity.kweb.dom.element.events.on
+import com.github.sanity.kweb.dom.element.modification.setText
+import com.github.sanity.kweb.plugins.materialdesignlite.layout.layout
+import com.github.sanity.kweb.plugins.materialdesignlite.layout.miniFooter
+import com.github.sanity.kweb.plugins.materialdesignlite.layout.tabs
 import com.github.sanity.kweb.plugins.materialdesignlite.materialDesignLite
 import com.github.sanity.kweb.plugins.materialdesignlite.mdl
-import com.github.sanity.kweb.plugins.materialdesignlite.testField.textField
+import com.github.sanity.kweb.plugins.materialdesignlite.typography.TypographyStyles
+import com.github.sanity.kweb.plugins.materialdesignlite.typography.typography
 
 fun main(args: Array<String>) {
     println("Visit http://127.0.0.1:8091/ in your browser...")
     KWeb(port = 8091, plugins = listOf(materialDesignLite)) {
         doc.body.apply {
-            mdl.drawerLayout().apply {
+            mdl.layout(fixedHeader = true).apply {
+                header().apply {
+                    row().apply {
+                        title().setText("Title")
+                        spacer()
+                        navigation().apply {
+                            navLink().setText("Link")
+                            navLink().setText("Link")
+                            navLink().setText("Link")
+                            navLink().setText("Link")
+                        }
+                    }
+                }
                 drawer().apply {
-                    title().addText("KWeb")
-                    nav().apply {
-                        link().addText("One")
-                        link().addText("Two")
-                        link().addText("Three")
+                    title().setText("Title")
+                    navigation().apply {
+                        navLink().setText("Link")
+                        navLink().setText("Link")
+                        navLink().setText("Link")
+                        navLink().setText("Link")
                     }
                 }
                 content().apply {
-                    mdl.textField(floatingLabel = true).apply {
-                        val nameInput = input(text)
-                        label(forInput = nameInput).addText("Name")
+                    tabs().apply {
+                        panel("One", isActive = true).apply {
+                            h1().typography(TypographyStyles.title).setText("This is panel One")
+                        }
+                        panel("Two").apply {
+                            h1().typography(TypographyStyles.title).setText("This is panel Two")
+                        }
+                        panel("Three").apply {
+                            h1().typography(TypographyStyles.title).setText("This is panel Three")
+                        }
+                    }
+                }
+                mdl.miniFooter().apply {
+                    leftSection().apply {
+                        logo()
+                        linkList().apply {
+                            li().a().setText("Footer link")
+                                    .on.click {
+                                println("Footer link clicked")
+                            }
+                            li().a().setText("Footer link")
+                            li().a().setText("Footer link")
+                            li().a().setText("Footer link")
+                        }
                     }
-                    mdl.textField().apply {
-                        val phoneInput = input(text, pattern = "[0-9]*")
-                        label(forInput = phoneInput).addText("Phone")
-                        error().addText("Digits only")
+                    rightSection().apply {
+                        linkList().apply {
+                            li().a().setText("Footer link")
+                            li().a().setText("Footer link")
+                            li().a().setText("Footer link")
+                            li().a().setText("Footer link")
+                        }
                     }
                 }
             }

src/main/kotlin/com/github/sanity/kweb/demos/todo/todo.kt

@@ -3,8 +3,8 @@ package com.github.sanity.kweb.demos.todo
 import com.github.sanity.kweb.KWeb
 import com.github.sanity.kweb.dom.element.creation.*
 import com.github.sanity.kweb.dom.element.events.on
-import com.github.sanity.kweb.dom.element.modification.delete
 import com.github.sanity.kweb.dom.element.modification.addText
+import com.github.sanity.kweb.dom.element.modification.delete
 import kotlinx.coroutines.experimental.future.await
 import kotlinx.coroutines.experimental.future.future
 

src/main/kotlin/com/github/sanity/kweb/dom/element/creation/attributes.kt → src/main/kotlin/com/github/sanity/kweb/dom/attributes/attributes.kt

@@ -1,4 +1,4 @@
-package com.github.sanity.kweb.dom.element.creation
+package com.github.sanity.kweb.dom.attributes
 
 /**
  * Created by ian on 1/14/17.

src/main/kotlin/com/github/sanity/kweb/dom/element/Element.kt

@@ -6,8 +6,8 @@ import java.util.concurrent.CompletableFuture
 import kotlin.reflect.KClass
 
 
-open class Element(open val receiver: RootReceiver, open var jsExpression: String, val id: String? = null) {
-    constructor(element: Element) : this(element.receiver, element.jsExpression, element.id)
+open class Element(open val receiver: RootReceiver, open var jsExpression: String, val tag : String? = null, val id: String? = null) {
+    constructor(element: Element) : this(element.receiver, jsExpression = element.jsExpression, tag = element.tag, id = element.id)
     /*********
      ********* Low level methods
      *********/

src/main/kotlin/com/github/sanity/kweb/dom/element/creation/button.kt

@@ -0,0 +1,25 @@
+package com.github.sanity.kweb.dom.element.creation
+
+import com.github.sanity.kweb.dom.attributes.attr
+import com.github.sanity.kweb.dom.element.Element
+import com.github.sanity.kweb.dom.attributes.set
+
+/**
+ * Created by ian on 1/22/17.
+ */
+
+
+fun Element.button(type: ButtonType? = ButtonType.button, autofocus: Boolean? = null, attributes: Map<String, Any> = attr): ButtonElement {
+    return ButtonElement(createElement("button", attributes
+            .set("type", type?.name)
+            .set("autofocus", autofocus)
+    ))
+}
+
+open class ButtonElement(val wrapped: Element) : Element(wrapped) {
+
+}
+
+enum class ButtonType {
+    button, reset, submit
+}

src/main/kotlin/com/github/sanity/kweb/dom/element/creation/creation.kt → src/main/kotlin/com/github/sanity/kweb/dom/element/creation/elements.kt

@@ -1,9 +1,10 @@
 package com.github.sanity.kweb.dom.element.creation
 
+import com.github.sanity.kweb.dom.attributes.attr
+import com.github.sanity.kweb.dom.attributes.set
 import com.github.sanity.kweb.dom.element.Element
 import com.github.sanity.kweb.random
 import com.github.sanity.kweb.toJson
-import java.util.*
 
 /**
  * Created by ian on 1/13/17.
@@ -18,7 +19,7 @@ import java.util.*
  ********* will typically be just the tag of the element like "div" or "input".
  *********/
 
-fun Element.createElement(tag: String, attributes: Map<String, Any> = HashMap()): Element {
+fun Element.createElement(tag: String, attributes: Map<String, Any> = attr): Element {
     val id: String = (attributes["id"] ?: Math.abs(random.nextInt())).toString()
     val javaScript = StringBuilder()
     with(javaScript) {
@@ -34,72 +35,66 @@ fun Element.createElement(tag: String, attributes: Map<String, Any> = HashMap())
         appendln("}")
     }
     execute(javaScript.toString())
-    return Element(receiver, jsExpression = "document.getElementById(\"$id\")", id = id)
+    return Element(receiver, tag = tag, jsExpression = "document.getElementById(\"$id\")", id = id)
 }
 
-fun Element.div(attributes: Map<String, Any> = HashMap()) = DIVElement(createElement("div", attributes))
+fun Element.div(attributes: Map<String, Any> = attr) = DivElement(createElement("div", attributes))
 
-open class DIVElement(wrapped: Element) : Element(wrapped) {
+open class DivElement(wrapped: Element) : Element(wrapped) {
     // These are useful to attach extension functions to
 }
 
 
-fun Element.span(attributes: Map<String, Any> = HashMap()) = SpanElement(createElement("span", attributes))
+fun Element.span(attributes: Map<String, Any> = attr) = SpanElement(createElement("span", attributes))
 
 open class SpanElement(wrapped: Element) : Element(wrapped) {
-    // These are useful to attach extension functions to
 }
 
-fun Element.main(attributes: Map<String, Any> = HashMap()) = MainElement(createElement("main", attributes))
+fun Element.main(attributes: Map<String, Any> = attr) = MainElement(createElement("main", attributes))
 
 open class MainElement(wrapped: Element) : Element(wrapped) {
     // These are useful to attach extension functions to
 }
 
-fun Element.h1(attributes: Map<String, Any> = HashMap()): Element {
+fun Element.h1(attributes: Map<String, Any> = attr): Element {
     return createElement("h1", attributes)
 }
 
-fun Element.a(href : String? = null, attributes: Map<String, Any> = HashMap()): Element {
+fun Element.a(href: String? = null, attributes: Map<String, Any> = attr): Element {
     return createElement("a", attributes.set("href", href))
 }
 
-fun Element.p(attributes: Map<String, Any> = HashMap()): Element {
+fun Element.p(attributes: Map<String, Any> = attr): Element {
     return createElement("p", attributes)
 }
 
-fun Element.ul(attributes: Map<String, Any> = HashMap()): ULElement {
+fun Element.ul(attributes: Map<String, Any> = attr): ULElement {
     val e = createElement("ul", attributes)
     return ULElement(e)
 }
 
-fun Element.form(action: String? = null, attributes: Map<String, Any> = HashMap()): Element {
+fun Element.form(action: String? = null, attributes: Map<String, Any> = attr): Element {
     return createElement("form", attributes.set("action", action))
 }
 
-class ULElement(wrapped: Element) : Element(wrapped) {
-    fun li(attributes: Map<String, Any> = HashMap()) = createElement("li", attributes)
-}
+open class FormElement(wrapped: Element) : Element(wrapped)
 
-fun Element.button(type: ButtonType? = ButtonType.button, autofocus: Boolean? = null, attributes: Map<String, Any> = attr): ButtonElement {
-    return ButtonElement(createElement("button", attributes
-            .set("type", type?.name)
-            .set("autofocus", autofocus)
-    ))
-}
+fun Element.header(attributes: Map<String, Any> = attr) = HeaderElement(createElement("header", attributes))
 
-class ButtonElement(val wrapped: Element) : Element(wrapped) {
+open class HeaderElement(wrapped: Element) : Element(wrapped)
 
-}
+fun Element.footer(attributes: Map<String, Any> = attr) = FooterElement(createElement("footer", attributes))
+
+open class FooterElement(wrapped: Element) : Element(wrapped)
 
-enum class ButtonType {
-    button, reset, submit
+open class ULElement(wrapped: Element) : Element(wrapped) {
+    fun li(attributes: Map<String, Any> = attr) = createElement("li", attributes)
 }
 
-fun Element.nav(attributes: Map<String, Any> = HashMap()): NavElement {
+fun Element.nav(attributes: Map<String, Any> = attr): NavElement {
     return NavElement(createElement("nav", attributes))
 }
 
-class NavElement(element: Element) : Element(element) {
+open class NavElement(element: Element) : Element(element) {
 
 }

src/main/kotlin/com/github/sanity/kweb/dom/element/creation/input.kt

@@ -1,7 +1,9 @@
 package com.github.sanity.kweb.dom.element.creation
 
 import com.github.salomonbrys.kotson.toJson
+import com.github.sanity.kweb.dom.attributes.attr
 import com.github.sanity.kweb.dom.element.Element
+import com.github.sanity.kweb.dom.attributes.set
 import java.util.concurrent.CompletableFuture
 
 fun Element.input(type: InputType? = null, name: String? = null, initialValue: String? = null, size: Int? = null, attributes: Map<String, Any> = attr): InputElement {

src/main/kotlin/com/github/sanity/kweb/plugins/materialdesignlite/badge.kt

@@ -0,0 +1,19 @@
+package com.github.sanity.kweb.plugins.materialdesignlite
+
+import com.github.sanity.kweb.dom.element.Element
+import com.github.sanity.kweb.dom.element.modification.addClasses
+import com.github.sanity.kweb.dom.element.modification.setAttribute
+
+/**
+ * Created by ian on 1/21/17.
+ */
+
+fun MDLElement.badge(value: String? = null, overlap: Boolean = false, noBackground : Boolean = false): Element {
+    if (this.tag != null && this.tag.toLowerCase() in setOf("span", "link") && value == null) {
+        throw IllegalArgumentException("value parameter must be present for badge on a <span> or <link> element")
+    }
+    return addClasses("mdl-badge")
+            .addClasses("mdl-badge--overlap", onlyIf = overlap)
+            .addClasses("mdl-badge--no-background", onlyIf = noBackground)
+            .setAttribute("data-badge", value)
+}

src/main/kotlin/com/github/sanity/kweb/plugins/materialdesignlite/button/button.kt

@@ -1,8 +1,8 @@
 package com.github.sanity.kweb.plugins.materialdesignlite.button
 
-import com.github.sanity.kweb.dom.element.creation.attr
+import com.github.sanity.kweb.dom.attributes.attr
 import com.github.sanity.kweb.dom.element.creation.button
-import com.github.sanity.kweb.dom.element.creation.classes
+import com.github.sanity.kweb.dom.attributes.classes
 import com.github.sanity.kweb.plugins.materialdesignlite.MDLElement
 
 /**

src/main/kotlin/com/github/sanity/kweb/plugins/materialdesignlite/layout/footer.kt

@@ -0,0 +1,34 @@
+package com.github.sanity.kweb.plugins.materialdesignlite.layout
+
+import com.github.sanity.kweb.dom.attributes.attr
+import com.github.sanity.kweb.dom.attributes.classes
+import com.github.sanity.kweb.dom.element.creation.*
+import com.github.sanity.kweb.plugins.materialdesignlite.MDLElement
+
+/**
+ * See https://getmdl.io/components/index.html#layout-section/footer
+ */
+
+// TODO: megaFooter
+
+fun MDLElement.miniFooter(attributes: Map<String, Any> = attr) = MiniFooterElement(footer(attributes.classes("mdl-mini-footer")))
+
+class MiniFooterElement(wrapped: FooterElement) : FooterElement(wrapped) {
+    fun leftSection(attributes: Map<String, Any> = attr) = MiniFooterSection(div(attributes.classes("mdl-mini-footer__left-section")))
+
+    fun rightSection(attributes: Map<String, Any> = attr) = MiniFooterSection(div(attributes.classes("mdl-mini-footer__right-section")))
+}
+
+class MiniFooterSection(wrapped: DivElement) : DivElement(wrapped) {
+    fun logo(attributes: Map<String, Any> = attr) = div(attributes.classes("mdl-logo"))
+
+    fun linkList(attributes: Map<String, Any> = attr) = ul(attributes.classes("mdl-mini-footer__link-list"))
+
+    // TODO: User needs to be able to specify their own social button css classes, see:
+    // TODO: https://github.com/google/material-design-lite/blob/88872e672e41c56af0a78a35b34373b8c4a8c49d/docs/_assets/main.css#L533
+    fun socialButton(attributes: Map<String, Any> = attr) = button(attributes = attributes.classes("mdl-mini-footer__social-btn"))
+}
+
+enum class MiniFooterSide {
+    left, right
+}