Ukryj komponent po kliknięciu na zewnątrz.

Question

Jaki byłby właściwy sposób obsługi kliknięcia poza pojedynczym komponentem, który ma ukryć ten składnik?

Przykładem takiego komponentu może być menu rozwijane, datepicker i tym podobne. Zwykle oczekujemy, że ukryją się, gdy klikniemy na zewnątrz. Ale aby to zrobić, wydaje się, że musimy wykonać kilka "nieczystych" hacków, których nie jestem pewien w stylu FRP.

Szukałem odpowiednich przykładów odpowiedzi na pomysły i znalazłem this, ale wszystkie zdają się polegać na dołączaniu wywołań zwrotnych do obiektów globalnych, które następnie modyfikują stan składnika wewnętrznego.

Answer 1

Poniższy przykład przedstawia coś, co można opisać.

modal prezentowane z adresem (aby wysłać Odrzuć zdarzenie), bieżące okno wymiary, a składnik wiąz-html Html (co jest rzeczą być skoncentrowany, jak datepicker lub formularza).

Dołączamy obsługę kliknięcia do otaczającego elementu; po podaniu odpowiedniego identyfikatora możemy ustalić, czy otrzymane kliknięcia mają zastosowanie do niego lub dziecka i odpowiednio je przesłać. Jedynym naprawdę sprytnym rozwiązaniem jest wdrożenie customDecoder w celu odfiltrowania kliknięć elementu potomnego.

W innym miejscu, po odebraniu zdarzenia "Odrzuć" nasz stan modelu zmienia się tak, że nie musimy już dzwonić pod numer modal.

Jest to dość duża próbka kodu, który korzysta z kilku pakietów targowych wiąz, więc proszę pytać jeśli coś wymaga dalszych wyjaśnień

import Styles exposing (..) 

import Html exposing (Attribute, Html, button, div, text) 
import Html.Attributes as Attr exposing (style) 
import Html.Events exposing (on, onWithOptions, Options) 
import Json.Decode as J exposing (Decoder, (:=)) 
import Result 
import Signal exposing (Message) 


modal : (Signal.Address()) -> (Int, Int) -> Html -> Html 
modal addr size content = 
    let modalId = "modal" 
     cancel = targetWithId (\_ -> Signal.message addr()) "click" modalId 
     flexCss = [ ("display", "flex") 
        , ("align-items", "center") 
        , ("justify-content", "center") 
        , ("text-align", "center") 
        ] 
    in div (
      cancel :: (Attr.id modalId) :: [style (flexCss ++ absolute ++ dimensions size)] 
      ) [content] 

targetId : Decoder String 
targetId = ("target" := ("id" := J.string))   

isTargetId : String -> Decoder Bool 
isTargetId id = J.customDecoder targetId (\eyed -> if eyed == id then  Result.Ok True else Result.Err "nope!") 

targetWithId : (Bool -> Message) -> String -> String -> Attribute 
targetWithId msg event id = onWithOptions event stopEverything (isTargetId id) msg 

stopEverything = (Options True True) 

Answer 2

Istniejący odpowiedź nie działa w wiąz v0.18 (Signal został usunięty w 0.17), więc chciałem go zaktualizować. Pomysł polega na dodaniu przezroczystego tła najwyższego poziomu za menu rozwijanym. Ma to dodatkowy efekt, dzięki któremu możesz przyciemnić wszystko za menu, jeśli chcesz.

Ten przykładowy model ma listę słów, a każde słowo może mieć otwarte menu rozwijane (i niektóre powiązane informacje), więc mapuję je, aby sprawdzić, czy którekolwiek z nich są otwarte, w którym to przypadku wyświetlam tło div przed wszystkim innym:

jest zasłona w głównej funkcji widoku:

view : Model -> Html Msg 
view model = 
    div [] <| 
     [ viewWords model 
     ] ++ backdropForDropdowns model 

backdropForDropdowns : Model -> List (Html Msg) 
backdropForDropdowns model = 
    let 
     dropdownIsOpen model_ = 
      List.any (isJust << .menuMaybe) model.words 
     isJust m = 
      case m of 
       Just _ -> True 
       Nothing -> False 
    in 
     if dropdownIsOpen model then 
      [div [class "backdrop", onClick CloseDropdowns] []] 
     else 
      [] 

CloseDropdowns jest obsługiwana w funkcji aktualizacji najwyższego poziomu w aplikacji:

update : Msg -> Model -> (Model, Cmd Msg) 
update msg model = 
    case msg of 
     CloseDropdowns -> 
      let 
       newWords = List.map (\word -> { word | menuMaybe = Nothing }) model.words 
      in 
       ({model | words = newWords}, Cmd.none) 

I stylizowane elementy za pomocą scss:

.popup { 
    z-index: 100; 
    position: absolute; 
    box-shadow: 0px 2px 3px 2px rgba(0, 0, 0, .2); 
} 

.backdrop { 
    z-index: 50; 
    position: absolute; 
    background-color: rgba(0, 0, 0, .4); 
    top: 0; 
    right: 0; 
    bottom: 0; 
    left: 0; 
}