From 9687a8084f72ab62ba2d5608c476c0d3a6a4f4ca Mon Sep 17 00:00:00 2001 From: Alberto Pose Date: Wed, 14 Nov 2012 17:33:38 -0300 Subject: [PATCH] Adding 'snippet' tab to parameter datatype signature UI This new section displays how a complex datatype should look like providing some sample code for the developer using Swagger. --- Cakefile | 1 + lib/swagger.js | 41 +++++++++++++ .../coffeescript/view/ParameterView.coffee | 7 +++ .../coffeescript/view/SignatureView.coffee | 43 +++++++++++++ src/main/html/css/screen.css | 61 +++++++++++++++++++ src/main/template/param.handlebars | 2 +- src/main/template/param_list.handlebars | 2 +- src/main/template/param_readonly.handlebars | 2 +- .../param_readonly_required.handlebars | 2 +- src/main/template/param_required.handlebars | 2 +- src/main/template/signature.handlebars | 18 ++++++ 11 files changed, 176 insertions(+), 5 deletions(-) create mode 100644 src/main/coffeescript/view/SignatureView.coffee create mode 100644 src/main/template/signature.handlebars diff --git a/Cakefile b/Cakefile index 3261c70c..2640d69b 100644 --- a/Cakefile +++ b/Cakefile @@ -10,6 +10,7 @@ sourceFiles = [ 'view/OperationView' 'view/StatusCodeView' 'view/ParameterView' + 'view/SignatureView' ] diff --git a/lib/swagger.js b/lib/swagger.js index 30deb25f..5afba7e5 100644 --- a/lib/swagger.js +++ b/lib/swagger.js @@ -334,6 +334,17 @@ 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; })(); @@ -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() { var str; str = this.name + ': ' + this.dataTypeWithRef; @@ -424,6 +453,7 @@ parameter.allowableValues.values = this.resource.api.booleanValues; } 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.valueType === "RANGE") { 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) { var body, headers; if (args == null) { diff --git a/src/main/coffeescript/view/ParameterView.coffee b/src/main/coffeescript/view/ParameterView.coffee index c6c5dd55..b82192f2 100644 --- a/src/main/coffeescript/view/ParameterView.coffee +++ b/src/main/coffeescript/view/ParameterView.coffee @@ -7,6 +7,13 @@ class ParameterView extends Backbone.View template = @template() $(@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 diff --git a/src/main/coffeescript/view/SignatureView.coffee b/src/main/coffeescript/view/SignatureView.coffee new file mode 100644 index 00000000..c867b960 --- /dev/null +++ b/src/main/coffeescript/view/SignatureView.coffee @@ -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) + diff --git a/src/main/html/css/screen.css b/src/main/html/css/screen.css index 1f6d21c0..f0964478 100644 --- a/src/main/html/css/screen.css +++ b/src/main/html/css/screen.css @@ -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(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; +} diff --git a/src/main/template/param.handlebars b/src/main/template/param.handlebars index 628f3577..e54d80d6 100644 --- a/src/main/template/param.handlebars +++ b/src/main/template/param.handlebars @@ -19,6 +19,6 @@ {{{description}}} - {{{signature}}} + diff --git a/src/main/template/param_list.handlebars b/src/main/template/param_list.handlebars index 74ad29ff..42fb70a8 100644 --- a/src/main/template/param_list.handlebars +++ b/src/main/template/param_list.handlebars @@ -18,4 +18,4 @@ {{{description}}} -{{{signature}}} \ No newline at end of file + diff --git a/src/main/template/param_readonly.handlebars b/src/main/template/param_readonly.handlebars index 8d1a1af0..e4a72fc1 100644 --- a/src/main/template/param_readonly.handlebars +++ b/src/main/template/param_readonly.handlebars @@ -7,4 +7,4 @@ {{/if}} {{{description}}} -{{{signature}}} + diff --git a/src/main/template/param_readonly_required.handlebars b/src/main/template/param_readonly_required.handlebars index 3dcf7231..d87527c7 100644 --- a/src/main/template/param_readonly_required.handlebars +++ b/src/main/template/param_readonly_required.handlebars @@ -7,4 +7,4 @@ {{/if}} {{{description}}} -{{{signature}}} \ No newline at end of file + diff --git a/src/main/template/param_required.handlebars b/src/main/template/param_required.handlebars index 105e7064..055b9b43 100644 --- a/src/main/template/param_required.handlebars +++ b/src/main/template/param_required.handlebars @@ -18,4 +18,4 @@ {{{description}}} -{{{signature}}} \ No newline at end of file + diff --git a/src/main/template/signature.handlebars b/src/main/template/signature.handlebars new file mode 100644 index 00000000..2682a30b --- /dev/null +++ b/src/main/template/signature.handlebars @@ -0,0 +1,18 @@ +
+ +
+ +
+
+ {{{signature}}} +
+ +
+ 
{{{sampleJSON}}}
+ Click to set as parameter value +
+
+