Skip to content

Commit

Permalink
Making progress on v2 of browsable API by adding the notion of a `Req…
Browse files Browse the repository at this point in the history 
…uest` & `Response` view toggle, the request view is partially implemented
  • Loading branch information
@avoidwork
avoidwork committed Mar 31, 2015
1 parent df47036 commit 3a1fd62
Show file tree
Hide file tree
Showing 4 changed files with 150 additions and 28 deletions.
9 changes: 8 additions & 1 deletion lib/tenso.es6.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1116,7 +1116,14 @@ let renderers = {
} ).join( "\n" ) )
.replace( "{{body}}", JSON.stringify( arg, null, 2 ) )
.replace( "{{year}}", new Date().getFullYear() )
.replace( "{{version}}", "1.3.17" );
.replace( "{{version}}", "1.3.17" )
.replace( "{{allow}}", headers[ "allow" ] )
.replace( "{{methods}}", string.explode( headers[ "allow" ].replace( "GET, HEAD, OPTIONS", "" ) ).filter( function ( i ) {
return i !== "";
} ).map( function ( i ) {
return "<option value='" + i + "'>"+ i + "</option>";
} ).join( "\n" ) )
.replace( "{{csrf}}", headers[ "x-csrf-token" ] || "" );
},
header: "text/html"
},
Expand Down
6 changes: 5 additions & 1 deletion lib/tenso.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1165,7 +1165,11 @@ var renderers = {
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("{{year}}", new Date().getFullYear()).replace("{{version}}", "1.3.17");
}).join("\n")).replace("{{body}}", JSON.stringify(arg, null, 2)).replace("{{year}}", new Date().getFullYear()).replace("{{version}}", "1.3.17").replace("{{allow}}", headers.allow).replace("{{methods}}", string.explode(headers.allow.replace("GET, HEAD, OPTIONS", "")).filter(function (i) {
return i !== "";
}).map(function (i) {
return "<option value='" + i + "'>" + i + "</option>";
}).join("\n")).replace("{{csrf}}", headers["x-csrf-token"] || "");
},
header: "text/html"
},
Expand Down
9 changes: 8 additions & 1 deletion src/renderers.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,14 @@ let renderers = {
} ).join( "\n" ) )
.replace( "{{body}}", JSON.stringify( arg, null, 2 ) )
.replace( "{{year}}", new Date().getFullYear() )
.replace( "{{version}}", "{{VERSION}}" );
.replace( "{{version}}", "{{VERSION}}" )
.replace( "{{allow}}", headers[ "allow" ] )
.replace( "{{methods}}", string.explode( headers[ "allow" ].replace( "GET, HEAD, OPTIONS", "" ) ).filter( function ( i ) {
return i !== "";
} ).map( function ( i ) {
return "<option value='" + i + "'>"+ i + "</option>";
} ).join( "\n" ) )
.replace( "{{csrf}}", headers[ "x-csrf-token" ] || "" );
},
header: "text/html"
},
Expand Down
154 changes: 129 additions & 25 deletions template.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -138,6 +138,12 @@
border-right: 1px solid #ccc;
}

textarea {
width: 100%;
display: inline-block;
height: 400px;
}

.code {
font-family: monospace, "Lucida Console", Monaco, "Courier New", Courier
}
Expand Down Expand Up @@ -167,6 +173,41 @@
text-overflow: ellipsis;
}

.hidden {
display: none;
}

nav {
border-bottom: 1px solid #ccc;
margin-bottom: 10px;
}

nav ul li {
display: inline-block;
font-weight: bold;
margin-bottom: 10px;
}

nav ul li:first-child {
margin-right: 25px;
}

nav ul li a {
font-weight: normal;
}

nav ul li a.active {
font-weight: bold;
}

nav ul li a:hover {
cursor: pointer;
}

#io p {
margin-bottom: 25px;
}

