Skip to content

Instantly share code, notes, and snippets.

@jcollard
Last active February 5, 2016 14:36
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save jcollard/167cb292dc8f203fa66e to your computer and use it in GitHub Desktop.
Save jcollard/167cb292dc8f203fa66e to your computer and use it in GitHub Desktop.
import Html exposing (div, button, text, input, node)
import Html.Events exposing (onClick)
import Html.Attributes exposing (type', class)
import StartApp
main =
StartApp.start { model = model, view = view, update = update }
model = []
view address model =
(node "style" [] [ Html.text style ]) ::
(node "script" [] [Html.text script ]) ::
(button [ onClick address AddInput ] [ text "Add Input" ]) ::
model |>
div []
type Action = AddInput
update action model =
case action of
AddInput -> (Html.p [] [input [type' "text", class "focus"] []]) :: model
style = """
.focus {
animation-name: set-focus;
animation-duration: 0.001s;
-webkit-animation-name: set-focus;
-webkit-animation-duration: 0.001s;
}
@-webkit-keyframes set-focus {
0% {color: #fff}
}
keyframes set-focus {
0% {color: #fff}
}
"""
script = """
var insertListener = function(event){
if (event.animationName == "set-focus") {
event.target.focus();
}
}
document.addEventListener("animationstart", insertListener, false); // standard + firefox
document.addEventListener("MSAnimationStart", insertListener, false); // IE
document.addEventListener("webkitAnimationStart", insertListener, false); // Chrome + Safari
"""
@jcollard
Copy link
Author

jcollard commented Aug 9, 2015

This is a horrible ugly hack that doesn't take advantage of Elm.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment