Contructors for graphic content (e.g., a brand logo) that may be stored as a raster image, a vector graphics file, or a font icon
Construct empty graphic content as a placeholder
Content.Graphic.empty
|> Content.Graphic.container "figure"
|> Dom.Element.toNode
--> <figure></figure>
Construct PNG graphic content, with alt text
( "logo.png"
, "Company Logo"
)
|> Content.Graphic.png
|> Content.Graphic.container "div"
|> Dom.Element.toNode
--> <div>
-- <img src="logo.png" alt="Company Logo">
-- </div>
Construct SVG graphic content, with a raster image fallback and alt text
( "logo.svg"
, "logo.png"
, "Company Logo"
)
|> Content.Graphic.svg
|> Content.Graphic.container "div"
|> Dom.Element.toNode
--> <div>
-- <object data="logo.svg" type="image/svg+xml">
-- <img src="logo.png" alt="Company Name">
-- </object>
-- </div>
Construct font-icon graphic content
"android"
|> Content.Icon.material
|> Content.Graphic.glyph
|> Content.Graphic.container "div"
|> Dom.Element.toNode
--> <div>
-- <i class="material-icons">android</i>
-- </div>
Place graphic content in a Dom.Element
container, with the HTML tag given
in the first argument
module Content.Graphic exposing
( empty, png, svg, glyph
, container
)
{-| Contructors for graphic content (e.g., a brand logo) that may be stored
as a raster image, a vector graphics file, or a font icon
# Constructors
@docs empty, png, svg, glyph
# Rendering
@docs container
-}
import Dom
import Content exposing (Graphic(..))
import Content.Media
import Content.Source
import Content.Icon
{-| Construct empty graphic content as a placeholder
Content.Graphic.empty
|> Content.Graphic.container "figure"
|> Dom.Element.toNode
--> <figure></figure>
-}
empty : Content.Graphic msg
empty =
Content.Media.empty
|> Png
{-| Construct PNG graphic content, with alt text
( "logo.png"
, "Company Logo"
)
|> Content.Graphic.png
|> Content.Graphic.container "div"
|> Dom.Element.toNode
--> <div>
-- <img src="logo.png" alt="Company Logo">
-- </div>
-}
png : (String, String) -> Content.Graphic msg
png (path, alt) =
(path, alt)
|> Content.Media.image
|> Png
{-| Construct SVG graphic content, with a raster image fallback and alt text
( "logo.svg"
, "logo.png"
, "Company Logo"
)
|> Content.Graphic.svg
|> Content.Graphic.container "div"
|> Dom.Element.toNode
--> <div>
-- <object data="logo.svg" type="image/svg+xml">
-- <img src="logo.png" alt="Company Name">
-- </object>
-- </div>
-}
svg : (String, String, String) -> Content.Graphic msg
svg (path, fallback, alt) =
( case (fallback, alt) of
("", "") ->
Content.Media.empty
(_, _) ->
(fallback, alt)
|> Content.Media.image
)
|> (,) path
|> Content.Source.svg
|> Svg
{-| Construct font-icon graphic content
"android"
|> Content.Icon.material
|> Content.Graphic.glyph
|> Content.Graphic.container "div"
|> Dom.Element.toNode
--> <div>
-- <i class="material-icons">android</i>
-- </div>
-}
glyph : Content.Icon msg -> Content.Graphic msg
glyph =
Glyph
{-| Place graphic content in a `Dom.Element` container, with the HTML tag given
in the first argument
-}
container : String -> Content.Graphic msg -> Dom.Element msg
container htmlTag graphic =
case graphic of
Png media ->
media
|> Content.Media.container htmlTag
Svg source ->
source
|> Content.Source.container htmlTag
Glyph icon ->
icon
|> Content.Icon.container htmlTag