Merge branch 'JSONEditor' into JSONEditorMaster

Conflicts: dist/swagger-ui.js dist/swagger-ui.min.js src/main/less/screen.less
2015-09-10 10:53:15 +02:00
parent 736e7cd90e 3128da0446
commit ea2cefa46e
49 changed files with 2904 additions and 2546 deletions
--- a/src/main/html/css/print.css
+++ b/src/main/html/css/print.css
@@ -126,6 +126,7 @@
  max-width: 960px;
  margin-left: auto;
  margin-right: auto;
+  /* JSONEditor specific styling */
 }
 .swagger-section .swagger-ui-wrap b,
 .swagger-section .swagger-ui-wrap strong {
@@ -458,6 +459,17 @@
 .swagger-section .swagger-ui-wrap .required {
  font-weight: bold;
 }
+.swagger-section .swagger-ui-wrap .editor_holder {
+  font-family: "Anonymous Pro", "Menlo", "Consolas", "Bitstream Vera Sans Mono", "Courier New", monospace;
+  font-size: 0.9em;
+}
+.swagger-section .swagger-ui-wrap .editor_holder label {
+  font-weight: normal!important;
+  /* JSONEditor uses bold by default for all labels, we revert that back to normal to not give the impression that by default fields are required */
+}
+.swagger-section .swagger-ui-wrap .editor_holder label.required {
+  font-weight: bold!important;
+}
 .swagger-section .swagger-ui-wrap input.parameter {
  width: 300px;
  border: 1px solid #aaa;
--- a/src/main/html/css/screen.css
+++ b/src/main/html/css/screen.css
@@ -126,6 +126,7 @@
  max-width: 960px;
  margin-left: auto;
  margin-right: auto;
+  /* JSONEditor specific styling */
 }
 .swagger-section .swagger-ui-wrap b,
 .swagger-section .swagger-ui-wrap strong {
@@ -458,6 +459,17 @@
 .swagger-section .swagger-ui-wrap .required {
  font-weight: bold;
 }
+.swagger-section .swagger-ui-wrap .editor_holder {
+  font-family: "Anonymous Pro", "Menlo", "Consolas", "Bitstream Vera Sans Mono", "Courier New", monospace;
+  font-size: 0.9em;
+}
+.swagger-section .swagger-ui-wrap .editor_holder label {
+  font-weight: normal!important;
+  /* JSONEditor uses bold by default for all labels, we revert that back to normal to not give the impression that by default fields are required */
+}
+.swagger-section .swagger-ui-wrap .editor_holder label.required {
+  font-weight: bold!important;
+}
 .swagger-section .swagger-ui-wrap input.parameter {
  width: 300px;
  border: 1px solid #aaa;
@@ -1277,3 +1289,9 @@
  text-align: center;
  padding-top: 10px;
 }
+.swagger-section .swagger-collapse:before {
+  content: "-";
+}
+.swagger-section .swagger-expand:before {
+  content: "+";
+}
--- a/src/main/html/images/collapse.gif
+++ b/src/main/html/images/collapse.gif
--- a/src/main/html/images/expand.gif
+++ b/src/main/html/images/expand.gif
--- a/src/main/html/images/explorer_icons.png
+++ b/src/main/html/images/explorer_icons.png
--- a/src/main/html/images/favicon-16x16.png
+++ b/src/main/html/images/favicon-16x16.png
--- a/src/main/html/images/favicon-32x32.png
+++ b/src/main/html/images/favicon-32x32.png
--- a/src/main/html/images/logo_small.png
+++ b/src/main/html/images/logo_small.png
--- a/src/main/html/images/pet_store_api.png
+++ b/src/main/html/images/pet_store_api.png
--- a/src/main/html/images/wordnik_api.png
+++ b/src/main/html/images/wordnik_api.png
--- a/src/main/html/index.html
+++ b/src/main/html/index.html
@@ -1,3 +1,4 @@
+
 <!DOCTYPE html>
 <html>
 <head>
@@ -19,6 +20,7 @@
  <script src='lib/backbone-min.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>
  <script src='lib/swagger-oauth.js' type='text/javascript'></script>

@@ -69,6 +71,7 @@
          log("Unable to Load SwaggerUI");
        },
        docExpansion: "none",
+        jsonEditor:true,
        apisSorter: "alpha",
        showRequestHeaders: false
      });
