Alternative Elm package for DOM manipulation.
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:
- document.elementFromPoint() to test if an element is over a point (usually the cursor)
- Element.getBoundingClientRect() to get dimensions
- Element.select() to select text in inputs and textareas
- Element.focus() to focus elements
- Element.blur() to blur elements
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.
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.DimensionsSynchronous functions are executed at runtime and give back a Result:
DOM.getDimensions "some selector" -- Result DOM.Error DOM.DimensionsThey are identical in every way, just they give back the data in a different format.
-- 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 : () -> FloatIf you miss some of the APIs just open an issue or leave a comment on this issue.
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 |