|
|
@@ -0,0 +1,190 @@ |
|
|
|
'use strict'; |
|
|
|
|
|
|
|
var SwaggerUi = Backbone.Router.extend({ |
|
|
|
|
|
|
|
dom_id: 'swagger_ui', |
|
|
|
|
|
|
|
// Attributes |
|
|
|
options: null, |
|
|
|
api: null, |
|
|
|
headerView: null, |
|
|
|
mainView: null, |
|
|
|
|
|
|
|
// SwaggerUi accepts all the same options as SwaggerApi |
|
|
|
initialize: function(options) { |
|
|
|
options = options || {}; |
|
|
|
|
|
|
|
// Allow dom_id to be overridden |
|
|
|
if (options.dom_id) { |
|
|
|
this.dom_id = options.dom_id; |
|
|
|
delete options.dom_id; |
|
|
|
} |
|
|
|
|
|
|
|
if (!options.supportedSubmitMethods){ |
|
|
|
options.supportedSubmitMethods = [ |
|
|
|
'get', |
|
|
|
'put', |
|
|
|
'post', |
|
|
|
'delete', |
|
|
|
'head', |
|
|
|
'options', |
|
|
|
'patch' |
|
|
|
]; |
|
|
|
} |
|
|
|
|
|
|
|
// Create an empty div which contains the dom_id |
|
|
|
if (! $('#' + this.dom_id)){ |
|
|
|
$('body').append('<div id="' + this.dom_id + '"></div>') ; |
|
|
|
} |
|
|
|
|
|
|
|
this.options = options; |
|
|
|
|
|
|
|
// set marked options |
|
|
|
marked.setOptions({gfm: true}); |
|
|
|
|
|
|
|
// Set the callbacks |
|
|
|
this.options.success = function() { return this.render(); }; |
|
|
|
this.options.progress = function(d) { return this.showMessage(d); }; |
|
|
|
this.options.failure = function(d) { return this.onLoadFailure(d); }; |
|
|
|
|
|
|
|
// Create view to handle the header inputs |
|
|
|
this.headerView = new HeaderView({el: $('#header')}); |
|
|
|
|
|
|
|
// Event handler for when the baseUrl/apiKey is entered by user |
|
|
|
this.headerView.on('update-swagger-ui', function(data) { |
|
|
|
return this.updateSwaggerUi(data); |
|
|
|
}); |
|
|
|
}, |
|
|
|
|
|
|
|
// Set an option after initializing |
|
|
|
setOption: function(option, value) { |
|
|
|
this.options[option] = value; |
|
|
|
}, |
|
|
|
|
|
|
|
// Get the value of a previously set option |
|
|
|
getOption(option) { |
|
|
|
return this.options[option]; |
|
|
|
}, |
|
|
|
|
|
|
|
// Event handler for when url/key is received from user |
|
|
|
updateSwaggerUi: function(data){ |
|
|
|
this.options.url = data.url; |
|
|
|
this.load(); |
|
|
|
}, |
|
|
|
|
|
|
|
// Create an api and render |
|
|
|
load: function(){ |
|
|
|
// Initialize the API object |
|
|
|
if (this.mainView) { |
|
|
|
this.mainView.clear(); |
|
|
|
} |
|
|
|
var url = this.options.url; |
|
|
|
if (url && url.indexOf('http') !== 0) { |
|
|
|
url = this.buildUrl(window.location.href.toString(), url); |
|
|
|
} |
|
|
|
|
|
|
|
this.options.url = url; |
|
|
|
this.headerView.update(url); |
|
|
|
|
|
|
|
this.api = new SwaggerClient(this.options); |
|
|
|
}, |
|
|
|
|
|
|
|
// collapse all sections |
|
|
|
collapseAll: function(){ |
|
|
|
Docs.collapseEndpointListForResource(''); |
|
|
|
}, |
|
|
|
|
|
|
|
// list operations for all sections |
|
|
|
listAll: function(){ |
|
|
|
Docs.collapseOperationsForResource(''); |
|
|
|
}, |
|
|
|
|
|
|
|
// expand operations for all sections |
|
|
|
expandAll: function(){ |
|
|
|
Docs.expandOperationsForResource(''); |
|
|
|
}, |
|
|
|
|
|
|
|
// This is bound to success handler for SwaggerApi |
|
|
|
// so it gets called when SwaggerApi completes loading |
|
|
|
render: function(){ |
|
|
|
this.showMessage('Finished Loading Resource Information. Rendering Swagger UI...'); |
|
|
|
this.mainView = new MainView({ |
|
|
|
model: this.api, |
|
|
|
el: $('#' + this.dom_id), |
|
|
|
swaggerOptions: this.options |
|
|
|
}).render(); |
|
|
|
this.showMessage(); |
|
|
|
switch (this.options.docExpansion) { |
|
|
|
case 'full': |
|
|
|
this.expandAll(); break; |
|
|
|
case 'list': |
|
|
|
this.listAll(); break; |
|
|
|
default: |
|
|
|
break; |
|
|
|
} |
|
|
|
this.renderGFM(); |
|
|
|
|
|
|
|
if (this.options.onComplete){ |
|
|
|
this.options.onComplete(this.api, this); |
|
|
|
} |
|
|
|
|
|
|
|
setTimeout(Docs.shebang.bind(this), 100); |
|
|
|
}, |
|
|
|
|
|
|
|
buildUrl: function(base, url){ |
|
|
|
if (url.indexOf('/') === 0) { |
|
|
|
var parts = base.split('/'); |
|
|
|
base = parts[0] + '//' + parts[2]; |
|
|
|
return base + url; |
|
|
|
} else { |
|
|
|
var endOfPath = base.length; |
|
|
|
|
|
|
|
if (base.indexOf('?') > -1){ |
|
|
|
endOfPath = Math.min(endOfPath, base.indexOf('?')); |
|
|
|
} |
|
|
|
|
|
|
|
if (base.indexOf('#') > -1){ |
|
|
|
endOfPath = Math.min(endOfPath, base.indexOf('#')); |
|
|
|
} |
|
|
|
|
|
|
|
base = base.substring(0, endOfPath); |
|
|
|
|
|
|
|
if (base.indexOf('/', base.length - 1 ) !== -1){ |
|
|
|
return base + url; |
|
|
|
} |
|
|
|
|
|
|
|
return base + '/' + url; |
|
|
|
} |
|
|
|
}, |
|
|
|
|
|
|
|
// Shows message on topbar of the ui |
|
|
|
showMessage: function(data = ''){ |
|
|
|
$('#message-bar').removeClass('message-fail'); |
|
|
|
$('#message-bar').addClass('message-success'); |
|
|
|
$('#message-bar').html(data); |
|
|
|
}, |
|
|
|
|
|
|
|
// shows message in red |
|
|
|
onLoadFailure: function(data = ''){ |
|
|
|
$('#message-bar').removeClass('message-success'); |
|
|
|
$('#message-bar').addClass('message-fail'); |
|
|
|
|
|
|
|
var val = $('#message-bar').html(data); |
|
|
|
|
|
|
|
if (this.options.onFailure) { |
|
|
|
this.options.onFailure(data); |
|
|
|
} |
|
|
|
|
|
|
|
return val; |
|
|
|
}, |
|
|
|
|
|
|
|
// Renders GFM for elements with 'markdown' class |
|
|
|
renderGFM: function(){ |
|
|
|
$('.markdown').each(function(){ |
|
|
|
$(this).html(marked($(this).html())); |
|
|
|
}); |
|
|
|
} |
|
|
|
|
|
|
|
}); |
|
|
|
|
|
|
|
window.SwaggerUi = SwaggerUi; |