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

josdejong · josdejong · commit a7cc8527bdb3 · 2019-01-21T20:53:02.000+01:00
diff --git a/HISTORY.md b/HISTORY.md
@@ -7,6 +7,9 @@ https://github.com/josdejong/jsoneditor
 
 - Implemented new option `maxVisibleChilds` to customize the maximum number
   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
diff --git a/examples/20_custom_css_style_for_nodes.html b/examples/20_custom_css_style_for_nodes.html
@@ -11,26 +11,25 @@
       font: 10.5pt arial;
       color: #4d4d4d;
       line-height: 150%;
-      width: 500px;
-      padding-left: 40px;
+      width: 100%;
+      padding-left: 10px;
     }
 
     code {
       background-color: #f5f5f5;
     }
 
     #containerLeft {
+      display: inline-block;
       width: 500px;
-      height: 500px;      
-      float: left;
+      height: 500px;
+      margin-right: 10px;
     }
+
     #containerRight {
+      display: inline-block;
       width: 500px;
       height: 500px;
-      float: right;
-    }
-    #wrapper {
-      width: 1000px;
     }
     #containerRight .different_element {
       background-color: greenyellow  !important;
@@ -42,19 +41,19 @@
 </head>
 <body>
 
+<h3>JSON Diff</h3>
 <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>
 <div id="wrapper">
   <div id="containerLeft"></div>
   <div id="containerRight"></div>
 </div>
 
 <script>
-  var containerLeft, containerRight, options, json;
-
-  containerLeft = document.getElementById('containerLeft');
-  containerRight = document.getElementById('containerRight');
+  var containerLeft = document.getElementById('containerLeft');
+  var containerRight = document.getElementById('containerRight');
 
   function findNodeInJson(json, path){
     if(!json || path.length ===0) {
@@ -71,9 +70,8 @@
       
   }
 
-  optionsLeft = {
+  var optionsLeft = {
     mode: 'tree',
-    modes: ['code', 'form', 'text', 'tree', 'view'], // allowed modes 
     onError: function (err) {
       alert(err.toString());
     },
@@ -102,10 +100,8 @@
     }    
   };
   
-  optionsRight = {
+  var optionsRight = {
     mode: 'tree',
-    modes: ['code', 'form', 'text', 'tree', 'view'], // allowed modes
-    // name: "jsonContent",
     onError: function (err) {
       alert(err.toString());
     },
@@ -135,7 +131,7 @@
     }    
   };
 
-  jsonLeft = {
+  var jsonLeft = {
     "arrayOfArrays": [1, 2, 999, [3,4,5]],
     "someField": true,
     "boolean": true,
@@ -152,7 +148,7 @@
     "[0]": "zero"
   };
 
-  jsonRight = {
+  var jsonRight = {
     "arrayOfArrays": [1, 2, [3,4,5]],
     "boolean": true,
     "htmlcode": '&quot;',
