From 1c3ac8f0d0de5ae0bfab9a87901b293187f592f5 Mon Sep 17 00:00:00 2001 From: rnentjes Date: Mon, 10 Feb 2020 20:28:57 +0100 Subject: [PATCH] More properties --- build.gradle.kts | 6 ++- .../kotlin/nl/astraeus/css/AlignContent.kt | 17 +++++++ .../kotlin/nl/astraeus/css/AlignItems.kt | 16 +++++++ .../kotlin/nl/astraeus/css/AlignSelf.kt | 17 +++++++ src/commonMain/kotlin/nl/astraeus/css/All.kt | 12 +++++ .../kotlin/nl/astraeus/css/Animation.kt | 29 +++++++++++ .../kotlin/nl/astraeus/css/Color.kt | 11 ++++- .../kotlin/nl/astraeus/css/Count.kt | 30 ++++++++++++ .../kotlin/nl/astraeus/css/CssBuilder.kt | 48 ++++++++++++++----- .../kotlin/nl/astraeus/css/CssProperty.kt | 10 ++-- .../kotlin/nl/astraeus/css/DelayDuration.kt | 25 ++++++++++ .../kotlin/nl/astraeus/css/Measurement.kt | 8 +++- .../kotlin/nl/astraeus/css/TestCssBuilder.kt | 6 +-- src/jvmMain/kotlin/nl/astraeus/css/Test.kt | 21 +++++++- 14 files changed, 229 insertions(+), 27 deletions(-) create mode 100644 src/commonMain/kotlin/nl/astraeus/css/AlignContent.kt create mode 100644 src/commonMain/kotlin/nl/astraeus/css/AlignItems.kt create mode 100644 src/commonMain/kotlin/nl/astraeus/css/AlignSelf.kt create mode 100644 src/commonMain/kotlin/nl/astraeus/css/All.kt create mode 100644 src/commonMain/kotlin/nl/astraeus/css/Animation.kt create mode 100644 src/commonMain/kotlin/nl/astraeus/css/Count.kt create mode 100644 src/commonMain/kotlin/nl/astraeus/css/DelayDuration.kt diff --git a/build.gradle.kts b/build.gradle.kts index 60e04b7..c1376b5 100644 --- a/build.gradle.kts +++ b/build.gradle.kts @@ -10,6 +10,8 @@ repositories { mavenCentral() } +apply(plugin = "kotlin-dce-js") + kotlin { /* Targets configuration omitted. * To find out how to configure the targets, please follow the link: @@ -27,7 +29,7 @@ kotlin { val commonTest by getting { dependencies { implementation(kotlin("test-common")) - implementation(kotlin("test-annotations-common")) + //implementation(kotlin("test-annotations-common")) } } val jsMain by getting { @@ -38,7 +40,7 @@ kotlin { val jsTest by getting { dependencies { implementation(kotlin("test-js")) - implementation(kotlin("test-annotations-js")) + //implementation(kotlin("test-annotations-js")) } } val jvmMain by getting { diff --git a/src/commonMain/kotlin/nl/astraeus/css/AlignContent.kt b/src/commonMain/kotlin/nl/astraeus/css/AlignContent.kt new file mode 100644 index 0000000..9edefc5 --- /dev/null +++ b/src/commonMain/kotlin/nl/astraeus/css/AlignContent.kt @@ -0,0 +1,17 @@ +package nl.astraeus.css + +enum class AlignContent( + val value: String +) : CssProperty { + STRETCH("stretch"), + CENTER("center"), + FLEX_START("flex-start"), + FLEX_END("flex-end"), + SPACE_BETWEEN("space-between"), + SPACE_AROUND("space-around"), + INITIAL("initial"), + INHERIT("inherit"), + ; + + override fun css(): String = value +} diff --git a/src/commonMain/kotlin/nl/astraeus/css/AlignItems.kt b/src/commonMain/kotlin/nl/astraeus/css/AlignItems.kt new file mode 100644 index 0000000..d065e3a --- /dev/null +++ b/src/commonMain/kotlin/nl/astraeus/css/AlignItems.kt @@ -0,0 +1,16 @@ +package nl.astraeus.css + +enum class AlignItems( + val value: String +) : CssProperty { + STRETCH("stretch"), + CENTER("center"), + FLEX_START("flex-start"), + FLEX_END("flex-end"), + BASELINE("baseline"), + INITIAL("initial"), + INHERIT("inherit"), + ; + + override fun css(): String = value +} diff --git a/src/commonMain/kotlin/nl/astraeus/css/AlignSelf.kt b/src/commonMain/kotlin/nl/astraeus/css/AlignSelf.kt new file mode 100644 index 0000000..abbedc8 --- /dev/null +++ b/src/commonMain/kotlin/nl/astraeus/css/AlignSelf.kt @@ -0,0 +1,17 @@ +package nl.astraeus.css + +enum class AlignSelf( + val value: String +) : CssProperty { + AUTO("auto"), + STRETCH("stretch"), + CENTER("center"), + FLEX_START("flex-start"), + FLEX_END("flex-end"), + BASELINE("baseline"), + INITIAL("initial"), + INHERIT("inherit"), + ; + + override fun css(): String = value +} diff --git a/src/commonMain/kotlin/nl/astraeus/css/All.kt b/src/commonMain/kotlin/nl/astraeus/css/All.kt new file mode 100644 index 0000000..6ce843a --- /dev/null +++ b/src/commonMain/kotlin/nl/astraeus/css/All.kt @@ -0,0 +1,12 @@ +package nl.astraeus.css + +enum class All( + val value: String +) : CssProperty { + INITIAL("initial"), + INHERIT("inherit"), + UNSET("unset"), + ; + + override fun css(): String = value +} diff --git a/src/commonMain/kotlin/nl/astraeus/css/Animation.kt b/src/commonMain/kotlin/nl/astraeus/css/Animation.kt new file mode 100644 index 0000000..70daa18 --- /dev/null +++ b/src/commonMain/kotlin/nl/astraeus/css/Animation.kt @@ -0,0 +1,29 @@ +package nl.astraeus.css + +enum class AnimationDirection( + val value: String +) : CssProperty { + NORMAL("normal"), + REVERSE("reverse"), + ALTERNATE("alternate"), + ALTERNATE_REVERSE("alternate-reverse"), + INITIAL("initial"), + INHERIT("inherit"), + ; + + override fun css(): String = value +} + +enum class AnimationFillMode( + val value: String +) : CssProperty { + NONE("none"), + FORWARDS("forwards"), + BACKWARDS("backwards"), + BOTH("both"), + INITIAL("initial"), + INHERIT("inherit"), + ; + + override fun css(): String = value +} diff --git a/src/commonMain/kotlin/nl/astraeus/css/Color.kt b/src/commonMain/kotlin/nl/astraeus/css/Color.kt index 48de699..b5bdafc 100644 --- a/src/commonMain/kotlin/nl/astraeus/css/Color.kt +++ b/src/commonMain/kotlin/nl/astraeus/css/Color.kt @@ -1,16 +1,25 @@ package nl.astraeus.css +fun hex(hex: String): Color = HexColor(hex) fun rgb(red: Int, green: Int, blue: Int): Color = RGBColor(red, green, blue) fun rgba(red: Int, green: Int, blue: Int, alpha: Double): Color = RGBAColor(red, green, blue, alpha) fun hsl(hue: Int, saturation: Int, lightness: Int): Color = HSLColor(hue, saturation, lightness) fun hsla(hue: Int, saturation: Int, lightness: Int, alpha: Double): Color = HSLAColor(hue, saturation, lightness, alpha) -open class Color : CssProperty() { +open class Color : CssProperty { override fun css(): String = "#xxxxxx" } +class HexColor( + val hex: String +) : Color() { + + override fun css(): String = "#$hex" + +} + class RGBColor( val red: Int, val green: Int, diff --git a/src/commonMain/kotlin/nl/astraeus/css/Count.kt b/src/commonMain/kotlin/nl/astraeus/css/Count.kt new file mode 100644 index 0000000..4505796 --- /dev/null +++ b/src/commonMain/kotlin/nl/astraeus/css/Count.kt @@ -0,0 +1,30 @@ +package nl.astraeus.css + + +enum class CountType { + NUMBER, + INFINITE, + INITIAL, + INHERIT +} + +class Count( + val type: CountType, + val number: Int +) : CssProperty { + + override fun css(): String = when(type) { + CountType.NUMBER -> "$number" + CountType.INFINITE -> "infinite" + CountType.INITIAL -> "initial" + CountType.INHERIT -> "inherit" + } + + companion object { + fun count(number: Int): Count = Count(CountType.NUMBER, number) + fun infinite(): Count = Count(CountType.INFINITE, 0) + fun initial(): Count = Count(CountType.INITIAL, 0) + fun inherit(): Count = Count(CountType.INHERIT, 0) + } +} + diff --git a/src/commonMain/kotlin/nl/astraeus/css/CssBuilder.kt b/src/commonMain/kotlin/nl/astraeus/css/CssBuilder.kt index 6fea23d..2b51a9a 100644 --- a/src/commonMain/kotlin/nl/astraeus/css/CssBuilder.kt +++ b/src/commonMain/kotlin/nl/astraeus/css/CssBuilder.kt @@ -5,25 +5,49 @@ annotation class CssTagMarker @CssTagMarker open class Style( - var color: Color? = null, + var alignContent: AlignContent? = null, + var alignItems: AlignItems? = null, + var alignSelf: AlignSelf? = null, + var all: All? = null, + var animation: TextProperty? = null, + var animationDelay: DelayDuration? = null, + var animationDirection: AnimationDirection? = null, + var animationDuration: DelayDuration? = null, + var animationFillMode: AnimationFillMode? = null, + var animationIterationCount: Count? = null, var backgroundColor: Color? = null, + var color: Color? = null, + var fontFamily: TextProperty? = null, + var fontSize: FontSize? = null, + var height: Measurement? = null, var left: Measurement? = null, var top: Measurement? = null, - var width: Measurement? = null, - var height: Measurement? = null, - var fontFamily: PlainProperty? = null, - var fontSize: FontSize? = null + var transitionDelay: DelayDuration? = null, + var transitionDuration: DelayDuration? = null, + var width: Measurement? = null ) { fun getMapping() = mapOf( - "color" to color, + "align-content" to alignContent, + "align-items" to alignItems, + "align-self" to alignSelf, + "all" to all, + "animation" to animation, + "animation-delay" to animationDelay, + "animation-direction" to animationDirection, + "animation-duration" to animationDuration, + "animation-fill-mode" to animationFillMode, + "animation-iteration-count" to animationIterationCount, "background-color" to backgroundColor, + "color" to color, + "font-family" to fontFamily, + "font-size" to fontSize, + "height" to height, "left" to left, "top" to top, - "width" to width, - "height" to height, - "font-family" to fontFamily, - "font-size" to fontSize + "transition-delay" to transitionDelay, + "transition-duration" to transitionDuration, + "width" to width ) fun propertyCss(indent: String, name: String, prop: CssProperty?): String = if (prop != null) { @@ -85,8 +109,8 @@ open class StyleDefinition : Style() { } -fun css(definition: Style.() -> Unit): Style { - val css = Style() +fun css(definition: StyleDefinition.() -> Unit): StyleDefinition { + val css = StyleDefinition() definition(css) diff --git a/src/commonMain/kotlin/nl/astraeus/css/CssProperty.kt b/src/commonMain/kotlin/nl/astraeus/css/CssProperty.kt index f329c68..7558495 100644 --- a/src/commonMain/kotlin/nl/astraeus/css/CssProperty.kt +++ b/src/commonMain/kotlin/nl/astraeus/css/CssProperty.kt @@ -1,16 +1,16 @@ package nl.astraeus.css -abstract class CssProperty { +interface CssProperty { - abstract fun css(): String + fun css(): String } -fun plain(value: String) = PlainProperty(value) +fun text(value: String) = TextProperty(value) -class PlainProperty( +class TextProperty( val value: String -): CssProperty() { +): CssProperty { override fun css(): String = value diff --git a/src/commonMain/kotlin/nl/astraeus/css/DelayDuration.kt b/src/commonMain/kotlin/nl/astraeus/css/DelayDuration.kt new file mode 100644 index 0000000..7d7f2ae --- /dev/null +++ b/src/commonMain/kotlin/nl/astraeus/css/DelayDuration.kt @@ -0,0 +1,25 @@ +package nl.astraeus.css + + +enum class DelayDurationType { + TIME, + INITIAL, + INHERIT +} + +class DelayDuration( + val type: DelayDurationType, + val seconds: Int +) : CssProperty { + + override fun css(): String = when(type) { + DelayDurationType.TIME -> "${seconds}s" + DelayDurationType.INITIAL -> "initial" + DelayDurationType.INHERIT -> "inherit" + } + +} + +fun seconds(seconds: Int): DelayDuration = DelayDuration(DelayDurationType.TIME, seconds) +fun initial(): DelayDuration = DelayDuration(DelayDurationType.INITIAL, 0) +fun inherit(): DelayDuration = DelayDuration(DelayDurationType.INHERIT, 0) diff --git a/src/commonMain/kotlin/nl/astraeus/css/Measurement.kt b/src/commonMain/kotlin/nl/astraeus/css/Measurement.kt index dc12f15..d54d030 100644 --- a/src/commonMain/kotlin/nl/astraeus/css/Measurement.kt +++ b/src/commonMain/kotlin/nl/astraeus/css/Measurement.kt @@ -3,11 +3,13 @@ package nl.astraeus.css fun px(nr: Int): Measurement = Measurement(MeasurementType.PX, nr) fun em(nr: Int): Measurement = Measurement(MeasurementType.EM, nr) fun perc(nr: Int): Measurement = Measurement(MeasurementType.PERCENTAGE, nr) +fun pc(nr: Int): Measurement = Measurement(MeasurementType.PICAS, nr) enum class MeasurementType { PX, EM, PERCENTAGE, + PICAS, OTHER } @@ -15,7 +17,7 @@ open class Measurement( val type: MeasurementType, val intValue: Int = 0, val stringValue: String = "" -) : CssProperty() { +) : CssProperty { override fun css(): String = when(type) { MeasurementType.PX -> { @@ -27,6 +29,9 @@ open class Measurement( MeasurementType.PERCENTAGE -> { "${stringValue}%" } + MeasurementType.PICAS -> { + "${stringValue}pc" + } else -> { error("Unhandled type $type") } @@ -38,7 +43,6 @@ enum class FontSizeType { PX, EM, PERCENTAGE, - } class FontSize( diff --git a/src/commonTest/kotlin/nl/astraeus/css/TestCssBuilder.kt b/src/commonTest/kotlin/nl/astraeus/css/TestCssBuilder.kt index ca3a368..c7cbd9d 100644 --- a/src/commonTest/kotlin/nl/astraeus/css/TestCssBuilder.kt +++ b/src/commonTest/kotlin/nl/astraeus/css/TestCssBuilder.kt @@ -1,10 +1,10 @@ package nl.astraeus.css -import kotlin.test.Test +//import kotlin.test.Test object TestCssBuilder { - @Test + //@Test fun testBuilder() { val css = CssBuilder() @@ -15,7 +15,7 @@ object TestCssBuilder { left = em(5) backgroundColor = rgba(255, 255, 255, 0.75) - sel("> a") { + css("> a") { color = hsl(200, 50, 50) } } diff --git a/src/jvmMain/kotlin/nl/astraeus/css/Test.kt b/src/jvmMain/kotlin/nl/astraeus/css/Test.kt index 6e6123f..a29ec5f 100644 --- a/src/jvmMain/kotlin/nl/astraeus/css/Test.kt +++ b/src/jvmMain/kotlin/nl/astraeus/css/Test.kt @@ -3,7 +3,7 @@ package nl.astraeus.css class StyleBase( val mainColor: Color = hsl(128, 50, 50), val mainBackgroundColor: Color = hsl(64, 50, 50), - val mainFont: PlainProperty = plain("Arial") + val mainFont: TextProperty = text("Arial") ) private fun StyleDefinition.sizePX( @@ -64,9 +64,26 @@ fun main() { val css2 = generateCss(StyleBase( hsl(32, 40, 50), hsl(64, 60, 35), - plain("Courier") + text("Courier") )) println(css1) println(css2) + + val sd = css { + css("#pipo") { + backgroundColor = hex("eeeeee") + fontFamily = text("Arial, Courier") + animationDelay = initial() + + css("div") { + color = hex("1b1b1b1") + alignContent = AlignContent.FLEX_START + animationIterationCount = Count.count(3) + } + } + } + + println("======") + println(sd.generateCss()) }