From 84cee1bf92165a6902eb446373f50c34fb0eb46c Mon Sep 17 00:00:00 2001 From: Shagen Ogandzhanian Date: Mon, 14 Jun 2021 14:53:12 +0200 Subject: [PATCH] Add missing image and multimedia HTML elements AREA, AUDIO, MAP, TRACK, VIDEO see https://developer.mozilla.org/en-US/docs/Web/HTML/Element --- .../androidx/compose/web/elements/Base.kt | 12 ++++ .../androidx/compose/web/elements/Elements.kt | 65 +++++++++++++++++++ .../jsTest/kotlin/elements/ElementsTests.kt | 11 ++++ 3 files changed, 88 insertions(+) diff --git a/web/core/src/jsMain/kotlin/androidx/compose/web/elements/Base.kt b/web/core/src/jsMain/kotlin/androidx/compose/web/elements/Base.kt index b7f8a66887..4daf31e1d5 100644 --- a/web/core/src/jsMain/kotlin/androidx/compose/web/elements/Base.kt +++ b/web/core/src/jsMain/kotlin/androidx/compose/web/elements/Base.kt @@ -14,8 +14,11 @@ import org.jetbrains.compose.web.DomApplier import org.jetbrains.compose.web.DomElementWrapper import org.jetbrains.compose.web.attributes.AttrsBuilder import kotlinx.browser.document +import org.w3c.dom.Audio import org.w3c.dom.Element import org.w3c.dom.HTMLAnchorElement +import org.w3c.dom.HTMLAreaElement +import org.w3c.dom.HTMLAudioElement import org.w3c.dom.HTMLBRElement import org.w3c.dom.HTMLButtonElement import org.w3c.dom.HTMLDivElement @@ -27,6 +30,7 @@ import org.w3c.dom.HTMLImageElement import org.w3c.dom.HTMLInputElement import org.w3c.dom.HTMLLIElement import org.w3c.dom.HTMLLabelElement +import org.w3c.dom.HTMLMapElement import org.w3c.dom.HTMLOListElement import org.w3c.dom.HTMLOptGroupElement import org.w3c.dom.HTMLOptionElement @@ -42,7 +46,9 @@ import org.w3c.dom.HTMLTableElement import org.w3c.dom.HTMLTableRowElement import org.w3c.dom.HTMLTableSectionElement import org.w3c.dom.HTMLTextAreaElement +import org.w3c.dom.HTMLTrackElement import org.w3c.dom.HTMLUListElement +import org.w3c.dom.HTMLVideoElement @OptIn(ComposeCompilerApi::class) @Composable @@ -93,6 +99,12 @@ interface ElementBuilder { val Aside: ElementBuilder = ElementBuilderImplementation("aside") val Header: ElementBuilder = ElementBuilderImplementation("header") + val Area: ElementBuilder = ElementBuilderImplementation("area") + val Audio: ElementBuilder = ElementBuilderImplementation("audio") + val Map: ElementBuilder = ElementBuilderImplementation("map") + val Track: ElementBuilder = ElementBuilderImplementation("track") + val Video: ElementBuilder = ElementBuilderImplementation("video") + val Div: ElementBuilder = ElementBuilderImplementation("div") val A: ElementBuilder = ElementBuilderImplementation("a") val Input: ElementBuilder = ElementBuilderImplementation("input") diff --git a/web/core/src/jsMain/kotlin/androidx/compose/web/elements/Elements.kt b/web/core/src/jsMain/kotlin/androidx/compose/web/elements/Elements.kt index 0a99ce3f71..5d03035ec0 100644 --- a/web/core/src/jsMain/kotlin/androidx/compose/web/elements/Elements.kt +++ b/web/core/src/jsMain/kotlin/androidx/compose/web/elements/Elements.kt @@ -16,6 +16,8 @@ import org.jetbrains.compose.web.attributes.type import org.jetbrains.compose.web.attributes.value import kotlinx.browser.document import org.w3c.dom.HTMLAnchorElement +import org.w3c.dom.HTMLAreaElement +import org.w3c.dom.HTMLAudioElement import org.w3c.dom.HTMLBRElement import org.w3c.dom.HTMLButtonElement import org.w3c.dom.HTMLDivElement @@ -27,6 +29,7 @@ import org.w3c.dom.HTMLImageElement import org.w3c.dom.HTMLInputElement import org.w3c.dom.HTMLLIElement import org.w3c.dom.HTMLLabelElement +import org.w3c.dom.HTMLMapElement import org.w3c.dom.HTMLOListElement import org.w3c.dom.HTMLOptGroupElement import org.w3c.dom.HTMLOptionElement @@ -41,7 +44,9 @@ import org.w3c.dom.HTMLTableElement import org.w3c.dom.HTMLTableRowElement import org.w3c.dom.HTMLTableSectionElement import org.w3c.dom.HTMLTextAreaElement +import org.w3c.dom.HTMLTrackElement import org.w3c.dom.HTMLUListElement +import org.w3c.dom.HTMLVideoElement import org.w3c.dom.Text typealias AttrBuilderContext = AttrsBuilder.() -> Unit @@ -95,6 +100,66 @@ fun Header( ) } +@Composable +fun Area( + attrs: AttrBuilderContext = {}, + content: ContentBuilder? = null +) { + TagElement( + elementBuilder = ElementBuilder.Area, + applyAttrs = attrs, + content = content + ) +} + +@Composable +fun Audio( + attrs: AttrBuilderContext = {}, + content: ContentBuilder? = null +) { + TagElement( + elementBuilder = ElementBuilder.Audio, + applyAttrs = attrs, + content = content + ) +} + +@Composable +fun HTMLMap( + attrs: AttrBuilderContext = {}, + content: ContentBuilder? = null +) { + TagElement( + elementBuilder = ElementBuilder.Map, + applyAttrs = attrs, + content = content + ) +} + +@Composable +fun Track( + attrs: AttrBuilderContext = {}, + content: ContentBuilder? = null +) { + TagElement( + elementBuilder = ElementBuilder.Track, + applyAttrs = attrs, + content = content + ) +} + +@Composable +fun Video( + attrs: AttrBuilderContext = {}, + content: ContentBuilder? = null +) { + TagElement( + elementBuilder = ElementBuilder.Video, + applyAttrs = attrs, + content = content + ) +} + @Composable fun Text(value: String) { ComposeNode( diff --git a/web/core/src/jsTest/kotlin/elements/ElementsTests.kt b/web/core/src/jsTest/kotlin/elements/ElementsTests.kt index a4ed41b57d..9e7fcf700d 100644 --- a/web/core/src/jsTest/kotlin/elements/ElementsTests.kt +++ b/web/core/src/jsTest/kotlin/elements/ElementsTests.kt @@ -10,8 +10,10 @@ import org.jetbrains.compose.web.attributes.AttrsBuilder import org.jetbrains.compose.web.core.tests.runTest import org.jetbrains.compose.web.dom.A import org.jetbrains.compose.web.dom.Address +import org.jetbrains.compose.web.dom.Area import org.jetbrains.compose.web.dom.Article import org.jetbrains.compose.web.dom.Aside +import org.jetbrains.compose.web.dom.Audio import org.jetbrains.compose.web.dom.B import org.jetbrains.compose.web.dom.Br import org.jetbrains.compose.web.dom.Button @@ -30,6 +32,7 @@ import org.jetbrains.compose.web.dom.H3 import org.jetbrains.compose.web.dom.H4 import org.jetbrains.compose.web.dom.H5 import org.jetbrains.compose.web.dom.H6 +import org.jetbrains.compose.web.dom.HTMLMap import org.jetbrains.compose.web.dom.Header import org.jetbrains.compose.web.dom.Hr import org.jetbrains.compose.web.dom.I @@ -56,7 +59,9 @@ import org.jetbrains.compose.web.dom.Tfoot import org.jetbrains.compose.web.dom.Th import org.jetbrains.compose.web.dom.Thead import org.jetbrains.compose.web.dom.Tr +import org.jetbrains.compose.web.dom.Track import org.jetbrains.compose.web.dom.Ul +import org.jetbrains.compose.web.dom.Video import org.w3c.dom.HTMLElement import org.w3c.dom.get import kotlin.test.Test @@ -71,6 +76,12 @@ class ElementsTests { Pair({ Aside() }, "ASIDE"), Pair({ Header() }, "HEADER"), + Pair({ Area() }, "AREA"), + Pair({ Audio() }, "AUDIO"), + Pair({ HTMLMap() }, "MAP"), + Pair({ Track() }, "TRACK"), + Pair({ Video() }, "VIDEO"), + Pair({ Div() }, "DIV"), Pair({ A() }, "A"), Pair({ Button() }, "BUTTON"),