@media (max-width: 899px) {
.float {
display: block !important;
Expand Down Expand Up @@ -228,8 +269,31 @@ <h2 class="overflow">{{url}}</h2>
</tbody>
</table>
</div>
<div class="code float">
<pre><code>{{body}}</code></pre>
<div id="io" class="float">
<nav class="hidden">
<ul>
<li><a class="active" data-type="code">Response</a></li>
<li><a data-type="form">Send Request</a></li>
</ul>
</nav>
<div>
<div class="code">
<pre><code>{{body}}</code></pre>
</div>
<div class="form hidden">
<form>
<label for="methods">Method</label>
<select id="methods">
{{methods}}
</select>
<fieldset id="body">
<p>JSON is required</p>
<textarea></textarea>
</fieldset>
<button type="submit">Submit</button> <button type="reset">Reset</button>
</form>
</div>
</div>
</div>
</div>
</article>
Expand All @@ -252,18 +316,23 @@ <h2 class="overflow">{{url}}</h2>
$ = util.$,
array = util.array,
element = util.element,
render = util.render,
code = $( "code" )[ 0 ],
formats = $( "select" )[ 0 ],
observable = util.observer();
observable = util.observer(),
parsed = keigai.util.parse(),
allows = "{{allow}}",
csrf = "{{csrf}}",
html = code.innerHTML,
matches, nav, replaces;

// Resetting for someone returning to the HTML renderer from another format
element.val( formats, "html" );

// Hooking into the input
observable.hook( formats, "change" );
observable.on( "change", function () {
var value = element.val( formats ),
parsed = keigai.util.parse();
var value = element.val( formats );

// This shouldn't happen, but lets assume it does...
if ( value === "html" ) {
Expand All @@ -281,31 +350,31 @@ <h2 class="overflow">{{url}}</h2>
}
} );

util.render( function () {
var html = code.innerHTML,
matches, replaces;

matches = array.unique( html.match( /([^\s*]+)/g )
.filter( function ( i ){
return !/(\{|\[|\]|\})/.test( i );
} ) );

replaces = matches.map( function ( i ){
if ( i.indexOf( '"' ) > -1 ) {
return i.replace( /(\".*\")/, "<span class='item'>$1</span>" );
} else {
return i;
}
} );
// Preparing to change <pre> into Elements
matches = array.unique( html.match( /([^\s*]+)/g )
.filter( function ( i ){
return !/(\{|\[|\]|\})/.test( i );
} ) );

replaces = matches.map( function ( i ){
if ( i.indexOf( '"' ) > -1 ) {
return i.replace( /(\".*\")/, "<span class='item'>$1</span>" );
} else {
return i;
}
} );

array.iterate( matches, function ( i, idx ) {
html = html.replace( new RegExp( i, "g" ), replaces[ idx ] )
} );
array.iterate( matches, function ( i, idx ) {
html = html.replace( new RegExp( i, "g" ), replaces[ idx ] )
} );

render( function () {
// Changing <pre> into selectable Elements
code.parentNode.parentNode.innerHTML = html
.replace( /\n/g, "<br>\n" )
.replace(/(\s{2,2})/g, "<span class='spaces'></span>")
.replace(/(\s{2,2})/g, "<span class='spaces'></span>" );

// Changing URIs into anchors
array.iterate( $( '.item' ), function ( i ) {
var html = i.innerHTML,
val = html.replace( /(^\"|\"$)/g, "" );
Expand All @@ -316,6 +385,41 @@ <h2 class="overflow">{{url}}</h2>

i.innerHTML = html;
} );

if ( csrf ) {
nav = $( "#io nav" )[0];

// Toggling IO nav
element.removeClass( nav, "hidden" );

// Enabling navigation
observable.hook( nav, "click" );
observable.on( "click", function ( e ) {
var anchor = util.target( e ),
type = element.data( anchor, "type" ),
target = $( "#io ." + type )[0];

util.stop( e );

if ( element.hasClass( target, "active" ) ) {
return;
}

render( function () {
element.addClass( anchor, "active" );
element.removeClass( ( anchor.parentNode.nextElementSibling || anchor.parentNode.previousElementSibling ).childNodes[ 0 ], "active" );
element.removeClass( target, "hidden" );
element.addClass( ( target.nextElementSibling || target.previousElementSibling ), "hidden" );
} );
} );

// Intercepting form submission
observable.hook( $( "#io form" )[0], "submit" );
observable.on( "submit", function ( e ) {
util.stop( e );
debugger;
} );
}
} );
} ) ( keigai );
</script>
Expand Down

0 comments on commit 3a1fd62

Please sign in to comment.