mirror of
https://github.com/craigerl/aprsd.git
synced 2024-09-27 15:46:53 -04:00
159 lines
4.9 KiB
JavaScript
159 lines
4.9 KiB
JavaScript
|
/**
|
||
|
* jQuery json-viewer
|
||
|
* @author: Alexandre Bodelot <alexandre.bodelot@gmail.com>
|
||
|
* @link: https://github.com/abodelot/jquery.json-viewer
|
||
|
*/
|
||
|
(function($) {
|
||
|
|
||
|
/**
|
||
|
* Check if arg is either an array with at least 1 element, or a dict with at least 1 key
|
||
|
* @return boolean
|
||
|
*/
|
||
|
function isCollapsable(arg) {
|
||
|
return arg instanceof Object && Object.keys(arg).length > 0;
|
||
|
}
|
||
|
|
||
|
/**
|
||
|
* Check if a string represents a valid url
|
||
|
* @return boolean
|
||
|
*/
|
||
|
function isUrl(string) {
|
||
|
var urlRegexp = /^(https?:\/\/|ftps?:\/\/)?([a-z0-9%-]+\.){1,}([a-z0-9-]+)?(:(\d{1,5}))?(\/([a-z0-9\-._~:/?#[\]@!$&'()*+,;=%]+)?)?$/i;
|
||
|
return urlRegexp.test(string);
|
||
|
}
|
||
|
|
||
|
/**
|
||
|
* Transform a json object into html representation
|
||
|
* @return string
|
||
|
*/
|
||
|
function json2html(json, options) {
|
||
|
var html = '';
|
||
|
if (typeof json === 'string') {
|
||
|
// Escape tags and quotes
|
||
|
json = json
|
||
|
.replace(/&/g, '&')
|
||
|
.replace(/</g, '<')
|
||
|
.replace(/>/g, '>')
|
||
|
.replace(/'/g, ''')
|
||
|
.replace(/"/g, '"');
|
||
|
|
||
|
if (options.withLinks && isUrl(json)) {
|
||
|
html += '<a href="' + json + '" class="json-string" target="_blank">' + json + '</a>';
|
||
|
} else {
|
||
|
// Escape double quotes in the rendered non-URL string.
|
||
|
json = json.replace(/"/g, '\\"');
|
||
|
html += '<span class="json-string">"' + json + '"</span>';
|
||
|
}
|
||
|
} else if (typeof json === 'number') {
|
||
|
html += '<span class="json-literal">' + json + '</span>';
|
||
|
} else if (typeof json === 'boolean') {
|
||
|
html += '<span class="json-literal">' + json + '</span>';
|
||
|
} else if (json === null) {
|
||
|
html += '<span class="json-literal">null</span>';
|
||
|
} else if (json instanceof Array) {
|
||
|
if (json.length > 0) {
|
||
|
html += '[<ol class="json-array">';
|
||
|
for (var i = 0; i < json.length; ++i) {
|
||
|
html += '<li>';
|
||
|
// Add toggle button if item is collapsable
|
||
|
if (isCollapsable(json[i])) {
|
||
|
html += '<a href class="json-toggle"></a>';
|
||
|
}
|
||
|
html += json2html(json[i], options);
|
||
|
// Add comma if item is not last
|
||
|
if (i < json.length - 1) {
|
||
|
html += ',';
|
||
|
}
|
||
|
html += '</li>';
|
||
|
}
|
||
|
html += '</ol>]';
|
||
|
} else {
|
||
|
html += '[]';
|
||
|
}
|
||
|
} else if (typeof json === 'object') {
|
||
|
var keyCount = Object.keys(json).length;
|
||
|
if (keyCount > 0) {
|
||
|
html += '{<ul class="json-dict">';
|
||
|
for (var key in json) {
|
||
|
if (Object.prototype.hasOwnProperty.call(json, key)) {
|
||
|
html += '<li>';
|
||
|
var keyRepr = options.withQuotes ?
|
||
|
'<span class="json-string">"' + key + '"</span>' : key;
|
||
|
// Add toggle button if item is collapsable
|
||
|
if (isCollapsable(json[key])) {
|
||
|
html += '<a href class="json-toggle">' + keyRepr + '</a>';
|
||
|
} else {
|
||
|
html += keyRepr;
|
||
|
}
|
||
|
html += ': ' + json2html(json[key], options);
|
||
|
// Add comma if item is not last
|
||
|
if (--keyCount > 0) {
|
||
|
html += ',';
|
||
|
}
|
||
|
html += '</li>';
|
||
|
}
|
||
|
}
|
||
|
html += '</ul>}';
|
||
|
} else {
|
||
|
html += '{}';
|
||
|
}
|
||
|
}
|
||
|
return html;
|
||
|
}
|
||
|
|
||
|
/**
|
||
|
* jQuery plugin method
|
||
|
* @param json: a javascript object
|
||
|
* @param options: an optional options hash
|
||
|
*/
|
||
|
$.fn.jsonViewer = function(json, options) {
|
||
|
// Merge user options with default options
|
||
|
options = Object.assign({}, {
|
||
|
collapsed: false,
|
||
|
rootCollapsable: true,
|
||
|
withQuotes: false,
|
||
|
withLinks: true
|
||
|
}, options);
|
||
|
|
||
|
// jQuery chaining
|
||
|
return this.each(function() {
|
||
|
|
||
|
// Transform to HTML
|
||
|
var html = json2html(json, options);
|
||
|
if (options.rootCollapsable && isCollapsable(json)) {
|
||
|
html = '<a href class="json-toggle"></a>' + html;
|
||
|
}
|
||
|
|
||
|
// Insert HTML in target DOM element
|
||
|
$(this).html(html);
|
||
|
$(this).addClass('json-document');
|
||
|
|
||
|
// Bind click on toggle buttons
|
||
|
$(this).off('click');
|
||
|
$(this).on('click', 'a.json-toggle', function() {
|
||
|
var target = $(this).toggleClass('collapsed').siblings('ul.json-dict, ol.json-array');
|
||
|
target.toggle();
|
||
|
if (target.is(':visible')) {
|
||
|
target.siblings('.json-placeholder').remove();
|
||
|
} else {
|
||
|
var count = target.children('li').length;
|
||
|
var placeholder = count + (count > 1 ? ' items' : ' item');
|
||
|
target.after('<a href class="json-placeholder">' + placeholder + '</a>');
|
||
|
}
|
||
|
return false;
|
||
|
});
|
||
|
|
||
|
// Simulate click on toggle button when placeholder is clicked
|
||
|
$(this).on('click', 'a.json-placeholder', function() {
|
||
|
$(this).siblings('a.json-toggle').click();
|
||
|
return false;
|
||
|
});
|
||
|
|
||
|
if (options.collapsed == true) {
|
||
|
// Trigger click to collapse all nodes
|
||
|
$(this).find('a.json-toggle').click();
|
||
|
}
|
||
|
});
|
||
|
};
|
||
|
})(jQuery);
|