Added hover over popup to display property validation attributes

swagger-ui does not render all Parameter-fields #808

dist/css/screen.css

@@ -391,6 +391,32 @@
   font-weight: bold;
   color: #000;
 }
+.swagger-section .swagger-ui-wrap .model-signature .description .propWrap .optionsWrapper {
+  border-spacing: 0;
+  position: absolute;
+  background-color: #ffffff;
+  border: 1px solid #bbbbbb;
+  display: none;
+  font-size: 11px;
+  max-width: 400px;
+  line-height: 30px;
+  color: black;
+  padding: 5px;
+  margin-left: 10px;
+}
+.swagger-section .swagger-ui-wrap .model-signature .description .propWrap .optionsWrapper th {
+  text-align: center;
+  background-color: #eeeeee;
+  border: 1px solid #bbbbbb;
+  font-size: 11px;
+  color: #666666;
+  font-weight: bold;
+  padding: 5px;
+  line-height: 15px;
+}
+.swagger-section .swagger-ui-wrap .model-signature .description .propWrap .optionsWrapper .optionName {
+  font-weight: bold;
+}
 .swagger-section .swagger-ui-wrap .model-signature .propName {
   font-weight: bold;
 }

dist/lib/swagger-client.js

@@ -2770,8 +2770,22 @@ var Property = function(name, obj, required) {
   this.description = obj.description;
   this.obj = obj;
   this.optional = true;
+  this.optional = !required;
   this.default = obj.default || null;
   this.example = obj.example || null;
+  this.collectionFormat = obj.collectionFormat || null;
+  this.maximum = obj.maximum || null;
+  this.exclusiveMaximum = obj.exclusiveMaximum || null;
+  this.minimum = obj.minimum || null;
+  this.exclusiveMinimum = obj.exclusiveMinimum || null;
+  this.maxLength = obj.maxLength || null;
+  this.minLength = obj.minLength || null;
+  this.pattern = obj.pattern || null;
+  this.maxItems = obj.maxItems || null;
+  this.minItems = obj.minItems || null;
+  this.uniqueItems = obj.uniqueItems || null;
+  this.enum = obj.enum || null;
+  this.multipleOf = obj.multipleOf || null;
 };
 
 Property.prototype.getSampleValue = function (modelsToIgnore) {
@@ -2884,9 +2898,71 @@ Property.prototype.toString = function() {
 
   if(typeof this.description !== 'undefined')
     str += ': ' + this.description;
+
+  var options = ''; 
+  var isArray = this.schema.type === 'array';
+  var type = isArray ? this.schema.items.type : this.schema.type;
+
+  if (this.default)
+    options += optionHtml('Default', this.default);
+
+  switch (type) {
+    case 'string':
+      if (this.minLength)
+        options += optionHtml('Min. Length', this.minLength);
+      if (this.maxLength)
+        options += optionHtml('Max. Length', this.maxLength);
+      if (this.pattern)
+        options += optionHtml('Reg. Exp.', this.pattern);
+      break;
+    case 'integer':
+    case 'number':
+      if (this.minimum)
+        options += optionHtml('Min. Value', this.minimum);
+      if (this.exclusiveMinimum)
+        options += optionHtml('Exclusive Min.', "true");
+      if (this.maximum)
+        options += optionHtml('Max. Value', this.maximum);
+      if (this.exclusiveMaximum)
+        options += optionHtml('Exclusive Max.', "true");
+      if (this.multipleOf)
+        options += optionHtml('Multiple Of', this.multipleOf);
+      break;
+  }
+
+  if (isArray) {
+    if (this.minItems)
+      options += optionHtml('Min. Items', this.minItems);
+    if (this.maxItems)
+      options += optionHtml('Max. Items', this.maxItems);
+    if (this.uniqueItems)
+      options += optionHtml('Unique Items', "true");
+    if (this.collectionFormat)
+      options += optionHtml('Coll. Format', this.collectionFormat);
+  }
+
+  if (this.enum) {
+    var enumString;
+
+    if (type === 'number' || type === 'integer')
+      enumString = this.enum.join(', ');
+    else {
+      enumString = '"' + this.enum.join('", "') + '"';
+    }
+
+    options += optionHtml('Enum', enumString);
+  }     
+
+  if (options.length > 0)
+    str = '<span class="propWrap">' + str + '<table class="optionsWrapper"><tr><th colspan="2">' + this.name + '</th></tr>' + options + '</table></span>';
+  
   return str;
 };
 
+optionHtml = function(label, value) {
+  return '<tr><td class="optionName">' + label + ':</td><td>' + value + '</td></tr>';
+}
+
 typeFromJsonSchema = function(type, format) {
   var str;
   if(type === 'integer' && format === 'int32')

dist/swagger-ui.js

@@ -1639,7 +1639,12 @@ helpers = this.merge(helpers, Handlebars.helpers); data = data || {};
         resources[id] = resource;
         this.addResource(resource, this.model.auths);
       }
-      return this;
+      this;
+      return $('.propWrap').hover(function() {
+        return $('.optionsWrapper', $(this)).show();
+      }, function() {
+        return $('.optionsWrapper', $(this)).hide();
+      });
     };
 
     MainView.prototype.addResource = function(resource, auths) {

lib/swagger-client.js

@@ -2770,8 +2770,22 @@ var Property = function(name, obj, required) {
   this.description = obj.description;
   this.obj = obj;
   this.optional = true;
+  this.optional = !required;
   this.default = obj.default || null;
   this.example = obj.example || null;
+  this.collectionFormat = obj.collectionFormat || null;
+  this.maximum = obj.maximum || null;
+  this.exclusiveMaximum = obj.exclusiveMaximum || null;
+  this.minimum = obj.minimum || null;
+  this.exclusiveMinimum = obj.exclusiveMinimum || null;
+  this.maxLength = obj.maxLength || null;
+  this.minLength = obj.minLength || null;
+  this.pattern = obj.pattern || null;
+  this.maxItems = obj.maxItems || null;
+  this.minItems = obj.minItems || null;
+  this.uniqueItems = obj.uniqueItems || null;
+  this.enum = obj.enum || null;
+  this.multipleOf = obj.multipleOf || null;
 };
 
 Property.prototype.getSampleValue = function (modelsToIgnore) {
@@ -2884,9 +2898,71 @@ Property.prototype.toString = function() {
 
   if(typeof this.description !== 'undefined')
     str += ': ' + this.description;
+
+  var options = ''; 
+  var isArray = this.schema.type === 'array';
+  var type = isArray ? this.schema.items.type : this.schema.type;
+
+  if (this.default)
+    options += optionHtml('Default', this.default);
+
+  switch (type) {
+    case 'string':
+      if (this.minLength)
+        options += optionHtml('Min. Length', this.minLength);
+      if (this.maxLength)
+        options += optionHtml('Max. Length', this.maxLength);
+      if (this.pattern)
+        options += optionHtml('Reg. Exp.', this.pattern);
+      break;
+    case 'integer':
+    case 'number':
+      if (this.minimum)
+        options += optionHtml('Min. Value', this.minimum);
+      if (this.exclusiveMinimum)
+        options += optionHtml('Exclusive Min.', "true");
+      if (this.maximum)
+        options += optionHtml('Max. Value', this.maximum);
+      if (this.exclusiveMaximum)
+        options += optionHtml('Exclusive Max.', "true");
+      if (this.multipleOf)
+        options += optionHtml('Multiple Of', this.multipleOf);
+      break;
+  }
+
+  if (isArray) {
+    if (this.minItems)
+      options += optionHtml('Min. Items', this.minItems);
+    if (this.maxItems)
+      options += optionHtml('Max. Items', this.maxItems);
+    if (this.uniqueItems)
+      options += optionHtml('Unique Items', "true");
+    if (this.collectionFormat)
+      options += optionHtml('Coll. Format', this.collectionFormat);
+  }
+
+  if (this.enum) {
+    var enumString;
+
+    if (type === 'number' || type === 'integer')
+      enumString = this.enum.join(', ');
+    else {
+      enumString = '"' + this.enum.join('", "') + '"';
+    }
+
+    options += optionHtml('Enum', enumString);
+  }     
+
+  if (options.length > 0)
+    str = '<span class="propWrap">' + str + '<table class="optionsWrapper"><tr><th colspan="2">' + this.name + '</th></tr>' + options + '</table></span>';
+  
   return str;
 };
 
+optionHtml = function(label, value) {
+  return '<tr><td class="optionName">' + label + ':</td><td>' + value + '</td></tr>';
+}
+
 typeFromJsonSchema = function(type, format) {
   var str;
   if(type === 'integer' && format === 'int32')

src/main/coffeescript/view/MainView.coffee

@@ -64,6 +64,13 @@ class MainView extends Backbone.View
       @addResource resource, @model.auths
     @
 
+    $('.propWrap').hover(
+      ->
+        $('.optionsWrapper', $(this)).show()
+      ,->
+        $('.optionsWrapper', $(this)).hide()
+    )
+
   addResource: (resource, auths) ->
     # Render a resource and add it to resources li
     resource.id = resource.id.replace(/\s/g, '_')

src/main/html/css/screen.css

@@ -391,6 +391,32 @@
   font-weight: bold;
   color: #000;
 }
+.swagger-section .swagger-ui-wrap .model-signature .description .propWrap .optionsWrapper {
+  border-spacing: 0;
+  position: absolute;
+  background-color: #ffffff;
+  border: 1px solid #bbbbbb;
+  display: none;
+  font-size: 11px;
+  max-width: 400px;
+  line-height: 30px;
+  color: black;
+  padding: 5px;
+  margin-left: 10px;
+}
+.swagger-section .swagger-ui-wrap .model-signature .description .propWrap .optionsWrapper th {
+  text-align: center;
+  background-color: #eeeeee;
+  border: 1px solid #bbbbbb;
+  font-size: 11px;
+  color: #666666;
+  font-weight: bold;
+  padding: 5px;
+  line-height: 15px;
+}
+.swagger-section .swagger-ui-wrap .model-signature .description .propWrap .optionsWrapper .optionName {
+  font-weight: bold;
+}
 .swagger-section .swagger-ui-wrap .model-signature .propName {
   font-weight: bold;
 }

src/main/less/specs.less

@@ -281,6 +281,34 @@
                 font-weight: bold;
                 color: #000;
             }
+            .propWrap {
+                .optionsWrapper {
+                    border-spacing: 0;
+                    position: absolute;
+                    background-color: #ffffff;
+                    border: 1px solid #bbbbbb;
+                    display: none;
+                    font-size: 11px;
+                    max-width: 400px;
+                    line-height: 30px;
+                    color: black;
+                    padding: 5px;
+                    margin-left:10px;
+                    th {
+                        text-align: center;
+                        background-color: #eeeeee;
+                        border: 1px solid #bbbbbb;
+                        font-size: 11px;
+                        color: #666666;
+                        font-weight: bold;
+                        padding: 5px;
+                        line-height: 15px;
+                    }
+                    .optionName {
+                        font-weight: bold;
+                    }
+                }
+            }
         }
         .propName {
             font-weight: bold;