jamesgary / elm-config-ui / ConfigForm

Note: The config in the following type signatures is a record of all your config values, like...

type alias Config =
    { headerFontSize : Int
    , bodyFontSize : Int
    , backgroundColor : Color
    }

Also, Value is shorthand for Json.Encode.Value.


type ConfigForm

ConfigForm is the state of the config form. Keep it in your model along with the config record.

init : InitOptions config -> ( config, ConfigForm )

init will create both a valid Config and ConfigForm.


type alias InitOptions config =
{ flags : Json.Encode.Value
, logics : List (Logic config)
, emptyConfig : config 
}

InitOptions are used to initialize your config and ConfigForm.

{ flags = flagsFromJavascript
, logics = Config.logics
, emptyConfig = Config.empty
}

Config is your generated module that was made using ConfigFormGenerator.


type alias Defaults =
{ int : Basics.Int
, float : Basics.Float
, string : String
, bool : Basics.Bool
, color : Color 
}

If a particular value isn't found from localStorage or file, then it fallbacks to these values. It might be a good idea to use wild values that are easy to spot so you can quickly replace them with real values.

defaults =
    { int = -9999
    , float = -9999
    , string = "PLEASE REPLACE ME"
    , bool = True
    , color = Color.rgb 1 0 1 -- hot pink!
    }

Msg


type Msg config

A Msg is an opaque type for ConfigForm to communicate with your app through ConfigForm.update.

Update

update : List (Logic config) -> config -> ConfigForm -> Msg config -> ( config, ConfigForm )

When you receive a Config.Msg, update your Config and ConfigForm using this. It returns a new Config and ConfigForm, plus possible json to pass through ports for pointerlock.

update : Msg -> Model -> ( Model, Cmd Msg )
update msg model =
    case msg of
        ConfigFormMsg configFormMsg ->
            let
                ( newConfig, newConfigForm, maybeJsonCmd ) =
                    ConfigForm.update
                        Config.logics
                        model.config
                        model.configForm
                        configFormMsg

                newModel =
                    { model
                        | config = newConfig
                        , configForm = newConfigForm
                    }
            in
            ( newModel
            , Cmd.batch
                [ saveToLocalStorageCmd newModel
                , case maybeJsonCmd of
                    Just jsonCmd ->
                        sendToPort
                            (Json.Encode.object
                                [ ( "id", Json.Encode.string "CONFIG" )
                                , ( "val", jsonCmd )
                                ]
                            )

                    Nothing ->
                        Cmd.none
                ]
            )

Encoding

encode : ConfigForm -> Json.Encode.Value

Encodes the current Config (with some metadata) in your ConfigForm. Usually used for both localStorage and as a .json file.

View

view : ViewOptions -> List (Logic config) -> ConfigForm -> Html (Msg config)

View the config form.

View options

viewOptions : ViewOptions

Default options for viewing the config form.

withFontSize : Basics.Int -> ViewOptions -> ViewOptions

Update the font size in px. Default is 18.

withRowSpacing : Basics.Int -> ViewOptions -> ViewOptions

Update the row spacing in px. Default is 2.

withInputWidth : Basics.Int -> ViewOptions -> ViewOptions

Update the width of inputs in px. Default is 80.

withInputSpacing : Basics.Float -> ViewOptions -> ViewOptions

Update the inner spacing of inputs by a ratio of its font size. Default is 1.40.

withLabelHighlightBgColor : Color -> ViewOptions -> ViewOptions

Update the row color when hovering field labels that are pointerlock-able. Default is yellow: (0.8, 0.8, 1).

withSectionSpacing : Basics.Int -> ViewOptions -> ViewOptions

Update the extra top spacing for sections in px. Default is 20.

Used only by generated Config code

int : String -> String -> (config -> Basics.Int) -> (Basics.Int -> config -> config) -> Logic config

Creates the logic for Int values

float : String -> String -> (config -> Basics.Float) -> (Basics.Float -> config -> config) -> Logic config

Creates the logic for Float values

string : String -> String -> (config -> String) -> (String -> config -> config) -> Logic config

Creates the logic for String values

bool : String -> String -> (config -> Basics.Bool) -> (Basics.Bool -> config -> config) -> Logic config

Creates the logic for Bool values

color : String -> String -> (config -> Color) -> (Color -> config -> config) -> Logic config

Creates the logic for Color values

section : String -> Logic config

Creates the logic for Section values