Merge pull request #4 from hakonrossebo/badges

Badges - initial implementation

.gitignore

@@ -4,3 +4,4 @@ elm.js
 index.html
 docs.json
 documentation.json
+.vscode/

examples/Demo.elm

@@ -17,6 +17,7 @@ import Demo.Buttons
 import Demo.Grid
 import Demo.Textfields
 import Demo.Snackbar
+import Demo.Badges
 --import Demo.Template
 
 -- MODEL
@@ -118,9 +119,9 @@ tabs =
   , ("Template", \addr model -> 
       [Demo.Template.view (Signal.forwardTo addr TemplateAction) model.template])
   -}
+  , ("Badges", \addr model -> Demo.Badges.view )
   ]
 
-
 tabViews : Array (Addr -> Model -> List Html)
 tabViews = List.map snd tabs |> Array.fromList
 

examples/Demo/Badges.elm

@@ -0,0 +1,27 @@
+module Demo.Badges where
+
+import Html exposing (..)
+import Html.Attributes exposing (class, style, key)
+import Material.Badge as Badge
+import Material.Style exposing (..)
+
+-- VIEW
+
+view : List Html
+view = [  div [][p [][]
+        , styled span  [Badge.withBadge "2"]  [ ] [ text "Span with badge" ]
+        , p [][]
+        , styled span  [Badge.withBadge "22", Badge.noBackground]  [ ] [ text "Span with no background badge" ]
+        , p [][]
+        , styled span  [Badge.withBadge "33", Badge.overlap]  [ ] [ text "Span with badge overlap" ]
+        , p [][]
+        , styled span  [Badge.withBadge "99", Badge.overlap, Badge.noBackground]  [ ] [ text "Span with badge overlap and no background" ]
+        , p [][]
+        , styled span  [Badge.withBadge "♥"]  [ ] [ text "Span with HTML symbol - Black heart suit" ]
+        , p [][]
+        , styled span  [Badge.withBadge "→"]  [ ] [ text "Span with HTML symbol - Rightwards arrow" ]
+        , p [][]
+        , styled span  [Badge.withBadge "Δ"]  [ ] [ text "Span with HTML symbol - Delta" ]
+        , p [][]
+    ]
+  ]

src/Material/Badge.elm

@@ -0,0 +1,61 @@
+module Material.Badge
+  ( noBackground
+  , overlap
+  , withBadge
+  ) where
+
+{-| From the [Material Design Lite documentation](http://www.getmdl.io/components/#badges-section):
+
+> The Material Design Lite (MDL) badge component is an onscreen notification element.
+> A badge consists of a small circle, typically containing a number or other characters,
+> that appears in proximity to another object. A badge can be both a notifier that there
+> are additional items associated with an object and an indicator of how many items there are.
+>
+> You can use a badge to unobtrusively draw the user's attention to items they might not
+> otherwise notice, or to emphasize that items may need their attention. For example:
+>
+> A "New messages" notification might be followed by a badge containing the number of unread messages.
+> A "You have unpurchased items in your shopping cart" reminder might include a badge
+> showing the number of items in the cart.
+> A "Join the discussion!" button might have an accompanying badge indicating the number of
+> users currently participating in the discussion.
+> A badge is almost always positioned near a link so that the user has a convenient way to access 
+> the additional information indicated by the badge. However, depending on the intent, the 
+> badge itself may or may not be part of the link.
+>
+> Badges are a new feature in user interfaces, and provide users with a visual clue to help them
+> discover additional relevant content. Their design and use is therefore an important
+> factor in the overall user experience.
+
+@docs withBadge, noBackground, overlap
+-}
+
+import String 
+import Html exposing (Attribute)
+import Html.Attributes exposing (attribute)
+import Material.Style exposing (Style, cs, attrib, multiple)
+
+
+{-| Optional style for Badge. No background for badge 
+-}
+noBackground : Style
+noBackground = 
+  cs "mdl-badge--no-background"
+
+{-| Optional style for Badge. Overlap Badge 
+-}
+overlap : Style
+overlap = 
+  cs "mdl-badge--overlap"
+
+
+{-| Main style  for Badge 
+    The parameter will set a value to data-badge="value".	Assigns string value to badge
+
+    import Material.Badge as Badge
+    badgeStyle : Style
+    badgeStyle = Badge.withBadge "3"
+-}
+withBadge : String -> Style
+withBadge databadge = 
+  multiple [cs "mdl-badge", attrib "data-badge" databadge]

src/Material/Style.elm

@@ -1,7 +1,7 @@
 module Material.Style
   ( Style
   , styled
-  , cs, cs', css, css'
+  , cs, cs', css, css', attrib, multiple
   , stylesheet
   ) where
 
@@ -17,7 +17,7 @@ add to or remove from the contents of an already constructed class Attribute.)
 @docs Style
 
 # Constructors
-@docs cs, cs', css, css'
+@docs cs, cs', css, css', attrib, multiple
 
 # Application
 @docs styled
@@ -41,8 +41,22 @@ import Html.Attributes
 type Style
   = Class String
   | CSS (String, String)
+  | Attr (String, String)
+  | Multiple (List Style)
   | NOP
 
+multipleOf : Style -> Maybe (List Style)
+multipleOf style =
+  case style of
+    Multiple multiple -> Just multiple
+    _ -> Nothing
+
+
+attrOf : Style -> Maybe (String, String)
+attrOf style =
+  case style of
+    Attr attrib -> Just attrib
+    _ -> Nothing
     
 cssOf : Style -> Maybe (String, String)
 cssOf style =
@@ -58,6 +72,14 @@ classOf style =
     _ -> Nothing
 
 
+flatten : Style -> List Style -> List Style
+flatten style styles = 
+  case style of
+    Multiple styles' ->
+      List.foldl flatten styles' styles
+    style ->
+      style :: styles
+
 {-| Handle the common case of setting attributes of a standard Html node
 from a List Style. Use like this:
 
@@ -75,10 +97,15 @@ Note that if you do specify `style`, `class`, or `classList` attributes in
 -}
 styled : (List Attribute -> a) -> List Style -> List Attribute -> a
 styled ctor styles attrs = 
+  let
+    flatStyles = List.foldl flatten [] styles      
+    styleAttrs = (List.filterMap attrOf flatStyles) 
+      |> List.map (\attrib -> Html.Attributes.attribute (fst attrib) ( snd attrib))
+  in
   ctor
-    (  Html.Attributes.style (List.filterMap cssOf styles)
+    (  Html.Attributes.style (List.filterMap cssOf flatStyles)
-    :: Html.Attributes.class (String.join " " (List.filterMap classOf styles))
+    :: Html.Attributes.class (String.join " " (List.filterMap classOf flatStyles))
-    :: attrs
+    :: List.append attrs styleAttrs
     )
 
 
@@ -103,6 +130,17 @@ css : String -> String -> Style
 css key value =
   CSS (key, value)
 
+{-| Add a custom attribute
+-}
+attrib : String -> String -> Style
+attrib key value =
+  Attr (key, value)
+
+{-| Add a custom attribute
+-}
+multiple : List Style -> Style
+multiple styles =
+  Multiple (styles)
 
 {-| Conditionally add a CSS style to a component
 -}