This new section displays how a complex datatype should look like providing some sample code for the developer using Swagger.bubble
@@ -10,6 +10,7 @@ sourceFiles = [ | |||||
'view/OperationView' | 'view/OperationView' | ||||
'view/StatusCodeView' | 'view/StatusCodeView' | ||||
'view/ParameterView' | 'view/ParameterView' | ||||
'view/SignatureView' | |||||
] | ] | ||||
@@ -334,6 +334,17 @@ | |||||
return returnVal; | return returnVal; | ||||
}; | }; | ||||
SwaggerModel.prototype.createJSONSample = function(modelToIgnore) { | |||||
var prop, result, _i, _len, _ref; | |||||
result = {}; | |||||
_ref = this.properties; | |||||
for (_i = 0, _len = _ref.length; _i < _len; _i++) { | |||||
prop = _ref[_i]; | |||||
result[prop.name] = prop.getSampleValue(modelToIgnore); | |||||
} | |||||
return result; | |||||
}; | |||||
return SwaggerModel; | return SwaggerModel; | ||||
})(); | })(); | ||||
@@ -363,6 +374,24 @@ | |||||
} | } | ||||
} | } | ||||
SwaggerModelProperty.prototype.getSampleValue = function(modelToIgnore) { | |||||
var result; | |||||
if ((this.refModel != null) && (!(this.refModel === modelToIgnore))) { | |||||
result = this.refModel.createJSONSample(this.refModel); | |||||
} else { | |||||
if (this.isArray) { | |||||
result = this.refDataType; | |||||
} else { | |||||
result = this.dataType; | |||||
} | |||||
} | |||||
if (this.isArray) { | |||||
return [result]; | |||||
} else { | |||||
return result; | |||||
} | |||||
}; | |||||
SwaggerModelProperty.prototype.toString = function() { | SwaggerModelProperty.prototype.toString = function() { | ||||
var str; | var str; | ||||
str = this.name + ': ' + this.dataTypeWithRef; | str = this.name + ': ' + this.dataTypeWithRef; | ||||
@@ -424,6 +453,7 @@ | |||||
parameter.allowableValues.values = this.resource.api.booleanValues; | parameter.allowableValues.values = this.resource.api.booleanValues; | ||||
} | } | ||||
parameter.signature = this.getSignature(parameter.dataType, this.resource.models); | parameter.signature = this.getSignature(parameter.dataType, this.resource.models); | ||||
parameter.sampleJSON = this.getSampleJSON(parameter.dataType, this.resource.models); | |||||
if (parameter.allowableValues != null) { | if (parameter.allowableValues != null) { | ||||
if (parameter.allowableValues.valueType === "RANGE") { | if (parameter.allowableValues.valueType === "RANGE") { | ||||
parameter.isRange = true; | parameter.isRange = true; | ||||
@@ -478,6 +508,17 @@ | |||||
} | } | ||||
}; | }; | ||||
SwaggerOperation.prototype.getSampleJSON = function(dataType, models) { | |||||
var isPrimitive, listType, val; | |||||
listType = this.isListType(dataType); | |||||
isPrimitive = ((listType != null) && models[listType]) || (models[dataType] != null) ? false : true; | |||||
val = isPrimitive ? void 0 : (listType != null ? models[listType].createJSONSample() : models[dataType].createJSONSample()); | |||||
if (val) { | |||||
val = listType ? [val] : val; | |||||
return JSON.stringify(val, null, 2); | |||||
} | |||||
}; | |||||
SwaggerOperation.prototype["do"] = function(args, callback, error) { | SwaggerOperation.prototype["do"] = function(args, callback, error) { | ||||
var body, headers; | var body, headers; | ||||
if (args == null) { | if (args == null) { | ||||
@@ -7,6 +7,13 @@ class ParameterView extends Backbone.View | |||||
template = @template() | template = @template() | ||||
$(@el).html(template(@model)) | $(@el).html(template(@model)) | ||||
console.log @model | |||||
if @model.sampleJSON | |||||
signatureView = new SignatureView({model: @model, tagName: 'div'}) | |||||
$('.model-signature', $(@el)).append signatureView.render().el | |||||
else | |||||
$('.model-signature', $(@el)).html(@model.signature) | |||||
@ | @ | ||||
# Return an appropriate template based on if the parameter is a list, readonly, required | # Return an appropriate template based on if the parameter is a list, readonly, required | ||||
@@ -0,0 +1,43 @@ | |||||
class SignatureView extends Backbone.View | |||||
events: { | |||||
'click a.description-link' : 'switchToDescription' | |||||
'click a.snippet-link' : 'switchToSnippet' | |||||
'mousedown .snippet' : 'snippetToTextArea' | |||||
} | |||||
initialize: -> | |||||
render: -> | |||||
template = @template() | |||||
$(@el).html(template(@model)) | |||||
@switchToDescription() | |||||
@ | |||||
template: -> | |||||
Handlebars.templates.signature | |||||
# handler for show signature | |||||
switchToDescription: (e) -> | |||||
e?.preventDefault() | |||||
$(".snippet", $(@el)).hide() | |||||
$(".description", $(@el)).show() | |||||
$('.description-link', $(@el)).addClass('selected') | |||||
$('.snippet-link', $(@el)).removeClass('selected') | |||||
# handler for show sample | |||||
switchToSnippet: (e) -> | |||||
e?.preventDefault() | |||||
$(".description", $(@el)).hide() | |||||
$(".snippet", $(@el)).show() | |||||
$('.snippet-link', $(@el)).addClass('selected') | |||||
$('.description-link', $(@el)).removeClass('selected') | |||||
# handler for snippet to text area | |||||
snippetToTextArea: (e) -> | |||||
e?.preventDefault() | |||||
textArea = $('textarea', $(@el.parentNode.parentNode.parentNode)) | |||||
if $.trim(textArea.val()) == '' | |||||
textArea.val(@model.sampleJSON) | |||||
@@ -1515,3 +1515,64 @@ body ul#resources li.resource ul.endpoints li.endpoint ul.operations li.operatio | |||||
} | } | ||||
.model-signature span:nth-child(odd) { color:#333; } | .model-signature span:nth-child(odd) { color:#333; } | ||||
.model-signature span:nth-child(even) { color:#C5862B; } | .model-signature span:nth-child(even) { color:#C5862B; } | ||||
.model-signature .signature-nav a { | |||||
text-decoration: none; | |||||
color: #AAA; | |||||
} | |||||
.model-signature pre { | |||||
font-size: .85em; | |||||
line-height: 1.2em; | |||||
overflow: auto; | |||||
max-height: 200px; | |||||
cursor: pointer; | |||||
} | |||||
.model-signature pre:hover { | |||||
background-color: #ffffdd; | |||||
} | |||||
.model-signature .snippet small { | |||||
font-size: 0.75em; | |||||
} | |||||
.model-signature .signature-container { | |||||
clear: both; | |||||
} | |||||
.model-signature .signature-nav a:hover { | |||||
text-decoration: underline; | |||||
color: black; | |||||
} | |||||
.model-signature .signature-nav .selected { | |||||
color: black; | |||||
text-decoration: none; | |||||
} | |||||
.model-signature ul.signature-nav { | |||||
float: none; | |||||
clear: both; | |||||
overflow: hidden; | |||||
margin: 0; | |||||
padding: 0; | |||||
display: block; | |||||
clear: none; | |||||
float: right; | |||||
margin-right: 5px; | |||||
margin-bottom: 5px; | |||||
} | |||||
.model-signature ul.signature-nav li { | |||||
float: left; | |||||
clear: none; | |||||
margin: 0; | |||||
padding: 2px 10px; | |||||
border-right: 1px solid #dddddd; | |||||
} | |||||
.model-signature ul.signature-nav li:last-child { | |||||
padding-right: 0; | |||||
border-right: none; | |||||
} |
@@ -19,6 +19,6 @@ | |||||
</td> | </td> | ||||
<td>{{{description}}}</td> | <td>{{{description}}}</td> | ||||
<td> | <td> | ||||
<span class="model-signature">{{{signature}}}</span> | |||||
<span class="model-signature"></span> | |||||
</td> | </td> | ||||
@@ -18,4 +18,4 @@ | |||||
</select> | </select> | ||||
</td> | </td> | ||||
<td>{{{description}}}</td> | <td>{{{description}}}</td> | ||||
<td><span class="model-signature">{{{signature}}}</span></td> | |||||
<td><span class="model-signature"></span></td> |
@@ -7,4 +7,4 @@ | |||||
{{/if}} | {{/if}} | ||||
</td> | </td> | ||||
<td>{{{description}}}</td> | <td>{{{description}}}</td> | ||||
<td><span class="model-signature">{{{signature}}}</span></td> | |||||
<td><span class="model-signature"></span></td> |
@@ -7,4 +7,4 @@ | |||||
{{/if}} | {{/if}} | ||||
</td> | </td> | ||||
<td>{{{description}}}</td> | <td>{{{description}}}</td> | ||||
<td><span class="model-signature">{{{signature}}}</span></td> | |||||
<td><span class="model-signature"></span></td> |
@@ -18,4 +18,4 @@ | |||||
<td> | <td> | ||||
<strong>{{{description}}}</strong> | <strong>{{{description}}}</strong> | ||||
</td> | </td> | ||||
<td><span class="model-signature">{{{signature}}}</span></td> | |||||
<td><span class="model-signature"></span></td> |
@@ -0,0 +1,18 @@ | |||||
<div> | |||||
<ul class="signature-nav"> | |||||
<li><a class="description-link" href="#">Description</a></li> | |||||
<li><a class="snippet-link" href="#">Snippet</a></li> | |||||
</ul> | |||||
<div> | |||||
<div class="signature-container"> | |||||
<div class="description"> | |||||
{{{signature}}} | |||||
</div> | |||||
<div class="snippet"> | |||||
<pre>{{{sampleJSON}}}</pre> | |||||
<small>Click to set as parameter value</small> | |||||
</div> | |||||
</div> | |||||