Improved style of toggle arrows

Author: abodelot

demo.html

@@ -13,19 +13,21 @@
   margin: 0 100px;
   font-family: sans-serif;
 }
+p.options input[type=checkbox] {
+  vertical-align: middle;
+}
 textarea#json-input {
   width: 100%;
   height: 200px;
 }
 pre#json-renderer {
   border: 1px solid #aaa;
-  padding: 0.5em 1.5em;
 }
     </style>
 
     <script>
 $(function() {
-  $('#btn-json-viewer').click(function() {
+  function renderJson() {
     try {
       var input = eval('(' + $('#json-input').val() + ')');
     }
@@ -38,10 +40,16 @@
       withLinks: $('#with-links').is(':checked')
     };
     $('#json-renderer').jsonViewer(input, options);
-  });
+  }
+
+  // Generate on click
+  $('#btn-json-viewer').click(renderJson);
+
+  // Generate on option change
+  $('p.options input[type=checkbox]').click(renderJson);
 
-  // Display JSON sample on load
-  $('#btn-json-viewer').click();
+  // Display JSON sample on page load
+  renderJson();
 });
     </script>
   </head>
@@ -52,21 +60,21 @@ <h1><a href="https://github.com/abodelot/jquery.json-viewer">jQuery json-viewer<
   "id": 1001,
   "type": "donut",
   "name": "Cake",
-  "description": "http://en.wikipedia.org/wiki/Doughnut",
+  "description": "https://en.wikipedia.org/wiki/Doughnut",
   "price": 2.55,
   "available": {
     store: 42,
     warehouse: 600
   },
-  "topping": [
+  "toppings": [
     { "id": 5001, "type": "None" },
     { "id": 5002, "type": "Glazed" },
     { "id": 5005, "type": "Sugar" },
     { "id": 5003, "type": "Chocolate" },
     { "id": 5004, "type": "Maple" }
   ]
 }</textarea>
-    <p>
+    <p class="options">
       Options:
       <label><input type="checkbox" id="collapsed" />Collapse nodes</label>
       <label><input type="checkbox" id="with-quotes" />Keys with quotes</label>

json-viewer/jquery.json-viewer.css

@@ -1,3 +1,8 @@
+/* Root element */
+.json-document {
+  padding: 1em 2em;
+}
+
 /* Syntax highlighting for JSON objects */
 ul.json-dict, ol.json-array {
   list-style-type: none;
@@ -23,17 +28,22 @@ a.json-toggle:focus {
   outline: none;
 }
 a.json-toggle:before {
-  color: #aaa;
+  font-size: 1.1em;
+  color: #c0c0c0;
   content: "\25BC"; /* down arrow */
   position: absolute;
   display: inline-block;
   width: 1em;
-  left: -1em;
+  text-align: center;
+  line-height: 1em;
+  left: -1.2em;
+}
+a.json-toggle:hover:before {
+  color: #aaa;
 }
 a.json-toggle.collapsed:before {
-  transform: rotate(-90deg); /* Use rotated down arrow, prevents right arrow appearing smaller than down arrow in some browsers */
-  -ms-transform: rotate(-90deg);
-  -webkit-transform: rotate(-90deg);
+  /* Use rotated down arrow, prevents right arrow appearing smaller than down arrow in some browsers */
+  transform: rotate(-90deg);
 }
 
 /* Collapsable placeholder links */

json-viewer/jquery.json-viewer.js

@@ -1,8 +1,9 @@
 /**
  * jQuery json-viewer
  * @author: Alexandre Bodelot <alexandre.bodelot@gmail.com>
+ * @link: https://github.com/abodelot/jquery.json-viewer
  */
-(function($){
+(function($) {
 
   /**
    * Check if arg is either an array with at least 1 element, or a dict with at least 1 key
@@ -28,13 +29,13 @@
   function json2html(json, options) {
     var html = '';
     if (typeof json === 'string') {
-      /* Escape tags */
+      // Escape tags
       json = json.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
       if (options.withLinks == undefined){
           options.withLinks = true;
       }
       if (options.withLinks && isUrl(json)) {
-        html += '<a href="' + json + '" class="json-string">' + json + '</a>';
+        html += '<a href="' + json + '" class="json-string" target="_blank">' + json + '</a>';
       } else {
         html += '<span class="json-string">"' + json + '"</span>';
       }
@@ -49,12 +50,12 @@
         html += '[<ol class="json-array">';
         for (var i = 0; i < json.length; ++i) {
           html += '<li>';
-          /* Add toggle button if item is collapsable */
+          // Add toggle button if item is collapsable
           if (isCollapsable(json[i])) {
             html += '<a href class="json-toggle"></a>';
           }
           html += json2html(json[i], options);
-          /* Add comma if item is not last */
+          // Add comma if item is not last
           if (i < json.length - 1) {
             html += ',';
           }
@@ -73,14 +74,14 @@
             html += '<li>';
             var keyRepr = options.withQuotes ?
               '<span class="json-string">"' + key + '"</span>' : key;
-            /* Add toggle button if item is collapsable */
+            // Add toggle button if item is collapsable
             if (isCollapsable(json[key])) {
               html += '<a href class="json-toggle">' + keyRepr + '</a>';
             } else {
               html += keyRepr;
             }
             html += ': ' + json2html(json[key], options);
-            /* Add comma if item is not last */
+            // Add comma if item is not last
             if (--key_count > 0) {
               html += ',';
             }
@@ -103,19 +104,20 @@
   $.fn.jsonViewer = function(json, options) {
     options = options || {};
 
-    /* jQuery chaining */
+    // jQuery chaining
     return this.each(function() {
 
-      /* Transform to HTML */
+      // Transform to HTML
       var html = json2html(json, options);
       if (isCollapsable(json)) {
         html = '<a href class="json-toggle"></a>' + html;
       }
 
-      /* Insert HTML in target DOM element */
+      // Insert HTML in target DOM element
       $(this).html(html);
+      $(this).addClass('json-document');
 
-      /* Bind click on toggle buttons */
+      // Bind click on toggle buttons
       $(this).off('click');
       $(this).on('click', 'a.json-toggle', function() {
         var target = $(this).toggleClass('collapsed').siblings('ul.json-dict, ol.json-array');
@@ -130,14 +132,14 @@
         return false;
       });
 
-      /* Simulate click on toggle button when placeholder is clicked */
+      // Simulate click on toggle button when placeholder is clicked
       $(this).on('click', 'a.json-placeholder', function() {
         $(this).siblings('a.json-toggle').click();
         return false;
       });
 
       if (options.collapsed == true) {
-        /* Trigger click to collapse all nodes */
+        // Trigger click to collapse all nodes
         $(this).find('a.json-toggle').click();
       }
     });