Remove global references to swaggerUi object

By passing parent view as an option to child views, child views can
access parent views and eventually can access model of MainView

There is alos a new domEl option available for SwaggerUI constructor.
User can send domEl instead of dom_id to specifiy which element they
want to render to
This commit is contained in:
Mohsen Azimi
2015-03-10 00:48:56 -07:00
parent ff5eb6f0f4
commit 7006e86fa5
8 changed files with 96 additions and 57 deletions

67
dist/swagger-ui.js vendored
View File

@@ -15,7 +15,7 @@ SwaggerUi = (function(superClass) {
return SwaggerUi.__super__.constructor.apply(this, arguments); return SwaggerUi.__super__.constructor.apply(this, arguments);
} }
SwaggerUi.prototype.dom_id = "swagger_ui"; SwaggerUi.prototype.domEl = $('#swagger_ui');
SwaggerUi.prototype.options = null; SwaggerUi.prototype.options = null;
@@ -30,14 +30,16 @@ SwaggerUi = (function(superClass) {
options = {}; options = {};
} }
if (options.dom_id != null) { if (options.dom_id != null) {
this.dom_id = options.dom_id; this.domEl = $('#' + options.dom_id);
delete options.dom_id; delete options.dom_id;
} else if (options.domEl != null) {
this.domEl = options.domEl;
} }
if (options.supportedSubmitMethods == null) { if (options.supportedSubmitMethods == null) {
options.supportedSubmitMethods = ['get', 'put', 'post', 'delete', 'head', 'options', 'patch']; options.supportedSubmitMethods = ['get', 'put', 'post', 'delete', 'head', 'options', 'patch'];
} }
if ($('#' + this.dom_id) == null) { if (!$.contains(document, this.domEl)) {
$('body').append('<div id="' + this.dom_id + '"></div>'); $('body').append(this.domEl);
} }
this.options = options; this.options = options;
marked.setOptions({ marked.setOptions({
@@ -58,14 +60,16 @@ SwaggerUi = (function(superClass) {
return _this.onLoadFailure(d); return _this.onLoadFailure(d);
}; };
})(this); })(this);
this.headerView = new HeaderView({ if ($('#header').length) {
el: $('#header') this.headerView = new HeaderView({
}); el: $('#header')
return this.headerView.on('update-swagger-ui', (function(_this) { });
return function(data) { return this.headerView.on('update-swagger-ui', (function(_this) {
return _this.updateSwaggerUi(data); return function(data) {
}; return _this.updateSwaggerUi(data);
})(this)); };
})(this));
}
}; };
SwaggerUi.prototype.setOption = function(option, value) { SwaggerUi.prototype.setOption = function(option, value) {
@@ -91,7 +95,9 @@ SwaggerUi = (function(superClass) {
url = this.buildUrl(window.location.href.toString(), url); url = this.buildUrl(window.location.href.toString(), url);
} }
this.options.url = url; this.options.url = url;
this.headerView.update(url); if (this.headerView) {
this.headerView.update(url);
}
return this.api = new SwaggerClient(this.options); return this.api = new SwaggerClient(this.options);
}; };
@@ -111,8 +117,9 @@ SwaggerUi = (function(superClass) {
this.showMessage('Finished Loading Resource Information. Rendering Swagger UI...'); this.showMessage('Finished Loading Resource Information. Rendering Swagger UI...');
this.mainView = new MainView({ this.mainView = new MainView({
model: this.api, model: this.api,
el: $('#' + this.dom_id), el: this.domEl,
swaggerOptions: this.options swaggerOptions: this.options,
router: this
}).render(); }).render();
this.showMessage(); this.showMessage();
switch (this.options.docExpansion) { switch (this.options.docExpansion) {
@@ -1293,9 +1300,10 @@ MainView = (function(superClass) {
id: 'resource_' + resource.id, id: 'resource_' + resource.id,
className: 'resource', className: 'resource',
auths: auths, auths: auths,
swaggerOptions: this.options.swaggerOptions swaggerOptions: this.options.swaggerOptions,
parent: this
}); });
return $('#resources').append(resourceView.render().el); return $('#resources', this.el).append(resourceView.render().el);
}; };
MainView.prototype.clear = function() { MainView.prototype.clear = function() {
@@ -1477,7 +1485,8 @@ OperationView = (function(superClass) {
if (signatureModel) { if (signatureModel) {
responseSignatureView = new SignatureView({ responseSignatureView = new SignatureView({
model: signatureModel, model: signatureModel,
tagName: 'div' tagName: 'div',
parent: this
}); });
$('.model-signature', $(this.el)).append(responseSignatureView.render().el); $('.model-signature', $(this.el)).append(responseSignatureView.render().el);
} else { } else {
@@ -1512,7 +1521,8 @@ OperationView = (function(superClass) {
param.type = type; param.type = type;
} }
responseContentTypeView = new ResponseContentTypeView({ responseContentTypeView = new ResponseContentTypeView({
model: contentTypeModel model: contentTypeModel,
parent: this
}); });
$('.response-content-type', $(this.el)).append(responseContentTypeView.render().el); $('.response-content-type', $(this.el)).append(responseContentTypeView.render().el);
ref4 = this.model.parameters; ref4 = this.model.parameters;
@@ -1534,7 +1544,8 @@ OperationView = (function(superClass) {
paramView = new ParameterView({ paramView = new ParameterView({
model: param, model: param,
tagName: 'tr', tagName: 'tr',
readOnly: this.model.isReadOnly readOnly: this.model.isReadOnly,
parent: this
}); });
return $('.operation-params', $(this.el)).append(paramView.render().el); return $('.operation-params', $(this.el)).append(paramView.render().el);
}; };
@@ -1543,7 +1554,8 @@ OperationView = (function(superClass) {
var statusCodeView; var statusCodeView;
statusCodeView = new StatusCodeView({ statusCodeView = new StatusCodeView({
model: statusCode, model: statusCode,
tagName: 'tr' tagName: 'tr',
parent: this
}); });
return $('.operation-status', $(this.el)).append(statusCodeView.render().el); return $('.operation-status', $(this.el)).append(statusCodeView.render().el);
}; };
@@ -2121,7 +2133,8 @@ ResourceView = (function(superClass) {
tagName: 'li', tagName: 'li',
className: 'endpoint', className: 'endpoint',
swaggerOptions: this.options.swaggerOptions, swaggerOptions: this.options.swaggerOptions,
auths: this.auths auths: this.auths,
parent: this
}); });
$('.endpoints', $(this.el)).append(operationView.render().el); $('.endpoints', $(this.el)).append(operationView.render().el);
return this.number++; return this.number++;
@@ -2251,14 +2264,16 @@ StatusCodeView = (function(superClass) {
StatusCodeView.prototype.initialize = function() {}; StatusCodeView.prototype.initialize = function() {};
StatusCodeView.prototype.render = function() { StatusCodeView.prototype.render = function() {
var responseModel, responseModelView, template; var models, responseModel, responseModelView, template;
template = this.template(); template = this.template();
$(this.el).html(template(this.model)); $(this.el).html(template(this.model));
if (swaggerUi.api.models.hasOwnProperty(this.model.responseModel)) { models = this.options.parent.options.parent.options.parent.model.models;
if (models.hasOwnProperty(this.model.responseModel)) {
models = this.options.parent.options.parent.options.parent.model.models;
responseModel = { responseModel = {
sampleJSON: JSON.stringify(swaggerUi.api.models[this.model.responseModel].createJSONSample(), null, 2), sampleJSON: JSON.stringify(models[this.model.responseModel].createJSONSample(), null, 2),
isParam: false, isParam: false,
signature: swaggerUi.api.models[this.model.responseModel].getMockSignature() signature: models[this.model.responseModel].getMockSignature()
}; };
responseModelView = new SignatureView({ responseModelView = new SignatureView({
model: responseModel, model: responseModel,

File diff suppressed because one or more lines are too long

View File

@@ -57,7 +57,7 @@ function coffeescript () {
return gulp return gulp
.src(['./src/main/coffeescript/**/*.coffee']) .src(['./src/main/coffeescript/**/*.coffee'])
.pipe(coffee({bare: true})) .pipe(coffee({bare: true}))
.on('error', gutil.log); .on('error', log);
} }
/** /**
@@ -93,7 +93,7 @@ gulp.task('less', ['clean'], function() {
'./src/main/less/reset.less' './src/main/less/reset.less'
]) ])
.pipe(less()) .pipe(less())
.on('error', gutil.log) .on('error', log)
.pipe(gulp.dest('./src/main/html/css/')) .pipe(gulp.dest('./src/main/html/css/'))
.pipe(connect.reload()); .pipe(connect.reload());
}); });
@@ -108,20 +108,20 @@ gulp.task('copy', ['less'], function() {
gulp gulp
.src(['./lib/**/*.{js,map}']) .src(['./lib/**/*.{js,map}'])
.pipe(gulp.dest('./dist/lib')) .pipe(gulp.dest('./dist/lib'))
.on('error', gutil.log) .on('error', log)
// copy all files inside html folder // copy all files inside html folder
gulp gulp
.src(['./src/main/html/**/*']) .src(['./src/main/html/**/*'])
.pipe(gulp.dest('./dist')) .pipe(gulp.dest('./dist'))
.on('error', gutil.log) .on('error', log)
}); });
/** /**
* Watch for changes and recompile * Watch for changes and recompile
*/ */
gulp.task('watch', function() { gulp.task('watch', function() {
return watch(['./src/**/*.{coffee,js,less,handlebars}'], function() { return watch(['./src/**/*.{coffee,js,less,handlebars,html}'], function() {
gulp.start('default'); gulp.start('default');
}); });
}); });
@@ -136,6 +136,10 @@ gulp.task('connect', function() {
}); });
}); });
function log(error) {
console.log(error.toString());
}
gulp.task('default', ['dist', 'copy']); gulp.task('default', ['dist', 'copy']);
gulp.task('serve', ['connect', 'watch']) gulp.task('serve', ['connect', 'watch', 'default'])

View File

@@ -1,7 +1,7 @@
class SwaggerUi extends Backbone.Router class SwaggerUi extends Backbone.Router
# Defaults # Defaults
dom_id: "swagger_ui" domEl: $('#swagger_ui')
# Attributes # Attributes
options: null options: null
@@ -13,14 +13,27 @@ class SwaggerUi extends Backbone.Router
initialize: (options={}) -> initialize: (options={}) ->
# Allow dom_id to be overridden # Allow dom_id to be overridden
if options.dom_id? if options.dom_id?
@dom_id = options.dom_id @domEl = $('#' + options.dom_id)
delete options.dom_id delete options.dom_id
if not options.supportedSubmitMethods? # Allow domeEl to be specified
options.supportedSubmitMethods = ['get','put','post','delete','head','options','patch'] else if options.domEl?
@domEl = options.domEl
# Create an empty div which contains the dom_id if not options.supportedSubmitMethods?
$('body').append('<div id="' + @dom_id + '"></div>') if not $('#' + @dom_id)? options.supportedSubmitMethods = [
'get'
'put'
'post'
'delete'
'head'
'options'
'patch'
]
# if domEl is not attached to document append it to <body>
if !$.contains(document, @domEl)
$('body').append(@domEl)
@options = options @options = options
@@ -34,11 +47,12 @@ class SwaggerUi extends Backbone.Router
@options.failure = (d) => @options.failure = (d) =>
@onLoadFailure(d) @onLoadFailure(d)
# Create view to handle the header inputs # Create view to handle the header inputs if there is header element
@headerView = new HeaderView({el: $('#header')}) if $('#header').length
@headerView = new HeaderView({el: $('#header')})
# Event handler for when the baseUrl/apiKey is entered by user # Event handler for when the baseUrl/apiKey is entered by user
@headerView.on 'update-swagger-ui', (data) => @updateSwaggerUi(data) @headerView.on 'update-swagger-ui', (data) => @updateSwaggerUi(data)
# Set an option after initializing # Set an option after initializing
setOption: (option,value) -> setOption: (option,value) ->
@@ -62,7 +76,8 @@ class SwaggerUi extends Backbone.Router
url = @buildUrl(window.location.href.toString(), url) url = @buildUrl(window.location.href.toString(), url)
@options.url = url @options.url = url
@headerView.update(url) if @headerView
@headerView.update(url)
@api = new SwaggerClient(@options) @api = new SwaggerClient(@options)
@@ -82,7 +97,7 @@ class SwaggerUi extends Backbone.Router
# so it gets called when SwaggerApi completes loading # so it gets called when SwaggerApi completes loading
render:() -> render:() ->
@showMessage('Finished Loading Resource Information. Rendering Swagger UI...') @showMessage('Finished Loading Resource Information. Rendering Swagger UI...')
@mainView = new MainView({model: @api, el: $('#' + @dom_id), swaggerOptions: @options}).render() @mainView = new MainView({model: @api, el: @domEl, swaggerOptions: @options, router: @}).render()
@showMessage() @showMessage()
switch @options.docExpansion switch @options.docExpansion
when "full" then @expandAll() when "full" then @expandAll()

View File

@@ -66,9 +66,10 @@ class MainView extends Backbone.View
id: 'resource_' + resource.id, id: 'resource_' + resource.id,
className: 'resource', className: 'resource',
auths: auths, auths: auths,
swaggerOptions: @options.swaggerOptions swaggerOptions: @options.swaggerOptions,
parent: @
}) })
$('#resources').append resourceView.render().el $('#resources', @el).append resourceView.render().el
clear: -> clear: ->
$(@el).html '' $(@el).html ''

