diff options
author | Yorhel <git@yorhel.nl> | 2020-04-24 16:36:44 +0200 |
---|---|---|
committer | Yorhel <git@yorhel.nl> | 2020-04-24 16:36:45 +0200 |
commit | 00381a0a88bbc7eaac1d5515fb3ffb30da9b7a66 (patch) | |
tree | ba36585b9aa38a8bbab659da8de0a57078d1e314 /elm | |
parent | 493866f8114dc785433e401b4e3203516be9f71b (diff) |
v2rw/VN::Page: Make the release extlink dropdown open on hover
i.e. revert to the old behavior.
I do prefer this behavior and it was easier to implement than I had
expected.
Diffstat (limited to 'elm')
-rw-r--r-- | elm/Lib/DropDown.elm | 17 | ||||
-rw-r--r-- | elm/ReleaseExtLinks.elm | 6 |
2 files changed, 17 insertions, 6 deletions
diff --git a/elm/Lib/DropDown.elm b/elm/Lib/DropDown.elm index 7fee4e96..95063e3b 100644 --- a/elm/Lib/DropDown.elm +++ b/elm/Lib/DropDown.elm @@ -4,6 +4,7 @@ import Browser.Events as E import Json.Decode as JD import Html exposing (..) import Html.Attributes exposing (..) +import Html.Events exposing (..) import Lib.Api as Api import Lib.Html exposing (..) @@ -11,11 +12,12 @@ import Lib.Html exposing (..) type alias Config msg = { id : String , opened : Bool + , hover : Bool -- if true, the dropdown opens on mouse-over rather than click , toggle : Bool -> msg } --- Returns True if the element matches the target id. +-- Returns True if the element or any of its parents has the given id onClickOutsideParse : String -> JD.Decoder Bool onClickOutsideParse id = JD.oneOf @@ -34,12 +36,13 @@ init : String -> (Bool -> msg) -> Config msg init id msg = { id = id , opened = False + , hover = False , toggle = msg } sub : Config msg -> Sub msg -sub conf = if conf.opened then onClickOutside conf.id (conf.toggle False) else Sub.none +sub conf = if conf.opened && not conf.hover then onClickOutside conf.id (conf.toggle False) else Sub.none toggle : Config msg -> Bool -> Config msg @@ -48,8 +51,14 @@ toggle conf opened = { conf | opened = opened } view : Config msg -> Api.State -> Html msg -> (() -> List (Html msg)) -> Html msg view conf status lbl cont = - div [ class "elm_dd", id conf.id ] - [ a [ href "#", onClickD (conf.toggle (not conf.opened)) ] <| + div + ( [ class "elm_dd", id conf.id + ] ++ if conf.hover then [ onMouseLeave (conf.toggle False) ] else [] + ) + [ a + ( [ href "#", onClickD (conf.toggle (if conf.hover then conf.opened else not conf.opened)) + ] ++ if conf.hover then [ onMouseEnter (conf.toggle True) ] else [] + ) <| case status of Api.Normal -> [ lbl, span [] [ i [] [ text "▾" ] ] ] Api.Loading -> [ lbl, span [] [ span [ class "spinner" ] [] ] ] diff --git a/elm/ReleaseExtLinks.elm b/elm/ReleaseExtLinks.elm index 1d64e944..754b9d69 100644 --- a/elm/ReleaseExtLinks.elm +++ b/elm/ReleaseExtLinks.elm @@ -12,7 +12,9 @@ type alias Model = { lnk : Links, dd : DD.Config Bool } main : Program (String,Links) Model Bool main = Browser.element - { init = \(id,l) -> ({ lnk = l, dd = DD.init ("relextlink_"++id) identity }, Cmd.none) + { init = \(id,l) -> + let dd = DD.init ("relextlink_"++id) identity + in ({ lnk = l, dd = { dd | hover = True } }, Cmd.none) , view = view , update = \b m -> ({ m | dd = DD.toggle m.dd b }, Cmd.none) , subscriptions = \model -> DD.sub model.dd @@ -20,7 +22,7 @@ main = Browser.element view : Model -> Html Bool view model = - div [ class "elm_dd_noarrow", class "elm_dd_left" ] + div [ class "elm_dd_noarrow", class "elm_dd_left", class "elm_dd_relextlink" ] [ DD.view model.dd Api.Normal (span [ class "fake_link" ] [ text <| String.fromInt (List.length model.lnk), abbr [ class "icons external", title "External link" ] [] ]) (\_ -> [ ul [ class "rllinks_dd" ] <| List.map (\(lbl,url,price) -> |