StardewValley
/
jsoneditor
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Updated history, some minor tweaks in example 20 (see #604)

This commit is contained in:
jos 2019-01-21 20:53:02 +01:00
parent 1c5d7d71ac
commit a7cc8527bd
2 changed files with 21 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
HISTORY.md
View File

@ -7,6 +7,9 @@ https://github.com/josdejong/jsoneditor
- Implemented new option `maxVisibleChilds` to customize the maximum number - Implemented new option `maxVisibleChilds` to customize the maximum number
childs that is rendered by default. Thanks @20goto10. childs that is rendered by default. Thanks @20goto10.
- Implemented new option `onClassName`, allowing customized and dynamic
styling of nodes. See 20_custom_css_style_for_nodes.html for a demo.
Thanks @maestr0.
## 2019-01-16, version 5.27.1 ## 2019-01-16, version 5.27.1

40
examples/20_custom_css_style_for_nodes.html
View File

@ -11,8 +11,8 @@
font: 10.5pt arial; font: 10.5pt arial;
color: #4d4d4d; color: #4d4d4d;
line-height: 150%; line-height: 150%;
width: 500px; width: 100%;
padding-left: 40px; padding-left: 10px;
} }
code { code {
@ -20,17 +20,16 @@
} }
#containerLeft { #containerLeft {
width: 500px; display: inline-block;
height: 500px;
float: left;
}
#containerRight {
width: 500px; width: 500px;
height: 500px; height: 500px;
float: right; margin-right: 10px;
} }
#wrapper {
width: 1000px; #containerRight {
display: inline-block;
width: 500px;
height: 500px;
} }
#containerRight .different_element { #containerRight .different_element {
background-color: greenyellow !important; background-color: greenyellow !important;
@ -42,8 +41,10 @@
</head> </head>
<body> <body>
<h3>JSON Diff</h3>
<p> <p>
JSON Diff This example highlights the differences between two JSON objects using the option <code>onClassName</code>.
Make a change in the left or right editor to see the changes update accordingly.
</p> </p>
<div id="wrapper"> <div id="wrapper">
<div id="containerLeft"></div> <div id="containerLeft"></div>
@ -51,10 +52,8 @@
</div> </div>
<script> <script>
var containerLeft, containerRight, options, json; var containerLeft = document.getElementById('containerLeft');
var containerRight = document.getElementById('containerRight');
containerLeft = document.getElementById('containerLeft');
containerRight = document.getElementById('containerRight');
function findNodeInJson(json, path){ function findNodeInJson(json, path){
if(!json || path.length ===0) { if(!json || path.length ===0) {
@ -71,9 +70,8 @@
} }
optionsLeft = { var optionsLeft = {
mode: 'tree', mode: 'tree',
modes: ['code', 'form', 'text', 'tree', 'view'], // allowed modes
onError: function (err) { onError: function (err) {
alert(err.toString()); alert(err.toString());
}, },
@ -102,10 +100,8 @@
} }
}; };
optionsRight = { var optionsRight = {
mode: 'tree', mode: 'tree',
modes: ['code', 'form', 'text', 'tree', 'view'], // allowed modes
// name: "jsonContent",
onError: function (err) { onError: function (err) {
alert(err.toString()); alert(err.toString());
}, },
@ -135,7 +131,7 @@
} }
}; };
jsonLeft = { var jsonLeft = {
"arrayOfArrays": [1, 2, 999, [3,4,5]], "arrayOfArrays": [1, 2, 999, [3,4,5]],
"someField": true, "someField": true,
"boolean": true, "boolean": true,
@ -152,7 +148,7 @@
"[0]": "zero" "[0]": "zero"
}; };
jsonRight = { var jsonRight = {
"arrayOfArrays": [1, 2, [3,4,5]], "arrayOfArrays": [1, 2, [3,4,5]],
"boolean": true, "boolean": true,
"htmlcode": '&quot;', "htmlcode": '&quot;',