rowtype-yoga/purescript-docs-search
1
0
Fork 0
mirror of https://github.com/rowtype-yoga/purescript-docs-search.git synced 2024-08-17 08:30:23 +03:00
Code Issues Packages Projects Releases Wiki Activity

use input.select() (#12)

Browse Source 
close #11
This commit is contained in:
Vladimir Kalnitsky 2019-07-24 19:09:27 +03:00 committed by GitHub
parent ba841411e9
commit 4d0c6f4969
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 16 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
src/Docs/Search/App/SearchField.purs
View File

@ -18,7 +18,8 @@ import Web.DOM.ParentNode as ParentNode
import Web.HTML (window) as Web
import Web.HTML as HTML
import Web.HTML.HTMLDocument as HTMLDocument
import Web.HTML.HTMLElement (blur, focus, fromElement) as Web
import Web.HTML.HTMLElement (blur) as Web
import Web.HTML.HTMLInputElement as HTMLInputElement
import Web.HTML.Window (document) as Web
import Web.HTML.Window as Window
import Web.UIEvent.KeyboardEvent (KeyboardEvent)
@ -65,12 +66,19 @@ handleAction = case _ of
(map (HandleKey sid) <<< KE.fromEvent)
HandleKey sid ev -> do
when (KE.code ev == "KeyS") do
H.liftEffect $ withSearchField Web.focus
state <- H.get
when (not state.focused) do
H.liftEffect do
withSearchField HTMLInputElement.select
when (KE.code ev == "Escape") do
state <- H.get
if state.focused
then H.liftEffect $ withSearchField Web.blur
then do
H.liftEffect do
withSearchField (HTMLInputElement.toHTMLElement >>> Web.blur)
else do
H.modify_ (_ { input = "" })
H.raise $ InputCleared
@ -80,7 +88,8 @@ handleAction = case _ of
EnterPressed -> do
state <- H.get
H.liftEffect $ withSearchField Web.blur
H.liftEffect do
withSearchField (HTMLInputElement.toHTMLElement >>> Web.blur)
H.raise $ InputUpdated state.input
FocusChanged status -> do
@ -90,7 +99,7 @@ handleAction = case _ of
then Focused
else LostFocus
withSearchField :: (HTML.HTMLElement -> Effect Unit) -> Effect Unit
withSearchField :: (HTML.HTMLInputElement -> Effect Unit) -> Effect Unit
withSearchField cont = do
doc <- Document.toParentNode <$>
HTMLDocument.toDocument <$>
@ -99,7 +108,7 @@ withSearchField cont = do
let selector = wrap "#docs-search-query-field"
mbEl <- ParentNode.querySelector selector doc
maybe mempty cont (mbEl >>= Web.fromElement)
maybe mempty cont (mbEl >>= HTMLInputElement.fromElement)
render :: forall m. State -> H.ComponentHTML Action () m
render state =
@ -115,7 +124,7 @@ render state =
[ HH.input
[ HP.value state.input
, HP.placeholder "Search for definitions"
, HP.placeholder "Search for definitions... (S to focus)"
, HP.id_ "docs-search-query-field"
, HP.type_ HP.InputText
, HE.onKeyUp (\event ->