Select seed input box on focus

gergoerdi · May 20, 2020 · 1dcb6b8 · 1dcb6b8
1 parent c58f603
commit 1dcb6b8
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 42 deletions.
diff --git a/src/Codenames/Duet/Web.idr b/src/Codenames/Duet/Web.idr
@@ -46,15 +46,7 @@ render () ps@(MkPageState fields side _) = div [cssClass "container"]
     [ button (playerBtn Player1 [cssClass "left", onclick $ SwitchPlayer Player2 ]) "Player 1"
     , div [cssClass "mid"]
       [ node0 "label" [ stringAttribute "for" "seed"] [text "Seed:"]
-      , numInput
-          [ stringAttribute "id" "seed"
-          , propertyAttribute "style" "width: 5ex"
-          , stringAttribute "value" $ show $ seed ps
-          , onchange (NewSeed . cast . substr 0 4)
-          -- TODO: manage selection
-          -- , eventListenerAttribute "onfocus" (\this => ?select)
-          -- , eventListenerAttribute "onmouseup" (\this => pure False)
-          ]
+      , NewSeed <$> seedInput (seed ps)
       ]
     , button (playerBtn Player2 [cssClass "right", onclick $ SwitchPlayer Player1 ]) "Player 2"
     ]
@@ -63,18 +55,6 @@ render () ps@(MkPageState fields side _) = div [cssClass "container"]
     playerBtn : Player -> List (HtmlAttribute a) -> List (HtmlAttribute a)
     playerBtn s attrs = if s == player ps then attrs else (cssClass "hidden")::attrs
 
-    numAttrs : List (InputAttribute a)
-    numAttrs =
-      [ propertyAttribute "type" "text"
-      , stringAttribute "maxlength" "4"
-      , stringAttribute "size" "4"
-      , stringAttribute "inputmode" "numeric"
-      , propertyAttribute "pattern" "[0-9]{4}"
-      ]
-
-    numInput : List (InputAttribute a) -> Html a
-    numInput attrs = input (attrs ++ numAttrs)
-
 exec : Shuffle ASync (Player -> Fields) -> (dom : Var) -> (rnd : Var) -> Event -> ST ASync () [rnd ::: Random, dom ::: Gui {m = ASync}]
 exec shuffle dom rnd ev = case ev of
   NewSeed seed => do

diff --git a/src/Codenames/Versus/Web.idr b/src/Codenames/Versus/Web.idr
@@ -36,30 +36,10 @@ render () ps@(MkPageState fields firstPlayer _) = div [cssClass "container"]
   , div [cssClass "buttons"]
     [ div [cssClass "mid"]
       [ node0 "label" [ stringAttribute "for" "seed"] [text "Seed:"]
-      , numInput
-          [ stringAttribute "id" "seed"
-          , propertyAttribute "style" "width: 5ex"
-          , stringAttribute "value" $ show $ seed ps
-          , onchange (NewSeed . cast . substr 0 4)
-          -- TODO: manage selection
-          -- , eventListenerAttribute "onfocus" (\this => ?select)
-          -- , eventListenerAttribute "onmouseup" (\this => pure False)
-          ]
+      , NewSeed <$> seedInput (seed ps)
       ]
     ]
   ]
-  where
-    numAttrs : List (InputAttribute a)
-    numAttrs =
-      [ propertyAttribute "type" "text"
-      , stringAttribute "maxlength" "4"
-      , stringAttribute "size" "4"
-      , stringAttribute "inputmode" "numeric"
-      , propertyAttribute "pattern" "[0-9]{4}"
-      ]
-
-    numInput : List (InputAttribute a) -> Html a
-    numInput attrs = input (attrs ++ numAttrs)
 
 exec : Shuffle ASync (Fields, String) -> (dom : Var) -> (rnd : Var) -> Event -> ST ASync () [rnd ::: Random, dom ::: Gui {m = ASync}]
 exec shuffle dom rnd ev = case ev of

diff --git a/src/Codenames/Web.idr b/src/Codenames/Web.idr
@@ -17,3 +17,25 @@ table xs = node0 "table" [] [node0 "tbody" [] $ toList $ map row xs]
 
 grid : (h : Nat) -> (w : Nat) -> Vect (h * w) String -> Html ev
 grid h w = table . unconcat h w . map (\field => node0 "td" [cssClass field] [])
+
+partial seedInput : Integer -> Html Integer
+seedInput currentSeed = numInput
+    [ stringAttribute "id" "seed"
+    , propertyAttribute "style" "width: 5ex"
+    , stringAttribute "value" $ show currentSeed
+    , onchange (cast . substr 0 4) -- TODO: why is this not total?
+    , stringAttribute "onfocus" "this.select();"
+    , stringAttribute "onmouseup" "return false;"
+    ]
+  where
+    numAttrs : List (InputAttribute a)
+    numAttrs =
+      [ propertyAttribute "type" "text"
+      , stringAttribute "maxlength" "4"
+      , stringAttribute "size" "4"
+      , stringAttribute "inputmode" "numeric"
+      , propertyAttribute "pattern" "[0-9]{4}"
+      ]
+
+    numInput : List (InputAttribute a) -> Html a
+    numInput attrs = input (attrs ++ numAttrs)