-
-
Save debois/c44e0f60aa21fbdd0c41c36d41bf6d5c to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| module Proposal exposing (focused) | |
| {-| Proposed "declarative" API for setting focus. For discussion; does not | |
| address blur. | |
| -} | |
| import Html exposing (Attribute) | |
| import Html.Attributes | |
| {-| Immediately after subsequent render, focus the element carrying this | |
| attribute. | |
| -} | |
| focused : Attribute m | |
| focused = | |
| Html.Attributes.attribute "data-elm-not-implemented" "" |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| module SampleCurrent exposing (..) | |
| {-| Sample for current focus API. Renders one button and two text fields. | |
| Clicking the button focuses the first textfield. | |
| -} | |
| import Html exposing (..) | |
| import Html.Attributes exposing (..) | |
| import Html.Events exposing (..) | |
| import Html.App as App | |
| import Dom | |
| import Task exposing (Task) | |
| -- MODEL | |
| type alias Model = | |
| { text1 : String | |
| , text2 : String | |
| } | |
| type Msg | |
| = Focus | |
| | Upd1 String | |
| | Upd2 String | |
| | NoOp | |
| init : ( Model, Cmd a ) | |
| init = | |
| ( { text1 = "", text2 = "" }, Cmd.none ) | |
| -- UPDATE | |
| update : Msg -> Model -> ( Model, Cmd Msg ) | |
| update msg model = | |
| case msg of | |
| Focus -> | |
| ( model | |
| , Task.perform (always NoOp) (always NoOp) (Dom.focus "id0") | |
| ) | |
| NoOp -> | |
| ( model, Cmd.none ) | |
| Upd1 str -> | |
| ( { model | text1 = str }, Cmd.none ) | |
| Upd2 str -> | |
| ( { model | text2 = str }, Cmd.none ) | |
| -- VIEW | |
| view : Model -> Html Msg | |
| view model = | |
| div | |
| [] | |
| [ button [ onClick Focus ] [ text "Focus" ] | |
| , input [ id "id0", type' "text", value model.text1, onInput Upd1 ] [] | |
| , input [ type' "text", value model.text2, onInput Upd2 ] [] | |
| ] | |
| -- PROGRAM | |
| main : Program Never | |
| main = | |
| App.program | |
| { init = init | |
| , update = update | |
| , view = view | |
| , subscriptions = always Sub.none | |
| } | |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| module SampleProposal exposing (..) | |
| {-| Sample for proposed focus API. Renders one button and two text fields. | |
| Clicking the button focuses the first textfield. | |
| -} | |
| import Html exposing (..) | |
| import Html.Attributes exposing (..) | |
| import Html.Events exposing (..) | |
| import Html.App as App | |
| import Proposal exposing (focused) | |
| -- MODEL | |
| type alias Model = | |
| { text1 : String | |
| , text2 : String | |
| , shouldSetFocus : Bool | |
| } | |
| type Msg | |
| = Focus Bool | |
| | Upd1 String | |
| | Upd2 String | |
| init : ( Model, Cmd a ) | |
| init = | |
| ( { text1 = "", text2 = "", shouldSetFocus = False }, Cmd.none ) | |
| -- UPDATE | |
| update : Msg -> Model -> ( Model, Cmd Msg ) | |
| update msg model = | |
| case msg of | |
| Focus x -> | |
| ( { model | shouldSetFocus = x }, Cmd.none ) | |
| Upd1 str -> | |
| ( { model | text1 = str }, Cmd.none ) | |
| Upd2 str -> | |
| ( { model | text2 = str }, Cmd.none ) | |
| -- VIEW | |
| view : Model -> Html Msg | |
| view model = | |
| div | |
| [] | |
| [ button [ onClick (Focus True) ] [ text "Focus" ] | |
| , input | |
| ( [ type' "text" , value model.text1, onInput Upd1 ] ++ | |
| ( if model.shouldSetFocus then | |
| [ focused | |
| , onBlur (Focus False) | |
| {- Key complication: We must make sure we stop forcing the | |
| focus here once the user moves focus elsewhere. | |
| -} | |
| ] | |
| else | |
| [] | |
| ) | |
| ) | |
| [] | |
| , input [ type' "text", value model.text2, onInput Upd2 ] [] | |
| ] | |
| -- APP | |
| main : Program Never | |
| main = | |
| App.program | |
| { init = init | |
| , update = update | |
| , view = view | |
| , subscriptions = always Sub.none | |
| } | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment