This is an alternative site for discovering Elm packages. You may be looking for the official Elm package site instead.

Aui.PaginationBar

Functions to present AUI pagination bar (navigation).

Presentation

paginationBar : Config -> (Int -> a) -> Int -> Int -> Int -> Html a

Present a pagination bar providing it a configuration object, a message map, spacing, the total and the current. For example:

paginationBar config GoToPage 1 100 42

This will present a bar with the current page set to 42. When another page is clicked, a message is produced and mapped to GoToPage which has to be of the type (Int -> a). The spacing indicates the amount of number presented prior and after the current number before presenting an ellipsis.

Config

type Config = Config InnerConfig

Opaque type for PaginationBar configuration

baseConfig : Config

Default configuration for pagination bar

prev : String -> Config -> Config

Function to change the text presented for the previous item in the pagination bar

baseConfig |> prev "Back"
next : String -> Config -> Config

Function to change the text presented for the next item in the pagination bar

baseConfig |> next "Continue"
first : String -> Config -> Config

Function to change the text presented for the first item in the pagination bar

baseConfig |> last "Beginning"
last : String -> Config -> Config

Function to change the text presented for the last item in the pagination bar

baseConfig |> last "End"
module Aui.PaginationBar exposing (paginationBar, baseConfig, Config, prev, first, last, next)

{-| Functions to present AUI pagination bar (navigation).


# Presentation

@docs paginationBar


# Config

@docs Config, baseConfig, prev, next, first, last

-}

import Html exposing (Html, Attribute, ol, li, a, text)
import Html.Attributes exposing (class, attribute, style)
import Html.Events exposing (onClick)
import Aui.PaginationBarHelpers exposing (computePageComponents, PageComponent(Elipsis, Number))


{-| Opaque type for PaginationBar configuration
-}
type Config
    = Config InnerConfig


type alias InnerConfig =
    { prev : String
    , next : String
    , last : String
    , first : String
    }


{-| Default configuration for pagination bar
-}
baseConfig : Config
baseConfig =
    Config
        { prev = "Prev"
        , last = "Last"
        , first = "First"
        , next = "Next"
        }


{-| Function to change the text presented for the previous item in the pagination bar

    baseConfig |> prev "Back"

-}
prev : String -> Config -> Config
prev x (Config c) =
    Config { c | prev = x }


{-| Function to change the text presented for the next item in the pagination bar

    baseConfig |> next "Continue"

-}
next : String -> Config -> Config
next x (Config c) =
    Config { c | next = x }


{-| Function to change the text presented for the last item in the pagination bar

    baseConfig |> last "End"

-}
last : String -> Config -> Config
last x (Config c) =
    Config { c | last = x }


{-| Function to change the text presented for the first item in the pagination bar

    baseConfig |> last "Beginning"

-}
first : String -> Config -> Config
first x (Config c) =
    Config { c | first = x }


{-| Present a pagination bar providing it a configuration object, a message map, spacing, the total and the current. For example:

    paginationBar config GoToPage 1 100 42

This will present a bar with the current page set to 42.
When another page is clicked, a message is produced and mapped to `GoToPage` which has to be of the type `(Int -> a)`.
The spacing indicates the amount of number presented prior and after the current number before presenting an ellipsis.

-}
paginationBar : Config -> (Int -> a) -> Int -> Int -> Int -> Html a
paginationBar (Config config) msg spacing total current =
    let
        items =
            computePageComponents spacing total current
    in
        ol [ class "aui-nav aui-nav-pagination" ] <|
            List.concat
                [ [ firstItem config msg current
                  , prevItem config msg current
                  ]
                , renderItems msg current items
                , [ nextItem config msg total current
                  , lastItem config msg total current
                  ]
                ]


renderItems : (Int -> a) -> Int -> List PageComponent -> List (Html a)
renderItems msg current items =
    List.map (renderItem msg current) items


renderItem : (Int -> a) -> Int -> PageComponent -> Html a
renderItem msg current item =
    case item of
        Elipsis ->
            renderElipsis

        Number n ->
            renderNumber msg current n


renderNumber : (Int -> a) -> Int -> Int -> Html a
renderNumber msg current n =
    if current == n then
        li [ class "aui-nav-selected" ]
            [ text <| toString n ]
    else
        li
            []
            [ a
                [ onClick (msg n)
                , pointer
                ]
                [ text <| toString n ]
            ]


renderElipsis : Html a
renderElipsis =
    li
        [ class "aui-nav-truncation" ]
        [ text "…" ]


firstItem : InnerConfig -> (Int -> a) -> Int -> Html a
firstItem { first } msg current =
    li [ class "aui-nav-first" ]
        [ a
            [ pointer
            , linkTo msg (current > 1) 1
            ]
            [ text first ]
        ]


prevItem : InnerConfig -> (Int -> a) -> Int -> Html a
prevItem { prev } msg current =
    li [ class "aui-nav-previous" ]
        [ a
            [ pointer
            , linkTo msg (current > 1) (current - 1)
            ]
            [ text prev ]
        ]


nextItem : InnerConfig -> (Int -> a) -> Int -> Int -> Html a
nextItem { next } msg total current =
    li [ class "aui-nav-next" ]
        [ a
            [ pointer
            , linkTo msg (current < total) (current + 1)
            ]
            [ text next ]
        ]


lastItem : InnerConfig -> (Int -> a) -> Int -> Int -> Html a
lastItem { last } msg total current =
    li [ class "aui-nav-last" ]
        [ a
            [ pointer
            , linkTo msg (current < total) total
            ]
            [ text last ]
        ]


linkTo : (Int -> a) -> Bool -> Int -> Attribute a
linkTo msg enabled n =
    if not enabled then
        attribute "aria-disabled" "true"
    else
        onClick (msg n)


pointer : Attribute a
pointer =
    style [ ( "cursor", "pointer" ) ]