summaryrefslogtreecommitdiff
path: root/elm
diff options
context:
space:
mode:
authorYorhel <git@yorhel.nl>2020-04-24 16:36:44 +0200
committerYorhel <git@yorhel.nl>2020-04-24 16:36:45 +0200
commit00381a0a88bbc7eaac1d5515fb3ffb30da9b7a66 (patch)
treeba36585b9aa38a8bbab659da8de0a57078d1e314 /elm
parent493866f8114dc785433e401b4e3203516be9f71b (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.elm17
-rw-r--r--elm/ReleaseExtLinks.elm6
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) ->