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

first working version of swagger ui without the form submission/sandbox

Browse Source
This commit is contained in:
Ayush Gupta
2011-07-27 12:10:56 -07:00
parent df98b00258
commit 9443819afd
4 changed files with 159 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

71
src/main/html/index.html
View File

@@ -18,7 +18,6 @@
<script src="javascript/app.ext.min.js" type="text/javascript" charset="utf-8"></script>
<script src="javascript/swagger-service.js" type="text/javascript" charset="utf-8"></script>
<script src="javascript/swagger-service-sample.js" type="text/javascript" charset="utf-8"></script>
<script src="javascript/swagger-ui.js" type="text/javascript" charset="utf-8"></script>
</head>
@@ -93,26 +92,26 @@ http://api.wordnik.com/v4
<script id="apiTemplate" type="text/x-jquery-tmpl">
<li class='endpoint'>
<ul class='operations'>
<ul id='${name}_endpoint_${id}_operations' class='operations'>
</ul>
</li>
</script>
<script id="operationTemplate" type="text/x-jquery-tmpl">
<li class='${httpMethod} operation' id='${apiName}_${nickname}'>
<li class='${httpMethodLowercase} operation' id='${apiName}_${nickname}_${id}'>
<div class='heading'>
<h3>
<span class='http_method'><a href="#!/${apiName}/${nickname}"
onclick="Docs.toggleOperationContent('${apiName}_${nickname}_content');">${httpMethod}</a></span>
<span class='path'><a href="#!/${apiName}/${nickname}"
onclick="Docs.toggleOperationContent('${apiName}_${nickname}_content');">${path_json}</a></span>
<span class='http_method'><a href="#!/${apiName}/${nickname}_${id}"
onclick="Docs.toggleOperationContent('${apiName}_${nickname}_${id}_content');">${httpMethod}</a></span>
<span class='path'><a href="#!/${apiName}/${nickname}_${id}"
onclick="Docs.toggleOperationContent('${apiName}_${nickname}_${id}_content');">${path_json}</a></span>
</h3>
<ul class='options'>
<li><a href="#!/${apiName}/${nickname}"
onclick="Docs.toggleOperationContent('${apiName}_${nickname}_content');">${summary}</a></li>
<li><a href="#!/${apiName}/${nickname}_${id}"
onclick="Docs.toggleOperationContent('${apiName}_${nickname}_${id}_content');">${summary}</a></li>
</ul>
</div>
<div class='content' id='${apiName}_${nickname}_content' style='display:none'>
<div class='content' id='${apiName}_${nickname}_${id}_content' style='display:none'>
<form accept-charset="UTF-8" action="#" class="sandbox" method="post">
<div style="margin:0;padding:0;display:inline"></div>
<h4>Parameters</h4>
@@ -120,27 +119,27 @@ http://api.wordnik.com/v4
<thead>
<tr>
<th>Parameter</th>
<th>Value</th>
<th id="${apiName}_${nickname}_${id}_value_header">Value</th>
<th>Description</th>
</tr>
</thead>
<tbody id="${apiName}_${nickname}_params">
<tbody id="${apiName}_${nickname}_${id}_params">
</tbody>
</table>
<div class='sandbox_header' id='${apiName}_${nickname}_content_sandbox_response_header'>
<input class="submit" id="${apiName}_${nickname}_content_sandbox_response_button" name="commit"
<div class='sandbox_header' id='${apiName}_${nickname}_${id}_content_sandbox_response_header'>
<input class="submit" id="${apiName}_${nickname}_${id}_content_sandbox_response_button" name="commit"
type="submit" value="Try it out!"/>
<a href="#" id="${apiName}_${nickname}_content_sandbox_response_hider"
onclick="$('#${apiName}_${nickname}_content_sandbox_response').slideUp();$(this).fadeOut(); return false;"
<a href="#" id="${apiName}_${nickname}_${id}_content_sandbox_response_hider"
onclick="$('#${apiName}_${nickname}_${id}_content_sandbox_response').slideUp();$(this).fadeOut(); return false;"
style="display:none">Hide Response</a>
<img alt="Throbber" id="${apiName}_${nickname}_content_sandbox_response_throbber"
<img alt="Throbber" id="${apiName}_${nickname}_${id}_content_sandbox_response_throbber"
src="images/throbber.gif" style="display:none"/>
</div>
</form>
<div class='response' id='${apiName}_${nickname}_content_sandbox_response' style='display:none'>
<div class='response' id='${apiName}_${nickname}_${id}_content_sandbox_response' style='display:none'>
<h4>Request URL</h4>
<div class='block request_url'></div>
@@ -161,6 +160,42 @@ http://api.wordnik.com/v4
</li>
</script>
<script id="paramTemplateRequired" type="text/x-jquery-tmpl">
<tr>
<td class='code required'>${name}</td>
<td><input class="required" minlength="1" placeholder="(required)" type="text" value=""/></td>
<td width='500'><strong>${description}</strong>
</td>
</tr>
</script>
<script id="paramTemplate" type="text/x-jquery-tmpl">
<tr>
<td class='code'>${name}</td>
<td><input class="" minlength="0" placeholder="" type="text" value=""/></td>
<td width='500'>${description}</td>
</tr>
</script>
<script id="paramTemplateRequiredReadOnly" type="text/x-jquery-tmpl">
<tr>
<td class='code required'>${name}</td>
<td>-</td>
<td width='500'><strong>${description}</strong>
</td>
</tr>
</script>
<script id="paramTemplateReadOnly" type="text/x-jquery-tmpl">
<tr>
<td class='code'>${name}</td>
<td>-</td>
<td width='500'>${description}</td>
</tr>
</script>
</body>
</html>

