Add the selected value encoding and the selected value attributes.

DripEmail · May 20, 2022 · 2271421 · 2271421
1 parent 6c3a305
commit 2271421
Show file tree

Hide file tree

Showing 2 changed files with 63 additions and 3 deletions.
diff --git a/elm.json b/elm.json
@@ -11,6 +11,7 @@
             "elm/core": "1.0.5",
             "elm/html": "1.0.0",
             "elm/json": "1.1.3",
+            "elm/url": "1.0.0",
             "elm-community/html-extra": "3.4.0",
             "elm-community/json-extra": "4.3.0",
             "elm-community/list-extra": "8.5.2",
@@ -27,7 +28,6 @@
             "elm/parser": "1.1.0",
             "elm/regex": "1.0.0",
             "elm/time": "1.0.0",
-            "elm/url": "1.0.0",
             "elm/virtual-dom": "1.0.2",
             "rtfeldman/elm-iso8601-date-strings": "1.1.4"
         }

diff --git a/src/Demo.elm b/src/Demo.elm
@@ -25,6 +25,7 @@ import Html.Events exposing (on, onClick)
 import Html.Events.Extra exposing (onChange)
 import Json.Decode
 import Json.Encode
+import Url
 
 
 type alias Flags =
@@ -36,6 +37,8 @@ type alias Model =
     , allowMultiSelect : Bool
     , outputStyle : String
     , customValidationResult : ValidationResult
+    , selectedValueEncoding : String
+    , selectedValues : List MuchSelectValue
     }
 
 
@@ -55,6 +58,7 @@ type Msg
     | ToggleAllowCustomValues
     | ToggleMultiSelect
     | ChangeOutputStyle String
+    | ChangeSelectedValueEncoding String
 
 
 main : Program Flags Model Msg
@@ -73,6 +77,8 @@ init _ =
       , allowMultiSelect = False
       , outputStyle = "custom-html"
       , customValidationResult = NothingToValidate
+      , selectedValueEncoding = "json"
+      , selectedValues = []
       }
     , Cmd.none
     )
@@ -81,8 +87,8 @@ init _ =
 update : Msg -> Model -> ( Model, Cmd Msg )
 update msg model =
     case msg of
-        ValueChanged _ ->
-            ( model, Cmd.none )
+        ValueChanged selectedValues ->
+            ( { model | selectedValues = selectedValues }, Cmd.none )
 
         InvalidValueChanged _ ->
             ( model, Cmd.none )
@@ -137,6 +143,9 @@ update msg model =
             in
             ( { model | customValidationResult = customValidationResult }, Cmd.none )
 
+        ChangeSelectedValueEncoding string ->
+            ( { model | selectedValueEncoding = string }, Cmd.none )
+
 
 subscriptions : Model -> Sub Msg
 subscriptions _ =
@@ -271,6 +280,30 @@ outputStyleAttribute string =
     attribute "output-style" string
 
 
+selectedValueEncodingAttribute : String -> Attribute msg
+selectedValueEncodingAttribute encoding =
+    attribute "selected-value-encoding" encoding
+
+
+selectedValueAttribute : String -> List MuchSelectValue -> Attribute msg
+selectedValueAttribute encoding muchSelectValues =
+    let
+        selectedValueStr =
+            if encoding == "json" then
+                muchSelectValues
+                    |> List.map .value
+                    |> Json.Encode.list Json.Encode.string
+                    |> Json.Encode.encode 0
+                    |> Url.percentEncode
+
+            else
+                muchSelectValues
+                    |> List.map .value
+                    |> String.join ","
+    in
+    attribute "selected-value" selectedValueStr
+
+
 view : Model -> Html Msg
 view model =
     let
@@ -285,9 +318,11 @@ view model =
     div []
         [ Html.node "much-select"
             [ attribute "events-only" ""
+            , selectedValueEncodingAttribute model.selectedValueEncoding
             , allowCustomOptionsAttribute model.allowCustomOptions
             , multiSelectAttribute model.allowMultiSelect
             , outputStyleAttribute model.outputStyle
+            , selectedValueAttribute model.selectedValueEncoding model.selectedValues
             , onValueChanged
             , onInvalidValueChanged
             , onCustomValidationRequest
@@ -374,6 +409,31 @@ view model =
                     []
                 , label [ for "output-style-datalist" ] [ text "datalist" ]
                 ]
+            , fieldset []
+                [ legend []
+                    [ text "Selected Value Encodeing"
+                    ]
+                , input
+                    [ type_ "radio"
+                    , name "selected-value-encoding"
+                    , id "selected-value-encoding-comma"
+                    , value "comma"
+                    , checked (model.selectedValueEncoding == "comma")
+                    , onChange ChangeSelectedValueEncoding
+                    ]
+                    []
+                , label [ for "selected-value-encoding-comma" ] [ text "Commas" ]
+                , input
+                    [ type_ "radio"
+                    , name "selected-value-encoding"
+                    , id "selected-value-encoding-json"
+                    , value "json"
+                    , checked (model.selectedValueEncoding == "json")
+                    , onChange ChangeSelectedValueEncoding
+                    ]
+                    []
+                , label [ for "selected-value-encoding-json" ] [ text "JSON" ]
+                ]
             ]
         ]