diff --git a/dist/js/jsonTree.min.js b/dist/js/jsonTree.min.js index 82d6dcc..b5d6966 100644 --- a/dist/js/jsonTree.min.js +++ b/dist/js/jsonTree.min.js @@ -1 +1 @@ -var jsonTree=function(){function t(){"document"in self&&("classList"in document.createElement("_")&&(!document.createElementNS||"classList"in document.createElementNS("http://www.w3.org/2000/svg","g"))||function(t){if("Element"in t){t=t.Element.prototype;var e=Object,n=String.prototype.trim||function(){return this.replace(/^\s+|\s+$/g,"")},i=Array.prototype.indexOf||function(t){for(var e=0,n=this.length;e1&&(console.log("yeah"),c(t.target,"selected"))})}function n(t,e){i(t,"li","ul",e),i(t,"ul","li",e)}function i(t,e,n,i){o(document.querySelectorAll(t+" "+e)).forEach(function(t){if(o(t.children).filter(function(t){return t.tagName.toLowerCase()===n.toLowerCase().toString()}).length>0?(t.classList.add("parent"),t.style.cursor="pointer"):t.style.cursor="auto",i){var e=i(t);t.classList.add("depth-"+e)}})}function r(t){return t.parentNode&&"top"===t.parentNode.getAttribute("data-id")?null==t?0:1+r(t.parentNode):0}function o(t){return Array.prototype.slice.call(t)}function s(t){var e,n="";t=a(JSON.stringify(t)),t=JSON.parse(t),n+='"}function a(t){var e={"&":"&","<":"<",">":">"};return t.replace(/[&<>]/g,function(t){return e[t]||t})}function c(t,e){t&&t.classList.toggle(e)}return{init:function(i,r,o){if(t(),"object"==typeof i)e(r,i),n(r,o);else{var s=new XMLHttpRequest;s.open("GET",i,!0),s.send(),s.addEventListener("load",function(){e(r,JSON.parse(s.responseText)),n(r,o)})}}}}(); \ No newline at end of file +class jsonTree{constructor(e,t,s){if("object"==typeof e)this.generateTree(t,e),this.classify(t,s);else{const r=new XMLHttpRequest;r.open("GET",e,!0),r.send(),r.addEventListener("load",()=>{this.generateTree(t,JSON.parse(r.responseText)),this.classify(t,s)})}}generateTree(e,t){const s=document.querySelector(e);s.classList.add("jsonTree"),s.innerHTML=this.json2html(t);const r=document.querySelector('[data-id="top"]');r.addEventListener("click",e=>{e.preventDefault(),e.target&&"LI"===e.target.nodeName.toUpperCase()&&Array.from(e.target.childNodes).length>1&&this.toggleClass(e.target,"selected")})}classify(e,t){this.applyClasses(e,"li","ul",t),this.applyClasses(e,"ul","li",t)}applyClasses(e,t,s,r){const a=Array.from(document.querySelectorAll(`${e} ${t}`));a.forEach(function(e){const t=Array.from(e.children).filter(e=>e.tagName.toLowerCase()===s.toLowerCase().toString());if(t.length>0?(e.classList.add("parent"),e.style.cursor="pointer"):e.style.cursor="auto",r){const t=r(e);e.classList.add("depth-"+t)}})}depth(e){return e.parentNode&&"top"===e.parentNode.getAttribute("data-id")?null==e?0:1+depth(e.parentNode):0}json2html(e){let t,s="";e=this.htmlEscape(JSON.stringify(e)),e=JSON.parse(e),s+='"}htmlEscape(e){const t={"&":"&","<":"<",">":">"};return e.replace(/[&<>]/g,function(e){return t[e]||e})}toggleClass(e,t){e&&e.classList.toggle(t)}} \ No newline at end of file diff --git a/package.json b/package.json index 6396530..c2db066 100644 --- a/package.json +++ b/package.json @@ -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", @@ -19,13 +19,13 @@ "jsonTree", "tree" ], - "author": "Max Leiter (http://maxleiter.github.io/)", + "author": "Max Leiter (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" } } diff --git a/src/jsonTree.js b/src/jsonTree.js index 1f47228..83e98c8 100644 --- a/src/jsonTree.js +++ b/src/jsonTree.js @@ -3,85 +3,71 @@ * 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 { 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 { @@ -89,21 +75,16 @@ var jsonTree = (function() { } } - /** 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 += "
    "; for (i in json) { html += "
  • "+i+": "; if (typeof json[i] === "object") { - html += json2html(json[i]); + html += this.json2html(json[i]); } else html += json[i]; html += "
  • "; @@ -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 = { "&": "&", "<": "<", ">": ">" @@ -125,10 +106,10 @@ var jsonTree = (function() { } /** Toggles an elements class **/ - function toggleClass(el, className) { + toggleClass(el, className) { if (el) { el.classList.toggle(className); } } -})(); +} diff --git a/test/test.html b/test/test.html index 846514e..0e90751 100644 --- a/test/test.html +++ b/test/test.html @@ -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";