Added a 'toggle formatting' button

rfletcher · Feb 26, 2012 · 5dab9d0 · 5dab9d0
1 parent f49d6a1
commit 5dab9d0
Show file tree

Hide file tree

Showing 2 changed files with 117 additions and 25 deletions.
diff --git a/src/formattedJSON.js b/src/formattedJSON.js
@@ -21,22 +21,23 @@
         return;
       }
 
-      // hide the unformatted JSON text
-      document.body.innerHTML = "";
+      this.preparePage();
 
       // receive settings from proxy.html
       safari.self.addEventListener( "message", function( e ) {
-        if( e.name === "setSettings" ) {
-          settings = e.message;
+        if( e.name === "setData" ) {
+          var data = e.message;
+          settings = data.settings;
 
-          formatJSON.addStyle( settings.css );
-          formatJSON.renderAsJSON( obj );
+          formatJSON.addStyle( data.css );
+          formatJSON.addToolbar( data.toolbar );
+          formatJSON.renderRoot( obj );
           formatJSON.handleEvents();
         }
       }, false );
 
       // ask proxy.html for settings
-      safari.self.tab.dispatchMessage( "getSettings" );
+      safari.self.tab.dispatchMessage( "getData" );
     },
 
     /**
@@ -74,6 +75,24 @@
       return nodes.length == 1 ? nodes[0] : nodes;
     },
 
+    /**
+     * toggle the presense of a css class name
+     *  _toggleClass( <a class="foo"/>, "bar" ) => <a class="foo bar"/>
+     *  _toggleClass( <a class="foo bar"/>, "bar" ) => <a class="foo"/>
+     */
+    _toggleClass: function( el, class_name ) {
+      var class_names = el.className.split( " " );
+      if( class_names.indexOf( class_name ) >= 0 ) {
+        class_names = class_names.filter( function( val ) {
+          return val.toLowerCase() !== class_name.toLowerCase();
+        } );
+      } else {
+        class_names.push( class_name );
+      }
+
+      el.className = class_names.join( " " );
+    },
+
     /**
      * a slightly more informative "typeof"
      *  _typeof( [] ) => "array"
@@ -100,24 +119,51 @@
       document.body.appendChild( style );
     },
 
+    /**
+     * add the toolbar
+     */
+    addToolbar: function( html ) {
+      var toolbar = this._html( html );
+      document.body.insertBefore( toolbar, document.body.firstChild );
+
+      var toggle = document.getElementById( "toolbar" ).getElementsByTagName( "a" )[0];
+
+      toggle.addEventListener( "click", function() {
+        formatJSON._toggleClass( document.body, "before" );
+      } );
+    },
+
     /**
      * handle javascript events
      */
     handleEvents: function() {
       var disclosure_triangles = document.querySelectorAll( ".disclosure" ),
 
       handler = function( e ) {
-        var parent = e.target.parentElement;
-        parent.className = parent.className.replace( /( closed)?$/, function( closed ) {
-          return closed ? "" : " closed";
-        } );
+        formatJSON._toggleClass( e.target.parentElement, "closed" );
       };
 
       Array.prototype.forEach.call( disclosure_triangles, function( el ) {
         el.addEventListener( "click", handler );
       } );
     },
 
+    /**
+     * hide the unformatted JSON text.
+     * add a wrapper for the formatted JSON.
+     */
+    preparePage: function() {
+      var json = document.body.textContent;
+      document.body.innerHTML = "";
+
+      this._append( document.body, [
+        this._html( '<div id="before"></div>' ),
+        this._html( '<div id="after"></div>' ),
+      ] );
+
+      document.getElementById( "before" ).innerText = json;
+    },
+
     /**
      * render an array as HTML
      *  renderArray( [] ) => Element
@@ -138,13 +184,6 @@
         );
     },
 
-    /**
-     * render a javascript object as JSON
-     */
-    renderAsJSON: function( obj ) {
-      this._append( document.body, this.render( obj ) )
-    },
-
     /**
      * render an object as HTML
      *  renderObject( {} ) => Element
@@ -177,6 +216,13 @@
         );
     },
 
+    /**
+     * render a javascript object as JSON
+     */
+    renderRoot: function( obj ) {
+      this._append( document.getElementById( "after" ), this.render( obj ) );
+    },
+
     /**
      * render a literal value as HTML
      *  renderValue( "foo" ) => Element
@@ -211,4 +257,4 @@
 
   // initialize!
   formatJSON.init();
-}() )
+}() );
diff --git a/src/proxy.html b/src/proxy.html
@@ -3,10 +3,13 @@
 <head>
   <script type="text/javascript">
     safari.application.addEventListener( "message", function( e ) {
-      if( e.name === "getSettings" ) {
-        e.target.page.dispatchMessage( "setSettings", {
+      if( e.name === "getData" ) {
+        e.target.page.dispatchMessage( "setData", {
           css: document.head.getElementsByTagName( "style" )[0].textContent,
-          sort_keys: safari.extension.settings.getItem( "sort_keys" )
+          toolbar: document.getElementById( "toolbar" ).outerHTML,
+          settings: {
+            sort_keys: safari.extension.settings.getItem( "sort_keys" )
+          }
         } );
       }
     }, false );
@@ -23,7 +26,7 @@
     body {
       font-family: monospace;
       margin: 0;
-      padding: 1em 1em 1em 2em;
+      padding: 12px;
     }
     body,
     .delimiter,
@@ -32,6 +35,45 @@
       color: #000;
     }
 
+    #before { display: none; }
+    body.before #before { display: block; }
+    body.before #after { display: none; }
+    body.before #toolbar { position: static; }
+
+    #after {
+      padding-left: 1em;
+    }
+
+    #toolbar {
+      border: 1px solid #8c8c8c;
+      border-radius: 5px;
+      float: right;
+      font-family: "lucida grande", sans-serif;
+      overflow: hidden;
+      font-size: 0;
+      padding: 0;
+      position: absolute;
+      top: 12px;
+      right: 12px;
+      margin: 0 0 6px 6px;
+      -webkit-user-select: none;
+      z-index: 9999;
+    }
+    #toolbar a {
+      background: -webkit-gradient( linear, 0 0, 0 100%, from(#f4f4f4), to(#bebebe) );
+      color: #3f3f3f;
+      display: inline-block;
+      font-size: 11px;
+      font-weight: bold;
+      line-height: 21px;
+      padding: 0 7px 1px;
+      text-decoration: none;
+      text-shadow: 0 1px rgba(255, 255, 255, 0.8);
+    }
+    #toolbar a:active {
+      background: -webkit-gradient( linear, 0 0, 0 100%, from(#bebebe), to(#f4f4f4) );
+    }
+
     dl,
     ol {
       padding: 0 0 0 1.5em;
@@ -103,5 +145,9 @@
     }
   </style>
 </head>
-<body></body>
-</html>
+<body>
+  <ul id="toolbar">
+    <li><a href="#">Toggle Formatting</a></li>
+  </ul>
+</body>
+</html>