ContextMenu (Right Click) Event in Halogen

Help
#1

Hello,

(Apologies if this is a stupid question, I’m way more familiar with Haskell than Javascript…)

I’m working on a web game in Halogen and I would very much like to use the onContextMenu event in order to allow for right clicks. After looking through the source, it appears that this event used to exist, but is commented out. I’ve attempted to follow the dependencies and patch it back in, but I haven’t had much luck. I’m pretty sure I should be using the FFI somehow to do this, I have no clue as to how to do it in a way that’ll make it play nice with Halogen.

Could someone point me in the right direction? A very general description of what I need to do would suffice I think. Thanks!

1 Like
#2

Hello!

If you don’t get an answer from someone here, perhaps you can try your luck asking in the existing issue over here: https://github.com/purescript-halogen/purescript-halogen/issues/536

Good luck :slight_smile:

#3

I got it working here: https://try.purescript.org/?gist=3c4c7706d0f8ad0c313c4c12c979433b

It’s essentially the Halogen basic example, but the button only toggles with right clicks.

Here’s the onContextMenu event. It’s similar to the commented out one in the Halogen source, but it’s an Event instead of a MouseEvent.

import Web.Event.Event (Event, EventType(..), preventDefault, stopPropagation)

onContextMenu :: forall r i. (Event -> Maybe i) -> HP.IProp (onContextMenu :: Event | r) i
onContextMenu = HE.handler (EventType "contextmenu")

Add it normally:

render :: State -> H.ComponentHTML Action () Aff
render state =
  let
    label = if state.enabled then "On" else "Off"
  in
    HH.button
      [ HP.title label
      , onContextMenu (Just <<< Toggle)
      ]
      [ HH.text label ]

Don’t forget to preventDefault so the menu doesn’t appear (I don’t know if stopPropagation is necessary).

handleAction ∷ forall o. Action -> H.HalogenM State Action () o Aff Unit
handleAction = case _ of
  Toggle ev -> do
    liftEffect (preventDefault ev)
    liftEffect (stopPropagation ev)
    H.modify_ \st -> st { enabled = not st.enabled }
3 Likes