switch to events: onClick, onInput

src/Web/Hyperbole/View/Element.hs

@@ -1,10 +1,9 @@
 module Web.Hyperbole.View.Element where
 
-import Data.Text (Text, pack)
-import Data.Text qualified as T
+import Data.Text (Text)
 import Web.Hyperbole.HyperView
 import Web.Hyperbole.Route (Route (..), routeUrl)
-import Web.Hyperbole.View.Event (DelayMs)
+import Web.Hyperbole.View.Event (DelayMs, onClick, onInput)
 import Web.Hyperbole.View.Target (dataTarget)
 import Web.View hiding (Query, Segment, button, cssResetEmbed, form, input, label)
 
@@ -15,7 +14,7 @@ import Web.View hiding (Query, Segment, button, cssResetEmbed, form, input, labe
 -}
 button :: (HyperView id) => Action id -> Mod id -> View id () -> View id ()
 button a f cd = do
-  tag "button" (att "data-on-click" (toAction a) . f) cd
+  tag "button" (onClick a . f) cd
 
 
 {- | Type-safe dropdown. Sends (opt -> Action id) when selected. The selection predicate (opt -> Bool) controls which option is selected. See [Example.Contacts](https://github.com/seanhess/hyperbole/blob/main/example/Example/Contacts.hs)
@@ -46,6 +45,7 @@ dropdown
   -> View id ()
 dropdown act isSel f options = do
   c <- context
+  -- on change doesn't work in a vaccum: requires the element to have a "value" attribute set to the event in question
   tag "select" (att "data-on-change" "" . dataTarget c . f) $ do
     addContext (Option act isSel) options
 
@@ -75,16 +75,8 @@ data Option opt id action = Option
 
 -- | A live search field
 search :: (HyperView id) => (Text -> Action id) -> DelayMs -> Mod id -> View id ()
-search onInput delay f = do
-  c <- context
-  tag "input" (att "data-on-input" (toActionInput onInput) . att "data-delay" (pack $ show delay) . dataTarget c . f) none
-
-
--- | Serialize a constructor that expects a single 'Text', like `data MyAction = GoSearch Text`
-toActionInput :: (ViewAction a) => (Text -> a) -> Text
-toActionInput con =
-  -- remove the ' ""' at the end of the constructor
-  T.dropEnd 3 $ toAction $ con ""
+search a delay f = do
+  tag "input" (onInput a delay . f) none
 
 
 {- | A hyperlink to another route

src/Web/Hyperbole/View/Event.hs

@@ -1,6 +1,7 @@
 module Web.Hyperbole.View.Event where
 
-import Data.Text (pack)
+import Data.Text (Text, pack)
+import Data.Text qualified as T
 import Web.Hyperbole.HyperView
 import Web.View (Mod, View, att, el, flexCol, hide, parent)
 
@@ -13,7 +14,7 @@ type DelayMs = Int
 @
 pollMessageView :: Text -> 'View' Message ()
 pollMessageView m = do
-  onLoad LoadMessage 1000 $ do
+  col (onLoad LoadMessage 1000) $ do
     'el' 'bold' "Current Message. Reloading in 1s"
     'el_' ('text' m)
 @
@@ -23,6 +24,23 @@ onLoad a delay = do
   att "data-on-load" (toAction a) . att "data-delay" (pack $ show delay)
 
 
+onClick :: (HyperView id) => Action id -> Mod id
+onClick a = do
+  att "data-on-click" (toAction a)
+
+
+onInput :: (HyperView id) => (Text -> Action id) -> DelayMs -> Mod id
+onInput a delay = do
+  att "data-on-input" (toActionInput a) . att "data-delay" (pack $ show delay)
+
+
+-- | Serialize a constructor that expects a single 'Text', like `data MyAction = GoSearch Text`
+toActionInput :: (ViewAction a) => (Text -> a) -> Text
+toActionInput con =
+  -- remove the ' ""' at the end of the constructor
+  T.dropEnd 3 $ toAction $ con ""
+
+
 {- | Give visual feedback when an action is in-flight.
 
 @