├── .gitignore ├── .travis.yml ├── LICENSE ├── README.md ├── elm-package.json ├── src └── InlineHover.elm └── test ├── .gitignore ├── Main.elm └── elm-package.json /.gitignore: -------------------------------------------------------------------------------- 1 | elm-stuff 2 | -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | language: node_js 2 | node_js: 3 | - "4.2" 4 | before_script: 5 | - cd test 6 | - npm install -g elm 7 | - elm-package install -y 8 | script: elm-make Main.elm 9 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | Copyright (c) 2016, Yosuke Torii 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-inline-hover 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 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # DEPRECATED 2 | 3 | This library is only available for Elm 0.18 or less. 4 | 5 | I'm not going to port this library for 0.19 for some reasons. 6 | 7 | - The implementation used in this library is not allowed in 0.19 world. 8 | - This is a kind of hack! (not good for Elm ecosystem in the long run) 9 | - I'm not using this now, just using CSS. 10 | 11 | # elm-inline-hover 12 | 13 | [![Build Status](https://travis-ci.org/jinjor/elm-inline-hover.svg)](https://travis-ci.org/jinjor/elm-inline-hover) 14 | 15 | An utility for using :hover by inline style. 16 | 17 | 18 | ## How to use 19 | 20 | Just insert `hover [("whatever", "styles"), ("you", "like")]` before Html nodes. 21 | 22 | ```elm 23 | import InlineHover exposing(hover) 24 | 25 | main = 26 | ul [] 27 | [ hover styles li [] [ text "Hello" ] 28 | , hover styles li [] [ text "World" ] 29 | ] 30 | 31 | styles = 32 | [("background", "#abd")] 33 | ``` 34 | 35 | That's it! 36 | 37 | 38 | ## License 39 | 40 | BSD3 41 | -------------------------------------------------------------------------------- /elm-package.json: -------------------------------------------------------------------------------- 1 | { 2 | "version": "1.0.2", 3 | "summary": "An utility for using :hover by inline style", 4 | "repository": "https://github.com/jinjor/elm-inline-hover.git", 5 | "license": "BSD3", 6 | "source-directories": [ 7 | "src" 8 | ], 9 | "exposed-modules": [ 10 | "InlineHover" 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 | }, 16 | "elm-version": "0.18.0 <= v < 0.19.0" 17 | } 18 | -------------------------------------------------------------------------------- /src/InlineHover.elm: -------------------------------------------------------------------------------- 1 | module InlineHover exposing (hover) 2 | 3 | {-| Wrap any elements defined in [Html](http://package.elm-lang.org/packages/elm-lang/html/1.0.0/Html) 4 | # Make Special Elements 5 | @docs hover 6 | -} 7 | 8 | import Html exposing (text, node, Html, Attribute) 9 | import Html.Attributes exposing (attribute) 10 | import Char 11 | 12 | 13 | {-| Make a special element that can notice hover state. 14 | ``` 15 | main = 16 | ul [] 17 | [ hover styles li [] [ text "Hello" ] 18 | , hover styles li [] [ text "World" ] 19 | ] 20 | 21 | styles = 22 | [("background", "#abd")] 23 | ``` 24 | -} 25 | hover 26 | : List (String, String) 27 | -> (List (Attribute msg) -> List (Html msg) -> Html msg) 28 | -> List (Attribute msg) 29 | -> List (Html msg) 30 | -> Html msg 31 | hover styles tag attrs children = 32 | let 33 | validStyles = 34 | List.filter (\(k, v) -> isValidKey k) styles 35 | 36 | enter = 37 | attribute "onmouseenter" <| String.join ";" <| List.map enterEach validStyles 38 | 39 | leave = 40 | attribute "onmouseleave" <| String.join ";" <| List.map leaveEach validStyles 41 | 42 | in 43 | tag 44 | (enter :: leave :: attrs) 45 | children 46 | 47 | 48 | toCamelCase : String -> String 49 | toCamelCase s = 50 | String.fromList <| 51 | List.reverse <| 52 | Tuple.second <| 53 | List.foldl (\c (cap, memo) -> 54 | if c == '-' then 55 | (True, memo) 56 | else if cap then 57 | (False, Char.toUpper c :: memo) 58 | else 59 | (False, c :: memo) 60 | ) (False, []) (String.toList s) 61 | 62 | 63 | isValidKey : String -> Bool 64 | isValidKey s = 65 | s /= "" && 66 | List.any Char.isLower (String.toList s) && 67 | List.all (\c -> Char.isLower c || c == '-') (String.toList s) 68 | 69 | 70 | isValidChars : List Char -> Bool 71 | isValidChars list = 72 | case list of 73 | head :: tail -> 74 | if Char.isLower head || head == '-' then 75 | isValidChars tail 76 | else 77 | False 78 | 79 | _ -> 80 | True 81 | 82 | 83 | enterEach : (String, String) -> String 84 | enterEach (key, value) = 85 | let 86 | keyCamel = toCamelCase key 87 | escapedValue = (String.join "\"" << String.split "'") value 88 | in 89 | "this.setAttribute('data-hover-" ++ key ++ "', this.style." ++ keyCamel ++ "||'');" ++ 90 | "this.style." ++ keyCamel ++ "='" ++ escapedValue ++ "'" 91 | 92 | 93 | leaveEach : (String, String) -> String 94 | leaveEach (key, value) = 95 | let 96 | keyCamel = toCamelCase key 97 | in 98 | "this.style." ++ keyCamel ++ "=this.getAttribute('data-hover-" ++ key ++ "')||'';" 99 | -------------------------------------------------------------------------------- /test/.gitignore: -------------------------------------------------------------------------------- 1 | elm-stuff 2 | index.html 3 | -------------------------------------------------------------------------------- /test/Main.elm: -------------------------------------------------------------------------------- 1 | import Html exposing (..) 2 | import Html.Attributes exposing (..) 3 | import Html.Events exposing (..) 4 | 5 | import InlineHover exposing (hover) 6 | 7 | main = 8 | beginnerProgram { model = 0, update = update, view = view } 9 | 10 | update n _ = 11 | n 12 | 13 | view model = 14 | ul [] 15 | [ hover hoverStyle li [ style normalStyle, onMouseEnter 1, onMouseLeave 0 ] [ text "Hello" ] 16 | , hover hoverStyle li [ style normalStyle, onMouseEnter 2, onMouseLeave 0 ] [ text "World" ] 17 | , li [] [ text (toString model )] 18 | ] 19 | 20 | hoverStyle = 21 | [ ("background-color", "#abd") 22 | , ("font-weight", "bold") 23 | , ("undefined-style", "foo") 24 | , ("123", "456") 25 | , ("'", "") 26 | , ("\"", "") 27 | , ("---", "") 28 | , ("=", "") 29 | , ("font-family", "\"游ゴシック\", \"Yu Gothic\", sans-serif;") 30 | , ("color", "'") 31 | , ("color", "\'") 32 | ] 33 | 34 | normalStyle = 35 | [ ("background-color", "#edc") 36 | , ("color", "green") 37 | ] 38 | -------------------------------------------------------------------------------- /test/elm-package.json: -------------------------------------------------------------------------------- 1 | { 2 | "version": "1.0.0", 3 | "summary": "helpful summary of your project, less than 80 characters", 4 | "repository": "https://github.com/user/project.git", 5 | "license": "BSD3", 6 | "source-directories": [ 7 | ".", 8 | "../src" 9 | ], 10 | "exposed-modules": [], 11 | "dependencies": { 12 | "elm-lang/core": "5.0.0 <= v < 6.0.0", 13 | "elm-lang/html": "2.0.0 <= v < 3.0.0" 14 | }, 15 | "elm-version": "0.18.0 <= v < 0.19.0" 16 | } 17 | --------------------------------------------------------------------------------