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

Aui.Toggle

Functions to present AUI toggle.

Presentation

toggle : Bool -> (Bool -> a) -> Bool -> Html a

Create a toggle with if it is enabled, a message and its state.

toggle isEnabled
    ToggleClicked
    isOn
module Aui.Toggle exposing (toggle)

{-| Functions to present AUI toggle.


# Presentation

@docs toggle

-}

import Html exposing (Html, node, input, span)
import Html.Attributes exposing (class, type_, checked, disabled, attribute)
import Html.Events exposing (onClick)


{-| Create a toggle with if it is enabled, a message and its state.

    toggle isEnabled
        ToggleClicked
        isOn

-}
toggle : Bool -> (Bool -> a) -> Bool -> Html a
toggle enabled toMsg state =
    let
        attrs =
            []

        attrs_ =
            if enabled then
                onClick (not state |> toMsg) :: attrs
            else
                attribute "disabled" "" :: attrs
    in
        node "aui-toggle"
            attrs_
            [ input [ type_ "checkbox", class "aui-toggle-input", checked state, disabled (not enabled) ] []
            , span [ class "aui-toggle-view" ]
                [ span [ class "aui-toggle-tick aui-icon aui-icon-small aui-iconfont-success" ] []
                , span [ class "aui-toggle-cross aui-icon aui-icon-small aui-iconfont-close-dialog" ] []
                ]
            ]