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

@@ -10,6 +10,7 @@ sourceFiles  = [
   'view/OperationView'
   'view/StatusCodeView'
   'view/ParameterView'
+  'view/SignatureView'
 ]
 
 

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) {

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

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)
+    

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;
+}

src/main/template/param.handlebars

@@ -19,6 +19,6 @@
 </td>
 <td>{{{description}}}</td>
 <td>
-    <span class="model-signature">{{{signature}}}</span>
+    <span class="model-signature"></span>
 </td>
 

src/main/template/param_list.handlebars

@@ -18,4 +18,4 @@
     </select>
 </td>
 <td>{{{description}}}</td>
-<td><span class="model-signature">{{{signature}}}</span></td>
+<td><span class="model-signature"></span></td>

src/main/template/param_readonly.handlebars

@@ -7,4 +7,4 @@
     {{/if}}
 </td>
 <td>{{{description}}}</td>
-<td><span class="model-signature">{{{signature}}}</span></td>
+<td><span class="model-signature"></span></td>

src/main/template/param_readonly_required.handlebars

@@ -7,4 +7,4 @@
     {{/if}}
 </td>
 <td>{{{description}}}</td>
-<td><span class="model-signature">{{{signature}}}</span></td>
+<td><span class="model-signature"></span></td>

src/main/template/param_required.handlebars

@@ -18,4 +18,4 @@
 <td>
     <strong>{{{description}}}</strong>
 </td>
-<td><span class="model-signature">{{{signature}}}</span></td>
+<td><span class="model-signature"></span></td>

src/main/template/signature.handlebars

@@ -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>
+