svg.escobar.life

A simple SVG markup editor for the web

Commit: fb3d99a8eda6f8ee54d4cd28cf46afdfdddbf4d0
Parent: a0c0d390cc709cc6e6c4a1e79c693dc5881d8f32
Author: Pablo Emilio Escobar Gaviria <pablo-escobar@riseup.net>
Date: Wed, 16 Dec 2020 17:02:46 -0300

Formatted the Elm code

Diffstat

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" ] 
     []
+