This module's contents are almost all unexposed right now. This might change in the future,
when you can customize the dividers in your ReorderList
.
import DragAndDrop.Divider as Divider
The orientation the divider is dividing.
Think of a divider as a fine line between elements. It is a horizontal divider, when the line is horizontal (even though it divides elements vertically).
This might be really confusing right now can should change in the future.
View a divider
Divider.viewWith (Divider.defaultDivider isHovered) orientation size attributes
Api might change in the future.
A default divider.
Shows a fine, black line when hovered and a fine grey line when not hovered.
The line is oriented the way given as orientation.
Api might change in the future.
module DragAndDrop.Divider
exposing
( Orientation(..)
, defaultDivider
, viewWith
)
{-| This module's contents are almost all unexposed right now. This might change in the future,
when you can customize the dividers in your [`ReorderList`](DragAndDrop-ReorderList).
import DragAndDrop.Divider as Divider
@docs Orientation
# Unstable API
@docs viewWith, defaultDivider
-}
import Html exposing (Html)
import Html.Attributes as Html
import Svg exposing (Svg)
import Svg.Attributes as Attr
{-| The orientation the divider is dividing.
Think of a divider as a fine line between elements. It is a horizontal divider,
when the line is horizontal (even though it divides elements vertically).
This might be really confusing right now can should change in the future.
-}
type Orientation
= Horizontal
| Vertical
type alias ViewFunction msg =
Orientation -> Float -> List (Html.Attribute msg) -> Html msg
type alias DividerImage msg =
Bool -> Orientation -> Float -> Html msg
view : Html msg -> ViewFunction msg
view divider orientation size attributes =
wrapper orientation <| overlapper orientation size attributes divider
viewWithSize : (Float -> Html msg) -> ViewFunction msg
viewWithSize viewDivider orientation size =
view (viewDivider size) orientation size
{-| View a divider
Divider.viewWith (Divider.defaultDivider isHovered) orientation size attributes
Api might change in the future.
-}
viewWith : (Orientation -> Float -> Html msg) -> ViewFunction msg
viewWith viewDivider orientation size =
view (viewDivider orientation size) orientation size
match : { horiz : a, vert : a } -> Orientation -> a
match cases ori =
case ori of
Horizontal ->
cases.horiz
Vertical ->
cases.vert
overlapper : Orientation -> Float -> List (Html.Attribute msg) -> Html msg -> Html msg
overlapper o size attributes elem =
Html.div
([ Html.style
[ ( "position", "absolute" )
, ( match { horiz = "width", vert = "height" } o, "inherit" )
, ( match { horiz = "height", vert = "width" } o, toString size ++ "px" )
, ( match { horiz = "top", vert = "left" } o, "-" ++ toString (size / 2) ++ "px" )
]
]
++ attributes
)
[ elem ]
wrapper : Orientation -> Html msg -> Html msg
wrapper o elem =
Html.div
[ Html.style
[ ( "position", "relative" )
, ( match { horiz = "width", vert = "height" } o, "100%" )
, ( "z-index", "100" )
]
]
[ elem ]
{-| A default divider.
Shows a fine, black line when hovered and a fine grey line when not hovered.
The line is oriented the way given as orientation.
Api might change in the future.
-}
defaultDivider : DividerImage msg
defaultDivider hovering orientation size =
Svg.svg
[ Attr.width "100%"
, Attr.height "100%"
, Attr.viewBox
(match
{ horiz = "0 0 " ++ toString (floor (size * 5)) ++ " " ++ toString (floor size)
, vert = "0 0 " ++ toString (floor size) ++ " " ++ toString (floor (size * 5))
}
orientation
)
, Attr.preserveAspectRatio "none"
]
[ match
{ horiz = line hovering 0 (size / 2) (size * 5) (size / 2)
, vert = line hovering (size / 2) 0 (size / 2) (size * 5)
}
orientation
]
line : Bool -> Float -> Float -> Float -> Float -> Svg msg
line hovering x1 y1 x2 y2 =
Svg.line
[ Attr.x1 (toString x1)
, Attr.y1 (toString y1)
, Attr.x2 (toString x2)
, Attr.y2 (toString y2)
, if hovering then
Attr.style "stroke:rgb(20,20,20);stroke-width:2"
else
Attr.style "stroke:rgb(200,200,200);stroke-width:1"
]
[]