upsiflu / less-ui / Less.Ui.Html

Default types and functions for working with elm/html within Less.Ui


type alias Html region narrowMsg msg =
Less.Ui.Ui region (HtmlList (Less.Link.Msg msg)) (Wrapper region narrowMsg msg)

🐌

html : HtmlList msg -> Html region_ narrowMsg_ msg

🐌

Create Links

Read more in the Link module.

toggle : List (Html.Attribute Basics.Never) -> { flag : Less.Link.Flag, inHeader : Basics.Bool, label : HtmlList msg } -> Html region narrowMsg msg -> Html region narrowMsg msg

Toggle a Flag and show/hide the associated Ui accordingly. Will add the flag when the link is opened in a new tab or shared, no matter its state in the current tab.

Flag is a string and may contain "=".

atFlag : Less.Link.Flag -> Html region narrowMsg msg -> Html region narrowMsg msg

Show a Ui exactly when a certain Flag is present in the Url. Use toggle to let the user toggle the flag.

goTo : List (Html.Attribute Basics.Never) -> { destination : Less.Link.Location, inHeader : Basics.Bool, label : HtmlList msg } -> Html region narrowMsg msg -> Html region narrowMsg msg

Navigate to a destination and show the nested Ui when it's reached.

bounce : List (Html.Attribute Basics.Never) -> { there : Less.Link.Location, here : Less.Link.Location, label : HtmlList msg } -> Html region narrowMsg msg -> Html region narrowMsg msg

Navigate to there, and from there, back here. Will navigate there when the link is opened in a new tab or shared.

filter : Less.Link.Category -> (List Less.Link.SearchTerm -> Html region narrowMsg msg) -> Html region narrowMsg msg

Show a Ui according to what searchTerms are currently associated with a given category.

-- Show a token for each SearchTerm in category "search=a"
List.concatMap viewToken
    |> filter "search"

search : List (Html.Attribute Basics.Never) -> { category : Less.Link.Category, inHeader : Basics.Bool, label : HtmlList msg } -> (List Less.Link.SearchTerm -> Html region narrowMsg msg) -> Html region narrowMsg msg

Display a search box and show a Ui according to what searchTerms are currently associated with a given category.

Wrap the DOM

section : List (Html.Attribute msg) -> Html region narrowMsg msg -> Html region narrowMsg msg

From w3.org:

The section element represents a generic section of a document or application. A section, in this context, is a thematic grouping of content, typically with a heading.

article : List (Html.Attribute msg) -> Html region narrowMsg msg -> Html region narrowMsg msg

From w3.org:

The article element represents a self-contained composition in a document, page, application, or site and that is, in principle, independently distributable or reusable, e.g. in syndication.

node : String -> List (Html.Attribute msg) -> Html region narrowMsg msg -> Html region narrowMsg msg

Wrap all parts of the Ui that are in the current region in an arbitrary Html node.

node "div" [] myUi

disclose : List (Html.Attribute msg) -> { summary : Html region narrowMsg msg, summaryAttrs : List (Html.Attribute msg) } -> Html region narrowMsg msg -> Html region narrowMsg msg

From w3.org:

The details element represents a disclosure widget from which the user can obtain additional information or controls.

The summary element child of the element, if any, represents the summary or legend of the details.

Notes:

ol : List (Html.Attribute msg) -> List ( String, Html region narrowMsg msg ) -> Html region narrowMsg msg

Ordered List

ul : List (Html.Attribute msg) -> List ( String, Html region narrowMsg msg ) -> Html region narrowMsg msg

Unordered List

keyedNode : String -> List (Html.Attribute msg) -> List ( String, Html region narrowMsg msg ) -> Html region narrowMsg msg

Key a node with Tuple.pair "uniqueKey" such that the vDom diffing algorithm preserves it even when it changes position in the list.

Note ul and ol.

The functionality is taken directly from the standard library Html.Keyed.

nest : { regions : List region, combine : { makeInnerHtml : NarrowUi region narrowMsg -> Maybe (HtmlList (Less.Link.Msg narrowMsg)) } -> HtmlList (Less.Link.Msg msg) } -> Html region narrowMsg msg

Gives your Html widgets access to state information.

For example, if you want to extend a widget or form generator (elm-any-type-forms) that can only output Html with Ui elements that alter and respond to the Url, then you need

Here is how you use this function:

  1. Write the Ui code for your widget extension. You can use all the local parameters your widget provides.

  2. Convert it to Html (Msg narrowMsg) using makeInnerHtml to make it fit inside your widget.

  3. Your widget will create Html (Msg msg). The function you wrote for drawing the widget is the combine function that you can now nest.

Caution: If you use this functionality, the Ui will contain functions and will no longer support equality checks and serialisation.

Note: As of now, the type setup will limit you to nest one layer deep, i.e. the compiler will complain if you try to nest Ui in a widget that is part of the Ui nested in another widget. This is because the inside of the widget uses a different message type than the outside of the widget. As of now, I see no other way to mitigate than to use code generation in order to write out the narrower nested types. I've never done code generation, and I don't feel comfortable with long types, so I'll leave it to you.

Provide a Layout

layout : Less.Ui.Layout region (HtmlList (Less.Link.Msg narrowMsg)) (HtmlList (Less.Link.Msg msg)) (Wrapper region narrowMsg narrowMsg) (Wrapper region narrowMsg msg)

Note: If you want to use screen regions, replace the arrange field. An example is given at arrangeOverDefaultRegions

import Less.Ui.Html exposing (layout)

{ layout | arrange = Less.Ui.Html.arrangeOverDefaultRegions }

animations : Html region_ msg_ narrowMsg_

Add delightful css transitions to reflect the Url transitions.

Works best when little additional css is added to your app.

arrangeOverDefaultRegions : { header : Maybe (HtmlList msg), region : Region -> Maybe (HtmlList msg) } -> HtmlList msg

Lays out a traditional application layout with a sticky `Header`,
scrolling `Scene`, and both `Control` and `Info` fixed to the bottom.


type Region
    = Scene
    | Info
    | Control

Scene: the Item's editable contents and overlays

Control: Toolbar, Property sheet

Info: Status bar, Help screen, Tooltip bubble, Snack bar