Functions to present AUI pagination bar (navigation).
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.
Opaque type for PaginationBar configuration
Default configuration for pagination bar
Function to change the text presented for the previous item in the pagination bar
baseConfig |> prev "Back"
Function to change the text presented for the next item in the pagination bar
baseConfig |> next "Continue"
Function to change the text presented for the first item in the pagination bar
baseConfig |> last "Beginning"
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" ) ]