schema samples highlighting + collapsability

lib/components/JsonSchema/json-schema-common.scss

@@ -76,12 +76,16 @@ $sub-schema-offset: ($bullet-size/2) + $bullet-margin;
   color: rgba(0, 80, 0, 0.7);
 }
 
-.param-type.integer {
-  color: rgba(30, 0, 80, 0.7);
+.param-type.integer, .param-type.number {
+  color: rgba(74, 139, 179, 0.8);
 }
 
 .param-type.object {
-  color: rgba(139, 0, 0, 0.67);
+  color: rgba(0, 50, 159, 0.7);
+}
+
+.param-type.boolean {
+  color: firebrick;
 }
 
 .param-type.with-hint {

lib/components/ResponsesSamples/responses-samples.scss

@@ -16,7 +16,7 @@ header {
   font-weight: normal;
 }
 
-:host tabs li {
+:host > tabs > ul li {
   font-size: 13px;
   margin: 2px 0;
   padding: 2px 5px;

lib/components/SchemaSample/schema-sample.html

@@ -1,5 +1,5 @@
 <div class="snippet">
   <!-- in case sample is not available for some reason -->
   <pre *ngIf="data.sample == null"> Sample unavailable </pre>
-  <pre>{{data.sample | json}}</pre>
+  <pre innerHtml="{{data.sample | jsonFormatter}}"></pre>
 </div>

lib/components/SchemaSample/schema-sample.js

@@ -4,19 +4,19 @@ import {RedocComponent, BaseComponent} from '../base';
 
 import SchemaSampler from 'json-schema-instantiator';
 
+import {JsonFormatter} from '../../utils/JsonFormatterPipe';
+import {ElementRef} from 'angular2/core';
+
 @RedocComponent({
   selector: 'schema-sample',
   templateUrl: './lib/components/SchemaSample/schema-sample.html',
-  styles: [`
-    pre {
-      background-color: transparent;
-      padding: 0;
-    }
-  `]
+  pipes: [JsonFormatter],
+  styleUrls: ['./lib/components/SchemaSample/schema-sample.css']
 })
 export default class SchemaSample extends BaseComponent {
-  constructor(schemaMgr) {
+  constructor(schemaMgr, elementRef) {
     super(schemaMgr);
+    this.element = elementRef.nativeElement;
   }
 
   init() {
@@ -44,5 +44,19 @@ export default class SchemaSample extends BaseComponent {
     }
 
     this.data.sample = sample;
+
+
+    this.element.addEventListener('click', (event) => {
+      var collapsed, target = event.target;
+      if (event.target.className === 'collapser') {
+        collapsed = target.parentNode.getElementsByClassName('collapsible')[0];
+        if (collapsed.parentNode.classList.contains('collapsed')) {
+          collapsed.parentNode.classList.remove('collapsed');
+        } else {
+          collapsed.parentNode.classList.add('collapsed');
         }
       }
+    });
+  }
+}
+SchemaSample.parameters = SchemaSample.parameters.concat([[ElementRef]]);

lib/components/SchemaSample/schema-sample.scss

@@ -0,0 +1,112 @@
+pre {
+  background-color: transparent;
+  padding: 0;
+}
+:host {
+  .property {
+    //font-weight: bold;
+  }
+
+  .type-null {
+    color: gray;
+  }
+
+  .type-boolean {
+    color: firebrick;
+  }
+
+  .type-number {
+    color: #4A8BB3;
+  }
+
+  .type-string {
+    color: #66B16E;
+  }
+
+  .callback-function {
+    color: gray;
+  }
+
+  .collapser:after {
+    content: "-";
+    cursor: pointer;
+  }
+
+  .collapsed > .collapser:after {
+    content: "+";
+    cursor: pointer;
+  }
+
+  .ellipsis:after {
+    content: " … ";
+  }
+
+  .collapsible {
+    margin-left: 2em;
+  }
+
+  .hoverable {
+    padding-top: 1px;
+    padding-bottom: 1px;
+    padding-left: 2px;
+    padding-right: 2px;
+    border-radius: 2px;
+  }
+
+  .hovered {
+    background-color: rgba(235, 238, 249, 1);
+  }
+
+  .collapser {
+    padding-right: 6px;
+    padding-left: 6px;
+  }
+
+  ul, .redoc-json ul {
+  	list-style-type: none;
+  	padding: 0px;
+  	margin: 0px 0px 0px 26px;
+  }
+
+  li {
+  	position: relative;
+  }
+
+  .hoverable {
+  	transition: background-color .2s ease-out 0s;
+  	-webkit-transition: background-color .2s ease-out 0s;
+  	display: inline-block;
+  }
+
+  .hovered {
+  	transition-delay: .2s;
+  	-webkit-transition-delay: .2s;
+  }
+
+  .selected {
+  	outline-style: solid;
+  	outline-width: 1px;
+  	outline-style: dotted;
+  }
+
+  .collapsed>.collapsible {
+  	display: none;
+  }
+
+  .ellipsis {
+  	display: none;
+  }
+
+  .collapsed>.ellipsis {
+  	display: inherit;
+  }
+
+  .collapser {
+  	position: absolute;
+  	top: 1px;
+  	left: -1.5em;
+  	cursor: default;
+  	user-select: none;
+  	-webkit-user-select: none;
+  }
+}

lib/components/base.js

@@ -1,6 +1,6 @@
 'use strict';
 import {Component, View, OnInit, OnDestroy, ChangeDetectionStrategy} from 'angular2/core';
-import {CORE_DIRECTIVES, JsonPipe} from 'angular2/common';
+import {CORE_DIRECTIVES, JsonPipe, AsyncPipe} from 'angular2/common';
 import SchemaManager from '../utils/SchemaManager';
 import JsonPointer from '../utils/JsonPointer';
 import {MarkedPipe, JsonPointerEscapePipe} from '../utils/pipes';
@@ -49,7 +49,7 @@ function snapshot(obj) {
 export function RedocComponent(options) {
   let inputs = safeConcat(options.inputs, commonInputs);
   let directives = safeConcat(options.directives, CORE_DIRECTIVES);
-  let pipes = safeConcat(options.pipes, [JsonPointerEscapePipe, MarkedPipe, JsonPipe]);
+  let pipes = safeConcat(options.pipes, [JsonPointerEscapePipe, MarkedPipe, JsonPipe, AsyncPipe]);
 
   return function decorator(target) {
 

lib/utils/JsonFormatterPipe.js

@@ -0,0 +1,106 @@
+'use strict';
+import {Pipe} from 'angular2/core';
+import {isBlank} from 'angular2/src/facade/lang';
+
+var level = 1;
+const COLLAPSE_LEVEL = 2;
+
+@Pipe({ name: 'jsonFormatter' })
+export class JsonFormatter {
+  transform(value) {
+    if (isBlank(value)) return value;
+    return jsonToHTML(value);
+  }
+}
+
+function htmlEncode(t) {
+  return t != null ? t.toString().replace(/&/g, '&amp;').replace(/"/g, '&quot;').replace(/</g, '&lt;').replace(/>/g, '&gt;') : '';
+}
+
+function decorateWithSpan(value, className) {
+  return '<span class="' + className + '">' + htmlEncode(value) + '</span>';
+}
+
+function valueToHTML(value) {
+  var valueType = typeof value, output = '';
+  if (value == null) {
+    output += decorateWithSpan('null', 'type-null');
+  }
+  else if (value && value.constructor === Array) {
+    level++;
+    output += arrayToHTML(value);
+    level--;
+  }
+  else if (valueType === 'object') {
+    level++;
+    output += objectToHTML(value);
+    level--;
+  }
+  else if (valueType === 'number') {
+    output += decorateWithSpan(value, 'type-number');
+  }
+  else if (valueType === 'string') {
+    if (/^(http|https):\/\/[^\\s]+$/.test(value)) {
+      output += decorateWithSpan('"', 'type-string') + '<a href="' + value + '">' + htmlEncode(value) + '</a>' + decorateWithSpan('"', 'type-string');
+    } else {
+      output += decorateWithSpan('"' + value + '"', 'type-string');
+    }
+  } else if (valueType === 'boolean') {
+    output += decorateWithSpan(value, 'type-boolean');
+  }
+
+  return output;
+}
+
+function arrayToHTML(json) {
+  var collapsed = level > COLLAPSE_LEVEL ? 'collapsed' : '';
+  var i, length;
+  var output = '<div class="collapser"></div>[<span class="ellipsis"></span><ul class="array collapsible">';
+  var hasContents = false;
+  for (i = 0, length = json.length; i < length; i++) {
+    hasContents = true;
+    output += '<li><div class="hoverable ' + collapsed + '">';
+    output += valueToHTML(json[i]);
+    if (i < length - 1) {
+      output += ',';
+    }
+    output += '</div></li>';
+  }
+  output += '</ul>]';
+  if (!hasContents) {
+    output = '[ ]';
+  }
+  return output;
+}
+
+function objectToHTML(json) {
+  var collapsed = level > COLLAPSE_LEVEL ? 'collapsed' : '';
+  var i, key, length, keys = Object.keys(json);
+  var output = '<div class="collapser"></div>{<span class="ellipsis"></span><ul class="obj collapsible">';
+  var hasContents = false;
+  for (i = 0, length = keys.length; i < length; i++) {
+    key = keys[i];
+    hasContents = true;
+    output += '<li><div class="hoverable ' + collapsed + '">';
+    output += '<span class="property">' + htmlEncode(key) + '</span>: ';
+    output += valueToHTML(json[key]);
+    if (i < length - 1) {
+      output += ',';
+    }
+    output += '</div></li>';
+  }
+  output += '</ul>}';
+  if (!hasContents) {
+    output = '{ }';
+  }
+  return output;
+}
+
+function jsonToHTML(json) {
+  level = 1;
+  var output = '';
+  output += '<div class="redoc-json">';
+  output += valueToHTML(json);
+  output += '</div>';
+  return output;
+}