kyy/swagger-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Built a fresh version

Browse Source
This commit is contained in:
zeke
2011-08-09 16:24:37 -07:00
parent 41f1c6d528
commit eefd173d9a
4 changed files with 70 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
build/index.html
View File

@@ -13,15 +13,17 @@
<script src='javascripts/swagger-ui.js' type='text/javascript'></script> <script src='javascripts/swagger-ui.js' type='text/javascript'></script>
</head> </head>
<body> <body>
<form id='api_selector'> <div id='header'>
<div class='input'><input placeholder="http://example.com/api" id="input_baseUrl" name="baseUrl" type="text" /></div> <a id="logo" href="http://swagger.wordnik.com">swagger</a>
<div class='input'><input placeholder="api_key" id="input_apiKey" name="apiKey" type="text" /></div> <form id='api_selector'>
<div class='input'><a id="explore" href="#">Explore</a></div> <div class='input'><input placeholder="http://example.com/api" id="input_baseUrl" name="baseUrl" type="text" /></div>
</form> <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'> <div class='container' id='resources_container'>
<ul id='resources'></ul> <ul id='resources'></ul>
</div> </div>
<div id='content_message'></div>
<script id="resourceTemplate" type="text/x-jquery-tmpl"><li class='resource' id='resource_${name}'> <script id="resourceTemplate" type="text/x-jquery-tmpl"><li class='resource' id='resource_${name}'>
<div class='heading'> <div class='heading'>
<h2> <h2>
@@ -152,7 +154,13 @@
<td width='500'>${description}</td> <td width='500'>${description}</td>
</tr> </tr>
</script> </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 Sexy API documentation from
<a href="http://swagger.wordnik.com">Swagger</a>. <a href="http://swagger.wordnik.com">Swagger</a>.
</p> </p>

25
build/javascripts/swagger-ui.js
View File

@@ -1,7 +1,9 @@
jQuery(function($) { jQuery(function($) {
// this.baseUrl = "http://swagr.api.wordnik.com/v4"; // this.baseUrl = "http://swagr.api.wordnik.com/v4";
// this.apiKey = "my-api-key";
// this.baseUrl = "http://petstore.swagger.wordnik.com/api";
// this.apiKey = "special-key";
var ApiSelectionController = Spine.Controller.create({ var ApiSelectionController = Spine.Controller.create({
proxied: ["showApi"], proxied: ["showApi"],
@@ -33,17 +35,19 @@ jQuery(function($) {
}, },
adaptToScale: function() { adaptToScale: function() {
var form_width = $('form#api_selector').width(); // var form_width = $('form#api_selector').width();
var inputs_width = 0; // var inputs_width = 0;
$('form#api_selector div.input').each( function(){ inputs_width += $(this).outerWidth(); }); // $('form#api_selector div.input').each( function(){ inputs_width += $(this).outerWidth(); });
//
// Update with of baseUrl input // // Update with of baseUrl input
var free_width = form_width - inputs_width; // var free_width = form_width - inputs_width;
$('#input_baseUrl').width($('#input_baseUrl').width() + free_width - 50); // $('#input_baseUrl').width($('#input_baseUrl').width() + free_width - 50);
}, },
slapOn: function() { 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(); $("#resources_container").hide();
this.showApi(); this.showApi();
}, },
@@ -174,6 +178,7 @@ jQuery(function($) {
render: function() { render: function() {
$(this.templateName).tmpl(this.item).appendTo(this.container); $(this.templateName).tmpl(this.item).appendTo(this.container);
$('#colophon').fadeIn();
}, },
renderApi: function(api) { renderApi: function(api) {

70
build/stylesheets/screen.css
View File

@@ -283,41 +283,49 @@ body {
margin: 10px 15px; margin: 10px 15px;
font-style: italic; font-style: italic;
color: #999999; } color: #999999; }
body form#api_selector { body #header {
background-color: #89bf04; background-color: #89bf04;
padding: 15px; padding: 14px; }
float: none; body #header a#logo {
clear: both; font-size: 1.5em;
overflow: hidden; font-weight: bold;
display: block; } text-decoration: none;
body form#api_selector .input { 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; display: block;
clear: none; clear: none;
float: left; float: right; }
margin: 0 10px 0 0; } body #header form#api_selector .input {
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 {
display: block; display: block;
text-decoration: none; clear: none;
font-weight: bold; float: left;
padding: 8px 8px; margin: 0 10px 0 0; }
font-size: 0.9em; body #header form#api_selector .input input {
color: white; font-size: 0.9em;
background-color: #547f00; padding: 3px;
-moz-border-radius: 4px; margin: 0; }
-webkit-border-radius: 4px; body #header form#api_selector .input input#input_baseUrl {
-o-border-radius: 4px; width: 400px; }
-ms-border-radius: 4px; body #header form#api_selector .input input#input_apiKey {
-khtml-border-radius: 4px; width: 200px; }
border-radius: 4px; } body #header form#api_selector .input a#explore {
body form#api_selector .input a#explore:hover { display: block;
background-color: #547f00; } 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 { body p#colophon {
margin: 0 15px 40px 15px; margin: 0 15px 40px 15px;
padding: 10px 0; padding: 10px 0;

2
source/stylesheets/screen.css.sass
View File

@@ -38,7 +38,7 @@ body
font-size: 1.5em font-size: 1.5em
font-weight: bold font-weight: bold
text-decoration: none 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 padding: 20px 0 20px 40px
color: white color: white