Wiring up the select field [WIP]

avoidwork · Mar 30, 2015 · e72ecf0 · e72ecf0
1 parent acd25d7
commit e72ecf0
Show file tree

Hide file tree

Showing 4 changed files with 34 additions and 9 deletions.
diff --git a/lib/tenso.es6.js b/lib/tenso.es6.js
@@ -6,10 +6,10 @@
  * @license BSD-3 <https://raw.github.com/avoidwork/tenso/master/LICENSE>
  * @link http://avoidwork.github.io/tenso
  * @module tenso
- * @version 1.3.13
+ * @version 1.3.14
  */
 const CONFIG = require( __dirname + "/../config.json" );
-const VERSION = "1.3.13";
+const VERSION = "1.3.14";
 const SERVER = "tenso/" + VERSION;
 
 let keigai = require( "keigai" ),
@@ -1111,10 +1111,12 @@ let renderers = {
 				.replace( "{{headers}}", Object.keys( headers ).sort( array.sort ).map( function ( i ) {
 					return "<tr><td>"+ i + "</td><td>"+ sanitize( headers[ i ] ) + "</td></tr>";
 				} ).join( "\n" ) )
+				.replace( "{{formats}}", req.server.config.renderers.map( function ( i ) {
+					return "<option value='"+ i + "'>"+ i.toUpperCase() + "</option>";
+				} ).join( "\n" ) )
 				.replace( "{{body}}", JSON.stringify( arg, null, 2 ) )
-				.replace( "{{formats}}", JSON.stringify( req.server.config.renderers, null, 2 ) )
 				.replace( "{{year}}", new Date().getFullYear() )
-				.replace( "{{version}}", "1.3.13" );
+				.replace( "{{version}}", "1.3.14" );
 		},
 		header: "text/html"
 	},

diff --git a/lib/tenso.js b/lib/tenso.js
@@ -12,10 +12,10 @@ var _classCallCheck = function (instance, Constructor) { if (!(instance instance
  * @license BSD-3 <https://raw.github.com/avoidwork/tenso/master/LICENSE>
  * @link http://avoidwork.github.io/tenso
  * @module tenso
- * @version 1.3.13
+ * @version 1.3.14
  */
 var CONFIG = require(__dirname + "/../config.json");
-var VERSION = "1.3.13";
+var VERSION = "1.3.14";
 var SERVER = "tenso/" + VERSION;
 
 var keigai = require("keigai"),
@@ -1173,7 +1173,9 @@ var renderers = {
 
 			return (tpl || "").replace("{{url}}", req.parsed.href.replace(req.parsed.protocol, protocol)).replace("{{headers}}", Object.keys(headers).sort(array.sort).map(function (i) {
 				return "<tr><td>" + i + "</td><td>" + sanitize(headers[i]) + "</td></tr>";
-			}).join("\n")).replace("{{body}}", JSON.stringify(arg, null, 2)).replace("{{formats}}", JSON.stringify(req.server.config.renderers, null, 2)).replace("{{year}}", new Date().getFullYear()).replace("{{version}}", "1.3.13");
+			}).join("\n")).replace("{{formats}}", req.server.config.renderers.map(function (i) {
+				return "<option value='" + i + "'>" + i.toUpperCase() + "</option>";
+			}).join("\n")).replace("{{body}}", JSON.stringify(arg, null, 2)).replace("{{year}}", new Date().getFullYear()).replace("{{version}}", "1.3.14");
 		},
 		header: "text/html"
 	},

diff --git a/src/renderers.js b/src/renderers.js
@@ -13,8 +13,10 @@ let renderers = {
 				.replace( "{{headers}}", Object.keys( headers ).sort( array.sort ).map( function ( i ) {
 					return "<tr><td>"+ i + "</td><td>"+ sanitize( headers[ i ] ) + "</td></tr>";
 				} ).join( "\n" ) )
+				.replace( "{{formats}}", req.server.config.renderers.map( function ( i ) {
+					return "<option value='"+ i + "'>"+ i.toUpperCase() + "</option>";
+				} ).join( "\n" ) )
 				.replace( "{{body}}", JSON.stringify( arg, null, 2 ) )
-				.replace( "{{formats}}", JSON.stringify( req.server.config.renderers, null, 2 ) )
 				.replace( "{{year}}", new Date().getFullYear() )
 				.replace( "{{version}}", "{{VERSION}}" );
 		},

diff --git a/template.html b/template.html
@@ -72,9 +72,17 @@
 
         h2 {
             font-size: 1.8em;
+        }
+
+        formset,
+        h2 {
             margin-bottom: 25px;
         }
 
+        formset {
+            display: block;
+        }
+
         header {
             color: #fff;
             background: #1badd1;
@@ -191,6 +199,11 @@ <h1 class="overflow">Tensō Browsable API</h1>
 </header>
 <article>
     <h2 class="overflow">{{url}}</h2>
+    <formset>
+        <select id="formats">
+            {{formats}}
+        </select>
+    </formset>
     <div>
         <div class="float">
             <table>
@@ -230,7 +243,13 @@ <h2 class="overflow">{{url}}</h2>
         var array = util.array;
         var render = util.render;
         var code = $( "code" )[ 0 ];
-        var formats = {{formats}};
+        var formats = $( "#formats" )[0];
+        var observable = util.observer();
+
+        observable.hook( formats, "select" );
+        observable.on( "select", function ( e ) {
+            debugger;
+        } );
 
         render( function () {
             var html = code.innerHTML,