From f677105a22ff6ede0694c6bf5ec3e78cfe5677ee Mon Sep 17 00:00:00 2001
From: Casey Webb <notcaseywebb@gmail.com>
Date: Tue, 14 Jun 2022 22:57:11 -0500
Subject: [PATCH 1/3] Add picture element
---
src/Html.elm | 8 ++++++--
1 file changed, 6 insertions(+), 2 deletions(-)
diff --git a/src/Html.elm b/src/Html.elm
index 70b8645..59072ed 100644
--- a/src/Html.elm
+++ b/src/Html.elm
@@ -5,7 +5,7 @@ module Html exposing
, div, p, hr, pre, blockquote
, span, a, code, em, strong, i, b, u, sub, sup, br
, ol, ul, li, dl, dt, dd
- , img, iframe, canvas, math
+ , img, picture, iframe, canvas, math
, form, input, textarea, button, select, option
, section, nav, article, aside, header, footer, address, main_
, figure, figcaption
@@ -40,7 +40,7 @@ expect to use frequently will be closer to the top.
@docs ol, ul, li, dl, dt, dd
## Embedded Content
-@docs img, iframe, canvas, math
+@docs img, picture, iframe, canvas, math
## Inputs
@docs form, input, textarea, button, select, option
@@ -590,6 +590,10 @@ img : List (Attribute msg) -> List (Html msg) -> Html msg
img =
Elm.Kernel.VirtualDom.node "img"
+{-| Represents an image using one of many possible sources -}
+picture : List (Attribute msg) -> List (Html msg) -> Html msg
+picture =
+ Elm.Kernel.VirtualDom.node "picture"
{-| Embedded an HTML document. -}
iframe : List (Attribute msg) -> List (Html msg) -> Html msg
From d851b85fc55fe4a0f61dc275d9afb7bc3ae28acb Mon Sep 17 00:00:00 2001
From: Casey Webb <notcaseywebb@gmail.com>
Date: Tue, 14 Jun 2022 23:47:10 -0500
Subject: [PATCH 2/3] Add srcset attribute
---
src/Html/Attributes.elm | 37 ++++++++++++++++++++++++++++++++++---
1 file changed, 34 insertions(+), 3 deletions(-)
diff --git a/src/Html/Attributes.elm b/src/Html/Attributes.elm
index 652fc62..7f48b34 100644
--- a/src/Html/Attributes.elm
+++ b/src/Html/Attributes.elm
@@ -1,5 +1,6 @@
module Html.Attributes exposing
- ( style, property, attribute, map
+ ( SrcsetImageSizeDescriptor
+ , style, property, attribute, map
, class, classList, id, title, hidden
, type_, value, checked, placeholder, selected
, accept, acceptCharset, action, autocomplete, autofocus
@@ -9,7 +10,7 @@ module Html.Attributes exposing
, cols, rows, wrap
, href, target, download, hreflang, media, ping, rel
, ismap, usemap, shape, coords
- , src, height, width, alt
+ , src, srcset, height, width, alt
, autoplay, controls, loop, preload, poster, default, kind, srclang
, sandbox, srcdoc
, reversed, start
@@ -52,7 +53,7 @@ just search the page for `video` if you want video stuff.
# Embedded Content
-@docs src, height, width, alt
+@docs src, srcset, height, width, alt
## Audio and Video
@docs autoplay, controls, loop, preload, poster, default, kind, srclang
@@ -309,6 +310,36 @@ src url =
stringProperty "src" (Elm.Kernel.VirtualDom.noJavaScriptOrHtmlUri url)
+{-| Image size descriptor for `srcset` source
+-}
+type SrcsetImageSizeDescriptor
+ = PixelWidth Int
+ | PixelDensity Number
+
+
+{-| Declare the source set of a `source` within a `picture`
+-}
+srcset : List ( String, Maybe SrcsetImageSizeDescriptor ) -> Attribute msg
+srcset sources =
+ List.map
+ (\( src, size ) ->
+ Elm.Kernel.VirtualDom.noJavaScriptOrHtmlUri src
+ ++ (case size of
+ Just (Width px) ->
+ " " ++ String.fromInt px ++ "w"
+
+ Just (PixelDensity d) ->
+ " " ++ String.fromFloat d ++ "x"
+
+ Nothing ->
+ ""
+ )
+ )
+ sources
+ |> String.join ", "
+ |> stringProperty "srcset"
+
+
{-| Declare the height of a `canvas`, `embed`, `iframe`, `img`, `input`,
`object`, or `video`.
-}
From 73fb65d74fdda219b8c96a44d95612a0051ee4cb Mon Sep 17 00:00:00 2001
From: Casey Webb <notcaseywebb@gmail.com>
Date: Wed, 15 Jun 2022 00:02:12 -0500
Subject: [PATCH 3/3] Add sizes attribute
---
src/Html/Attributes.elm | 7 ++++++-
1 file changed, 6 insertions(+), 1 deletion(-)
diff --git a/src/Html/Attributes.elm b/src/Html/Attributes.elm
index 7f48b34..c35da82 100644
--- a/src/Html/Attributes.elm
+++ b/src/Html/Attributes.elm
@@ -10,7 +10,7 @@ module Html.Attributes exposing
, cols, rows, wrap
, href, target, download, hreflang, media, ping, rel
, ismap, usemap, shape, coords
- , src, srcset, height, width, alt
+ , src, srcset, height, width, sizes, alt
, autoplay, controls, loop, preload, poster, default, kind, srclang
, sandbox, srcdoc
, reversed, start
@@ -355,6 +355,11 @@ width : Int -> Attribute msg
width n =
Elm.Kernel.VirtualDom.attribute "width" (String.fromInt n)
+{-| Declare the final rendered sizes of a picture `source` for a set of media queries
+-}
+sizes : String -> Attribute msg
+sizes =
+ stringProperty "sizes"
{-| Alternative text in case an image can't be displayed. Works with `img`,
`area`, and `input`.