add field type of search with autoFocus

technically autoFocus could go on any field. Actually, it could only go on one field of a form. I would assume it always goes on the first non-hiden field
2010-12-11 00:30:46 -08:00 · 2010-12-11 00:30:46 -08:00 · 59486dcc77
commit 59486dcc77
parent 200ba5d111
3 changed files with 67 additions and 91 deletions
--- a/Yesod/Form/Fields.hs
+++ b/Yesod/Form/Fields.hs
@ -17,6 +17,7 @@ module Yesod.Form.Fields
    , selectField
    , boolField
    , emailField
+    , searchField
    , urlField
    , fileField
      -- ** Optional
@ -31,6 +32,7 @@ module Yesod.Form.Fields
    , maybeHtmlField
    , maybeSelectField
    , maybeEmailField
+    , maybeSearchField
    , maybeUrlField
    , maybeFileField
      -- * Inputs
@ -326,6 +328,14 @@ emailInput n =
    mapFormXml fieldsToInput $
    requiredFieldHelper emailFieldProfile (nameSettings n) Nothing

+searchField :: (IsForm f, FormType f ~ String)
+           => AutoFocus -> FormFieldSettings -> Maybe String -> f
+searchField = requiredFieldHelper . searchFieldProfile
+
+maybeSearchField :: (IsForm f, FormType f ~ Maybe String)
+                => AutoFocus -> FormFieldSettings -> Maybe (Maybe String) -> f
+maybeSearchField = optionalFieldHelper . searchFieldProfile
+
 textareaField :: (IsForm f, FormType f ~ Textarea)
              => FormFieldSettings -> Maybe Textarea -> f
 textareaField = requiredFieldHelper textareaFieldProfile
--- a/Yesod/Form/Jquery.hs
+++ b/Yesod/Form/Jquery.hs
@ -27,6 +27,16 @@ import Yesod.Hamlet
 import Data.Char (isSpace)
 import Data.Default

+#if GHC7
+#define HAMLET hamlet
+#define CASSIUS cassius
+#define JULIUS julius
+#else
+#define HAMLET $hamlet
+#define CASSIUS $cassius
+#define JULIUS $julius
+#endif
+
 -- | Gets the Google hosted jQuery UI 1.8 CSS file with the given theme.
 googleHostedJqueryUiCss :: String -> String
 googleHostedJqueryUiCss theme = concat
@ -76,23 +86,13 @@ jqueryDayFieldProfile jds = FieldProfile
              . readMay
    , fpRender = show
    , fpWidget = \theId name val isReq -> do
