Edit File by line

/**

[0] Fix | Delete

* JSON Tree library (a part of jsonTreeViewer)

[1] Fix | Delete

* http://github.com/summerstyle/jsonTreeViewer

[2] Fix | Delete

[3] Fix | Delete

[4] Fix | Delete

* Released under the MIT license (LICENSE.txt)

[5] Fix | Delete

[6] Fix | Delete

[7] Fix | Delete

var jsonTree = (function() {

[8] Fix | Delete

[9] Fix | Delete

/* ---------- Utilities ---------- */

[10] Fix | Delete

var utils = {

[11] Fix | Delete

[12] Fix | Delete

[13] Fix | Delete

* Returns js-"class" of value

[14] Fix | Delete

[15] Fix | Delete

* @param val {any type} - value

[16] Fix | Delete

* @returns {string} - for example, "[object Function]"

[17] Fix | Delete

[18] Fix | Delete

getClass : function(val) {

[19] Fix | Delete

return Object.prototype.toString.call(val);

[20] Fix | Delete

[21] Fix | Delete

[22] Fix | Delete

/**

[23] Fix | Delete

* Checks for a type of value (for valid JSON data types).

[24] Fix | Delete

* In other cases - throws an exception

[25] Fix | Delete

[26] Fix | Delete

* @param val {any type} - the value for new node

[27] Fix | Delete

* @returns {string} ("object" | "array" | "null" | "boolean" | "number" | "string")

[28] Fix | Delete

[29] Fix | Delete

getType : function(val) {

[30] Fix | Delete

if (val === null) {

[31] Fix | Delete

return 'null';

[32] Fix | Delete

}

[33] Fix | Delete

[34] Fix | Delete

switch (typeof val) {

[35] Fix | Delete

case 'number':

[36] Fix | Delete

return 'number';

[37] Fix | Delete

[38] Fix | Delete

case 'string':

[39] Fix | Delete

return 'string';

[40] Fix | Delete

[41] Fix | Delete

case 'boolean':

[42] Fix | Delete

return 'boolean';

[43] Fix | Delete

}

[44] Fix | Delete

[45] Fix | Delete

switch(utils.getClass(val)) {

[46] Fix | Delete

case '[object Array]':

[47] Fix | Delete

return 'array';

[48] Fix | Delete

[49] Fix | Delete

case '[object Object]':

[50] Fix | Delete

return 'object';

[51] Fix | Delete

}

[52] Fix | Delete

[53] Fix | Delete

throw new Error('Bad type: ' + utils.getClass(val));

[54] Fix | Delete

[55] Fix | Delete

[56] Fix | Delete

/**

[57] Fix | Delete

* Applies for each item of list some function

[58] Fix | Delete

* and checks for last element of the list

[59] Fix | Delete

[60] Fix | Delete

* @param obj {Object | Array} - a list or a dict with child nodes

[61] Fix | Delete

* @param func {Function} - the function for each item

[62] Fix | Delete

[63] Fix | Delete

forEachNode : function(obj, func) {

[64] Fix | Delete

var type = utils.getType(obj),

[65] Fix | Delete

isLast;

[66] Fix | Delete

[67] Fix | Delete

switch (type) {

[68] Fix | Delete

case 'array':

[69] Fix | Delete

isLast = obj.length - 1;

[70] Fix | Delete

[71] Fix | Delete

obj.forEach(function(item, i) {

[72] Fix | Delete

func(i, item, i === isLast);

[73] Fix | Delete

});

[74] Fix | Delete

[75] Fix | Delete

break;

[76] Fix | Delete

[77] Fix | Delete

case 'object':

[78] Fix | Delete

var keys = Object.keys(obj).sort();

[79] Fix | Delete

[80] Fix | Delete

isLast = keys.length - 1;

[81] Fix | Delete

[82] Fix | Delete

keys.forEach(function(item, i) {

[83] Fix | Delete

func(item, obj[item], i === isLast);

[84] Fix | Delete

});

[85] Fix | Delete

[86] Fix | Delete

break;

[87] Fix | Delete

}

[88] Fix | Delete

[89] Fix | Delete

[90] Fix | Delete

[91] Fix | Delete

/**

[92] Fix | Delete

* Implements the kind of an inheritance by

[93] Fix | Delete

* using parent prototype and

[94] Fix | Delete

* creating intermediate constructor

[95] Fix | Delete

[96] Fix | Delete

* @param Child {Function} - a child constructor

[97] Fix | Delete

* @param Parent {Function} - a parent constructor

[98] Fix | Delete

[99] Fix | Delete

inherits : (function() {

[100] Fix | Delete

var F = function() {};

[101] Fix | Delete

[102] Fix | Delete

return function(Child, Parent) {

[103] Fix | Delete

F.prototype = Parent.prototype;

[104] Fix | Delete

Child.prototype = new F();

[105] Fix | Delete

Child.prototype.constructor = Child;

[106] Fix | Delete

};

[107] Fix | Delete

})(),

[108] Fix | Delete

[109] Fix | Delete

[110] Fix | Delete

* Checks for a valid type of root node*

[111] Fix | Delete

[112] Fix | Delete

* @param {any type} jsonObj - a value for root node

[113] Fix | Delete

* @returns {boolean} - true for an object or an array, false otherwise

[114] Fix | Delete

[115] Fix | Delete

isValidRoot : function(jsonObj) {

[116] Fix | Delete

switch (utils.getType(jsonObj)) {

[117] Fix | Delete

case 'object':

[118] Fix | Delete

case 'array':

[119] Fix | Delete

return true;

[120] Fix | Delete

default:

[121] Fix | Delete

return false;

[122] Fix | Delete

}

[123] Fix | Delete

[124] Fix | Delete

[125] Fix | Delete

/**

[126] Fix | Delete

* Extends some object

[127] Fix | Delete

[128] Fix | Delete

extend : function(targetObj, sourceObj) {

[129] Fix | Delete

for (var prop in sourceObj) {

[130] Fix | Delete

if (sourceObj.hasOwnProperty(prop)) {

[131] Fix | Delete

targetObj[prop] = sourceObj[prop];

[132] Fix | Delete

}

[133] Fix | Delete

}

[134] Fix | Delete

}

[135] Fix | Delete

};

[136] Fix | Delete

[137] Fix | Delete

[138] Fix | Delete

/* ---------- Node constructors ---------- */

[139] Fix | Delete

[140] Fix | Delete

/**

[141] Fix | Delete

* The factory for creating nodes of defined type.

[142] Fix | Delete

[143] Fix | Delete

* ~~~ Node ~~~ is a structure element of an onject or an array

[144] Fix | Delete

* with own label (a key of an object or an index of an array)

[145] Fix | Delete

* and value of any json data type. The root object or array

[146] Fix | Delete

* is a node without label.

[147] Fix | Delete

* {...

[148] Fix | Delete

* [+] "label": value,

[149] Fix | Delete

* ...}

[150] Fix | Delete

[151] Fix | Delete

* Markup:

[152] Fix | Delete

* <li class="jsontree_node [jsontree_node_expanded]">

[153] Fix | Delete

*

[154] Fix | Delete

*

[155] Fix | Delete

*

[156] Fix | Delete

* "label"

[157] Fix | Delete

*

[158] Fix | Delete

* :

[159] Fix | Delete

*

[160] Fix | Delete

[161] Fix | Delete

* ...

[162] Fix | Delete

* </(div|span)>

[163] Fix | Delete

* </li>

[164] Fix | Delete

[165] Fix | Delete

* @param label {string} - key name

[166] Fix | Delete

* @param val {Object | Array | string | number | boolean | null} - a value of node

[167] Fix | Delete

* @param isLast {boolean} - true if node is last in list of siblings

[168] Fix | Delete

[169] Fix | Delete

* @return {Node}

[170] Fix | Delete

[171] Fix | Delete

function Node(label, val, isLast) {

[172] Fix | Delete

var nodeType = utils.getType(val);

[173] Fix | Delete

[174] Fix | Delete

if (nodeType in Node.CONSTRUCTORS) {

[175] Fix | Delete

return new Node.CONSTRUCTORS[nodeType](label, val, isLast);

[176] Fix | Delete

} else {

[177] Fix | Delete

throw new Error('Bad type: ' + utils.getClass(val));

[178] Fix | Delete

}

[179] Fix | Delete

}

[180] Fix | Delete

[181] Fix | Delete

Node.CONSTRUCTORS = {

[182] Fix | Delete

'boolean' : NodeBoolean,

[183] Fix | Delete

'number' : NodeNumber,

[184] Fix | Delete

'string' : NodeString,

[185] Fix | Delete

'null' : NodeNull,

[186] Fix | Delete

'object' : NodeObject,

[187] Fix | Delete

'array' : NodeArray

[188] Fix | Delete

};

[189] Fix | Delete

[190] Fix | Delete

[191] Fix | Delete

[192] Fix | Delete

* The constructor for simple types (string, number, boolean, null)

[193] Fix | Delete

* {...

[194] Fix | Delete

* [+] "label": value,

[195] Fix | Delete

* ...}

[196] Fix | Delete

* value = string || number || boolean || null

[197] Fix | Delete

[198] Fix | Delete

* Markup:

[199] Fix | Delete

* <li class="jsontree_node">

[200] Fix | Delete

*

[201] Fix | Delete

* "age"

[202] Fix | Delete

* :

[203] Fix | Delete

*

[204] Fix | Delete

* 25

[205] Fix | Delete

* ,

[206] Fix | Delete

* </li>

[207] Fix | Delete

[208] Fix | Delete

* @abstract

[209] Fix | Delete

* @param label {string} - key name

[210] Fix | Delete

* @param val {string | number | boolean | null} - a value of simple types

[211] Fix | Delete

* @param isLast {boolean} - true if node is last in list of parent childNodes

[212] Fix | Delete

[213] Fix | Delete

function _NodeSimple(label, val, isLast) {

[214] Fix | Delete

if (this.constructor === _NodeSimple) {

[215] Fix | Delete

throw new Error('This is abstract class');

[216] Fix | Delete

}

[217] Fix | Delete

[218] Fix | Delete

var self = this,

[219] Fix | Delete

el = document.createElement('li'),

[220] Fix | Delete

labelEl,

[221] Fix | Delete

template = function(label, val) {

[222] Fix | Delete

var str = '\

[223] Fix | Delete

\

[224] Fix | Delete

"' +

[225] Fix | Delete

label +

[226] Fix | Delete

'" : \

[227] Fix | Delete

\

[228] Fix | Delete

\

[229] Fix | Delete

' +

[230] Fix | Delete

val +

[231] Fix | Delete

'' +

[232] Fix | Delete

(!isLast ? ',' : '') +

[233] Fix | Delete

'';

[234] Fix | Delete

[235] Fix | Delete

return str;

[236] Fix | Delete

};

[237] Fix | Delete

[238] Fix | Delete

self.label = label;

[239] Fix | Delete

self.isComplex = false;

[240] Fix | Delete

[241] Fix | Delete

el.classList.add('jsontree_node');

[242] Fix | Delete

el.innerHTML = template(label, val);

[243] Fix | Delete

[244] Fix | Delete

self.el = el;

[245] Fix | Delete

[246] Fix | Delete

labelEl = el.querySelector('.jsontree_label');

[247] Fix | Delete

[248] Fix | Delete

labelEl.addEventListener('click', function(e) {

[249] Fix | Delete

if (e.altKey) {

[250] Fix | Delete

self.toggleMarked();

[251] Fix | Delete

return;

[252] Fix | Delete

}

[253] Fix | Delete

[254] Fix | Delete

if (e.shiftKey) {

[255] Fix | Delete

document.getSelection().removeAllRanges();

[256] Fix | Delete

alert(self.getJSONPath());

[257] Fix | Delete

return;

[258] Fix | Delete

}

[259] Fix | Delete

}, false);

[260] Fix | Delete

}

[261] Fix | Delete

[262] Fix | Delete

_NodeSimple.prototype = {

[263] Fix | Delete

constructor : _NodeSimple,

[264] Fix | Delete

[265] Fix | Delete

/**

[266] Fix | Delete

* Mark node

[267] Fix | Delete

[268] Fix | Delete

mark : function() {

[269] Fix | Delete

this.el.classList.add('jsontree_node_marked');

[270] Fix | Delete

[271] Fix | Delete

[272] Fix | Delete

/**

[273] Fix | Delete

* Unmark node

[274] Fix | Delete

[275] Fix | Delete

unmark : function() {

[276] Fix | Delete

this.el.classList.remove('jsontree_node_marked');

[277] Fix | Delete

[278] Fix | Delete

[279] Fix | Delete

/**

[280] Fix | Delete

* Mark or unmark node

[281] Fix | Delete

[282] Fix | Delete

toggleMarked : function() {

[283] Fix | Delete

this.el.classList.toggle('jsontree_node_marked');

[284] Fix | Delete

[285] Fix | Delete

[286] Fix | Delete

/**

[287] Fix | Delete

* Expands parent node of this node

[288] Fix | Delete

[289] Fix | Delete

* @param isRecursive {boolean} - if true, expands all parent nodes

[290] Fix | Delete

* (from node to root)

[291] Fix | Delete

[292] Fix | Delete

expandParent : function(isRecursive) {

[293] Fix | Delete

if (!this.parent) {

[294] Fix | Delete

return;

[295] Fix | Delete

}

[296] Fix | Delete

[297] Fix | Delete

this.parent.expand();

[298] Fix | Delete

this.parent.expandParent(isRecursive);

[299] Fix | Delete

[300] Fix | Delete

[301] Fix | Delete

/**

[302] Fix | Delete

* Returns JSON-path of this

[303] Fix | Delete

[304] Fix | Delete

* @param isInDotNotation {boolean} - kind of notation for returned json-path

[305] Fix | Delete

* (by default, in bracket notation)

[306] Fix | Delete

* @returns {string}

[307] Fix | Delete

[308] Fix | Delete

getJSONPath : function(isInDotNotation) {

[309] Fix | Delete

if (this.isRoot) {

[310] Fix | Delete

return "$";

[311] Fix | Delete

}

[312] Fix | Delete

[313] Fix | Delete

var currentPath;

[314] Fix | Delete

[315] Fix | Delete

if (this.parent.type === 'array') {

[316] Fix | Delete

currentPath = "[" + this.label + "]";

[317] Fix | Delete

} else {

[318] Fix | Delete

currentPath = isInDotNotation ? "." + this.label : "['" + this.label + "']";

[319] Fix | Delete

}

[320] Fix | Delete

[321] Fix | Delete

return this.parent.getJSONPath(isInDotNotation) + currentPath;

[322] Fix | Delete

}

[323] Fix | Delete

};

[324] Fix | Delete

[325] Fix | Delete

[326] Fix | Delete

[327] Fix | Delete

* The constructor for boolean values

[328] Fix | Delete

* {...

[329] Fix | Delete

* [+] "label": boolean,

[330] Fix | Delete

* ...}

[331] Fix | Delete

* boolean = true || false

[332] Fix | Delete

[333] Fix | Delete

* @constructor

[334] Fix | Delete

* @param label {string} - key name

[335] Fix | Delete

* @param val {boolean} - value of boolean type, true or false

[336] Fix | Delete

* @param isLast {boolean} - true if node is last in list of parent childNodes

[337] Fix | Delete

[338] Fix | Delete

function NodeBoolean(label, val, isLast) {

[339] Fix | Delete

this.type = "boolean";

[340] Fix | Delete

[341] Fix | Delete

_NodeSimple.call(this, label, val, isLast);

[342] Fix | Delete

}

[343] Fix | Delete

utils.inherits(NodeBoolean,_NodeSimple);

[344] Fix | Delete

[345] Fix | Delete

[346] Fix | Delete

[347] Fix | Delete

* The constructor for number values

[348] Fix | Delete

* {...

[349] Fix | Delete

* [+] "label": number,

[350] Fix | Delete

* ...}

[351] Fix | Delete

* number = 123

[352] Fix | Delete

[353] Fix | Delete

* @constructor

[354] Fix | Delete

* @param label {string} - key name

[355] Fix | Delete

* @param val {number} - value of number type, for example 123

[356] Fix | Delete

* @param isLast {boolean} - true if node is last in list of parent childNodes

[357] Fix | Delete

[358] Fix | Delete

function NodeNumber(label, val, isLast) {

[359] Fix | Delete

this.type = "number";

[360] Fix | Delete

[361] Fix | Delete

_NodeSimple.call(this, label, val, isLast);

[362] Fix | Delete

}

[363] Fix | Delete

utils.inherits(NodeNumber,_NodeSimple);

[364] Fix | Delete

[365] Fix | Delete

[366] Fix | Delete

[367] Fix | Delete

* The constructor for string values

[368] Fix | Delete

* {...

[369] Fix | Delete

* [+] "label": string,

[370] Fix | Delete

* ...}

[371] Fix | Delete

* string = "abc"

[372] Fix | Delete

[373] Fix | Delete

* @constructor

[374] Fix | Delete

* @param label {string} - key name

[375] Fix | Delete

* @param val {string} - value of string type, for example "abc"

[376] Fix | Delete

* @param isLast {boolean} - true if node is last in list of parent childNodes

[377] Fix | Delete

[378] Fix | Delete

function NodeString(label, val, isLast) {

[379] Fix | Delete

this.type = "string";

[380] Fix | Delete

[381] Fix | Delete

_NodeSimple.call(this, label, '"' + val + '"', isLast);

[382] Fix | Delete

}

[383] Fix | Delete

utils.inherits(NodeString,_NodeSimple);

[384] Fix | Delete

[385] Fix | Delete

[386] Fix | Delete

[387] Fix | Delete

* The constructor for null values

[388] Fix | Delete

* {...

[389] Fix | Delete

* [+] "label": null,

[390] Fix | Delete

* ...}

[391] Fix | Delete

[392] Fix | Delete

* @constructor

[393] Fix | Delete

* @param label {string} - key name

[394] Fix | Delete

* @param val {null} - value (only null)

[395] Fix | Delete

* @param isLast {boolean} - true if node is last in list of parent childNodes

[396] Fix | Delete

[397] Fix | Delete

function NodeNull(label, val, isLast) {

[398] Fix | Delete

this.type = "null";

[399] Fix | Delete

[400] Fix | Delete

_NodeSimple.call(this, label, val, isLast);

[401] Fix | Delete

}

[402] Fix | Delete

utils.inherits(NodeNull,_NodeSimple);

[403] Fix | Delete

[404] Fix | Delete

[405] Fix | Delete

[406] Fix | Delete

* The constructor for complex types (object, array)

[407] Fix | Delete

* {...

[408] Fix | Delete

* [+] "label": value,

[409] Fix | Delete

* ...}

[410] Fix | Delete

* value = object || array

[411] Fix | Delete

[412] Fix | Delete

* Markup:

[413] Fix | Delete

* <li class="jsontree_node jsontree_node_(object|array) [expanded]">

[414] Fix | Delete

*

[415] Fix | Delete

*

[416] Fix | Delete

*

[417] Fix | Delete

* "label"

[418] Fix | Delete

*

[419] Fix | Delete

* :

[420] Fix | Delete

*

[421] Fix | Delete

* <div class="jsontree_value">

[422] Fix | Delete

* {

[423] Fix | Delete

* <ul class="jsontree_child-nodes" />

[424] Fix | Delete

* }

[425] Fix | Delete

* ,

[426] Fix | Delete

* </div>

[427] Fix | Delete

* </li>

[428] Fix | Delete

[429] Fix | Delete

* @abstract

[430] Fix | Delete

* @param label {string} - key name

[431] Fix | Delete

* @param val {Object | Array} - a value of complex types, object or array

[432] Fix | Delete

* @param isLast {boolean} - true if node is last in list of parent childNodes

[433] Fix | Delete

[434] Fix | Delete

function _NodeComplex(label, val, isLast) {

[435] Fix | Delete

if (this.constructor === _NodeComplex) {

[436] Fix | Delete

throw new Error('This is abstract class');

[437] Fix | Delete

}

[438] Fix | Delete

[439] Fix | Delete

var self = this,

[440] Fix | Delete

el = document.createElement('li'),

[441] Fix | Delete

template = function(label, sym) {

[442] Fix | Delete

var comma = (!isLast) ? ',' : '',

[443] Fix | Delete

str = '\

[444] Fix | Delete

<div class="jsontree_value-wrapper">\

[445] Fix | Delete

<div class="jsontree_value jsontree_value_' + self.type + '">\

[446] Fix | Delete

' + sym[0] + '\

[447] Fix | Delete

…\

[448] Fix | Delete

<ul class="jsontree_child-nodes"></ul>\

[449] Fix | Delete

' + sym[1] + '' +

[450] Fix | Delete

'</div>' + comma +

[451] Fix | Delete

'</div>';

[452] Fix | Delete

[453] Fix | Delete

if (label !== null) {

[454] Fix | Delete

str = '\

[455] Fix | Delete

\

[456] Fix | Delete

' +

[457] Fix | Delete

'' +

[458] Fix | Delete

'"' + label +

[459] Fix | Delete

'" : \

[460] Fix | Delete

' + str;

[461] Fix | Delete

}

[462] Fix | Delete

[463] Fix | Delete

return str;

[464] Fix | Delete

[465] Fix | Delete

childNodesUl,

[466] Fix | Delete

labelEl,

[467] Fix | Delete

moreContentEl,

[468] Fix | Delete

childNodes = [];

[469] Fix | Delete

[470] Fix | Delete

self.label = label;

[471] Fix | Delete

self.isComplex = true;

[472] Fix | Delete

[473] Fix | Delete

el.classList.add('jsontree_node');

[474] Fix | Delete

el.classList.add('jsontree_node_complex');

[475] Fix | Delete

el.innerHTML = template(label, self.sym);

[476] Fix | Delete

[477] Fix | Delete

childNodesUl = el.querySelector('.jsontree_child-nodes');

[478] Fix | Delete

[479] Fix | Delete

if (label !== null) {

[480] Fix | Delete

labelEl = el.querySelector('.jsontree_label');

[481] Fix | Delete

moreContentEl = el.querySelector('.jsontree_show-more');

[482] Fix | Delete

[483] Fix | Delete

labelEl.addEventListener('click', function(e) {

[484] Fix | Delete

if (e.altKey) {

[485] Fix | Delete

self.toggleMarked();

[486] Fix | Delete

return;

[487] Fix | Delete

}

[488] Fix | Delete

[489] Fix | Delete

if (e.shiftKey) {

[490] Fix | Delete

document.getSelection().removeAllRanges();

[491] Fix | Delete

alert(self.getJSONPath());

[492] Fix | Delete

return;

[493] Fix | Delete

}

[494] Fix | Delete

[495] Fix | Delete

self.toggle(e.ctrlKey || e.metaKey);

[496] Fix | Delete

}, false);

[497] Fix | Delete

[498] Fix | Delete

moreContentEl.addEventListener('click', function(e) {

[499] Fix | Delete