Skip to content
This repository has been archived by the owner on Apr 25, 2023. It is now read-only.

Commit

Permalink
es6
Browse files Browse the repository at this point in the history
  • Loading branch information
Max Leiter committed Nov 25, 2017
1 parent a4cb126 commit 6b1fc2d
Show file tree
Hide file tree
Showing 4 changed files with 52 additions and 71 deletions.
2 changes: 1 addition & 1 deletion dist/js/jsonTree.min.js
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

12 changes: 6 additions & 6 deletions package.json
View file
Original file line number Diff line number Diff line change
@@ -1,14 +1,14 @@
{
"name": "jsontreejs",
"version": "1.6.1",
"version": "3.0.0",
"description": "a lightweight dependency free javascript micro-library",
"main": "dist/jsonTree.js",
"main": "dist/js/jsonTree.min.js",
"directories": {
"example": "example"
"test": "test"
},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "uglifyjs src/jsonTree.js --compress unused=false --mangle --output dist/js/jsonTree.min.js && uglifycss src/jsonTree.css > dist/css/jsonTree.min.css"
"build": "./node_modules/uglify-es/bin/uglifyjs src/jsonTree.js --compress unused=false --mangle --output dist/js/jsonTree.min.js && uglifycss src/jsonTree.css > dist/css/jsonTree.min.css"
},
"repository": {
"type": "git",
Expand All @@ -19,13 +19,13 @@
"jsonTree",
"tree"
],
"author": "Max Leiter <[email protected]> (http://maxleiter.github.io/)",
"author": "Max Leiter <[email protected]> (https://maxleiter.com/)",
"license": "MIT",
"bugs": {
"url": "https://github.com/MaxLeiter/jsonTree/issues"
},
"devDependencies": {
"uglify-js": "^3.1.10",
"uglify-es": "3.1.10",
"uglifycss": "0.0.27"
}
}
107 changes: 44 additions & 63 deletions src/jsonTree.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,107 +3,88 @@
* jsonTree: A dependency-free lightweight vanilla Javascript library to display JSON in an HTML unordered list.
**/

