This is an alternative site for discovering Elm packages. You may be looking for the official Elm package site instead.

Content.Source

Constructors for external source content

Constructors

empty : Content.Source msg

Construct empty source content as a placeholder

svg : (String, Content.Media msg) -> Content.Source msg

Construct SVG content; the first argument gives the path to the external resource and the second argument gives a fallback as Content.Media (use Content.Media.empty if you don't want to include a fallback)

( "logo.svg"
, ("logo.png", "Company Name") |> Content.Media.image
)
  |> Content.Source.svg
  |> Content.Source.container "div"
  |> Dom.Element.toNode

--> <div>
--    <object data="logo.svg" type="image/svg+xml">
--      <img src="logo.png" alt="Company Name">
--    </object>
--  </div>
object : (String, String, Content.Text msg) -> Content.Source msg

Construct external source content using an HTML <object> tag; the first argument gives the path to the external resource, the second argument gives the media type, and the third argument gives a fallback as Content.Text (use Content.Text.empty if you don't want to include a fallback)

( "helloworld.pdf"
, "application/pdf"
, "Click here to download"
  |> Content.text.link ("http://example.com/files/myfile.pdf", False)
)
  |> Content.Source.object
  |> Content.Source.container "div"
  |> Dom.Element.toNode

--> <div>
--    <object data="helloworld.swf" type="application/x-shockwave-flash">
--      <a href="http://example.com/files/myfile.pdf">Click here to download</a>
--    </object>
--  </div>

See https://www.iana.org/assignments/media-types/media-types.xhtml for a list of media type codes.

iframe : String -> Content.Source msg

Construct external source content using an HTML <iframe> tag

"http://elm-lang.org"
  |> Content.Source.iframe
  |> Content.Source.container "div"
  |> Dom.Element.toNode

--> <div>
--    <iframe src="http://elm-lang.org"></iframe>
--  </div>
embed : (String, String) -> Content.Source msg

Construct external source content using an HTML <embed> tag

( "helloworld.swf"
, "application/x-shockwave-flash"
)
  |> Content.Source.embed
  |> Content.Source.container "div"
  |> Dom.Element.toNode

--> <div>
--    <embed src="helloworld.swf" type="application/x-shockwave-flash">
--  </div>

See https://www.iana.org/assignments/media-types/media-types.xhtml for a list of media type codes.

Rendering

container : String -> Content.Source msg -> Dom.Element msg

Place source content in a Dom.Element container, with the HTML tag given in the first argument

module Content.Source exposing
  ( empty, svg, object, iframe, embed, container )

{-| Constructors for external source content

# Constructors
@docs empty, svg, object, iframe, embed

# Rendering
@docs container

-}

import Dom
import Dom.Node
import Dom.Property
import Dom.Element
import Content
import Content.Text
import Content.Media


{-| Construct empty source content as a placeholder
-}
empty : Content.Source msg
empty =
  []
    |> Content.Source


{-| Construct SVG content; the first argument gives the path to the external
resource and the second argument gives a fallback as `Content.Media` (use
`Content.Media.empty` if you don't want to include a fallback)

    ( "logo.svg"
    , ("logo.png", "Company Name") |> Content.Media.image
    )
      |> Content.Source.svg
      |> Content.Source.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, Content.Media msg) -> Content.Source msg
svg (path, fallback) =
  [ ( case fallback of
        Content.Media nodeList ->
          nodeList
    )
      |> Dom.Node.container "object"
        [ "data"
            |> Dom.Property.string path
        , "type"
            |> Dom.Property.string "image/svg+xml"
        ]
  ]
    |> Content.Source


{-| Construct external source content using an HTML `<object>` tag; the first
argument gives the path to the external resource, the second argument gives
the media type, and the third argument gives a fallback as `Content.Text` (use
`Content.Text.empty` if you don't want to include a fallback)

    ( "helloworld.pdf"
    , "application/pdf"
    , "Click here to download"
      |> Content.text.link ("http://example.com/files/myfile.pdf", False)
    )
      |> Content.Source.object
      |> Content.Source.container "div"
      |> Dom.Element.toNode

    --> <div>
    --    <object data="helloworld.swf" type="application/x-shockwave-flash">
    --      <a href="http://example.com/files/myfile.pdf">Click here to download</a>
    --    </object>
    --  </div>

See https://www.iana.org/assignments/media-types/media-types.xhtml for a list
of media type codes.

-}
object : (String, String, Content.Text msg) -> Content.Source msg
object (path, filetype, fallback) =
  [ ( case fallback of
        Content.Text nodeList ->
          nodeList
    )
      |> Dom.Node.container "object"
        [ "data"
            |> Dom.Property.string path
        , "type"
            |> Dom.Property.string filetype
        ]
  ]
    |> Content.Source


{-| Construct external source content using an HTML `<iframe>` tag

    "http://elm-lang.org"
      |> Content.Source.iframe
      |> Content.Source.container "div"
      |> Dom.Element.toNode

    --> <div>
    --    <iframe src="http://elm-lang.org"></iframe>
    --  </div>

-}
iframe : String -> Content.Source msg
iframe path =
  [ [ "src"
      |> Dom.Property.string path
    ]
      |> Dom.Node.leaf "iframe"
  ]
    |> Content.Source


{-| Construct external source content using an HTML `<embed>` tag

    ( "helloworld.swf"
    , "application/x-shockwave-flash"
    )
      |> Content.Source.embed
      |> Content.Source.container "div"
      |> Dom.Element.toNode

    --> <div>
    --    <embed src="helloworld.swf" type="application/x-shockwave-flash">
    --  </div>

See https://www.iana.org/assignments/media-types/media-types.xhtml for a list
of media type codes.

-}
embed : (String, String) -> Content.Source msg
embed (path, filetype) =
  [ [ "src"
      |> Dom.Property.string path
    , "type"
      |> Dom.Property.string filetype
    ]
      |> Dom.Node.leaf "embed"
  ]
    |> Content.Source


{-| Place source content in a `Dom.Element` container, with the HTML tag given
in the first argument
-}
container : String -> Content.Source msg -> Dom.Element msg
container htmlTag sourceContent =
  { tag = htmlTag
  , attributes = []
  , classes = []
  , children =
    ( case sourceContent of
        Content.Source nodeList ->
          nodeList
    )
  , text = ""
  , namespace = ""
  , keys = []
  }