arowM / tepa / Tepa.Dom

This module allows you to manipulate the DOM in various ways.

It covers:

See the Browser.Dom documentation for more detailed notes.

Focus

focus : String -> Tepa.Promise m (Result Error ())

Find a DOM node by id and focus on it. So if you wanted to focus a node like <input type="text" id="search-box"> you could say:

import Tepa exposing (Promise)
import Tepa.Dom as Dom

focusSearchBox : Promise m (Result Dom.Error ())
focusSearchBox =
    Dom.focus "search-box"

In scenario testing, it also simulates the focus event with an empty event object.

This is the TEPA version of Browser.Dom.focus.

blur : String -> Tepa.Promise m (Result Error ())

Find a DOM node by id and make it lose focus. So if you wanted a node like <input type="text" id="search-box"> to lose focus you could say:

import Tepa exposing (Promise)
import Tepa.Dom as Dom

unfocusSearchBox : Promise m (Result Dom.Error ())
unfocusSearchBox =
    Dom.blur "search-box"

In scenario testing, it also simulates the blur event with an empty event object.

This is the TEPA version of Browser.Dom.blur.


type Error
    = NotFound String

Many functions in this module look up DOM nodes up by their id. If you ask for an id that is not in the DOM, you will get this error.

This is the TEPA version of Browser.Dom.Error.

Get Viewport

currentViewport : Tepa.Promise m Viewport

Get information on the current viewport of the browser.

getViewport

(Source: Browser.Dom module document)

If you want to move the viewport around (i.e. change the scroll position) you can use setViewport which change the x and y of the viewport.

In scenario testing, it always resolves to Viewport of all values zero.

This is the TEPA version of Browser.Dom.getViewport.


type alias Viewport =
{ scene : { width : Basics.Float
, height : Basics.Float }
, viewport : { x : Basics.Float
, y : Basics.Float
, width : Basics.Float
, height : Basics.Float } 
}

Same as Browser.Dom.Viewport

All the information about the current viewport.

getViewport

(Source: Browser.Dom module document)

currentViewportOf : String -> Tepa.Promise m (Result Error Viewport)

Just like currentViewport, but for any scrollable DOM node.

See Browser.Dom.getViewportOf for detail and real use cases.

This is the TEPA version of Browser.Dom.getViewportOf.

Set Viewport

setViewport : Basics.Float -> Basics.Float -> Tepa.Promise m ()

Change the x and y offset of the browser viewport immediately. For example, you could make a command to jump to the top of the page:

import Tepa exposing (Promise)
import Tepa.Dom as Dom

resetViewport : Promise m ()
resetViewport =
    Dom.setViewport 0 0

This sets the viewport offset to zero.

In scenario testing, it has no effects.

This is the TEPA version of Browser.Dom.setViewport.

setViewportOf : String -> Basics.Float -> Basics.Float -> Tepa.Promise m (Result Error ())

Change the x and y offset of a DOM node’s viewport by ID. This is common in text messaging and chat rooms, where once the messages fill the screen, you want to always be at the very bottom of the message chain. This way the latest message is always on screen! You could do this:

import Tepa exposing (Promise)
import Tepa.Dom as Dom

jumpToBottom : String -> Promise m (Result Dom.Error ())
jumpToBottom id =
    Tepa.bindAndThen (Dom.currentViewportOf id) <|
        \res ->
            case res of
                Err err ->
                    Tepa.succeed res

                Ok info ->
                    Dom.setViewportOf id 0 info.scene.height

So you could call jumpToBottom "chat-box" whenever you add a new message.

See Browser.Dom.setViewportOf for more detailed notes.

In scenario testing, it also simulates the scroll event with an empty event object on the target node.

This is the TEPA version of Browser.Dom.setViewportOf.

Position

element : String -> Tepa.Promise m (Result Error Element)

Get position information about specific elements.

See Browser.Dom.getElement for detail and real use cases.

In scenario testing, it always resolves to Element of all values zero.

This is the TEPA version of Browser.Dom.getElement.


type alias Element =
{ scene : { width : Basics.Float
, height : Basics.Float }
, viewport : { x : Basics.Float
, y : Basics.Float
, width : Basics.Float
, height : Basics.Float }
, element : { x : Basics.Float
, y : Basics.Float
, width : Basics.Float
, height : Basics.Float } 
}

Same as Browser.Dom.Element

A bunch of information about the position and size of an element relative to the overall scene.

getElement

(Source: Browser.Dom module document)