Skip to content

Latest commit

 

History

History
100 lines (85 loc) · 4.74 KB

README.md

File metadata and controls

100 lines (85 loc) · 4.74 KB

elm-dom

Build Status Elm Package Version

Alternative Elm package for DOM manipulation.

Why? What's wrong with Elms DOM package?

The official DOM package have a different mindset and some missing features (check the comparison below).

This package aims to have a similar API that JavaScript developers are used to, but in a more structured way.

These APIs include:

Without some of these APIs is really difficult to create some UI interactions (dropdowns, drag & drop, etc..), and developers are forced to use unusal methods to replace these (maily abusing decoders as seen in debois/elm-dom) which is not ideal.

Synchronous and Asynchronous APIs

This package provides synchronous and asynchronous versions of the APIs to provide even more flexibility:

Asynchronous functions are the default and they give back a Task to execute:

DOM.getDimensions "some selector"
-- Task DOM.Error DOM.Dimensions

Synchronous functions are executed at runtime and give back a Result:

DOM.getDimensions "some selector"
-- Result DOM.Error DOM.Dimensions

They are identical in every way, just they give back the data in a different format.

API

-- DOM
idSelector : String -> Selector
contains : String -> Bool
isOver : String -> Position -> Result Error Bool
focus : Selector -> Task Error ()
focusSync : Selector -> Result Error ()
blur : Selector -> Task Error ()
blurSync : Selector -> Result Error ()
hasFocusedElement : Task Never Bool
hasFocusedElementSync : () -> Bool
select : Selector -> Task Error ()
selectSync : Selector -> Result Error ()
getDimensions : Selector -> Task Error Dimensions
getDimensionsSync : Selector -> Result Error Dimensions
setScrollLeft : Int -> Selector -> Task Error ()
setScrollLeftSync : Int -> Selector -> Result Error ()
setScrollTop : Int -> Selector -> Task Error ()
setScrollTopSync : Int -> Selector -> Result Error ()
scrollIntoView : Selector -> Task Error ()
scrollIntoViewSync : Selector -> Result Error ()
getScrollLeft : Selector -> Task Error Int
getScrollLeftSync : Selector -> Result Error Int
getScrollTop : Selector -> Task Error Int
getScrollTopSync : Selector -> Result Error Int
setValue : String -> Selector -> Task Error ()
setValueSync : String -> Selector -> Result Error ()
getValue : Selector -> Task Error String
getValueSync : Selector -> Result Error String

-- DOM.Window
scrollTop : () -> Float
scrollLeft : () -> Float
width : () -> Float
height : () -> Float

Missing APIs

If you miss some of the APIs just open an issue or leave a comment on this issue.

DOM Packages Comparison

Here you can find the features of each DOM related package.

Feature gdotdesign/elm-dom elm-lang/dom debois/elm-dom
focus x x
blur x x
set horizontal scroll position x x
get horizontal scroll position x x x
set vertical scroll position x x
get vertical scroll position x x x
scroll an element into the viewport x
get dimensions of an element x x
set value of an element x
get value of an element x
select all text in an input / textarea x
test if an element is over the given position x
test if is there any focused element x