Halogen keyboard-input example and unsubsribing to the events?

Viewed 978

How to unsubscribe to keyboard events from other actions than HandleKey in the keyboard-input example? (The question is related to Halogen version 2.0.1 and purescript 0.11.4.)

In the example the enter/return works. I have a group of elements that can be collapsed with mouse by pressing close-button and Close-action takes care of it. Also, the enter/return can be used to collapse the elements and it works as it should.

Open next -> do
  st <- H.get
  if not st.open
    then do
      H.modify (_ { open = true })
      eval (H.action Init)
    else pure unit
  pure next

Close next -> do
  H.modify (_ { open = false })
  st <- H.get
  case st.unsubscribe of
    Nothing -> pure unit
    -- Just smth -> H.liftAff smth
    Just _ -> H.modify (_ { unsubscribe = Nothing}) -- H.liftAff us
  pure next

Init next -> do
  H.modify (_ { open = true})
  document <- H.liftEff $ DOM.window >>= DOM.document <#> DOM.htmlDocumentToDocument
  H.subscribe $ ES.eventSource'
    (K.onKeyUp document)
    (Just <<< H.request <<< HandleKey)
  -- H.modify (_ { unsubscribe = ??? })
  pure next

The problem is that when I close (collapse) the elements with mouse, the event listener is not removed (not Done) and it will be still there. When I re-open the elements, the above code will establish a second (a third, fourth, etc) listener and then every keypress will be handled many times.

I was considering to create a keyboard event but it doesn't sound a correct way here.

So the questions are:

  • How to check if there is already a keyboard listener?
  • And then how to stop it at the Close -action?
  • Or is it possible to make the Done SubscribeStatus and send it to the keyboard listener at the Close -action?

Further questions:

  • The example has unsubscribe in the state. How to use it?
  • (I tried to put something into it at the Init -action and at the Close -action but it was pure guessing.)

Late edit: This seems to be related to questions about dynamically attached event listeners and see also this, this and this.

One of the answers said that it is only possible to know about dynamic handlers through the use of states and that did the trick for my problem. Anyhow, I think that the questions stated here remain (how to remove handler with Halogen and especially about the unsubscribe field in the example - is it somehow useable?)

1 Answers
Related