2016-01-24 00:35:44 +03:00
|
|
|
'use strict';
|
2016-06-13 20:54:24 +03:00
|
|
|
import { Pipe, PipeTransform } from '@angular/core';
|
|
|
|
import { isBlank } from '@angular/core/src/facade/lang';
|
2016-01-24 00:35:44 +03:00
|
|
|
|
|
|
|
var level = 1;
|
|
|
|
const COLLAPSE_LEVEL = 2;
|
|
|
|
|
|
|
|
@Pipe({ name: 'jsonFormatter' })
|
2016-06-13 20:54:24 +03:00
|
|
|
export class JsonFormatter implements PipeTransform {
|
2016-01-24 00:35:44 +03:00
|
|
|
transform(value) {
|
|
|
|
if (isBlank(value)) return value;
|
|
|
|
return jsonToHTML(value);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
function htmlEncode(t) {
|
2016-06-13 20:54:24 +03:00
|
|
|
return t != undefined ?
|
|
|
|
t.toString().replace(/&/g, '&').replace(/"/g, '"').replace(/</g, '<').replace(/>/g, '>') : '';
|
2016-01-24 00:35:44 +03:00
|
|
|
}
|
|
|
|
|
|
|
|
function decorateWithSpan(value, className) {
|
|
|
|
return '<span class="' + className + '">' + htmlEncode(value) + '</span>';
|
|
|
|
}
|
|
|
|
|
|
|
|
function valueToHTML(value) {
|
|
|
|
var valueType = typeof value, output = '';
|
2016-06-13 20:54:24 +03:00
|
|
|
if (value == undefined) {
|
2016-01-24 00:35:44 +03:00
|
|
|
output += decorateWithSpan('null', 'type-null');
|
2016-06-13 20:54:24 +03:00
|
|
|
} else if (value && value.constructor === Array) {
|
2016-01-24 00:35:44 +03:00
|
|
|
level++;
|
|
|
|
output += arrayToHTML(value);
|
|
|
|
level--;
|
2016-06-13 20:54:24 +03:00
|
|
|
} else if (valueType === 'object') {
|
2016-01-24 00:35:44 +03:00
|
|
|
level++;
|
|
|
|
output += objectToHTML(value);
|
|
|
|
level--;
|
2016-06-13 20:54:24 +03:00
|
|
|
} else if (valueType === 'number') {
|
2016-01-24 00:35:44 +03:00
|
|
|
output += decorateWithSpan(value, 'type-number');
|
2016-06-13 20:54:24 +03:00
|
|
|
} else if (valueType === 'string') {
|
2016-01-24 00:35:44 +03:00
|
|
|
if (/^(http|https):\/\/[^\\s]+$/.test(value)) {
|
2016-06-13 20:54:24 +03:00
|
|
|
output += decorateWithSpan('"', 'type-string') + '<a href="' + value + '">' + htmlEncode(value) + '</a>' +
|
|
|
|
decorateWithSpan('"', 'type-string');
|
2016-01-24 00:35:44 +03:00
|
|
|
} 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;
|
|
|
|
}
|