-        addHtml
-#if GHC7
-                [hamlet|
-#else
-                [$hamlet|
-#endif
+        addHtml [HAMLET|
 %input#$theId$!name=$name$!type=date!:isReq:required!value=$val$
 |]
        addScript' urlJqueryJs
        addScript' urlJqueryUiJs
        addStylesheet' urlJqueryUiCss
-        addJulius
-#if GHC7
-                [julius|
-#else
-                [$julius|
-#endif
+        addJulius [JULIUS|
 $(function(){$("#%theId%").datepicker({
    dateFormat:'yy-mm-dd',
    changeMonth:%jsBool.jdsChangeMonth.jds%,
@ -144,24 +144,14 @@ jqueryDayTimeFieldProfile = FieldProfile
    { fpParse  = parseUTCTime
    , fpRender = jqueryDayTimeUTCTime
    , fpWidget = \theId name val isReq -> do
-        addHtml
-#if GHC7
-                [hamlet|
-#else
-                [$hamlet|
-#endif
+        addHtml [HAMLET|
 %input#$theId$!name=$name$!:isReq:required!value=$val$
 |]
        addScript' urlJqueryJs
        addScript' urlJqueryUiJs
        addScript' urlJqueryUiDateTimePicker
        addStylesheet' urlJqueryUiCss
-        addJulius
-#if GHC7
-                [julius|
-#else
-                [$julius|
-#endif
+        addJulius [JULIUS|
 $(function(){$("#%theId%").datetimepicker({dateFormat : "yyyy/mm/dd h:MM TT"})});
 |]
    }
@ -198,23 +188,13 @@ jqueryAutocompleteFieldProfile src = FieldProfile
    { fpParse = Right
    , fpRender = id
    , fpWidget = \theId name val isReq -> do
-        addHtml
-#if GHC7
-                [hamlet|
-#else
-                [$hamlet|
-#endif
+        addHtml [HAMLET|
 %input.autocomplete#$theId$!name=$name$!type=text!:isReq:required!value=$val$
 |]
        addScript' urlJqueryJs
        addScript' urlJqueryUiJs
        addStylesheet' urlJqueryUiCss
-        addJulius
-#if GHC7
-                [julius|
-#else
-                [$julius|
-#endif
+        addJulius [JULIUS|
 $(function(){$("#%theId%").autocomplete({source:"@src@",minLength:2})});
 |]
    }
--- a/Yesod/Form/Profiles.hs
+++ b/Yesod/Form/Profiles.hs
@ -12,6 +12,8 @@ module Yesod.Form.Profiles
    , timeFieldProfile
    , htmlFieldProfile
    , emailFieldProfile
+    , searchFieldProfile
+    , AutoFocus
    , urlFieldProfile
    , doubleFieldProfile
    , parseDate
@ -22,27 +24,35 @@ module Yesod.Form.Profiles
 import Yesod.Form.Core
 import Yesod.Widget
 import Text.Hamlet
+import Text.Cassius
 import Data.Time (Day, TimeOfDay(..))
 import qualified Text.Email.Validate as Email
 import Network.URI (parseURI)
 import Database.Persist (PersistField)
 import Text.HTML.SanitizeXSS (sanitizeBalance)
+import Control.Monad (when)

 import qualified Blaze.ByteString.Builder.Html.Utf8 as B
 import Blaze.ByteString.Builder (fromWrite4List, writeByteString)

 import Yesod.Internal (lbsToChars)

+#if GHC7
+#define HAMLET hamlet
+#define CASSIUS cassius
+#define JULIUS julius
+#else
+#define HAMLET $hamlet
+#define CASSIUS $cassius
+#define JULIUS $julius
+#endif
+
 intFieldProfile :: Integral i => FieldProfile sub y i
 intFieldProfile = FieldProfile
    { fpParse = maybe (Left "Invalid integer") Right . readMayI
    , fpRender = showI
    , fpWidget = \theId name val isReq -> addHamlet
-#if GHC7
-        [hamlet|
-#else
-        [$hamlet|
-#endif
+        [HAMLET|
 %input#$theId$!name=$name$!type=number!:isReq:required!value=$val$
 |]
    }
@ -57,11 +67,7 @@ doubleFieldProfile = FieldProfile
    { fpParse = maybe (Left "Invalid number") Right . readMay
    , fpRender = show
    , fpWidget = \theId name val isReq -> addHamlet
-#if GHC7
-        [hamlet|
-#else
-        [$hamlet|
-#endif
+        [HAMLET|
 %input#$theId$!name=$name$!type=text!:isReq:required!value=$val$
 |]
    }
@ -71,11 +77,7 @@ dayFieldProfile = FieldProfile
    { fpParse = parseDate
    , fpRender = show
    , fpWidget = \theId name val isReq -> addHamlet
-#if GHC7
-        [hamlet|
-#else
-        [$hamlet|
-#endif
+        [HAMLET|
 %input#$theId$!name=$name$!type=date!:isReq:required!value=$val$
 |]
    }
@ -85,11 +87,7 @@ timeFieldProfile = FieldProfile
    { fpParse = parseTime
    , fpRender = show
    , fpWidget = \theId name val isReq -> addHamlet
-#if GHC7
-        [hamlet|
-#else
-        [$hamlet|
-#endif
+        [HAMLET|
 %input#$theId$!name=$name$!:isReq:required!value=$val$
 |]
    }
@ -99,11 +97,7 @@ htmlFieldProfile = FieldProfile
    { fpParse = Right . preEscapedString . sanitizeBalance
    , fpRender = lbsToChars . renderHtml
    , fpWidget = \theId name val _isReq -> addHamlet
-#if GHC7
-        [hamlet|
-#else
-        [$hamlet|
-#endif
+        [HAMLET|
 %textarea.html#$theId$!name=$name$ $val$
 |]
    }
@ -125,11 +119,7 @@ textareaFieldProfile = FieldProfile
    { fpParse = Right . Textarea
    , fpRender = unTextarea
    , fpWidget = \theId name val _isReq -> addHamlet
-#if GHC7
-        [hamlet|
-#else
-        [$hamlet|
-#endif
+        [HAMLET|
 %textarea#$theId$!name=$name$ $val$
 |]
    }
@ -139,11 +129,7 @@ hiddenFieldProfile = FieldProfile
    { fpParse = Right
    , fpRender = id
    , fpWidget = \theId name val _isReq -> addHamlet
-#if GHC7
-        [hamlet|
-#else
-        [$hamlet|
-#endif
+        [HAMLET|
 %input!type=hidden#$theId$!name=$name$!value=$val$
 |]
    }
@ -153,11 +139,7 @@ stringFieldProfile = FieldProfile
    { fpParse = Right
    , fpRender = id
    , fpWidget = \theId name val isReq -> addHamlet
-#if GHC7
-        [hamlet|
-#else
-        [$hamlet|
-#endif
+        [HAMLET|
 %input#$theId$!name=$name$!type=text!:isReq:required!value=$val$
 |]
    }
@ -167,11 +149,7 @@ passwordFieldProfile = FieldProfile
    { fpParse = Right
    , fpRender = id
    , fpWidget = \theId name val isReq -> addHamlet
-#if GHC7
-        [hamlet|
-#else
-        [$hamlet|
-#endif
+        [HAMLET|
 %input#$theId$!name=$name$!type=password!:isReq:required!value=$val$
 |]
    }
@ -221,15 +199,27 @@ emailFieldProfile = FieldProfile
                        else Left "Invalid e-mail address"
    , fpRender = id
    , fpWidget = \theId name val isReq -> addHamlet
-#if GHC7
-        [hamlet|
-#else
-        [$hamlet|
-#endif
+        [HAMLET|
 %input#$theId$!name=$name$!type=email!:isReq:required!value=$val$
 |]
    }

+type AutoFocus = Bool
+searchFieldProfile :: AutoFocus -> FieldProfile s y String
+searchFieldProfile autoFocus = FieldProfile
+    { fpParse = Right
+    , fpRender = id
+    , fpWidget = \theId name val isReq -> do
+        addHtml [HAMLET|
+%input#$theId$!name=$name$!type=search!:isReq:required!:autoFocus:autofocus!value=$val$
+|]
+        when autoFocus $ do
+          addHtml $ [HAMLET| <script>if (!('autofocus' in document.createElement('input'))) {document.getElementById('$theId$').focus();}</script> |]
+          addCassius [CASSIUS|
+            #$theId$ -webkit-appearance: textfield;
+            |]
+    }
+
 urlFieldProfile :: FieldProfile s y String
 urlFieldProfile = FieldProfile
    { fpParse = \s -> case parseURI s of
@ -237,11 +227,7 @@ urlFieldProfile = FieldProfile
                        Just _ -> Right s
    , fpRender = id
    , fpWidget = \theId name val isReq -> addHamlet
-#if GHC7
-        [hamlet|
-#else
-        [$hamlet|
-#endif
+        [HAMLET|
 %input#$theId$!name=$name$!type=url!:isReq:required!value=$val$
 |]
    }