34
src/main/html/javascript/swagger-service.js
View File

@@ -26,7 +26,7 @@ function SwaggerService(hostUrl) {
this.path_json = this.path + ".json";
this.path_xml = this.path + ".xml";
this.baseUrl = apiHost;
this.name = this.path.substr(0, this.path.length);
this.name = this.path.substr(1, this.path.length);
this.apiList = Api.sub();
this.modelList = ApiModel.sub();
},
@@ -62,9 +62,9 @@ function SwaggerService(hostUrl) {
this.path_xml = prefix + ".xml" + suffix;;
if(this.path.indexOf("/") == 0) {
this.name = this.path.substr(1, secondPathSeperatorIndex);
this.name = this.path.substr(1, secondPathSeperatorIndex - 1);
} else {
this.name = this.path.substr(0, secondPathSeperatorIndex);
this.name = this.path.substr(0, secondPathSeperatorIndex - 1);
}
} else {
this.path_json = this.path + ".json";
@@ -78,16 +78,21 @@ function SwaggerService(hostUrl) {
}
var value = this.operations;
this.operations = ApiOperation.sub();
if (value) this.operations.refresh(value);
for(var i = 0; i < this.operations.all().length; i++) {
var operation = this.operations.all()[i];
operation.apiName = this.name;
operation.path = this.path;
operation.path_json = this.path_json;
operation.path_xml = this.path_xml;
this.operations = ApiOperation.sub();
if (value) {
for (var i = 0; i < value.length; i++) {
var obj = value[i];
obj.apiName = this.name;
obj.path = this.path;
obj.path_json = this.path_json;
obj.path_xml = this.path_xml;
}
this.operations.refresh(value);
}
},
toString: function() {
@@ -106,12 +111,13 @@ function SwaggerService(hostUrl) {
});
// Model: ApiOperation
var ApiOperation = Spine.Model.setup("ApiOperation", ["baseUrl", "path", "path_json", "path_xml", "summary", "deprecated", "open", "httpMethod", "nickname", "responseClass", "parameters", "apiName"]);
var ApiOperation = Spine.Model.setup("ApiOperation", ["baseUrl", "path", "path_json", "path_xml", "summary", "deprecated", "open", "httpMethod", "httpMethodLowercase", "nickname", "responseClass", "parameters", "apiName"]);
ApiOperation.include({
init: function(atts) {
if (atts) this.load(atts);
this.baseUrl = apiHost;
this.httpMethodLowercase = this.httpMethod.toLowerCase();
var value = this.parameters;
this.parameters = ApiParameter.sub();
@@ -130,7 +136,7 @@ function SwaggerService(hostUrl) {
}
paramsString += ")";
return "{" + this.nickname + paramsString + ": " + this.summary + "}";
return "{" + this.path_json + "| " + this.nickname + paramsString + ": " + this.summary + "}";
}
});
@@ -140,6 +146,8 @@ function SwaggerService(hostUrl) {
ApiParameter.include({
init: function(atts) {
if (atts) this.load(atts);
this.name = this.name || this.dataType;
},
toString: function() {

81
src/main/html/javascript/swagger-ui.js
View File

@@ -0,0 +1,81 @@
jQuery(function($) {
// create and initialize SwaggerService
var swaggerService = new SwaggerService();
swaggerService.init();
// Create convenience references to Spine models
var ApiResource = swaggerService.ApiResource();
// Register a callback for when apis are loaded
ApiResource.bind("refresh", apisLoaded);
function apisLoaded() {
for (var i = 0; i < ApiResource.all().length; i++) {
var apiResource = ApiResource.all()[i];
log("------------- apiResource : " + apiResource.name);
$("#resourceTemplate").tmpl(apiResource).appendTo("#resources");
// apiResource.apiList.logAll();
var resourceApisContainer = "#" + apiResource.name + "_endpoint_list";
log("resourceApisContainer = " + resourceApisContainer);
for (var j = 0; j < apiResource.apiList.all().length; j++) {
var api = apiResource.apiList.all()[j];
$("#apiTemplate").tmpl(api).appendTo(resourceApisContainer);
renderOperations(api);
}
// apiResource.modelList.logAll();
for (var k = 0; k < apiResource.modelList.all().length; k++) {
var apiModel = apiResource.modelList.all()[k];
}
}
if (window.console) console.log("apis loaded");
}
function renderOperations(api) {
if (api.operations && api.operations.count() > 0) {
var operationsContainer = "#" + api.name + "_endpoint_" + api.id + "_operations";
for (var o = 0; o < api.operations.all().length; o++) {
var operation = api.operations.all()[o];
$("#operationTemplate").tmpl(operation).appendTo(operationsContainer);
renderParameters(operation, $);
}
}
}
function renderParameters(operation) {
if(operation.parameters && operation.parameters.count() > 0) {
var isGetOpetation = (operation.httpMethodLowercase == "get");
var operationParamsContainer = "#" + operation.apiName + "_" + operation.nickname + "_" + operation.id + "_params";
log("operationParamsContainer= " + operationParamsContainer);
for (var p = 0; p < operation.parameters.all().length; p++) {
var param = operation.parameters.all()[p];
var templateName = "#paramTemplate";
if (param.required)
templateName += "Required";
if (!isGetOpetation)
templateName += "ReadOnly";
$(templateName).tmpl(param).appendTo(operationParamsContainer);
if (!isGetOpetation) {
var submitButtonId = "#" + operation.apiName + "_" + operation.nickname + "_" + operation.id + "_content_sandbox_response_button";
$(submitButtonId).hide();
var valueHeader = "#" + operation.apiName + "_" + operation.nickname + "_" + operation.id + "_value_header";
$(valueHeader).html("Default Value");
}
}
}
}
});