standarize on "slide" over "panel"

still using "panel" internally when calling TabsInternal, though!
This commit is contained in:
Juan Edi 2023-09-05 09:47:38 -03:00
parent d2f639f222
commit e5ef6fa5fe
3 changed files with 35 additions and 35 deletions

View File

@ -257,7 +257,7 @@ viewWithPreviousAndNextControls model =
{ viewPreviousButton, viewNextButton, slides, containerAttributes } =
Carousel.viewWithPreviousAndNextControls
{ selected = model.selected
, panels = List.map Tuple.second allItems
, slides = List.map Tuple.second allItems
, previousButton =
{ attributes = [], icon = UiIcon.arrowLeft, name = "Previous" }
, nextButton =
@ -272,7 +272,7 @@ viewWithPreviousAndNextControls model =
[ Code.fromModule moduleName "viewWithPreviousAndNextControls"
++ Code.recordMultiline
[ ( "selected", Code.string (String.fromInt model.selected) )
, ( "panels", Code.listMultiline (List.map Tuple.first allItems) 3 )
, ( "slides", Code.listMultiline (List.map Tuple.first allItems) 3 )
, ( "previousButton", "{ attributes = [], icon = UiIcon.arrowLeft , name = \"Previous\" }" )
, ( "nextButton", "{ attributes = [], icon = UiIcon.arrowLeft , name = \"Next\" }" )
, ( "accessibleLabel", "Items" )
@ -307,7 +307,7 @@ viewWithCombinedControls model =
, selected = model.selected
, tabControlListStyles = Tuple.second settings.controlListStyles
, tabControlStyles = Tuple.second settings.controlStyles
, panels = List.map Tuple.second allItems
, slides = List.map Tuple.second allItems
, previousButton =
{ attributes = [], icon = UiIcon.arrowLeft, name = "Previous" }
, nextButton =
@ -323,7 +323,7 @@ viewWithCombinedControls model =
, ( "selected", Code.string (String.fromInt model.selected) )
, ( "tabControlListStyles", Tuple.first settings.controlListStyles )
, ( "tabControlStyles", Tuple.first settings.controlStyles )
, ( "panels", Code.listMultiline (List.map Tuple.first allItems) 2 )
, ( "slides", Code.listMultiline (List.map Tuple.first allItems) 2 )
, ( "previousButton", "{ attributes = [], icon = UiIcon.arrowLeft , name = \"Previous\" }" )
, ( "nextButton", "{ attributes = [], icon = UiIcon.arrowLeft , name = \"Next\" }" )
, ( "labelledBy", Code.fromModule moduleName "LabelledByIdOfVisibleLabel " ++ Code.string "Items" )
@ -355,7 +355,7 @@ viewWithTabControls model =
, selected = model.selected
, tabControlListStyles = Tuple.second settings.controlListStyles
, tabControlStyles = Tuple.second settings.controlStyles
, panels = List.map Tuple.second allItems
, slides = List.map Tuple.second allItems
, labelledBy = Carousel.LabelledByIdOfVisibleLabel "Items"
, role = Carousel.Group
}
@ -367,7 +367,7 @@ viewWithTabControls model =
, ( "selected", Code.string (String.fromInt model.selected) )
, ( "tabControlListStyles", Tuple.first settings.controlListStyles )
, ( "tabControlStyles", Tuple.first settings.controlStyles )
, ( "panels", Code.listMultiline (List.map Tuple.first allItems) 2 )
, ( "slides", Code.listMultiline (List.map Tuple.first allItems) 2 )
, ( "labelledBy", Code.fromModule moduleName "LabelledByIdOfVisibleLabel " ++ Code.string "Items" )
, ( "role", Code.fromModule moduleName "Group" )
]

View File

@ -57,7 +57,7 @@ Returns:
-}
viewWithPreviousAndNextControls :
{ selected : id
, panels :
, slides :
List
{ id : id
, idString : String
@ -80,16 +80,16 @@ viewWithPreviousAndNextControls :
}
viewWithPreviousAndNextControls config =
let
currentPanelIndex =
config.panels
currentSlideIndex =
config.slides
|> List.Extra.findIndex (\p -> p.id == config.selected)
|> -- assuming the provided id is valid. there's not much we can
-- do otherwise, anyways!
Maybe.withDefault 0
viewSlideChangeButtonWithDelta delta buttonConfig =
config.panels
|> List.Extra.getAt (modBy (List.length config.panels) (currentPanelIndex + delta))
config.slides
|> List.Extra.getAt (modBy (List.length config.slides) (currentSlideIndex + delta))
|> Maybe.map
(\slide ->
viewSlideChangeButton
@ -106,23 +106,23 @@ viewWithPreviousAndNextControls config =
, viewNextButton = viewSlideChangeButtonWithDelta 1 config.nextButton
, slides =
List.map
(\panel ->
(\slide ->
Html.div
[ Role.group
, Aria.roleDescription "slide"
, id panel.idString
, labelAttribute panel
, id slide.idString
, labelAttribute slide
-- use as attribute for testing
, if config.selected == panel.id then
, if config.selected == slide.id then
Attrs.style "display" "block"
else
Attrs.style "display" "none"
]
[ panel.slideHtml ]
[ slide.slideHtml ]
)
config.panels
config.slides
|> Html.div [ Attrs.attribute "atomic" "false", Accessibility.Styled.Key.tabbable False ]
, containerAttributes =
[ Attrs.attribute "role" (roleToString config.role)
@ -162,7 +162,7 @@ Returns:
viewWithTabControls :
{ cfg
| selected : id
, panels :
, slides :
List
{ id : id
, slideHtml : Html msg
@ -192,7 +192,7 @@ viewWithTabControls config =
TabsInternal.views
{ focusAndSelect = config.focusAndSelect
, selected = config.selected
, tabs = List.map buildTab config.panels
, tabs = List.map buildTab config.slides
, tabStyles = always config.tabControlStyles
, tabListStyles = config.tabControlListStyles
}
@ -216,7 +216,7 @@ Returns:
-}
viewWithCombinedControls :
{ selected : id
, panels :
, slides :
List
{ id : id
, slideHtml : Html msg
@ -244,11 +244,11 @@ viewWithCombinedControls config =
viewWithTabControls config
-- let's de duplicate this!
currentPanelIndex =
List.Extra.findIndex (\p -> p.id == config.selected) config.panels
currentSlideIndex =
List.Extra.findIndex (\p -> p.id == config.selected) config.slides
previousPanel =
currentPanelIndex
previousSlide =
currentSlideIndex
|> Maybe.andThen
(\index ->
List.Extra.getAt
@ -256,23 +256,23 @@ viewWithCombinedControls config =
index - 1
else
List.length config.panels - 1
List.length config.slides - 1
)
config.panels
config.slides
)
nextPanel =
currentPanelIndex
nextSlide =
currentSlideIndex
|> Maybe.andThen
(\index ->
List.Extra.getAt
(if index + 1 < List.length config.panels then
(if index + 1 < List.length config.slides then
index + 1
else
0
)
config.panels
config.slides
)
in
{ tabControls = controls
@ -282,7 +282,7 @@ viewWithCombinedControls config =
ClickableSvg.button config.previousButton.name
config.previousButton.icon
(config.previousButton.attributes
++ (Maybe.map (\p -> ClickableSvg.onClick (config.focusAndSelect { select = p.id, focus = Just p.idString })) previousPanel
++ (Maybe.map (\p -> ClickableSvg.onClick (config.focusAndSelect { select = p.id, focus = Just p.idString })) previousSlide
|> Maybe.Extra.toList
)
)
@ -290,7 +290,7 @@ viewWithCombinedControls config =
ClickableSvg.button config.nextButton.name
config.nextButton.icon
(config.nextButton.attributes
++ (Maybe.map (\p -> ClickableSvg.onClick (config.focusAndSelect { select = p.id, focus = Just p.idString })) nextPanel
++ (Maybe.map (\p -> ClickableSvg.onClick (config.focusAndSelect { select = p.id, focus = Just p.idString })) nextSlide
|> Maybe.Extra.toList
)
)

View File

@ -54,7 +54,7 @@ previousAndNextCarouselProgram slidesCount =
, role = Carousel.Group
, accessibleLabel = "Previous/Next Carousel"
, visibleLabelId = Nothing
, panels =
, slides =
List.map
(\i ->
{ id = i
@ -245,7 +245,7 @@ viewWithTabControls model =
, role = Carousel.Group
, tabControlStyles = \_ -> []
, labelledBy = Carousel.LabelledByAccessibleLabelOnly "Label"
, panels =
, slides =
[ { id = 0
, idString = "slide-0"
, tabControlHtml = text "Control 0"
@ -275,7 +275,7 @@ viewWithCombinedControls model =
, role = Carousel.Group
, tabControlStyles = \_ -> []
, labelledBy = Carousel.LabelledByAccessibleLabelOnly "Label"
, panels =
, slides =
[ { id = 0
, idString = "slide-0"
, tabControlHtml = text "Control 0"