module Examples.Menu exposing (Msg, State, example) {-| @docs Msg, State, example -} import Accessibility.Styled exposing (..) import Browser.Dom as Dom import Category exposing (Category(..)) import CommonControls import Debug.Control as Control exposing (Control) import Debug.Control.Extra as ControlExtra import Debug.Control.View as ControlView import EllieLink import Example exposing (Example) import KeyboardSupport exposing (Key(..)) import Nri.Ui.ClickableText.V3 as ClickableText import Nri.Ui.Menu.V3 as Menu import Nri.Ui.UiIcon.V1 as UiIcon import Set exposing (Set) import Task import ViewHelpers exposing (viewExamples) moduleName : String moduleName = "Menu" version : Int version = 3 {-| -} example : Example State Msg example = { name = moduleName , version = version , state = init , update = update , subscriptions = \_ -> Sub.none , categories = [ Layout ] , keyboardSupport = [ { keys = [ Space ], result = "Opens the menu" } , { keys = [ Enter ], result = "Opens the menu" } , { keys = [ Tab ], result = "Takes focus out of the menu to the next focusable element & closes the menu." } , { keys = [ Tab, Shift ], result = "Takes focus out of the menu to the previous focusable element & closes the menu." } , { keys = [ Arrow KeyboardSupport.Up ] , result = "If menu is closed, opens the menu & selects the last menu item.\nIf menu is open, moves the focus to the previous menu item." } , { keys = [ Arrow KeyboardSupport.Down ] , result = "If menu is closed, opens the menu & selects the first menu item.\nIf menu is open, moves the focus to the next menu item." } , { keys = [ Esc ], result = "Closes the menu" } ] , preview = [] , view = view } view : EllieLink.Config -> State -> List (Html Msg) view ellieLinkConfig state = let menuAttributes = (Control.currentValue state.settings).menuAttributes |> List.map Tuple.second defaultButtonAttributes = (Control.currentValue state.settings).buttonAttributes |> List.map Tuple.second isOpen name = case state.openMenu of Just open -> open == name Nothing -> False in [ ControlView.view { ellieLinkConfig = ellieLinkConfig , name = moduleName , version = version , update = UpdateControls , settings = state.settings , toExampleCode = \settings -> let toCode buttonCode = moduleName ++ ".view" ++ ControlView.codeFromList settings.menuAttributes ++ ("\n\t{ button = " ++ buttonCode) ++ "\n\t, entries = []" ++ "\n\t, isOpen = True" ++ "\n\t, focusAndToggle = FocusAndToggle" ++ "\n\t}" in [ { sectionName = "Menu.button" , code = "\n\t\tMenu.button " ++ ControlView.codeFromListWithIndentLevel 3 settings.buttonAttributes ++ "\n\t\t\t\"1st Period English with Mx. Trainer\"" |> toCode } , { sectionName = "Menu.custom" , code = "\n\t\tMenu.custom <|" ++ "\n\t\t\t\\buttonAttributes ->" ++ "\n\t\t\t\tbutton buttonAttributes [ text \"Custom Menu trigger button\" ]" |> toCode } ] } , viewExamples [ ( "Menu.button" , Menu.view (menuAttributes ++ List.filterMap identity [ Just <| Menu.buttonId "1stPeriodEnglish__button" , Just <| Menu.menuId "1stPeriodEnglish__menu" ] ) { isOpen = isOpen "1stPeriodEnglish" , focusAndToggle = FocusAndToggle "1stPeriodEnglish" , entries = [ Menu.entry "hello-button" <| \attrs -> ClickableText.button "Hello" [ ClickableText.onClick (ConsoleLog "Hello") , ClickableText.small , ClickableText.custom attrs ] , Menu.group "Menu group" [ Menu.entry "gift-button" <| \attrs -> ClickableText.button "Gift" [ ClickableText.onClick (ConsoleLog "Gift") , ClickableText.small , ClickableText.custom attrs , ClickableText.icon UiIcon.gift ] , Menu.entry "null-button" <| \attrs -> ClickableText.button "Nope!" [ ClickableText.onClick (ConsoleLog "Nope!") , ClickableText.small , ClickableText.custom attrs , ClickableText.icon UiIcon.null ] , Menu.entry "no-icon-button" <| \attrs -> ClickableText.button "Skip" [ ClickableText.onClick (ConsoleLog "Skip") , ClickableText.small , ClickableText.custom attrs ] ] , Menu.entry "performance-button" <| \attrs -> ClickableText.button "Performance" [ ClickableText.onClick (ConsoleLog "Performance") , ClickableText.small , ClickableText.custom attrs ] ] , button = Menu.button defaultButtonAttributes "1st Period English with Mx. Trainer" } ) , ( "Menu.custom" , Menu.view (menuAttributes ++ List.filterMap identity [ Just <| Menu.buttonId "icon-button-with-menu__button" , Just <| Menu.menuId "icon-button-with-menu__menu" ] ) { entries = [ Menu.entry "see-more-button" <| \attrs -> ClickableText.button "See more" [ ClickableText.onClick (ConsoleLog "See more") , ClickableText.small , ClickableText.custom attrs , ClickableText.icon UiIcon.seeMore ] ] , isOpen = isOpen "icon-button-with-menu" , focusAndToggle = FocusAndToggle "icon-button-with-menu" , button = Menu.custom <| \buttonAttributes -> button buttonAttributes [ text "Custom Menu trigger button" ] } ) ] ] {-| -} init : State init = { openMenu = Nothing , checkboxChecked = False , openTooltips = Set.empty , settings = initSettings } {-| -} type alias State = { openMenu : Maybe Id , checkboxChecked : Bool , openTooltips : Set String , settings : Control Settings } type alias Settings = { menuAttributes : List ( String, Menu.Attribute Msg ) , buttonAttributes : List ( String, Menu.ButtonAttribute ) } initSettings : Control Settings initSettings = Control.record Settings |> Control.field "Menu attributes" controlMenuAttributes |> Control.field "Button attributes" controlButtonAttributes controlMenuAttributes : Control (List ( String, Menu.Attribute msg )) controlMenuAttributes = ControlExtra.list |> ControlExtra.optionalListItem "alignment" controlAlignment |> ControlExtra.optionalBoolListItem "isDisabled" ( "Menu.isDisabled True", Menu.isDisabled True ) |> ControlExtra.optionalListItem "menuWidth" controlMenuWidth controlAlignment : Control ( String, Menu.Attribute msg ) controlAlignment = Control.choice [ ( "Left" , Control.value ( "Menu.alignment Menu.Left", Menu.alignment Menu.Left ) ) , ( "Right" , Control.value ( "Menu.alignment Menu.Right", Menu.alignment Menu.Right ) ) ] controlMenuWidth : Control ( String, Menu.Attribute msg ) controlMenuWidth = Control.map (\val -> ( "Menu.menuWidth " ++ String.fromInt val, Menu.menuWidth val )) (ControlExtra.int 220) controlButtonAttributes : Control (List ( String, Menu.ButtonAttribute )) controlButtonAttributes = ControlExtra.list |> CommonControls.icon moduleName Menu.icon |> ControlExtra.optionalBoolListItemDefaultTrue "hasBorder" ( "Menu.hasBorder False", Menu.hasBorder False ) |> ControlExtra.optionalListItem "buttonWidth" controlButtonWidth |> ControlExtra.optionalListItem "wrapping" controlWrapping controlButtonWidth : Control ( String, Menu.ButtonAttribute ) controlButtonWidth = Control.map (\val -> ( "Menu.buttonWidth " ++ String.fromInt val, Menu.buttonWidth val )) (ControlExtra.int 220) controlWrapping : Control ( String, Menu.ButtonAttribute ) controlWrapping = Control.choice [ ( "WrapAndExpandTitle" , Control.value ( "Menu.wrapping Menu.WrapAndExpandTitle", Menu.wrapping Menu.WrapAndExpandTitle ) ) , ( "TruncateTitle" , Control.value ( "Menu.wrapping Menu.TruncateTitle", Menu.wrapping Menu.TruncateTitle ) ) ] {-| -} type Msg = ConsoleLog String | UpdateControls (Control Settings) | FocusAndToggle String { isOpen : Bool, focus : Maybe String } | Focused (Result Dom.Error ()) {-| -} update : Msg -> State -> ( State, Cmd Msg ) update msg state = case msg of ConsoleLog message -> ( Debug.log "Menu Example" message |> always state, Cmd.none ) UpdateControls configuration -> ( { state | settings = configuration }, Cmd.none ) FocusAndToggle id { isOpen, focus } -> ( { state | openMenu = if isOpen then Just id else Nothing } , Maybe.map (\idString -> Task.attempt Focused (Dom.focus idString)) focus |> Maybe.withDefault Cmd.none ) Focused _ -> ( state, Cmd.none ) -- INTERNAL type alias Id = String