extends escaped character list

Author: andrewMacmurray

examples/src/Examples/Progress.elm

@@ -0,0 +1,75 @@
+module Examples.Progress exposing (examples)
+
+import Element exposing (..)
+import Element.Background as Background
+import Element.Border as Border
+import Simple.Animation as Animation exposing (Animation)
+import Simple.Animation.Property as P
+import Utils.Animated as Animated
+import Utils.UI exposing (blue, group, groups, small)
+
+
+
+-- Animation
+
+
+animateProgress : Float -> Animation
+animateProgress percent_ =
+    Animation.fromTo
+        { duration = 2000
+        , options = []
+        }
+        [ P.property "clip-path" (insetPercent 0) ]
+        [ P.property "clip-path" (insetPercent percent_) ]
+
+
+insetPercent : Float -> String
+insetPercent n =
+    "inset(0 " ++ pc (100 - n) ++ " 0 0)"
+
+
+pc : Float -> String
+pc n =
+    String.fromFloat n ++ "%"
+
+
+
+-- Progress Bar
+
+
+progressBar : Float -> Element msg
+progressBar percent =
+    el
+        [ width (fill |> maximum 300)
+        , height (px 22)
+        , Border.width 2
+        , Border.rounded 20
+        ]
+        (Animated.el (animateProgress percent)
+            [ width fill
+            , height fill
+            , Background.color blue
+            , Border.rounded 20
+            ]
+            none
+        )
+
+
+
+-- Examples
+
+
+examples : Element msg -> Element msg
+examples =
+    groups
+        [ group "clip-path Progress Bars" progressBars
+        ]
+
+
+progressBars : Element msg
+progressBars =
+    column [ spacing small, width fill ]
+        [ progressBar 100
+        , progressBar 50
+        , progressBar 30
+        ]

examples/src/Examples/Renderers.elm

@@ -126,9 +126,9 @@ typedCircle =
 examples : Element msg -> Element msg
 examples =
     groups
-        [ group "With HTML" (Element.html htmlExample)
-        , group "With SVG" (Element.html svgExample)
-        , group "With Typed SVG" (Element.html typedSvgExample)
+        [ group "With HTML" (html htmlExample)
+        , group "With SVG" (html svgExample)
+        , group "With Typed SVG" (html typedSvgExample)
         ]
 
 
@@ -143,6 +143,7 @@ stylesheet =
         .text {
             color: white;
             border-radius: 10px;
+            text-align: center;
             margin: 12px 0;
             padding: 24px;
         }
@@ -151,3 +152,8 @@ stylesheet =
             fill: blue;
         }
         """
+
+
+html : Html msg -> Element msg
+html =
+    Element.html >> Element.el [ Element.width (Element.fill |> Element.maximum 200) ]

examples/src/Main.elm

@@ -5,6 +5,7 @@ import Element exposing (..)
 import Element.Events exposing (onClick)
 import Element.Font as Font
 import Examples.FromTo as FromTo
+import Examples.Progress as Progress
 import Examples.Renderers as Renderers
 import Examples.Sequence as Sequence
 import Examples.Steps as Steps
@@ -39,6 +40,7 @@ type Example
     | Steps
     | Sequence
     | Renderers
+    | Progress
 
 
 type Msg
@@ -94,13 +96,17 @@ examples model =
         Renderers ->
             Renderers.examples
 
+        Progress ->
+            Progress.examples
+
 
 buttons : Example -> Element Msg
 buttons selected =
     [ ( FromTo, "FromTo" )
     , ( Steps, "Steps" )
     , ( Sequence, "Sequence" )
     , ( Renderers, "Renderers" )
+    , ( Progress, "Progress" )
     ]
         |> List.map (button selected)
         |> row [ spacing medium ]

examples/src/Utils/UI.elm

@@ -47,7 +47,7 @@ groups els controls =
 
 group : String -> Element msg -> Element msg
 group label x =
-    column [ spacing medium ] [ text label, x ]
+    column [ spacing medium, width fill ] [ text label, x ]
 
 
 

src/Internal/Property.elm

@@ -5,6 +5,7 @@ module Internal.Property exposing
     )
 
 import Internal.Transform as Transform exposing (Transform)
+import Set exposing (Set)
 
 
 
@@ -31,7 +32,7 @@ name prop =
             Transform.name t
 
         Raw n p ->
-            n ++ escape p
+            escape n ++ escape p
 
 
 escape : String -> String
@@ -41,7 +42,43 @@ escape =
 
 escapedChars : Char -> Bool
 escapedChars c =
-    not (List.member c [ '.', '#', ',', '(', ')', ' ' ])
+    not (Set.member c escapedChars_)
+
+
+escapedChars_ : Set Char
+escapedChars_ =
+    Set.fromList
+        [ '.'
+        , ' '
+        , ','
+        , '#'
+        , '$'
+        , '%'
+        , '('
+        , ')'
+        , '&'
+        , ';'
+        , ':'
+        , '"'
+        , '\''
+        , '*'
+        , '~'
+        , '!'
+        , '@'
+        , '^'
+        , '+'
+        , '='
+        , '/'
+        , '?'
+        , '>'
+        , '<'
+        , '['
+        , ']'
+        , '{'
+        , '}'
+        , '|'
+        , '`'
+        ]
 
 
 rounded : Int -> Float -> String