- Commit
- fb3d99a8eda6f8ee54d4cd28cf46afdfdddbf4d0
- Parent
- a0c0d390cc709cc6e6c4a1e79c693dc5881d8f32
- Author
- Pablo Emilio Escobar Gaviria <pablo-escobar@riseup.net>
- Date
Formatted the Elm code
A simple SVG markup editor for the web
Formatted the Elm code
5 files changed, 87 insertions, 83 deletions
Status | File Name | N° Changes | Insertions | Deletions |
Modified | Makefile | 2 | 1 | 1 |
Modified | src/Editor.elm | 65 | 31 | 34 |
Modified | src/Main.elm | 77 | 41 | 36 |
Modified | src/Types.elm | 4 | 2 | 2 |
Modified | src/View.elm | 22 | 12 | 10 |
diff --git a/Makefile b/Makefile @@ -9,4 +9,4 @@ build: cp js/* _site/js/ auto-compile: - ls src/*.elm js/* css/* index.html | entr make build + ls src/*.elm js/* css/* assets/* index.html | entr make build
diff --git a/src/Editor.elm b/src/Editor.elm @@ -11,53 +11,50 @@ import SyntaxHighlight exposing (xml, toBlockHtml) editor : Model -> Html Msg editor model = - div [ id "editor" - , region - , label "Text editor" - ] - [ div - [ hidden True, translate model.editorScroll ] - [ codeDisplay model ] - , textarea model - ] + div [ id "editor" + , region + , label "Text editor" + ] + [ div + [ hidden True, translate model.editorScroll ] + [ codeDisplay model ] + , textarea model + ] textarea : Model -> Html Msg textarea model = - Html.textarea - [ value model.image - , onInput Update - , onScroll Scroll - , spellcheck False - , alt "Text Editor" - ] [] + Html.textarea + [ value model.image + , onInput Update + , onScroll Scroll + , spellcheck False + , alt "Text Editor" + ] [] codeDisplay : Model -> Html Msg codeDisplay model = - xml (if model.image == "" then placeholder else model.image) - |> Result.map (toBlockHtml Nothing) - |> Result.withDefault - (pre [] [ code [] [ text model.image ] ]) + xml (if model.image == "" then placeholder else model.image) + |> Result.map (toBlockHtml Nothing) + |> Result.withDefault (pre [] [ code [] [ text model.image ] ]) onScroll : ((Int, Int) -> msg) -> Attribute msg onScroll f = - on "scroll" - (Json.Decode.map2 (\x -> \y -> (x, y)) - (Json.Decode.at [ "target", "scrollLeft" ] Json.Decode.int) - (Json.Decode.at [ "target", "scrollTop" ] Json.Decode.int) - |> Json.Decode.map f - ) - -transform : String -> Attribute msg -transform str = - style "transform" str + Json.Decode.map2 + (\x -> \y -> (x, y)) + (Json.Decode.at [ "target", "scrollLeft" ] Json.Decode.int) + (Json.Decode.at [ "target", "scrollTop" ] Json.Decode.int) + |> Json.Decode.map f + |> on "scroll" translate : (Int, Int) -> Attribute Msg translate (x, y) = - transform ("translate(" ++ (show -x) ++ "px, " ++ (show -y) ++ "px)") + let + show = String.fromInt + in + style + "transform" + ("translate(" ++ (show -x) ++ "px, " ++ (show -y) ++ "px)") placeholder : String placeholder = "<svg ...> ... </svg>" -show : Int -> String -show = String.fromInt -
diff --git a/src/Main.elm b/src/Main.elm @@ -20,56 +20,59 @@ main = , subscriptions = \_ -> Sub.none } - update : Msg -> Model -> (Model, Cmd Msg) update msg model = - case msg of - Update image -> - ({ model | image = image }, Cmd.none) + case msg of + Update image -> + ({ model | image = image }, Cmd.none) - Load res -> - (load model res, Cmd.none) + Load res -> + (load model res, Cmd.none) - Validation val -> - ({ model | status = val }, Cmd.none) + Validation val -> + ({ model | status = val }, Cmd.none) - ToggleDarkMode -> - ({ model | mode = toggle model.mode }, Cmd.none) + ToggleDarkMode -> + ({ model | mode = toggle model.mode }, Cmd.none) - Download -> - (model, Download.string model.fileName "image/svg+xml" model.image) + Download -> + (model, Download.string model.fileName "image/svg+xml" model.image) - Upload upl -> - upload model upl + Upload upl -> + upload model upl - Scroll scroll -> - ({model | editorScroll = scroll}, Cmd.none) + Scroll scroll -> + ({model | editorScroll = scroll}, Cmd.none) load : Model -> Result Http.Error String -> Model load model res = - case res of - Ok svg -> - { model | image = svg, load = Loaded } + case res of + Ok svg -> + { model | image = svg, load = Loaded } - Err _ -> - { model | load = Loaded } + Err _ -> + { model | load = Loaded } upload : Model -> Upload -> (Model, Cmd Msg) upload model upl = case upl of - Requested -> - (model, Select.file [ "image/svg+xml" ] (\file -> Upload (Selected file))) + Requested -> + (model, Select.file [ "image/svg+xml" ] (Selected >> Upload)) - Selected file -> - ({ model | fileName = File.name file }, Task.perform Update (File.toString file)) + Selected file -> + ( { model | fileName = File.name file } + , Task.perform Update (File.toString file) + ) init : Model init = + let + re = "!|#|\\$|%|&|'|\\(|\\)|\\*|\\+|,|\\/|:|;|=|\\?|@|\\[|\\]" + in { image = emptySvg , status = Valid , mode = Light - , uriEncoder = Maybe.withDefault Regex.never - <| Regex.fromString "!|#|\\$|%|&|'|\\(|\\)|\\*|\\+|,|\\/|:|;|=|\\?|@|\\[|\\]" + , uriEncoder = Maybe.withDefault Regex.never (Regex.fromString re) , fileName = "example.svg" , editorScroll = (0, 0) , load = Loading @@ -77,17 +80,20 @@ init = loadContent : Cmd Msg loadContent = - Http.get - { url = "assets/example.svg" - , expect = Http.expectString Load - } + Http.get + { url = "assets/example.svg" + , expect = Http.expectString Load + } toggle : Mode -> Mode toggle mode = - case mode of - Light -> Dark + case mode of + Light -> + Dark - Dark -> Light + Dark -> + Light emptySvg : String -emptySvg = "<svg> . . . </svg>"- \ No newline at end of file +emptySvg = "<svg> . . . </svg>" +
diff --git a/src/Types.elm b/src/Types.elm @@ -37,4 +37,5 @@ type Msg | ToggleDarkMode | Download | Upload Upload - | Scroll (Int, Int)- \ No newline at end of file + | Scroll (Int, Int) +
diff --git a/src/View.elm b/src/View.elm @@ -40,9 +40,11 @@ view model = { title = "SVG Editor" , body = case model.load of - Loading -> [] + Loading -> + [] - Loaded -> [ lazy container model ] + Loaded -> + [ lazy container model ] } container : Model -> Html Msg @@ -94,7 +96,7 @@ display model = uri : Model -> String uri model = "data:image/svg+xml;utf8," - ++ (replace model.uriEncoder percentEscape model.image) + ++ (replace model.uriEncoder percentEscape model.image) percentEscape : Match -> String percentEscape m = @@ -134,10 +136,6 @@ loaded model = then onError (Validation Invalid) else onLoad (Validation Valid) -link : List (Attribute Msg) -> List (Html Msg) -> Html Msg -link attrs content = - a ([ target "_blank", rel "noopener noreferrer" ] ++ attrs) content - valid : Status -> Bool valid status = case status of @@ -148,9 +146,11 @@ valid status = darkMode : Mode -> Bool darkMode mode = case mode of - Light -> False + Light -> + False - Dark -> True + Dark -> + True downloadIcon : Html Msg downloadIcon = @@ -173,7 +173,8 @@ uploadIcon = bulbIcon : Mode -> Html Msg bulbIcon mode = img - [ src (if darkMode mode then "assets/bulb-on.svg" else "assets/bulb-off.svg") + [ src + (if darkMode mode then "assets/bulb-on.svg" else "assets/bulb-off.svg") , hidden True , alt "Toggle dark mode" ] @@ -184,3 +185,4 @@ errorIcon = img [ id "error", src "assets/error.svg", alt "Something Went Wrong" ] [] +