View File

@@ -115,7 +115,7 @@ class OperationView extends Backbone.View
$(@el).html(Handlebars.templates.operation(@model)) $(@el).html(Handlebars.templates.operation(@model))
if signatureModel if signatureModel
responseSignatureView = new SignatureView({model: signatureModel, tagName: 'div'}) responseSignatureView = new SignatureView({model: signatureModel, tagName: 'div', parent: @})
$('.model-signature', $(@el)).append responseSignatureView.render().el $('.model-signature', $(@el)).append responseSignatureView.render().el
else else
@model.responseClassSignature = 'string' @model.responseClassSignature = 'string'
@@ -142,7 +142,7 @@ class OperationView extends Backbone.View
contentTypeModel.consumes = 'multipart/form-data' contentTypeModel.consumes = 'multipart/form-data'
param.type = type param.type = type
responseContentTypeView = new ResponseContentTypeView({model: contentTypeModel}) responseContentTypeView = new ResponseContentTypeView({model: contentTypeModel, parent: @})
$('.response-content-type', $(@el)).append responseContentTypeView.render().el $('.response-content-type', $(@el)).append responseContentTypeView.render().el
# Render each parameter # Render each parameter
@@ -156,12 +156,12 @@ class OperationView extends Backbone.View
addParameter: (param, consumes) -> addParameter: (param, consumes) ->
# Render a parameter # Render a parameter
param.consumes = consumes param.consumes = consumes
paramView = new ParameterView({model: param, tagName: 'tr', readOnly: @model.isReadOnly}) paramView = new ParameterView({model: param, tagName: 'tr', readOnly: @model.isReadOnly, parent: @})
$('.operation-params', $(@el)).append paramView.render().el $('.operation-params', $(@el)).append paramView.render().el
addStatusCode: (statusCode) -> addStatusCode: (statusCode) ->
# Render status codes # Render status codes
statusCodeView = new StatusCodeView({model: statusCode, tagName: 'tr'}) statusCodeView = new StatusCodeView({model: statusCode, tagName: 'tr', parent: @})
$('.operation-status', $(@el)).append statusCodeView.render().el $('.operation-status', $(@el)).append statusCodeView.render().el
submitOperation: (e) -> submitOperation: (e) ->

