├── .gitignore ├── LICENSE ├── README.md ├── elm-package.json └── src └── Html └── CssHelpers.elm /.gitignore: -------------------------------------------------------------------------------- 1 | elm-stuff 2 | 3 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | Copyright (c) 2015, Richard Feldman 2 | All rights reserved. 3 | 4 | Redistribution and use in source and binary forms, with or without 5 | modification, are permitted provided that the following conditions are met: 6 | 7 | * Redistributions of source code must retain the above copyright notice, this 8 | list of conditions and the following disclaimer. 9 | 10 | * Redistributions in binary form must reproduce the above copyright notice, 11 | this list of conditions and the following disclaimer in the documentation 12 | and/or other materials provided with the distribution. 13 | 14 | * Neither the name of elm-css-helpers nor the names of its 15 | contributors may be used to endorse or promote products derived from 16 | this software without specific prior written permission. 17 | 18 | THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" 19 | AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE 20 | IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE 21 | DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE 22 | FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL 23 | DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR 24 | SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER 25 | CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, 26 | OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE 27 | OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. 28 | 29 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # elm-css-helpers 2 | Helpers for using elm-css with elm-html 3 | -------------------------------------------------------------------------------- /elm-package.json: -------------------------------------------------------------------------------- 1 | { 2 | "version": "2.1.0", 3 | "summary": "Helper functions for using elm-css with elm-html", 4 | "repository": "https://github.com/rtfeldman/elm-css-helpers.git", 5 | "license": "BSD-3-Clause", 6 | "source-directories": [ 7 | "src" 8 | ], 9 | "exposed-modules": [ 10 | "Html.CssHelpers" 11 | ], 12 | "dependencies": { 13 | "elm-lang/core": "5.0.0 <= v < 6.0.0", 14 | "elm-lang/html": "2.0.0 <= v < 3.0.0", 15 | "rtfeldman/elm-css-util": "1.0.2 <= v < 3.0.0" 16 | }, 17 | "elm-version": "0.18.0 <= v < 0.19.0" 18 | } 19 | -------------------------------------------------------------------------------- /src/Html/CssHelpers.elm: -------------------------------------------------------------------------------- 1 | module Html.CssHelpers exposing (withNamespace, withClass, style, stylesheetLink, Namespace, Helpers) 2 | 3 | {-| Helper functions for using elm-css with elm-html. 4 | 5 | @docs withNamespace, withClass, style, stylesheetLink 6 | 7 | @docs Helpers, Namespace 8 | -} 9 | 10 | import Css.Helpers exposing (toCssIdentifier, identifierToString) 11 | import Html exposing (Attribute, Html) 12 | import Html.Attributes as Attr 13 | import String 14 | import Tuple 15 | import Json.Encode exposing (string) 16 | 17 | 18 | {-| Prepend the given class name to a `Html.node` function's attributes list. 19 | 20 | import Html exposing (Html, Attribute, text) 21 | import Html.Attributes exposing (class) 22 | import Html.CssHelpers exposing (withClass) 23 | 24 | 25 | {-| Create a `button` variant that automatically includes a "warning" class. 26 | -} 27 | warningButton : List (Attribute msg) -> List (Html msg) -> Html msg 28 | warningButton = 29 | withClass "warning" button 30 | 31 | 32 | confirmDeleteButton : Html msg 33 | confirmDeleteButton = 34 | -- Equivalent to: 35 | -- 36 | -- button [ class "warning" ] [ text "Confirm Deletion" ] 37 | warningButton [] [ text "Confirm Deletion" ] 38 | 39 | Since `class` attributes "stack" in Elm (e.g. 40 | `button [ class "warning", class "centered" ] []` is equivalent to 41 | `button [ class "warning centered" ] []`), this API permits further 42 | customization on a per-instance basis, either by using the `style` attribute 43 | or by stacking additional classes 44 | (for example `warningButton [ class "centered" ] []`). 45 | -} 46 | withClass : String -> (List (Attribute msg) -> List (Html msg) -> Html msg) -> List (Attribute msg) -> List (Html msg) -> Html msg 47 | withClass className makeElem attrs = 48 | makeElem (Attr.class className :: attrs) 49 | 50 | 51 | {-| Helpers for working on a given class/id 52 | -} 53 | type alias Helpers class id msg = 54 | { class : List class -> Attribute msg 55 | , classList : List ( class, Bool ) -> Attribute msg 56 | , id : id -> Attribute msg 57 | } 58 | 59 | 60 | {-| namespaced helpers for working on a given class/id 61 | -} 62 | type alias Namespace name class id msg = 63 | { class : List class -> Attribute msg 64 | , classList : List ( class, Bool ) -> Attribute msg 65 | , id : id -> Attribute msg 66 | , name : name 67 | } 68 | 69 | 70 | {-| Takes a namespace and returns helper functions for `id`, `class`, and 71 | `classList` which work just like their equivalents in `elm-html` except that 72 | they accept union types and automatically incorporate the given namespace. Also 73 | note that `class` accepts a `List` instead of a single element; this is so you 74 | can specify multiple classes without having to call `classList` passing tuples 75 | that all end in `True`. 76 | 77 | -- Put this before your view code to specify a namespace. 78 | { id, class, classList } = withNamespace "homepage" 79 | 80 | view = 81 | h1 [ id Hero, class [ Fancy ] ] [ text "Hello, World!" ] 82 | 83 | type HomepageIds = Hero | SomethingElse | AnotherId 84 | type HomepageClasses = Fancy | AnotherClass | SomeOtherClass 85 | 86 | The above would generate this DOM element: 87 | 88 |

Hello, World!

89 | -} 90 | withNamespace : name -> Namespace name class id msg 91 | withNamespace name = 92 | { class = namespacedClass name 93 | , classList = namespacedClassList name 94 | , id = toCssIdentifier >> Attr.id 95 | , name = name 96 | } 97 | 98 | 99 | helpers : Helpers class id msg 100 | helpers = 101 | { class = class 102 | , classList = classList 103 | , id = toCssIdentifier >> Attr.id 104 | } 105 | 106 | 107 | namespacedClassList : name -> List ( class, Bool ) -> Attribute msg 108 | namespacedClassList name list = 109 | list 110 | |> List.filter Tuple.second 111 | |> List.map Tuple.first 112 | |> namespacedClass name 113 | 114 | 115 | classList : List ( class, Bool ) -> Attribute msg 116 | classList list = 117 | list 118 | |> List.filter Tuple.second 119 | |> List.map Tuple.first 120 | |> class 121 | 122 | 123 | namespacedClass : name -> List class -> Attribute msg 124 | namespacedClass name list = 125 | list 126 | |> List.map (identifierToString name) 127 | |> String.join " " 128 | |> Attr.class 129 | 130 | 131 | class : List class -> Attribute msg 132 | class = 133 | namespacedClass "" 134 | 135 | 136 | {-| Create an inline style from CSS 137 | -} 138 | style : String -> Html msg 139 | style text = 140 | Html.node "style" 141 | [ Attr.property "textContent" <| string text 142 | , Attr.property "type" <| string "text/css" 143 | ] 144 | [] 145 | 146 | 147 | {-| Link in a stylesheet from a url 148 | -} 149 | stylesheetLink : String -> Html msg 150 | stylesheetLink url = 151 | Html.node "link" 152 | [ Attr.property "rel" (string "stylesheet") 153 | , Attr.property "type" (string "text/css") 154 | , Attr.property "href" (string url) 155 | ] 156 | [] 157 | --------------------------------------------------------------------------------