Join GitHub today
GitHub is home to over 28 million developers working together to host and review code, manage projects, and build software together.
Sign upAdd preventDefault/stopPropagation etc to docs #426
Comments
This comment has been minimized.
This comment has been minimized.
|
It works this way now import DOM.Classy.Event (toEvent, preventDefault)
data Query a
= DoSomething a
| PreventDefault Event (Query a)
-- somewhere in render function
onClick \e -> Just $ PreventDefault (toEvent e) $ action DoSomething
eval :: Query ~> DSL
eval (PreventDefault ev q) = do
liftEff $ preventDefault ev
eval q
eval (DoSomething next) = pure next |
This comment has been minimized.
This comment has been minimized.
boothead
commented
Mar 7, 2017
|
Aaah! Perfect. thanks. Is this in the docs anywhere? Shall I leave this open as a reminder or close it? |
This comment has been minimized.
This comment has been minimized.
|
I'd leave and change the header to something like `Add preventDefault/stopPropagation etc to docs" or something :) |
boothead
changed the title
What happened to preventDefault and friends?
Add preventDefault/stopPropagation etc to docs
Mar 8, 2017
This comment has been minimized.
This comment has been minimized.
boothead
commented
Mar 8, 2017
|
Well then, I will see what I can do :-) |
This comment has been minimized.
This comment has been minimized.
|
This issue was very helpful for me. I often have to prevent link clicks from causing the browser to load the page, but using In my project, I created variants of the events from Thought this may be useful for others. Full excerpt: import DOM.Classy.Event (preventDefault, toEvent)
import DOM.Event.Event (Event)
...
data Query a
= NoOp a
| PreventDefault Event (Query a)
eval = case _ of
NoOp next -> pure next
PreventDefault ev q -> do
liftEff $ preventDefault ev
eval q
preventClick q =
HE.onClick \e -> Just $ PreventDefault (toEvent e) $ H.action q
render :: H.ComponentHTML Query
render =
HH.a [ HP.href "", preventClick NoOp ] [ HH.text "Do something" ] |
added a commit
to JordanMartinez/purescript-halogen
that referenced
this issue
Jul 25, 2018
This was referenced Jul 25, 2018
This comment has been minimized.
This comment has been minimized.
JordanMartinez
commented
Jul 26, 2018
|
Building off of @cryogenian and @thomashoneyman's work, I abstract things even more in my work on #563, so that I could write After working on it some more, I then abstracted the This allows me to write: HH.div
[ recursiveQuery HE.onClick (\e ->
let
event = toEvent e
in
PreventDefault event $
StopPropagation event $
-- other recursive queries... until we get to a terminating one
H.action $ TerminatingQuery -- like NoOp
]
[]However, I then tried to use the function on a Here's the full code: module Component where
import Prelude
import Data.Maybe (Maybe(..))
import Effect.Aff (Aff)
import Effect.Class (liftEffect)
import Effect.Console (log)
import Halogen as H
import Halogen.HTML as HH
import Halogen.HTML.Events as HE
import Halogen.HTML.Properties as HP
import Web.Event.Event (preventDefault, stopPropagation, stopImmediatePropagation)
import Web.Event.Internal.Types (Event)
import Web.UIEvent.MouseEvent (toEvent, clientX)
type State = Unit
type Input = Unit
type Message = Void
data Query a
-- actual action...
= LogToConsole String a
-- Equivalent of "Halt" when there's nothing to log
| NoOperation a
-- Recursive queries that can be used to call these functions
| PreventDefault Event (Query a)
| StopPropagation Event (Query a)
| StopImmediatePropagation Event (Query a)
component :: H.Component HH.HTML Query Input Message Aff
component =
H.component
{ initialState: const unit
, render
, eval
, receiver: const Nothing
}
where
recursiveQuery onEvent eToRecQuery =
onEvent (\e -> Just $ eToRecQuery e)
render :: State -> H.ComponentHTML Query
render _ =
HH.div
[ HP.id_ "div1"
, recursiveQuery HE.onClick (\e ->
PreventDefault (toEvent e) $
H.action $ NoOperation
)
, HE.onMouseMove (HE.input_ $ LogToConsole "Div1: This will never appear")
]
[ HH.div
[ HP.id_ "div2"
, recursiveQuery HE.onClick (\e ->
let
event = toEvent e
in
PreventDefault event $
StopPropagation event $
H.action $ LogToConsole "Either Button or Div 2 was clicked"
)
, HE.onMouseMove (HE.input_ $ LogToConsole "Div2: This will never appear")
]
[ HH.button
[
-- I get a compilation error when any or all of these parts are uncommented
-- recursiveQuery HE.onClick (\e -> H.action $ LogToConsole "message" )
-- ,
-- recursiveQuery HE.onClick (\e ->
-- PreventDefault (toEvent e) $
-- H.action $ LogToConsole $ "Button clicked - ClientX: x" <> (show $ clientX e)
-- )
-- ,
-- recursiveQuery HE.onMouseMove (\mouseEvent ->
-- let
-- event = toEvent mouseEvent
-- in
-- PreventDefault event $
-- StopPropagation event $
-- StopImmediatePropagation event $
-- H.action $ LogToConsole $
-- "preventDefault and stopPropagation and stopImmediatePropagation" <>
-- "were called on Button's mouse move event"
-- )
]
[ HH.text "Click me and check the console." ]
]
]
eval :: Query ~> H.ComponentDSL State Query Message Aff
eval = case _ of
LogToConsole message next -> do
liftEffect $ log message
pure next
NoOperation next -> pure next
PreventDefault e query -> do
liftEffect $ preventDefault e
-- "eval query" will block until the query finishes its evaluation
-- So, no need to worry about concurrency issues by doing this.
-- However, beware of recursive
eval query
StopPropagation e query -> do
liftEffect $ stopPropagation e
eval query
StopImmediatePropagation e query -> do
liftEffect $ stopImmediatePropagation e
eval queryHere's the resulting error message. It's going to be a long scroll: |
This comment has been minimized.
This comment has been minimized.
JordanMartinez
commented
Jul 27, 2018
|
I realized that it'd be easier to just change inputR :: forall f a. (a -> f Unit) -> a -> Maybe (f Unit)
inputR f x = Just $ (f x)Usage: recursively evaluate queries until a final terminating query: HH.button
[ HE.onClick (inputR \e ->
PreventDefault (toEvent e) $
H.action $ LogToConsole $ "Button clicked - ClientX: x" <> (show $ clientX e)
)
, HE.onMouseMove (inputR \mouseEvent ->
let
event = toEvent mouseEvent
in
PreventDefault event $
StopPropagation event $
StopImmediatePropagation event $
H.action $ LogToConsole $
"preventDefault and stopPropagation and stopImmediatePropagation" <>
"were called on Button's mouse move event"
)
]
[ HH.text "Click me and check the console." ] |
This comment has been minimized.
This comment has been minimized.
JordanMartinez
commented
Jul 27, 2018
|
As a whole, however, I wonder if it would be better to have a query Is it possible to define a query that gets inherited by all What if the Query type in components was changed to something like |
JordanMartinez
referenced this issue
Jul 27, 2018
Open
Added inputR for easier recursive query evaluation #564
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
boothead commentedMar 7, 2017
I can't find the preventDefault function in halogen's API anymore, or see it mentioned in the docs. How do we do that now?
I'd also just like to say a massive thanks for halogen. The latest changes for version 1 make for a much nicer to use API and refactoring a couple of thousand line app was pretty painless. You guys rock!