JSON Editor feature

src/main/coffeescript/view/MainView.coffee

@@ -21,6 +21,11 @@ class MainView extends Backbone.View
       else
         # Default validator
         @model.validatorUrl = "http://online.swagger.io/validator"
+        
+    # JSonEditor requires type='object' to be present on defined types, we add it if it's missing
+    # is there any valid case were it should not be added ?
+    for def of @model.definitions
+      @model.definitions[def].type = 'object'
  
   render: ->
     if @model.securityDefinitions
@@ -60,6 +65,11 @@ class MainView extends Backbone.View
   addResource: (resource, auths) ->
     # Render a resource and add it to resources li
     resource.id = resource.id.replace(/\s/g, '_')
+    
+    # Make all definitions available at the root of the resource so that they can
+    # be loaded by the JSonEditor
+    resource.definitions = @model.definitions
+    
     resourceView = new ResourceView({
       model: resource, 
       tagName: 'li', 

src/main/coffeescript/view/OperationView.coffee

@@ -152,10 +152,29 @@ class OperationView extends Backbone.View
     @addStatusCode statusCode for statusCode in @model.responseMessages
 
     @
-
+  
+  # Is this already available somewhere else ?
+  extend : (object, properties) ->
+    for key, val of properties
+      object[key] = val
+    object
+  
   addParameter: (param, consumes) ->
     # Render a parameter
     param.consumes = consumes
+    
+    # Copy this param JSON spec so that it will be available for JsonEditor
+    if param.schema
+      @extend param.schema, @model.definitions[param.type]
+      param.schema.definitions = @model.definitions
+      # This is required for JsonEditor to display the root properly
+      param.schema.type = "object" 
+      # This is the title that will be used by JsonEditor for the root
+      # Since we already display the parameter's name in the Parameter column
+      # We set this to space, we can't set it to null or space otherwise JsonEditor
+      # will replace it with the text "root" which won't look good on screen
+      param.schema.title = " " 
+      
     paramView = new ParameterView({model: param, tagName: 'tr', readOnly: @model.isReadOnly})
     $('.operation-params', $(@el)).append paramView.render().el
 
@@ -207,6 +226,11 @@ class OperationView extends Backbone.View
         if(val? && jQuery.trim(val).length > 0)
           map[o.name] = val
 
+      for p in @model.parameters
+        if p.jsonEditor? && p.jsonEditor.isEnabled()
+          json = p.jsonEditor.getValue()
+          map[p.name] = JSON.stringify(json)
+
       opts.responseContentType = $("div select[name=responseContentType]", $(@el)).val()
       opts.requestContentType = $("div select[name=parameterContentType]", $(@el)).val()
 

src/main/coffeescript/view/ParameterView.coffee

@@ -44,6 +44,28 @@ class ParameterView extends Backbone.View
 
     isParam = false
 
+    if @model.isBody && @model.schema
+      $self = $(@el)
+      @model.jsonEditor = 
+        new JSONEditor($('.editor_holder', $self)[0],
+                       {schema: @model.schema, startval : @model.default, ajax:true })
+      # This is so that the signature can send back the sample to the json editor
+      # TODO: SignatureView should expose an event "onSampleClicked" instead
+      signatureModel.jsonEditor = @model.jsonEditor
+      $('.parameter-content-type', $self)
+        .change(
+          (e) ->
+            if e.target.value == "application/xml"
+              $('.body-textarea', $self).show()
+              $('.editor_holder', $self).hide()
+              @model.jsonEditor.disable()
+            else
+              $('.body-textarea', $self).hide()
+              $('.editor_holder', $self).show()
+              @model.jsonEditor.enable())
+      isParam = true
+
+
     if @model.isBody
       isParam = true
 

src/main/coffeescript/view/ResourceView.coffee

@@ -25,6 +25,7 @@ class ResourceView extends Backbone.View
 
       operation.nickname = id
       operation.parentId = @model.id
+      operation.definitions = @model.definitions # make Json Schema available for JSonEditor in this operation
       @addOperation operation 
 
     $('.toggleEndpointList', @el).click(this.callDocs.bind(this, 'toggleEndpointListForResource'))

src/main/coffeescript/view/SignatureView.coffee

@@ -46,6 +46,10 @@ class SignatureView extends Backbone.View
       textArea = $('textarea', $(@el.parentNode.parentNode.parentNode))
       if $.trim(textArea.val()) == ''
         textArea.val(@model.sampleJSON)
+        
+        # TODO move this code outside of the view and expose an event instead
+        if @model.jsonEditor && @model.jsonEditor.isEnabled()
+          @model.jsonEditor.setValue(JSON.parse(this.model.sampleJSON))
 
 
     

src/main/html/css/screen.css

@@ -433,6 +433,7 @@
   width: 300px;
   height: 100px;
   border: 1px solid #aaa;
+  display: none;
 }
 .swagger-section .swagger-ui-wrap .markdown p code,
 .swagger-section .swagger-ui-wrap .markdown li code {

src/main/html/index.html

@@ -18,6 +18,7 @@
   <script src='lib/swagger-client.js' type='text/javascript'></script>
   <script src='swagger-ui.js' type='text/javascript'></script>
   <script src='lib/highlight.7.3.pack.js' type='text/javascript'></script>
+  <script src='lib/jsoneditor.min.js' type='text/javascript'></script>
   <script src='lib/marked.js' type='text/javascript'></script>
 
   <!-- enabling this will enable oauth2 implicit scope support -->

src/main/less/specs.less

@@ -330,6 +330,7 @@
         width: 300px;
         height: 100px;
         border: 1px solid #aaa;
+        display: none;
     }
 
     .markdown p code, .markdown li code {

src/main/template/param.handlebars

@@ -7,11 +7,12 @@
 			<div class="parameter-content-type" />
 		{{else}}
 			{{#if default}}
-				<textarea class='body-textarea' name='{{name}}'>{{default}}</textarea>
+				<div class="editor_holder"></div>
         <br />
         <div class="parameter-content-type" />
 			{{else}}
 				<textarea class='body-textarea' name='{{name}}'></textarea>
+                <div class="editor_holder"></div>
 				<br />
 				<div class="parameter-content-type" />
 			{{/if}}