var jsonTree = (function() {
class jsonTree {
/**
* json: URL for json file or a JSON object
* selector: the elements selector to apply the tree to
* depth: bool to add a "depth-#" class, can increase loading times
**/
return {
init: function(json, selector, depth) {
classList();

// It's not a URL, so let's skip the XMLHttpRequest
if (typeof json === "object") {
generateTree(selector, json);
classify(selector, depth);
} else {
var request = new XMLHttpRequest();
request.open("GET", json, true);
request.send();
request.addEventListener("load", function() {
generateTree(selector, JSON.parse(request.responseText));
classify(selector, depth);
});
}
constructor(json, selector, depth) {
// It's not a URL, so let's skip the XMLHttpRequest
if (typeof json === "object") {
this.generateTree(selector, json);
this.classify(selector, depth);
} else {
const request = new XMLHttpRequest();
request.open("GET", json, true);
request.send();
request.addEventListener("load", () => {
this.generateTree(selector, JSON.parse(request.responseText));
this.classify(selector, depth);
});
}
}

/* classList.js for old browsers */
function classList() {
/*! @source http://purl.eligrey.com/github/classList.js/blob/master/classList.js */
"document"in self&&("classList"in document.createElement("_")&&(!document.createElementNS||"classList"in document.createElementNS("http://www.w3.org/2000/svg","g"))||function(a){if("Element"in a){a=a.Element.prototype;var h=Object,l=String.prototype.trim||function(){return this.replace(/^\s+|\s+$/g,"")},n=Array.prototype.indexOf||function(c){for(var b=0,k=this.length;b<k;b++)if(b in this&&this[b]===c)return b;return-1},f=function(c,b){this.name=c;this.code=DOMException[c];this.message=b},e=function(c,
b){if(""===b)throw new f("SYNTAX_ERR","The token must not be empty.");if(/\s/.test(b))throw new f("INVALID_CHARACTER_ERR","The token must not contain space characters.");return n.call(c,b)},g=function(c){var b=l.call(c.getAttribute("class")||"");b=b?b.split(/\s+/):[];for(var k=0,e=b.length;k<e;k++)this.push(b[k]);this._updateClassName=function(){c.setAttribute("class",this.toString())}},d=g.prototype=[],m=function(){return new g(this)};f.prototype=Error.prototype;d.item=function(c){return this[c]||
null};d.contains=function(c){return!~e(this,c+"")};d.add=function(){var c=arguments,b=0,k=c.length,d=!1;do{var a=c[b]+"";~e(this,a)&&(this.push(a),d=!0)}while(++b<k);d&&this._updateClassName()};d.remove=function(){var c=arguments,b=0,d=c.length,a=!1,f;do{var g=c[b]+"";for(f=e(this,g);~f;)this.splice(f,1),a=!0,f=e(this,g)}while(++b<d);a&&this._updateClassName()};d.toggle=function(c,b){var a=this.contains(c),d=a?!0!==b&&"remove":!1!==b&&"add";if(d)this[d](c);return!0===b||!1===b?b:!a};d.replace=function(c,
b){var a=e(c+"");~a&&(this.splice(a,1,b),this._updateClassName())};d.toString=function(){return this.join(" ")};if(h.defineProperty){d={get:m,enumerable:!0,configurable:!0};try{h.defineProperty(a,"classList",d)}catch(c){if(void 0===c.number||-2146823252===c.number)d.enumerable=!1,h.defineProperty(a,"classList",d)}}else h.prototype.__defineGetter__&&a.__defineGetter__("classList",m)}}(self),function(){var a=document.createElement("_");a.classList.add("c1","c2");if(!a.classList.contains("c2")){var h=
function(a){var f=DOMTokenList.prototype[a];DOMTokenList.prototype[a]=function(a){var e,d=arguments.length;for(e=0;e<d;e++)a=arguments[e],f.call(this,a)}};h("add");h("remove")}a.classList.toggle("c3",!1);if(a.classList.contains("c3")){var l=DOMTokenList.prototype.toggle;DOMTokenList.prototype.toggle=function(a,f){return 1 in arguments&&!this.contains(a)===!f?f:l.call(this,a)}}"replace"in document.createElement("_").classList||(DOMTokenList.prototype.replace=function(a,f){var e=this.toString().split(" "),
g=e.indexOf(a+"");~g&&(e=e.slice(g),this.remove.apply(this,e),this.add(f),this.add.apply(this,e.slice(1)))});a=null}());
}

/** Generate the DOM elements for the tree**/
function generateTree(selector, json) {
var element = document.querySelector(selector);
generateTree(selector, json) {
const element = document.querySelector(selector);
element.classList.add("jsonTree");
element.innerHTML = json2html(json);
top = document.querySelectorAll("#top");
top.addEventListener("click", function(e) {
element.innerHTML = this.json2html(json);
const top = document.querySelector("[data-id=\"top\"]");
top.addEventListener("click", (e) => {
e.preventDefault();
if (e.target && e.target.nodeName.toUpperCase() === "LI") {
if (toArray(e.target.childNodes).length > 1) {
toggleClass(e.target, "selected");
if (Array.from(e.target.childNodes).length > 1) {
this.toggleClass(e.target, "selected");
}
}
});
}

function classify(selector, depth) {
applyClasses(selector, "li", "ul", depth);
applyClasses(selector, "ul", "li", depth);
classify(selector, depth) {
this.applyClasses(selector, "li", "ul", depth);
this.applyClasses(selector, "ul", "li", depth);
}

/** Applies classes to the element, including "parent" and "depth-#" **/
function applyClasses(selector, parent, child, depth) {
var parents = toArray(document.querySelectorAll(selector + " " + parent));
applyClasses(selector, parent, child, depth) {
const parents = Array.from(document.querySelectorAll(`${selector} ${parent}`));
parents.forEach(function(element){
var filter = toArray(element.children).filter(function(el) { return el.tagName.toLowerCase() === child.toLowerCase().toString(); });
if (filter.length > 0) { // It's a parent!
element.classList.add("parent");
element.style.cursor = "pointer";
} else {
element.style.cursor = "auto";
}
const filter = Array.from(element.children).filter((el) => el.tagName.toLowerCase() === child.toLowerCase().toString());
if (filter.length > 0) { // It's a parent!
element.classList.add("parent");
element.style.cursor = "pointer";
} else {
element.style.cursor = "auto";
}

// The amount of parents, "#top" is assigned by json2html
if (depth) {
var count = depth(element);
const count = depth(element);
element.classList.add("depth-" + count);
}
});
}

/** Returns the amount of parents of an element **/
function depth(ele) {
depth(ele) {
if (ele.parentNode && ele.parentNode.getAttribute("data-id") === "top") {
return ele == null ? 0 : 1 + depth(ele.parentNode);
} else {
return 0;
}
}

/** Converts HTMLCollection to array (for ease of use with functions like forEach) **/
function toArray(o) {
return Array.prototype.slice.call(o);
}

/** Returns a JSON file in HTML tokens **/
function json2html(json) {
var i, html = "";
json = htmlEscape(JSON.stringify(json));
json2html(json) {
let i, html = "";
json = this.htmlEscape(JSON.stringify(json));
json = JSON.parse(json);
html += "<ul data-id=\"top\">";
for (i in json) {
html += "<li>"+i+": ";
if (typeof json[i] === "object") {
html += json2html(json[i]);
html += this.json2html(json[i]);
}
else html += json[i];
html += "</li>";
Expand All @@ -113,8 +94,8 @@ var jsonTree = (function() {
}

/** To stop XSS attacks by using JSON with HTML nodes **/
function htmlEscape(str) {
var tagsToReplace = {
htmlEscape(str) {
const tagsToReplace = {
"&": "&amp;",
"<": "&lt;",
">": "&gt;"
Expand All @@ -125,10 +106,10 @@ var jsonTree = (function() {
}

/** Toggles an elements class **/
function toggleClass(el, className) {
toggleClass(el, className) {
if (el) {
el.classList.toggle(className);
}
}
})();
}

2 changes: 1 addition & 1 deletion test/test.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@
var button = document.querySelector("#exec");
button.addEventListener("click", function(e) {
e.preventDefault();
jsonTree.init(document.getElementById("json").value, "#example", false);
let tree = new jsonTree(document.getElementById("json").value, "#example", false);
});
document.getElementById("json").value = "https://raw.githubusercontent.com/KnightOS/knightos.org/gh-pages/documentation/reference/data.json";
</script>
Expand Down

0 comments on commit 6b1fc2d

Please sign in to comment.