UI.RenderConfig

UI.RenderConfig propagates data for accessibility and responsivity in all components.

The recommended approach is storing it in the app's Model, gathering the required init parameters using Elm's flags. For keeping it update, subscribe to Browser.onResize and apply update using RenderConfig.updateWindow.

RenderConfig.init
    { width = flags.innerWidth
    , height = flags.innerHeight
    }
    RenderConfig.localeEnglish

Building

type alias RenderConfig =

RenderConfig

RenderConfig.RenderConfig upholds all the information required for the components to apply the responsivity and accessibility changes.

init : { window | height : Int, width : Int } -> Locale -> RenderConfig

RenderConfig.init builds a RenderConfig.RenderConfig with the minimum necessary information for responsivity to work.

RenderConfig.init
    { width = 1920
    , height = 1080
    }
    RenderConfig.localeEnglish

Locales

type alias Locale =

Locale

Define how to alterate text and dates to fit a localization profile.

localeEnglish : Locale

Equivalent to en-US according to ISO 639.1 and ISO 3166.

localeSpanish : Locale

Equivalent to es-ES according to ISO 639.1 and ISO 3166.

localeFrench : Locale

Equivalent to fr-FR according to ISO 639.1 and ISO 3166.

Update

updateWindow :

{ window | height : Int, width : Int }

-> RenderConfig

The subscribed event of resizing the browser should reflect on a RenderConfig update. For that, use RenderConfig.updateWindow

RenderConfig.updateWindow
    { width = 1920
    , height = 1080
    }
    oldRenderConfig

updateLocale : Locale -> RenderConfig -> RenderConfig

The subscribed event of resizing the browser should reflect on a RenderConfig update. For that, use RenderConfig.updateWindow

RenderConfig.updateWindow
    { width = 1920
    , height = 1080
    }
    oldRenderConfig

Responsivity

isMobile : RenderConfig -> Bool

True when the browser is a mobile browser.

if RenderConfig.isMobile renderConfig then
    -- Mobile view
else
    -- Desktop view

isPortrait : RenderConfig -> Bool

True when the browser is in portrait orientation and not landscape.

if RenderConfig.isPortrait renderConfig then
    -- Portrait view
else
    -- Landscape view

Layout

elLayoutAttributes : RenderConfig -> List (Attribute msg)

RenderConfig.elLayoutAttributes are the recommended attributes for Element.layout.

If the app is using UI.Document.toBrowserDocument then there is nothing to worry about as it already uses these attributes.

Element.layout (RenderConfig.elLayoutAttributes renderConfig) (appView model)

PaackEng/paack-ui/7.9.0