From ff761487a337d4d1d72227c0f5717c4f391e2d3e Mon Sep 17 00:00:00 2001 From: rnentjes Date: Sun, 17 Nov 2019 12:22:46 +0100 Subject: [PATCH] Added style option --- build.gradle | 2 +- komp.iml | 6 +- .../kotlin/nl/astraeus/komp/HtmlBuilder.kt | 84 +++++++------------ src/main/kotlin/nl/astraeus/komp/Komponent.kt | 16 +++- 4 files changed, 50 insertions(+), 58 deletions(-) diff --git a/build.gradle b/build.gradle index 3b3c77e..beec3c6 100644 --- a/build.gradle +++ b/build.gradle @@ -1,5 +1,5 @@ group 'nl.astraeus' -version '0.1.10-SNAPSHOT' +version '0.1.10' apply plugin: 'kotlin2js' apply plugin: 'kotlin-dce-js' diff --git a/komp.iml b/komp.iml index df66733..dcc02e8 100644 --- a/komp.iml +++ b/komp.iml @@ -1,5 +1,5 @@ - + @@ -34,8 +34,8 @@ - - + + diff --git a/src/main/kotlin/nl/astraeus/komp/HtmlBuilder.kt b/src/main/kotlin/nl/astraeus/komp/HtmlBuilder.kt index 740a1e9..35aae3d 100644 --- a/src/main/kotlin/nl/astraeus/komp/HtmlBuilder.kt +++ b/src/main/kotlin/nl/astraeus/komp/HtmlBuilder.kt @@ -5,7 +5,6 @@ import kotlinx.html.Entities import kotlinx.html.Tag import kotlinx.html.TagConsumer import kotlinx.html.Unsafe -import kotlinx.html.consumers.onFinalize import org.w3c.dom.Document import org.w3c.dom.HTMLElement import org.w3c.dom.Node @@ -21,7 +20,10 @@ interface HtmlConsumer : TagConsumer { fun append(node: Node) } -class HtmlBuilder(val document : Document) : HtmlConsumer { +class HtmlBuilder( + val komponent: Komponent, + val document : Document +) : HtmlConsumer { private val path = arrayListOf() private var lastLeaved : HTMLElement? = null @@ -31,10 +33,6 @@ class HtmlBuilder(val document : Document) : HtmlConsumer { else -> document.createElement(tag.tagName) as HTMLElement } - tag.attributesEntries.forEach { - element.setAttribute(it.key, it.value) - } - if (path.isNotEmpty()) { path.last().appendChild(element) } @@ -69,6 +67,33 @@ class HtmlBuilder(val document : Document) : HtmlConsumer { throw IllegalStateException("We haven't entered tag ${tag.tagName} but trying to leave") } + val element = path.last() + + tag.attributesEntries.forEach { + if (it.key == "class") { + val classes = it.value.split(" ") + val classNames = StringBuilder() + + for (cls in classes) { + val cssStyle = komponent.declaredStyles[cls] + + if (cssStyle != null) { + for (index in 0 until cssStyle.length) { + val propertyName = cssStyle.item(index) + element.style.setProperty(propertyName, cssStyle.getPropertyValue(propertyName)) + } + } else { + classNames.append(cls) + classNames.append(" ") + } + } + + element.className = classNames.toString() + } else { + element.setAttribute(it.key, it.value) + } + } + lastLeaved = path.removeAt(path.lastIndex) } @@ -120,50 +145,3 @@ class HtmlBuilder(val document : Document) : HtmlConsumer { private fun HTMLElement.asR(): HTMLElement = this.asDynamic() } - -fun Document.createTree() : TagConsumer = HtmlBuilder(this) -val Document.create : TagConsumer - get() = HtmlBuilder(this) - -fun Node.append(block: TagConsumer.() -> Unit): List = - ArrayList().let { result -> - ownerDocumentExt.createTree().onFinalize { it, partial -> - if (!partial) { - result.add(it); appendChild(it) - } - }.block() - - result - } - -fun Node.prepend(block: TagConsumer.() -> Unit): List = - ArrayList().let { result -> - ownerDocumentExt.createTree().onFinalize { it, partial -> - if (!partial) { - result.add(it) - insertBefore(it, firstChild) - } - }.block() - - result - } - -val HTMLElement.append: TagConsumer - get() = ownerDocumentExt.createTree().onFinalize { element, partial -> - if (!partial) { - this@append.appendChild(element) - } - } - -val HTMLElement.prepend: TagConsumer - get() = ownerDocumentExt.createTree().onFinalize { element, partial -> - if (!partial) { - this@prepend.insertBefore(element, this@prepend.firstChild) - } - } - -private val Node.ownerDocumentExt: Document - get() = when { - this is Document -> this - else -> ownerDocument ?: throw IllegalStateException("Node has no ownerDocument") - } diff --git a/src/main/kotlin/nl/astraeus/komp/Komponent.kt b/src/main/kotlin/nl/astraeus/komp/Komponent.kt index cb21766..6c6a645 100644 --- a/src/main/kotlin/nl/astraeus/komp/Komponent.kt +++ b/src/main/kotlin/nl/astraeus/komp/Komponent.kt @@ -1,10 +1,14 @@ package nl.astraeus.komp import kotlinx.html.Tag +import org.w3c.dom.HTMLDivElement import org.w3c.dom.HTMLElement import org.w3c.dom.Node +import org.w3c.dom.css.CSSStyleDeclaration import kotlin.browser.document +public typealias CssStyle = CSSStyleDeclaration.() -> Unit + fun Tag.include(component: Komponent) { component.update() @@ -18,9 +22,10 @@ fun Tag.include(component: Komponent) { abstract class Komponent { var element: Node? = null + val declaredStyles: MutableMap = HashMap() open fun create(): HTMLElement { - val consumer = HtmlBuilder(document) + val consumer = HtmlBuilder(this, document) val result = render(consumer) element = result @@ -30,6 +35,15 @@ abstract class Komponent { abstract fun render(consumer: HtmlBuilder): HTMLElement + open fun style(className: String, vararg imports: CssStyle, block: CSSStyleDeclaration.() -> Unit = {}) { + val style = (document.createElement("div") as HTMLDivElement).style + for (imp in imports) { + imp(style) + } + block(style) + declaredStyles[className] = style + } + open fun update() = refresh() open fun refresh() {