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

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

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
+        addHtml [HAMLET|
-#if GHC7
-                [hamlet|
-#else
-                [$hamlet|
-#endif
 %input#$theId$!name=$name$!type=date!:isReq:required!value=$val$
 |]
         addScript' urlJqueryJs
         addScript' urlJqueryUiJs
         addStylesheet' urlJqueryUiCss
-        addJulius
+        addJulius [JULIUS|
-#if GHC7
-                [julius|
-#else
-                [$julius|
-#endif
 $(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
+        addHtml [HAMLET|
-#if GHC7
-                [hamlet|
-#else
-                [$hamlet|
-#endif
 %input#$theId$!name=$name$!:isReq:required!value=$val$
 |]
         addScript' urlJqueryJs
         addScript' urlJqueryUiJs
         addScript' urlJqueryUiDateTimePicker
         addStylesheet' urlJqueryUiCss
-        addJulius
+        addJulius [JULIUS|
-#if GHC7
-                [julius|
-#else
-                [$julius|
-#endif
 $(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
+        addHtml [HAMLET|
-#if GHC7
-                [hamlet|
-#else
-                [$hamlet|
-#endif
 %input.autocomplete#$theId$!name=$name$!type=text!:isReq:required!value=$val$
 |]
         addScript' urlJqueryJs
         addScript' urlJqueryUiJs
         addStylesheet' urlJqueryUiCss
-        addJulius
+        addJulius [JULIUS|
-#if GHC7
-                [julius|
-#else
-                [$julius|
-#endif
 $(function(){$("#%theId%").autocomplete({source:"@src@",minLength:2})});
 |]
     }

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|
-        [hamlet|
-#else
-        [$hamlet|
-#endif
 %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|
-        [hamlet|
-#else
-        [$hamlet|
-#endif
 %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|
-        [hamlet|
-#else
-        [$hamlet|
-#endif
 %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|
-        [hamlet|
-#else
-        [$hamlet|
-#endif
 %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|
-        [hamlet|
-#else
-        [$hamlet|
-#endif
 %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|
-        [hamlet|
-#else
-        [$hamlet|
-#endif
 %textarea#$theId$!name=$name$ $val$
 |]
     }
@@ -139,11 +129,7 @@ hiddenFieldProfile = FieldProfile
     { fpParse = Right
     , fpRender = id
     , fpWidget = \theId name val _isReq -> addHamlet
-#if GHC7
+        [HAMLET|
-        [hamlet|
-#else
-        [$hamlet|
-#endif
 %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|
-        [hamlet|
-#else
-        [$hamlet|
-#endif
 %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|
-        [hamlet|
-#else
-        [$hamlet|
-#endif
 %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|
-        [hamlet|
-#else
-        [$hamlet|
-#endif
 %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|
-        [hamlet|
-#else
-        [$hamlet|
-#endif
 %input#$theId$!name=$name$!type=url!:isReq:required!value=$val$
 |]
     }