Keyframerules (#3)

* add border property

* change to Visitor pattern

* Add converter for Css Media/FontFace/KeyFrames-Rules

Co-authored-by: Jens Klingenberg <[email protected]>

Author: Foso

converter/src/main/kotlin/de/jensklingenberg/htmltocfw/converter/Attributes.kt

@@ -1,11 +1,17 @@
 package de.jensklingenberg.htmltocfw.converter
 
+import de.jensklingenberg.htmltocfw.converter.node.ComposeAttribute
 import org.jsoup.nodes.Attribute
 
+fun parseAttributes(attributesList: List<Attribute>): String {
+    return parseAttributes(attributesList.map { ComposeAttribute(it.key,it.value) })
+}
+
 /**
  *
  */
-fun parseAttributes(attributesList: List<Attribute>): String {
+@JvmName("parseAttributes1")
+fun parseAttributes(attributesList: List<ComposeAttribute>): String {
 
     var str = ""
     attributesList.forEachIndexed { index, attribute ->
@@ -21,7 +27,7 @@ fun parseAttributes(attributesList: List<Attribute>): String {
                 "draggable(Draggable.${attribute.value.capitalize()})"
             }
             "style" -> {
-                parseStyleText(attribute)
+                parseStyleText(ComposeAttribute(attribute.key,attribute.value))
             }
             "required", "hidden", "selected", "disabled" -> {
                 attribute.key + "()"
@@ -45,6 +51,7 @@ fun parseAttributes(attributesList: List<Attribute>): String {
             }
         }
         str += "\n"
+
         if (index == attributesList.lastIndex) {
             str += "}"
         }

converter/src/main/kotlin/de/jensklingenberg/htmltocfw/converter/Main.kt

@@ -1,5 +1,7 @@
 package de.jensklingenberg.htmltocfw.converter
 
+import de.jensklingenberg.htmltocfw.converter.node.LayoutNode
+import de.jensklingenberg.htmltocfw.converter.visitor.MyVisitor
 import de.jensklingenberg.htmltocfw.converter.node.getMyNode
 import org.jsoup.parser.ParseSettings
 import org.jsoup.parser.Parser
@@ -8,11 +10,11 @@ import java.io.File
 fun main() {
 
     val html =
-        File("/Users/jklingenberg/Code/2021/jk/HtmlToComposeWebConverter/converter/src/main/kotlin/de/jensklingenberg/htmltocfw/converter/html.text").readText()
+        File("/home/jens/Code/2021/jk/HtmlToComposeWeb/converter/src/main/kotlin/de/jensklingenberg/htmltocfw/converter/html.text").readText()
 
     val text = htmlToCompose(html)
 
-    File("/Users/jklingenberg/Code/2021/jk/HtmlToComposeWebConverter/converter/src/main/kotlin/de/jensklingenberg/htmltocfw/converter/Result.txt").writeText(
+    File("/home/jens/Code/2021/jk/HtmlToComposeWeb/converter/src/main/kotlin/de/jensklingenberg/htmltocfw/converter/Result.txt").writeText(
         text
     )
 }
@@ -33,14 +35,14 @@ fun htmlToCompose(html: String): String {
         getMyNode(node).toString()
     }
 
-    val wrappedBody = if (hasStyle) {
+    val bodyContent = if (hasStyle) {
         "Style(appStylesheet())\n$body"
     } else {
         body
     }
 
 
-    return "@Composable\nfun GeneratedComposable(){\n $head \n$wrappedBody}\n"
+    return "@Composable\nfun GeneratedComposable(){\n $head \n$bodyContent}\n"
 }
 
 

converter/src/main/kotlin/de/jensklingenberg/htmltocfw/converter/Result.txt

@@ -1,258 +1,33 @@
 @Composable
 fun GeneratedComposable(){
- document.title="Page Title"
-fun appStylesheet() = object : StyleSheet() {
-init {
-"*" style { 
-boxSizing("border-box")
-}
-"body" style { 
-fontFamily("Arial")
-property("margin","0")
-}
-".header" style { 
-padding(60.px)
-textAlign("center")
-property("background","#1abc9c")
-property("color","white")
-}
-".navbar" style { 
-display(DisplayStyle.Flex)
-property("background-color","#333")
-}
-".navbar a" style { 
-property("color","white")
-padding(14.px, 20.px)
-textDecoration("none")
-textAlign("center")
-}
-".navbar a:hover" style { 
-property("background-color","#ddd")
-property("color","black")
-}
-".row" style { 
-display(DisplayStyle.Flex)
-flexWrap(FlexWrap.Wrap)
-}
-".side" style { 
-property("flex","30%")
-property("background-color","#f1f1f1")
-padding(20.px)
-}
-".main" style { 
-property("flex","70%")
-property("background-color","white")
-padding(20.px)
-}
-".fakeimg" style { 
-property("background-color","#aaa")
-width(100.percent)
-padding(20.px)
-}
-".footer" style { 
-padding(20.px)
-textAlign("center")
-property("background","#ddd")
+ fun appStylesheet() = object : StyleSheet() {
+fun fontFace() {
+val newStyle = document.getElementsByTagName("style")[0] ?: document.createElement("style")
+
+newStyle.append(
+document.createTextNode("""@font-face {
+font-family:myFirstFont;
+src:url(sansation_light.woff);
 }
-media("(max-width:700px)") {
-".row, .navbar" style { 
-flexDirection(FlexDirection.Column)
+""")
+)
+
+document.head?.appendChild(newStyle);
 }
+init {
+fontFace()
+"div" style { 
+property("font-family","myFirstFont")
 }
 }}
 
 Style(appStylesheet())
-// Note 
-Div (attrs = {
-style {
-property("background","yellow")
-padding(5.px)
-}
-}){
-H4 (attrs = {
-style {
-textAlign("center")
-}
-}){
-Text("Resize the browser window to see the responsive effect.")
-
-}
-
-}
-// Header 
-Div (attrs = {
-classes("header")
-}){
 H1 {
-Text("My Website")
-
-}
-P {
-Text("With a ")
-B {
-Text("flexible")
-
-}
-Text(" layout.")
-
-}
-
-}
-// Navigation Bar 
-Div (attrs = {
-classes("navbar")
-}){
-A (href = "#"){
-Text("Link")
-
-}
-A (href = "#"){
-Text("Link")
-
-}
-A (href = "#"){
-Text("Link")
-
-}
-A (href = "#"){
-Text("Link")
-
-}
-
-}
-// The flexible grid (content) 
-Div (attrs = {
-classes("row")
-}){
-Div (attrs = {
-classes("side")
-}){
-H2 {
-Text("About Me")
-
-}
-H5 {
-Text("Photo of me:")
-
-}
-Div (attrs = {
-classes("fakeimg")
-style {
-height(200.px)
-}
-}){
-Text("Image")
-
-}
-P {
-Text("Some text about me in culpa qui officia deserunt mollit anim..")
-
-}
-H3 {
-Text("More Text")
-
-}
-P {
-Text("Lorem ipsum dolor sit ame.")
-
-}
-Div (attrs = {
-classes("fakeimg")
-style {
-height(60.px)
-}
-}){
-Text("Image")
-
-}
-Br {}
-Div (attrs = {
-classes("fakeimg")
-style {
-height(60.px)
-}
-}){
-Text("Image")
-
-}
-Br {}
-Div (attrs = {
-classes("fakeimg")
-style {
-height(60.px)
-}
-}){
-Text("Image")
-
-}
-
-}
-Div (attrs = {
-classes("main")
-}){
-H2 {
-Text("TITLE HEADING")
-
-}
-H5 {
-Text("Title description, Dec 7, 2017")
-
-}
-Div (attrs = {
-classes("fakeimg")
-style {
-height(200.px)
-}
-}){
-Text("Image")
-
-}
-P {
-Text("Some text..")
-
-}
-P {
-Text("Sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.")
-
-}
-Br {}
-H2 {
-Text("TITLE HEADING")
-
-}
-H5 {
-Text("Title description, Sep 2, 2017")
-
-}
-Div (attrs = {
-classes("fakeimg")
-style {
-height(200.px)
-}
-}){
-Text("Image")
-
-}
-P {
-Text("Some text..")
-
-}
-P {
-Text("Sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.")
-
-}
-
-}
-
-}
-// Footer 
-Div (attrs = {
-classes("footer")
-}){
-H2 {
-Text("Footer")
+Text("The @font-face Rule")
 
 }
+Div {
+Text("With CSS, websites can finally use fonts other than the pre selected \"web-safe\" fonts.")
 
 }
 }