--- a/src/main/javascript/SwaggerUi.js
+++ b/src/main/javascript/SwaggerUi.js
@@ -1,3 +1,4 @@
+ /*global JSONEditor*/ 
 'use strict';

 window.SwaggerUi = Backbone.Router.extend({
@@ -62,6 +63,16 @@ window.SwaggerUi = Backbone.Router.extend({
    this.headerView.on('update-swagger-ui', function(data) {
      return that.updateSwaggerUi(data);
    });
+
+    // JSon Editor custom theming
+     JSONEditor.defaults.iconlibs.swagger = JSONEditor.AbstractIconLib.extend({
+      mapping: {
+        collapse: 'collapse',
+        expand: 'expand'
+        },
+      icon_prefix: 'swagger-'
+      });
+
  },

  // Set an option after initializing
--- a/src/main/javascript/view/MainView.js
+++ b/src/main/javascript/view/MainView.js
@@ -69,6 +69,16 @@ SwaggerUi.Views.MainView = Backbone.View.extend({
        this.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 ?
+    var def;
+    for(def in this.model.definitions){
+      if (this.model.definitions[def].type === null){
+        this.model.definitions[def].type = 'object';
+      }
+    }
+
  },

  render: function(){
@@ -119,6 +129,11 @@ SwaggerUi.Views.MainView = Backbone.View.extend({
  addResource: function(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 = this.model.definitions;
+
    var resourceView = new SwaggerUi.Views.ResourceView({
      model: resource,
      router: this.router,
--- a/src/main/javascript/view/OperationView.js
+++ b/src/main/javascript/view/OperationView.js
@@ -238,10 +238,27 @@ SwaggerUi.Views.OperationView = Backbone.View.extend({
  addParameter: function(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(true, param.schema, this.model.definitions[param.type]);
+      param.schema.definitions = this.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 = ' ';
+    } 
+     
+
    var paramView = new SwaggerUi.Views.ParameterView({
      model: param,
      tagName: 'tr',
-      readOnly: this.model.isReadOnly
+      readOnly: this.model.isReadOnly,
+      swaggerOptions: this.options.swaggerOptions
    });
    $('.operation-params', $(this.el)).append(paramView.render().el);
  },
@@ -318,6 +335,16 @@ SwaggerUi.Views.OperationView = Backbone.View.extend({
          opts[key] = this.options.swaggerOptions[key];
        }
      }
+
+      var pi;
+      for(pi = 0; pi < this.model.parameters.length; pi++){
+        var p = this.model.parameters[pi];
+        if( p.jsonEditor && p.jsonEditor.isEnabled()){
+          var json = p.jsonEditor.getValue();
+          map[p.name] = JSON.stringify(json);
+        }
+      }
+
      opts.responseContentType = $('div select[name=responseContentType]', $(this.el)).val();
      opts.requestContentType = $('div select[name=parameterContentType]', $(this.el)).val();
      $('.response_throbber', $(this.el)).show();
--- a/src/main/javascript/view/ParameterView.js
+++ b/src/main/javascript/view/ParameterView.js
@@ -62,6 +62,37 @@ SwaggerUi.Views.ParameterView = Backbone.View.extend({

    var isParam = false;

+    if( this.options.swaggerOptions.jsonEditor && this.model.isBody && this.model.schema){
+      var $self = $(this.el);
+      this.model.jsonEditor = 
+        /* global JSONEditor */
+        new JSONEditor($('.editor_holder', $self)[0],
+                       {schema: this.model.schema, startval : this.model.default, 
+                        ajax:true, 
+                        disable_properties:true, 
+                        disable_edit_json:true,
+                        iconlib: 'swagger' });
+      // 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 = this.model.jsonEditor;
+      $('.body-textarea', $self).hide();
+      $('.editor_holder', $self).show();
+      $('.parameter-content-type', $self)
+        .change(function(e){
+            if(e.target.value === 'application/xml'){
+              $('.body-textarea', $self).show();
+              $('.editor_holder', $self).hide();
+              this.model.jsonEditor.disable();
+            }
+            else {
+              $('.body-textarea', $self).hide();
+              $('.editor_holder', $self).show();
+              this.model.jsonEditor.enable();
+            }
+        });
+      }
+
+
    if (this.model.isBody) {
      isParam = true;
    }
--- a/src/main/javascript/view/ResourceView.js
+++ b/src/main/javascript/view/ResourceView.js
@@ -34,6 +34,7 @@ SwaggerUi.Views.ResourceView = Backbone.View.extend({

      operation.nickname = id;
      operation.parentId = this.model.id;
+      operation.definitions = this.model.definitions; // make Json Schema available for JSonEditor in this operation
      this.addOperation(operation);
    }

--- a/src/main/javascript/view/SignatureView.js
+++ b/src/main/javascript/view/SignatureView.js
@@ -56,6 +56,10 @@ SwaggerUi.Views.SignatureView = Backbone.View.extend({
      // Fix for bug in IE 10/11 which causes placeholder text to be copied to "value"
      if ($.trim(textArea.val()) === '' || textArea.prop('placeholder') === textArea.val()) {
        textArea.val(this.model.sampleJSON);
+        // TODO move this code outside of the view and expose an event instead
+        if( this.model.jsonEditor && this.model.jsonEditor.isEnabled()){
+          this.model.jsonEditor.setValue(JSON.parse(this.model.sampleJSON));
+        }
      }
    }
  }
--- a/src/main/less/screen.less
+++ b/src/main/less/screen.less
@@ -144,4 +144,14 @@
    padding-top: 10px;
 }

+.swagger-collapse:before {
+  content: "-";
 }
+
+.swagger-expand:before {
+  content: "+";
+}
+
+
+}
+
--- a/src/main/less/specs.less
+++ b/src/main/less/specs.less
@@ -360,6 +360,19 @@
        font-weight: bold;
    }

+    /* JSONEditor specific styling */
+    .editor_holder {
+       font-family: "Anonymous Pro", "Menlo", "Consolas", "Bitstream Vera Sans Mono", "Courier New", monospace;
+       font-size: 0.9em;
+        label {
+            font-weight:normal!important; /* JSONEditor uses bold by default for all labels, we revert that back to normal to not give the impression that by default fields are required */
+        }    
+    }
+    
+    .editor_holder label.required {
+        font-weight:bold!important; 
+    }
+
    input.parameter {
        width: 300px;
        border: 1px solid #aaa;
--- a/src/main/template/param.handlebars
+++ b/src/main/template/param.handlebars
@@ -7,11 +7,13 @@
 			<div class="parameter-content-type" />
 		{{else}}
 			{{#if default}}
+				<div class="editor_holder"></div>
 				<textarea class='body-textarea' name='{{name}}' id='{{valueId}}'>{{default}}</textarea>
        <br />
        <div class="parameter-content-type" />
 			{{else}}
 				<textarea class='body-textarea' name='{{name}}' id='{{valueId}}'></textarea>
+				<div class="editor_holder"></div>
 				<br />
 				<div class="parameter-content-type" />
 			{{/if}}
--- a/src/main/template/param_required.handlebars
+++ b/src/main/template/param_required.handlebars
@@ -5,11 +5,13 @@
 			<input type="file" name='{{name}}' id='{{valueId}}'/>
 		{{else}}
 			{{#if default}}
+				<div class="editor_holder"></div>
 				<textarea class='body-textarea required' placeholder='(required)' name='{{name}}' id="{{valueId}}">{{default}}</textarea>
        <br />
        <div class="parameter-content-type" />
 			{{else}}
 				<textarea class='body-textarea required' placeholder='(required)' name='{{name}}' id='{{valueId}}'></textarea>
+				<div class="editor_holder"></div>
 				<br />
 				<div class="parameter-content-type" />
 			{{/if}}