@@ -13,15 +13,17 @@ | |||
<script src='javascripts/swagger-ui.js' type='text/javascript'></script> | |||
</head> | |||
<body> | |||
<form id='api_selector'> | |||
<div class='input'><input placeholder="http://example.com/api" id="input_baseUrl" name="baseUrl" type="text" /></div> | |||
<div class='input'><input placeholder="api_key" id="input_apiKey" name="apiKey" type="text" /></div> | |||
<div class='input'><a id="explore" href="#">Explore</a></div> | |||
</form> | |||
<div id='header'> | |||
<a id="logo" href="http://swagger.wordnik.com">swagger</a> | |||
<form id='api_selector'> | |||
<div class='input'><input placeholder="http://example.com/api" id="input_baseUrl" name="baseUrl" type="text" /></div> | |||
<div class='input'><input placeholder="api_key" id="input_apiKey" name="apiKey" type="text" /></div> | |||
<div class='input'><a id="explore" href="#">Explore</a></div> | |||
</form> | |||
</div> | |||
<div class='container' id='resources_container'> | |||
<ul id='resources'></ul> | |||
</div> | |||
<div id='content_message'></div> | |||
<script id="resourceTemplate" type="text/x-jquery-tmpl"><li class='resource' id='resource_${name}'> | |||
<div class='heading'> | |||
<h2> | |||
@@ -152,7 +154,13 @@ | |||
<td width='500'>${description}</td> | |||
</tr> | |||
</script> | |||
<p id='colophon'> | |||
<div id='content_message'> | |||
Enter the base URL of the API that you wish to explore, or try | |||
<a onclick="$('#input_baseUrl').val('http://swagr.api.wordnik.com/v4'); apiSelectionController.showApi(); return false;" href="#">swagr.api.wordnik.com/v4</a> | |||
or | |||
<a onclick="$('#input_baseUrl').val('http://petstore.swagger.wordnik.com/api'); apiSelectionController.showApi(); return false;" href="#">petstore.swagger.wordnik.com/api</a>. | |||
</div> | |||
<p id='colophon' style='display:none'> | |||
Sexy API documentation from | |||
<a href="http://swagger.wordnik.com">Swagger</a>. | |||
</p> | |||
@@ -1,7 +1,9 @@ | |||
jQuery(function($) { | |||
// this.baseUrl = "http://swagr.api.wordnik.com/v4"; | |||
// this.apiKey = "my-api-key"; | |||
// this.baseUrl = "http://swagr.api.wordnik.com/v4"; | |||
// this.baseUrl = "http://petstore.swagger.wordnik.com/api"; | |||
// this.apiKey = "special-key"; | |||
var ApiSelectionController = Spine.Controller.create({ | |||
proxied: ["showApi"], | |||
@@ -33,17 +35,19 @@ jQuery(function($) { | |||
}, | |||
adaptToScale: function() { | |||
var form_width = $('form#api_selector').width(); | |||
var inputs_width = 0; | |||
$('form#api_selector div.input').each( function(){ inputs_width += $(this).outerWidth(); }); | |||
// Update with of baseUrl input | |||
var free_width = form_width - inputs_width; | |||
$('#input_baseUrl').width($('#input_baseUrl').width() + free_width - 50); | |||
// var form_width = $('form#api_selector').width(); | |||
// var inputs_width = 0; | |||
// $('form#api_selector div.input').each( function(){ inputs_width += $(this).outerWidth(); }); | |||
// | |||
// // Update with of baseUrl input | |||
// var free_width = form_width - inputs_width; | |||
// $('#input_baseUrl').width($('#input_baseUrl').width() + free_width - 50); | |||
}, | |||
slapOn: function() { | |||
messageController.showMessage("Please enter the base URL of the API that you wish to explore."); | |||
// messageController.showMessage("Please enter the base URL of the API that you wish to explore."); | |||
$("#content_message").show(); | |||
$("#resources_container").hide(); | |||
this.showApi(); | |||
}, | |||
@@ -174,6 +178,7 @@ jQuery(function($) { | |||
render: function() { | |||
$(this.templateName).tmpl(this.item).appendTo(this.container); | |||
$('#colophon').fadeIn(); | |||
}, | |||
renderApi: function(api) { | |||
@@ -283,41 +283,49 @@ body { | |||
margin: 10px 15px; | |||
font-style: italic; | |||
color: #999999; } | |||
body form#api_selector { | |||
body #header { | |||
background-color: #89bf04; | |||
padding: 15px; | |||
float: none; | |||
clear: both; | |||
overflow: hidden; | |||
display: block; } | |||
body form#api_selector .input { | |||
padding: 14px; } | |||
body #header a#logo { | |||
font-size: 1.5em; | |||
font-weight: bold; | |||
text-decoration: none; | |||
background: transparent url(http://swagger.wordnik.com/images/logo_small.png) no-repeat left center; | |||
padding: 20px 0 20px 40px; | |||
color: white; } | |||
body #header form#api_selector { | |||
display: block; | |||
clear: none; | |||
float: left; | |||
margin: 0 10px 0 0; } | |||
body form#api_selector .input input { | |||
font-size: 1em; | |||
padding: 3px; } | |||
body form#api_selector .input input#input_baseUrl { | |||
width: 500px; } | |||
body form#api_selector .input input#input_apiKey { | |||
width: 250px; } | |||
body form#api_selector .input a#explore { | |||
float: right; } | |||
body #header form#api_selector .input { | |||
display: block; | |||
text-decoration: none; | |||
font-weight: bold; | |||
padding: 8px 8px; | |||
font-size: 0.9em; | |||
color: white; | |||
background-color: #547f00; | |||
-moz-border-radius: 4px; | |||
-webkit-border-radius: 4px; | |||
-o-border-radius: 4px; | |||
-ms-border-radius: 4px; | |||
-khtml-border-radius: 4px; | |||
border-radius: 4px; } | |||
body form#api_selector .input a#explore:hover { | |||
background-color: #547f00; } | |||
clear: none; | |||
float: left; | |||
margin: 0 10px 0 0; } | |||
body #header form#api_selector .input input { | |||
font-size: 0.9em; | |||
padding: 3px; | |||
margin: 0; } | |||
body #header form#api_selector .input input#input_baseUrl { | |||
width: 400px; } | |||
body #header form#api_selector .input input#input_apiKey { | |||
width: 200px; } | |||
body #header form#api_selector .input a#explore { | |||
display: block; | |||
text-decoration: none; | |||
font-weight: bold; | |||
padding: 6px 8px; | |||
font-size: 0.9em; | |||
color: white; | |||
background-color: #547f00; | |||
-moz-border-radius: 4px; | |||
-webkit-border-radius: 4px; | |||
-o-border-radius: 4px; | |||
-ms-border-radius: 4px; | |||
-khtml-border-radius: 4px; | |||
border-radius: 4px; } | |||
body #header form#api_selector .input a#explore:hover { | |||
background-color: #547f00; } | |||
body p#colophon { | |||
margin: 0 15px 40px 15px; | |||
padding: 10px 0; | |||
@@ -38,7 +38,7 @@ body | |||
font-size: 1.5em | |||
font-weight: bold | |||
text-decoration: none | |||
background: transparent image_url('http://local.wordnik.com:3000/images/logo_small.png') no-repeat left center | |||
background: transparent image_url('http://swagger.wordnik.com/images/logo_small.png') no-repeat left center | |||
padding: 20px 0 20px 40px | |||
color: white | |||