View File

@@ -43,7 +43,8 @@ class ResourceView extends Backbone.View
tagName: 'li', tagName: 'li',
className: 'endpoint', className: 'endpoint',
swaggerOptions: @options.swaggerOptions, swaggerOptions: @options.swaggerOptions,
auths: @auths auths: @auths,
parent: @
}) })
$('.endpoints', $(@el)).append operationView.render().el $('.endpoints', $(@el)).append operationView.render().el

View File

@@ -5,11 +5,14 @@ class StatusCodeView extends Backbone.View
template = @template() template = @template()
$(@el).html(template(@model)) $(@el).html(template(@model))
if swaggerUi.api.models.hasOwnProperty @model.responseModel models = this.options.parent.options.parent.options.parent.model.models
if models.hasOwnProperty @model.responseModel
models = this.options.parent.options.parent.options.parent.model.models
responseModel = responseModel =
sampleJSON: JSON.stringify(swaggerUi.api.models[@model.responseModel].createJSONSample(), null, 2) sampleJSON: JSON.stringify(models[@model.responseModel].createJSONSample(), null, 2)
isParam: false isParam: false
signature: swaggerUi.api.models[@model.responseModel].getMockSignature() signature: models[@model.responseModel].getMockSignature()
responseModelView = new SignatureView({model: responseModel, tagName: 'div'}) responseModelView = new SignatureView({model: responseModel, tagName: 'div'})
$('.model-signature', @$el).append responseModelView.render().el $('.model-signature', @$el).append responseModelView.render().el