mirror of
https://github.com/NoRedInk/noredink-ui.git
synced 2024-09-21 12:19:03 +03:00
standarize on "slide" over "panel"
still using "panel" internally when calling TabsInternal, though!
This commit is contained in:
parent
d2f639f222
commit
e5ef6fa5fe
@ -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" )
|
||||
]
|
||||
|
@ -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
|
||||
)
|
||||
)
|
||||
|
@ -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"
|
||||
|
Loading…
Reference in New Issue
Block a user