';var s=i[t].firstChild;n[t]=function(){i[t].contains(s)&&i[t].removeChild(s)},r.appendChild(i[t]),function(e,t){var n=e.elements,o=n.sourceMainWrappers,r=n.sourceAnimationWrappers;r[t]=document.createElement("div"),o[t].appendChild(r[t])}(e,t)}function D(e,t,n,o){var i=document.createElementNS("http://www.w3.org/2000/svg","svg");i.setAttributeNS(null,"width",t),i.setAttributeNS(null,"height",t),i.setAttributeNS(null,"viewBox",n);var s=document.createElementNS("http://www.w3.org/2000/svg","path");return s.setAttributeNS(null,"class","".concat(r,"svg-path")),s.setAttributeNS(null,"d",o),i.appendChild(s),e.appendChild(i),i}function O(e,t){var n=document.createElement("div");return n.className="".concat(r,"toolbar-button ").concat(a),n.title=t,e.appendChild(n),n}function R(e){var t=e.props.sources,n=e.elements.container,o=document.createElement("div");o.className="".concat(r,"nav"),n.appendChild(o),function(e,t){var n=document.createElement("div");n.className="".concat(r,"toolbar"),t.appendChild(n),function(e,t){var n=e.componentsServices,o=e.core.fullscreenToggler,r=e.data,i="M4.5 11H3v4h4v-1.5H4.5V11zM3 7h1.5V4.5H7V3H3v4zm10.5 6.5H11V15h4v-4h-1.5v2.5zM11 3v1.5h2.5V7H15V3h-4z",s=O(t);s.title="Enter fullscreen";var c=D(s,"20px","0 0 18 18",i);n.enterFullscreen=function(){r.isFullscreenOpen=!0,s.title="Exit fullscreen",c.setAttributeNS(null,"width","24px"),c.setAttributeNS(null,"height","24px"),c.setAttributeNS(null,"viewBox","0 0 950 1024"),c.firstChild.setAttributeNS(null,"d","M682 342h128v84h-212v-212h84v128zM598 810v-212h212v84h-128v128h-84zM342 342v-128h84v212h-212v-84h128zM214 682v-84h212v212h-84v-128h-128z")},n.exitFullscreen=function(){r.isFullscreenOpen=!1,s.title="Enter fullscreen",c.setAttributeNS(null,"width","20px"),c.setAttributeNS(null,"height","20px"),c.setAttributeNS(null,"viewBox","0 0 18 18"),c.firstChild.setAttributeNS(null,"d",i)},s.onclick=function(){r.isFullscreenOpen?o.exitFullscreen():o.enterFullscreen()}}(e,n),function(e,t){var n=O(t,"Close");n.onclick=e.core.lightboxCloser.closeLightbox,D(n,"20px","0 0 24 24","M 4.7070312 3.2929688 L 3.2929688 4.7070312 L 10.585938 12 L 3.2929688 19.292969 L 4.7070312 20.707031 L 12 13.414062 L 19.292969 20.707031 L 20.707031 19.292969 L 13.414062 12 L 20.707031 4.7070312 L 19.292969 3.2929688 L 12 10.585938 L 4.7070312 3.2929688 z")}(e,n)}(e,o),t.length>1&&function(e,t){var n=e.componentsServices,o=e.props.sources,i=(e.stageIndexes,document.createElement("div"));i.className="".concat(r,"slide-number-container");var s=document.createElement("div");s.className=a;var c=document.createElement("span");n.setSlideNumber=function(e){return c.innerHTML=e};var l=document.createElement("span");l.className="".concat(r,"slash");var u=document.createElement("div");u.innerHTML=o.length,i.appendChild(s),s.appendChild(c),s.appendChild(l),s.appendChild(u),t.appendChild(i),setTimeout((function(){s.offsetWidth>55&&(i.style.justifyContent="flex-start")}))}(e,o)}function j(e,t){var n=this,o=e.elements.sourceMainWrappers,r=e.props,i=0;this.byValue=function(e){return i=e,n},this.negative=function(){s(-c())},this.zero=function(){s(0)},this.positive=function(){s(c())};var s=function(e){o[t].style.transform="translateX(".concat(e+i,"px)"),i=0},c=function(){return(1+r.slideDistance)*innerWidth}}function X(e,t,n,o){var r=e.elements.container,i=n.charAt(0).toUpperCase()+n.slice(1),s=document.createElement("div");s.className="".concat(f," ").concat(f,"-").concat(n),s.title="".concat(i," slide"),s.onclick=t,function(e,t){var n=document.createElement("div");n.className="".concat(p," ").concat(a),D(n,"20px","0 0 20 20",t),e.appendChild(n)}(s,o),r.appendChild(s)}function B(e,t){var n=e.classList;n.contains(t)&&n.remove(t)}function V(e){var t=this,n=e.core,o=n.eventsDispatcher,r=n.fullscreenToggler,i=n.globalEventsController,s=n.scrollbarRecompensor,c=e.data,a=e.elements,u=e.props,d=e.sourcePointerProps;this.isLightboxFadingOut=!1,this.runActions=function(){t.isLightboxFadingOut=!0,a.container.classList.add(v),i.removeListeners(),u.exitFullscreenOnClose&&c.isFullscreenOpen&&r.exitFullscreen(),setTimeout((function(){t.isLightboxFadingOut=!1,d.isPointering=!1,a.container.classList.remove(v),document.documentElement.classList.remove(l),s.removeRecompense(),document.body.removeChild(a.container),o.dispatch("onClose")}),270)}}function U(e){var t=e.core,n=t.lightboxCloser,o=t.fullscreenToggler,r=t.slideChangeFacade;this.listener=function(e){switch(e.key){case"Escape":n.closeLightbox();break;case"ArrowLeft":r.changeToPrevious();break;case"ArrowRight":r.changeToNext();break;case"F11":e.preventDefault(),o.enterFullscreen()}}}function _(e){var t=e.collections.sourceMainWrappersTransformers,n=e.elements,o=e.sourcePointerProps,r=e.stageIndexes;function i(e,n){t[e].byValue(o.swipedX)[n]()}this.runActionsForEvent=function(e){var t,c,a;n.container.contains(n.slideSwipingHoverer)||n.container.appendChild(n.slideSwipingHoverer),t=n.container,c=s,(a=t.classList).contains(c)||a.add(c),o.swipedX=e.screenX-o.downScreenX,i(r.current,"zero"),void 0!==r.previous&&o.swipedX>0?i(r.previous,"negative"):void 0!==r.next&&o.swipedX<0&&i(r.next,"positive")}}function q(e){var t=e.props.sources,n=e.resolve,o=e.sourcePointerProps,r=n(_);1===t.length?this.listener=function(){o.swipedX=1}:this.listener=function(e){o.isPointering&&r.runActionsForEvent(e)}}function Y(e){var t=e.collections.sourceMainWrappersTransformers,n=e.core.slideIndexChanger,o=e.elements.sourceMainWrappers,r=e.stageIndexes;this.runPositiveSwipedXActions=function(){void 0===r.previous||(i("positive"),n.changeTo(r.previous)),i("zero")},this.runNegativeSwipedXActions=function(){void 0===r.next||(i("negative"),n.changeTo(r.next)),i("zero")};var i=function(e){o[r.current].classList.add(u),t[r.current][e]()}}function J(e,t){e.contains(t)&&e.removeChild(t)}function G(e){var t=e.core.lightboxCloser,n=e.elements,o=e.resolve,r=e.sourcePointerProps,i=o(Y);this.runNoSwipeActions=function(){J(n.container,n.slideSwipingHoverer),r.isSourceDownEventTarget||t.closeLightbox(),r.isPointering=!1},this.runActions=function(){r.swipedX>0?i.runPositiveSwipedXActions():i.runNegativeSwipedXActions(),J(n.container,n.slideSwipingHoverer),n.container.classList.remove(s),r.isPointering=!1}}function $(e){var t=e.resolve,n=e.sourcePointerProps,o=t(G);this.listener=function(){n.isPointering&&(n.swipedX?o.runActions():o.runNoSwipeActions())}}function K(e){var t,n,o;n=(t=e).core.classFacade,o=t.elements,n.removeFromEachElementClassIfContains=function(e,t){for(var n=0;n
25 |
111 |
114 |
115 |
116 |
117 |
118 |
119 |
120 |
121 |
122 |
--------------------------------------------------------------------------------
/public/authentication/sign-up.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
26 |
27 |
109 |
110 |
30 |
108 |
31 |
32 |
106 |
107 |
33 |
34 |
102 |
103 |
104 |
105 |
22 |
23 |
125 |
126 |
127 |
128 |
129 |
130 |
131 |
132 |
133 |
--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
24 |
25 |
123 |
124 |
26 |
27 |
122 |
28 |
29 |
121 |
30 |
31 |
118 |
119 |
120 |
16 |
17 |
278 |
279 |
280 |
281 |
282 |
283 |
284 |
285 |
286 |
287 |
309 |
310 |
311 |
--------------------------------------------------------------------------------
/public/main.js:
--------------------------------------------------------------------------------
1 | "use strict";
2 | // dom elements
3 | const validJson = document.getElementById("valid_json");
4 | const invalidJson = document.getElementById("invalid_json");
5 | const jsonInput = document.getElementById("json_input");
6 | const mainElement = document.getElementById("mainEl");
7 |
8 | jsonInput.addEventListener("keyup", function() {
9 | //check if there is data first
10 | if (this.value.trim() !== "") {
11 | //check if json is valid json
12 | try {
13 | JSON.parse(this.value);
14 | } catch (error) {
15 | validJson.classList.add("hidden");
16 | invalidJson.classList.remove("hidden");
17 | return;
18 | }
19 | ///////////////////////solve the problem////////////////////////////////
20 | const tree = JSONCracker(JSON.parse(this.value));
21 | treeTOhtml(tree);
22 | } else {
23 | mainElement.innerHTML = "";
24 | }
25 | //make json valid otherwise
26 | invalidJson.classList.add("hidden");
27 | validJson.classList.remove("hidden");
28 | });
29 |
30 | function JSONCracker(object) {
31 | // get the element type
32 | function typeOfElement(element, strictComparison = false) {
33 | if (strictComparison && Array.isArray(element)) return "array";
34 | if (typeof element === "object" && element !== null) return "object";
35 | else return "primitive";
36 | }
37 | // get the chosen data type or filter object
38 | function getDataType(object, type, strict) {
39 | const result = {};
40 | for (const key in object) {
41 | const element = object[key];
42 | const exceptions = key !== "parent" && key !== "type" && key !== "title";
43 | if (typeOfElement(element, strict) === type && exceptions) {
44 | result[key] = element;
45 | }
46 | }
47 | if (!Object.keys(result).length) return false;
48 | return result;
49 | }
50 | // set infos (give childs name of parent)
51 | function setInfos(object, parent) {
52 | for (const key in object) {
53 | const element = object[key];
54 | if (typeOfElement(element) === "object") {
55 | element["parent"] = parent;
56 | element["type"] = typeOfElement(element, true);
57 | // element["title"] = key;
58 | }
59 | }
60 | }
61 | // insialize empty tree and depth counters
62 | const tree = {};
63 | let i = 1;
64 | let j = 1;
65 | //main function to build tree object
66 | function main(object) {
67 | // happend at the first time
68 | if (i === 1) {
69 | setInfos(object, "1.1");
70 | tree["1"] = {
71 | 1.1: {
72 | values: getDataType(object, "primitive"),
73 | },
74 | };
75 | i++;
76 | object = getDataType(object, "object");
77 | }
78 | if (object) {
79 | let obj2 = {};
80 | tree[i] = {};
81 | for (const key in object) {
82 | const ij = i + "." + j;
83 | const element = object[key];
84 | if (getDataType(element, "object")) {
85 | const helper = getDataType(element, "object");
86 | for (const key1 in helper) {
87 | [obj2[key1]] = Object.values(helper);
88 | }
89 | }
90 | let values = getDataType(element, "primitive");
91 | setInfos(element, ij);
92 | tree[i][ij] = {
93 | parent: element.parent,
94 | title: key,
95 | values: values,
96 | type: element.type,
97 | };
98 | j++;
99 | }
100 | j = 1;
101 | i++;
102 | if (Object.values(obj2).length) main(obj2);
103 | }
104 | }
105 | //invoke main
106 | main(object);
107 | console.log(tree);
108 | return tree;
109 | }
110 |
111 | function treeTOhtml(tree) {
112 | // create layers: 5
113 | mainElement.innerHTML = "";
114 | for (const key1 in tree) {
115 | const element = tree[key1];
116 | mainElement.insertAdjacentHTML(
117 | "beforeend",
118 | ``
119 | );
120 | const layer = document.getElementById(key1);
121 | for (const key2 in element) {
122 | const ele = element[key2];
123 | layer.insertAdjacentHTML(
124 | "beforeend",
125 | ``
126 | );
127 | const subLayer = document.getElementById(key2);
128 | if (key1 > 1) {
129 | subLayer.insertAdjacentHTML(
130 | "beforeend",
131 | `
18 |
19 |
124 |
21 |
22 |
116 |
24 |
25 |
99 |
100 |
101 |
26 |
27 |
97 |
98 |
28 |
29 |
95 |
96 |
30 |
31 |
44 |
45 | 
47 |
49 |
50 |
51 |
52 |
87 |
88 |
89 |
47 |
49 |
50 |
51 |
90 | Sign In
92 |
93 |
94 |
102 |
103 |
115 |
104 |
105 | Seamlessly visualize your JSON data
111 | Json Map
112 |
113 |
114 | Seamlessly visualize your JSON data
instantly into graphs.
106 |
108 | Json Map
109 |
110 |
111 | Json Map
112 |
113 |
117 |
122 |
123 |
125 |
126 |
169 |
127 |
167 |
168 |
128 |
129 |
165 |
166 |
133 |
134 |
141 |
152 |
163 |
164 |
135 | 
136 |
137 |
136 |
138 |
139 |
140 |
139 |
170 |
171 |
221 |
172 |
173 |
219 |
220 |
174 |
175 |
182 | Our Great Team
176 |It’s no doubt that when a development takes longer to complete,
177 | additional costs to
178 |
integrate and test each extra feature creeps up and haunts most of us. 179 |
180 |
181 | integrate and test each extra feature creeps up and haunts most of us. 179 |
183 |
184 |
217 |
218 |
189 |
190 |
191 |
192 |
203 |
215 |
216 |
222 |
223 |
267 |
224 |
229 |
230 |
231 |
232 |
266 |
233 |
234 |
235 |
236 |
237 |
238 |
239 |
264 |
265 |
240 |
241 |
262 |
263 |
242 |
243 |
244 |
245 |
246 | © 2022 Json Map
247 |
248 |
249 |
260 |
261 |
245 |
246 | © 2022 Json Map
247 |
248 |
268 |
276 |
277 | ${ele.title}
`
132 | );
133 | }
134 | subLayer.insertAdjacentHTML(
135 | "beforeend",
136 | ``
137 | );
138 | const valuesList = document.querySelectorAll(`.values`);
139 | const values = valuesList[valuesList.length - 1];
140 | //check if box is empty and make it circul
141 | if (ele.values) values.classList.remove("circle");
142 | for (const key3 in ele.values) {
143 | const el = ele.values[key3];
144 | // color data based of types
145 | let valueColor = "";
146 | if (typeof el === "string" || el === null)
147 | valueColor = "text-[#dcddde]";
148 | if (typeof el === "boolean") valueColor = "text-purple-900";
149 | if (typeof el === "number") valueColor = "text-[#fd0079]";
150 | if (el === true) valueColor = "text-[#46c46e]";
151 | if (el === false) valueColor = "text-[#db662e]";
152 | values.insertAdjacentHTML(
153 | "beforeend",
154 | `${key3} : ${el}
` 155 | ); 156 | } 157 | } 158 | } 159 | } 160 | 161 | async function newFile(){ 162 | const input = document.createElement('input'); 163 | input.style.visibility = 'hidden'; 164 | input.type = 'file'; 165 | input.onchange = e => { 166 | // getting a hold of the file reference 167 | const file = e.target.files[0]; 168 | // setting up the reader 169 | const reader = new FileReader(); 170 | reader.readAsText(file,'UTF-8'); 171 | // here we tell the reader what to do when it's done reading... 172 | reader.onload = readerEvent => { 173 | let content = readerEvent.target.result; // this is the content! 174 | document.getElementById('json_input').value = content; 175 | try { 176 | JSON.parse(content); 177 | } catch (error) { 178 | validJson.classList.add("hidden"); 179 | invalidJson.classList.remove("hidden"); 180 | return; 181 | } 182 | const tree = JSONCracker(JSON.parse(content)); 183 | treeTOhtml(tree); 184 | invalidJson.classList.add("hidden"); 185 | validJson.classList.remove("hidden"); 186 | } 187 | 188 | } 189 | input.click(); 190 | } 191 | 192 | function deleteJsonContent() 193 | { 194 | document.getElementById('json_input').value = ''; 195 | invalidJson.classList.add("hidden"); 196 | validJson.classList.remove("hidden"); 197 | } 198 | -------------------------------------------------------------------------------- /public/map.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 |