Merge pull request #3 from styopdev/tabs

Tabs

Author: styopdev

css/style.css

@@ -232,7 +232,7 @@ canvas {
     width: 30px;
     height: 30px;
     position: absolute;
-    top: 10px;
+    top: 50px;
     right: 20px;
     z-index: 99;
 }
@@ -467,6 +467,9 @@ select:not([multiple]) {
     margin: 0px auto;
     display: block;
 }
+#tree-json {
+    display: none;
+}
 .warning {
     display: flex;
     justify-content: center;
@@ -543,6 +546,33 @@ select:not([multiple]) {
                                     supported by Chrome and Opera */
 }
 
+.tabs {
+    text-align: left;
+}
+
+.tabs .tab {
+    width: 80px;
+    padding: 11px 0;
+    border: 1px solid #a6a6a6;
+    display: inline-block;
+    cursor: pointer;
+    border-bottom: 0px ;
+    text-align: center;
+}
+
+.tabs .tab:first-child {
+    border-top-left-radius: 5px;
+    border-right: 1px;
+}
+
+.tabs .tab:not(:first-child) {
+    margin-left: -4px;
+    border-top-right-radius: 5px;
+}
+
+.tabs .tab.active {
+    background-color: #ffffff;
+}
 .loading {
     display: none;
     position: absolute;

index.html

@@ -141,6 +141,10 @@
                         </div>
 
                         <div id="generated-tree" class="generated-tree">
+                            <div class="tabs">
+                                <a onclick="switchTab(this, 'image')" class="tab active">Image</a>
+                                <a onclick="switchTab(this, 'json')" class="tab">Json</a>
+                            </div>
                             <a class="back cp" title="Try again">
                                 <div class="back-bg"></div>
                                 <img src="./img/reload.png" class="back-image" alt="Go back" onclick="retry()">

js/script.js

@@ -109,7 +109,15 @@ function processFile(zip) {
     var canvasElement = document.createElement('canvas');
 
     canvasElement.setAttribute('id', 'tree-canvas');
+
+    var jsonElement = document.createElement('textarea');
+    jsonElement.setAttribute('id', 'tree-json');
+    jsonElement.style.width = '582px';
+    jsonElement.style.height = '600px';
+
     document.getElementById('generated-tree').appendChild(canvasElement);
+    document.getElementById('generated-tree').appendChild(jsonElement);
+
     document.getElementById('zone').style.display = 'none';
 
     var layout = document.getElementById("layout");
@@ -195,6 +203,22 @@ function readFile(file) {
     };
 }
 
+function switchTab(elem, tabName) {
+    document.querySelectorAll('.tabs .tab.active')
+            .forEach(tab => tab.classList.remove('active'));
+    elem.classList.add('active');
+
+    if (tabName === 'image') {
+        document.getElementById('tree-canvas').style.display = 'block';
+        document.getElementById('tree-json').style.display = 'none';
+    } else {
+        document.getElementById('tree-json').style.display = 'block';
+        document.getElementById('tree-canvas').style.display = 'none';
+
+        document.getElementById('tree-json').innerHTML = JSON.stringify(fileNamesTree, undefined, 4);
+    }
+}
+
 Dropzone.options.myAwesomeDropzone = {
     paramName: "file",
     maxFiles: 1,