Giter Club home page Giter Club logo

elm-json-tree-view's Introduction

MOVED!

Project moved to klazuka/elm-json-tree-view.

In May 2019 Microsoft changed their GitHub organization name so that it starts with a lowercase 'm' instead of uppercase. GitHub serves a redirect from the old URL to the new URL, but elm package does not currently follow redirects. Rather than waiting for a fix in the Elm package repository, I have decided to move all work over to my personal GitHub account and re-publish.

elm-json-tree-view's People

Contributors

klazuka avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

elm-json-tree-view's Issues

Make styles configurable

I would like to use this view with a black background, and the default colors for literals do not meet the WCAG contrast guidelines.

A simple solution would be to add the styles to the view Config record, and then provide a default value. This would require a major version bump.

diff --git a/elm-package.json b/elm-package.json
index 6423f00..1e7f0d1 100644
--- a/elm-package.json
+++ b/elm-package.json
@@ -1,5 +1,5 @@
 {
-    "version": "1.0.1",
+    "version": "2.0.0",
     "summary": "Shows JSON data as an expandable HTML tree",
     "repository": "https://github.com/Microsoft/elm-json-tree-view.git",
     "license": "MIT",
diff --git a/example/src/Main.elm b/example/src/Main.elm
index 5417e75..982b0f2 100644
--- a/example/src/Main.elm
+++ b/example/src/Main.elm
@@ -170,6 +170,7 @@ viewJsonTree model =
                 else
                     Nothing
             , toMsg = SetTreeViewState
+            , css = JsonTree.defaultCss
             }
     in
         div []
diff --git a/src/JsonTree.elm b/src/JsonTree.elm
index f8ea706..d346faa 100644
--- a/src/JsonTree.elm
+++ b/src/JsonTree.elm
@@ -7,6 +7,7 @@ module JsonTree
         , TaggedValue(..)
         , KeyPath
         , Config
+        , CssConfig
         , State
         , parseValue
         , parseString
@@ -14,6 +15,7 @@ module JsonTree
         , defaultState
         , expandAll
         , collapseToDepth
+        , defaultCss
         )
 
 {-| This library provides a JSON tree view. You feed it JSON, and it transforms it into
@@ -41,6 +43,10 @@ Features:
 
 @docs expandAll, collapseToDepth
 
+# Styling
+
+@docs CssConfig, defaultCss
+
 -}
 
 import Dict exposing (Dict)
@@ -159,7 +165,7 @@ annotate pathSoFar node =
 view : Node -> Config msg -> State -> Html msg
 view node config state =
     div
-        [ style css.root ]
+        [ style config.css.root ]
         (viewNodeInternal 0 config node state)
 
 
@@ -180,6 +186,7 @@ the previous state.
 type alias Config msg =
     { onSelect : Maybe (KeyPath -> msg)
     , toMsg : State -> msg
+    , css : CssConfig
     }
 
 
@@ -290,16 +297,16 @@ viewNodeInternal : Int -> Config msg -> Node -> State -> List (Html msg)
 viewNodeInternal depth config node state =
     case node.value of
         TString str ->
-            viewScalar css.string ("\"" ++ str ++ "\"") node config
+            viewScalar config.css.string ("\"" ++ str ++ "\"") node config
 
         TFloat x ->
-            viewScalar css.number (toString x) node config
+            viewScalar config.css.number (toString x) node config
 
         TBool bool ->
-            viewScalar css.bool (toString bool) node config
+            viewScalar config.css.bool (toString bool) node config
 
         TNull ->
-            viewScalar css.null "null" node config
+            viewScalar config.css.null "null" node config
 
         TList nodes ->
             viewArray depth nodes node.keyPath config state
@@ -313,7 +320,7 @@ viewScalar someCss str node config =
     List.singleton <|
         case config.onSelect of
             Just onSelect ->
-                hover css.selectable
+                hover config.css.selectable
                     span
                     [ style someCss
                     , id node.keyPath
@@ -335,7 +342,7 @@ viewCollapser depth config newStateThunk displayText =
         text ""
     else
         span
-            [ style css.collapser
+            [ style config.css.collapser
             , lazyStateChangeOnClick newStateThunk config.toMsg
             ]
             [ text displayText ]
@@ -364,13 +371,13 @@ viewArray depth nodes keyPath config state =
             else
                 [ viewCollapseButton depth keyPath config state
                 , ul
-                    [ style css.ul ]
+                    [ style config.css.ul ]
                     (List.map viewListItem nodes)
                 ]
 
         viewListItem node =
             li
-                [ style css.li ]
+                [ style config.css.li ]
                 (List.append (viewNodeInternal (depth + 1) config node state) [ text "," ])
     in
         [ text "[" ] ++ innerContent ++ [ text "]" ]
@@ -389,14 +396,14 @@ viewDict depth dict keyPath config state =
             else
                 [ viewCollapseButton depth keyPath config state
                 , ul
-                    [ style css.ul ]
+                    [ style config.css.ul ]
                     (List.map viewListItem (Dict.toList dict))
                 ]
 
         viewListItem ( fieldName, node ) =
             li
-                [ style css.li ]
-                ([ span [ style css.fieldName ] [ text fieldName ]
+                [ style config.css.li ]
+                ([ span [ style config.css.fieldName ] [ text fieldName ]
                  , text ": "
                  ]
                     ++ (viewNodeInternal (depth + 1) config node state)
@@ -409,8 +416,25 @@ viewDict depth dict keyPath config state =
 
 -- STYLES
 
+{-| Configure the list of styles for the tree view.
+-}
+type alias CssConfig =
+    { root : List (String, String)
+    , ul : List (String, String)
+    , li : List (String, String)
+    , collapser : List (String, String)
+    , fieldName : List (String, String)
+    , string : List (String, String)
+    , number : List (String, String)
+    , bool : List (String, String)
+    , null : List (String, String)
+    , selectable : List (String, String)
+    }
 
-css =
+{-| Default styling
+-}
+defaultCss : CssConfig
+defaultCss =
     { root =
         [ ( "font-family", "monospace" )
         , ( "white-space", "pre" )

Corrupt zip when downloading package

Hey, I've just noticed on CI that my elm builds are suddenly failing on the following:

Starting downloads...

  โœ— Microsoft/elm-json-tree-view 2.0.0

-- CORRUPT ZIP -----------------------------------------------------------------

I got an unexpected zip file from:

    <https://github.com/Microsoft/elm-json-tree-view/zipball/2.0.0/>

I check the hash the zip, and it seems off:

  Expected: 6e84a645c3c871ea742506eb1c9352c2a1b04b18
    Actual: 2c6f4a6d554f9a95807ae02b0a52260389c196f4

This usually means that the package author moved the version tag, so report it
to them and see if that is the issue. Folks on Elm slack can probably help as
well.

I've reproduced this on dev machine (after getting rid of ~/.elm).

Any ideas what caused the trouble?

Abiilty to get TaggedValue by KeyPath

Hi, this is a nice package. Does it make sense to add this function?:

taggedValue : KeyPath -> Node -> TaggedValue

Pros: Decouple to the viewScalar
Cons: Require another walking Node since viewNodeInternal ties to Html

Or

type alias Config msg =
    { onSelect : Maybe ((KeyPath, TaggedValue) -> msg)
    , toMsg : State -> msg
    }

Pros: Easy to add here.
Cons: Breaking change although it's painless to upgrade, just modifying a msg

Thanks!

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.