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

Dom.Attribute

Set the value of a content attribute

The functions in this module wrap VirtualDom.attribute, which should always be used when setting attributes on SVG nodes and may also be used to set nonstandard HTML attributes.

See here for some background on when to use the functions in this module versus the functions in Dom.Property.

string : String -> String -> VirtualDom.Property msg

Set an attribute by giving its value as a string; the first argument gives the value and the second argument gives the key

myGraphics
  |> Dom.Svg.container "svg"
    [ "viewbox"
      |> Dom.Attribute.string "0 0 400 400"
    ]
int : Int -> String -> VirtualDom.Property msg

Set an attribute by giving its value as an integer, which will be converted to a string; the first argument gives the value and the second argument gives the key

"Hello World!"
  |> Dom.Svg.textWrapper "text"
    [ "x"
      |> Dom.Attribute.int 200
    , "y"
      |> Dom.Attribute.int 200
    ]
float : Float -> String -> VirtualDom.Property msg

Set an attribute by giving its value as a floating point number, which will be converted to a string; the first argument gives the value and the second argument gives the key

myShapeElement
  |> Dom.Element.addAttribute
    ( "stroke-width"
      |> Dom.Attribute.float 0.5
    )
namespaced : (String, String) -> String -> String -> VirtualDom.Property msg

Set an attribute in a given namespace; the first argument gives the namespace prefix and URL, the second argument is the value, and the third argument is the key

"script"
  |> Dom.Element.leaf
  |> Dom.Element.withAttributes
    [ "href"
      |> Dom.Attribute.namespaced ("xlink", "http://www.w3.org/1999/xlink") "cool-script.js"
    , "type"
      |> Dom.Attribute.string "text/ecmascript"
    ]

See here for an explanation of the use of namespaces in XML generally, and in SVG more specifically.

module Dom.Attribute exposing
  ( string, int, float, namespaced )

{-|

Set the value of a
[content attribute](http://developer.mozilla.org/en-US/docs/Web/HTML/Attributes#Content_versus_IDL_attributes)

The functions in this module wrap `VirtualDom.attribute`, which should always
be used when setting attributes on SVG nodes and may also be used to set
nonstandard HTML attributes.

See
[here](https://stackoverflow.com/questions/3919291/when-to-use-setattribute-vs-attribute-in-javascript)
for some background on when to use the functions in this module versus the
functions in `Dom.Property`.

@docs string, int, float, namespaced

-}

import VirtualDom
import Json.Encode


{-| Set an attribute by giving its value as a string; the first argument gives
the *value* and the second argument gives the *key*

    myGraphics
      |> Dom.Svg.container "svg"
        [ "viewbox"
          |> Dom.Attribute.string "0 0 400 400"
        ]

-}
string : String -> String -> VirtualDom.Property msg
string value key =
  value
    |> VirtualDom.attribute key


{-| Set an attribute by giving its value as an integer, which will be converted
to a string; the first argument gives the *value* and the second argument gives
the *key*

    "Hello World!"
      |> Dom.Svg.textWrapper "text"
        [ "x"
          |> Dom.Attribute.int 200
        , "y"
          |> Dom.Attribute.int 200
        ]

-}
int : Int -> String -> VirtualDom.Property msg
int value key =
  value
    |> toString
    |> VirtualDom.attribute key


{-| Set an attribute by giving its value as a floating point number, which will
be converted to a string; the first argument gives the *value* and the second
argument gives the *key*

    myShapeElement
      |> Dom.Element.addAttribute
        ( "stroke-width"
          |> Dom.Attribute.float 0.5
        )

-}
float : Float -> String -> VirtualDom.Property msg
float  value key =
  value
    |> toString
    |> VirtualDom.attribute key


{-| Set an attribute in a given namespace; the first argument gives the
namespace prefix and URL, the second argument is the value, and the third
argument is the key

    "script"
      |> Dom.Element.leaf
      |> Dom.Element.withAttributes
        [ "href"
          |> Dom.Attribute.namespaced ("xlink", "http://www.w3.org/1999/xlink") "cool-script.js"
        , "type"
          |> Dom.Attribute.string "text/ecmascript"
        ]

See
[here](https://developer.mozilla.org/en-US/docs/Web/SVG/Namespaces_Crash_Course)
for an explanation of the use of namespaces in XML generally, and in SVG more
specifically.

-}
namespaced : (String, String) -> String -> String -> VirtualDom.Property msg
namespaced (prefix, url) value key =
  value
    |> VirtualDom.attributeNS url (prefix ++ ":" ++ key)