Add <picture> tag

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

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, sizes, 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`.
 -}
@@ -324,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`.