code to display resources in default/list/expended style. style can be
passed as a option while creating swagerUi object. In future I would like to achieve this by passing options to templates and have a template helper method manipulate dom and apply correct classes.This approach will improve the performance as we need not go over the entire dom and call Doc.collapseOperationsForResource or Doc.expandOperationsForResource on each matched element
This commit is contained in:
Arjun Balla
@@ -1,91 +1,95 @@
|
||||
<html>
|
||||
<head>
|
||||
<title>Swagger UI</title>
|
||||
<link href='http://fonts.googleapis.com/css?family=Droid+Sans:400,700' rel='stylesheet' type='text/css'/>
|
||||
<link href='css/screen.css' media='screen' rel='stylesheet' type='text/css'/>
|
||||
<script src='lib/jquery-1.8.0.min.js' type='text/javascript'></script>
|
||||
<script src='lib/jquery.slideto.min.js' type='text/javascript'></script>
|
||||
<script src='lib/jquery.wiggle.min.js' type='text/javascript'></script>
|
||||
<script src='lib/jquery.ba-bbq.min.js' type='text/javascript'></script>
|
||||
<script src='lib/handlebars.runtime-1.0.0.beta.6.js' type='text/javascript'></script>
|
||||
<script src='lib/underscore-min.js' type='text/javascript'></script>
|
||||
<script src='lib/backbone-min.js' type='text/javascript'></script>
|
||||
<script src='lib/swagger.js' type='text/javascript'></script>
|
||||
<script src='swagger-ui.js' type='text/javascript'></script>
|
||||
|
||||
<style type="text/css">
|
||||
.swagger-ui-wrap {
|
||||
max-width: 960px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.icon-btn {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#message-bar {
|
||||
min-height: 30px;
|
||||
text-align: center;
|
||||
padding-top: 10px;
|
||||
}
|
||||
|
||||
.message-success {
|
||||
color: #89BF04;
|
||||
}
|
||||
|
||||
.message-fail {
|
||||
color: #cc0000;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script type="text/javascript">
|
||||
$(function () {
|
||||
window.swaggerUi = new SwaggerUi({
|
||||
discoveryUrl:"http://petstore.swagger.wordnik.com/api/resources.json",
|
||||
apiKey:"special-key",
|
||||
dom_id:"swagger-ui-container",
|
||||
supportHeaderParams: false,
|
||||
supportedSubmitMethods: ['get', 'post', 'put'],
|
||||
doneSuccess: function(){
|
||||
console.log("DONE!!!")
|
||||
}
|
||||
});
|
||||
|
||||
window.swaggerUi.load();
|
||||
});
|
||||
|
||||
</script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id='header'>
|
||||
<div class="swagger-ui-wrap">
|
||||
<a id="logo" href="http://swagger.wordnik.com">swagger</a>
|
||||
|
||||
<form id='api_selector'>
|
||||
<div class='input icon-btn'>
|
||||
<img id="show-pet-store-icon" src="images/pet_store_api.png" title="Show Swagger Petstore Example Apis">
|
||||
</div>
|
||||
<div class='input icon-btn'>
|
||||
<img id="show-wordnik-dev-icon" src="images/wordnik_api.png" title="Show Wordnik Developer Apis">
|
||||
</div>
|
||||
<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>
|
||||
|
||||
<div id="message-bar" class="swagger-ui-wrap">
|
||||
|
||||
</div>
|
||||
|
||||
<div id="swagger-ui-container" class="swagger-ui-wrap">
|
||||
|
||||
</div>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Swagger UI</title>
|
||||
<link href='http://fonts.googleapis.com/css?family=Droid+Sans:400,700' rel='stylesheet' type='text/css'/>
|
||||
<link href='css/screen.css' media='screen' rel='stylesheet' type='text/css'/>
|
||||
<script src='lib/jquery-1.8.0.min.js' type='text/javascript'></script>
|
||||
<script src='lib/jquery.slideto.min.js' type='text/javascript'></script>
|
||||
<script src='lib/jquery.wiggle.min.js' type='text/javascript'></script>
|
||||
<script src='lib/jquery.ba-bbq.min.js' type='text/javascript'></script>
|
||||
<script src='lib/handlebars.runtime-1.0.0.beta.6.js' type='text/javascript'></script>
|
||||
<script src='lib/underscore-min.js' type='text/javascript'></script>
|
||||
<script src='lib/backbone-min.js' type='text/javascript'></script>
|
||||
<script src='lib/swagger.js' type='text/javascript'></script>
|
||||
<script src='swagger-ui.js' type='text/javascript'></script>
|
||||
|
||||
<style type="text/css">
|
||||
.swagger-ui-wrap {
|
||||
max-width: 960px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.icon-btn {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#message-bar {
|
||||
min-height: 30px;
|
||||
text-align: center;
|
||||
padding-top: 10px;
|
||||
}
|
||||
|
||||
.message-success {
|
||||
color: #89BF04;
|
||||
}
|
||||
|
||||
.message-fail {
|
||||
color: #cc0000;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script type="text/javascript">
|
||||
$(function () {
|
||||
window.swaggerUi = new SwaggerUi({
|
||||
discoveryUrl:"http://petstore.swagger.wordnik.com/api/resources.json",
|
||||
apiKey:"special-key",
|
||||
dom_id:"swagger-ui-container",
|
||||
supportHeaderParams: false,
|
||||
supportedSubmitMethods: ['get', 'post', 'put'],
|
||||
doneSuccess: function(){
|
||||
console.log("DONE!!!")
|
||||
},
|
||||
// "" - default behavior
|
||||
// list - list view of all resources
|
||||
// expand - expanded view of all resources
|
||||
docStyle: ""
|
||||
});
|
||||
|
||||
window.swaggerUi.load();
|
||||
});
|
||||
|
||||
</script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id='header'>
|
||||
<div class="swagger-ui-wrap">
|
||||
<a id="logo" href="http://swagger.wordnik.com">swagger</a>
|
||||
|
||||
<form id='api_selector'>
|
||||
<div class='input icon-btn'>
|
||||
<img id="show-pet-store-icon" src="images/pet_store_api.png" title="Show Swagger Petstore Example Apis">
|
||||
</div>
|
||||
<div class='input icon-btn'>
|
||||
<img id="show-wordnik-dev-icon" src="images/wordnik_api.png" title="Show Wordnik Developer Apis">
|
||||
</div>
|
||||
<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>
|
||||
|
||||
<div id="message-bar" class="swagger-ui-wrap">
|
||||
|
||||
</div>
|
||||
|
||||
<div id="swagger-ui-container" class="swagger-ui-wrap">
|
||||
|
||||
</div>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user