Auto expand console when clicking on it

The console now auto expands when the console is minimized and the user click on one of the console options.
eclipse-thingweb · Jan 3, 2024 · 15887a9 · 15887a9
1 parent f9fe7f6
commit 15887a9
Show file tree

Hide file tree

Showing 4 changed files with 63 additions and 32 deletions.
diff --git a/packages/web-new/src/scripts/console.js b/packages/web-new/src/scripts/console.js
@@ -23,7 +23,7 @@ import { openApiTab, openApiJsonBtn, openApiYamlBtn, openApiView } from './open-
 import { asyncApiTab, asyncApiJsonBtn, asyncApiYamlBtn, asyncApiView } from './async-api'
 import { AASView } from './aas'
 import { defaultsView, defaultsJsonBtn, defaultsYamlBtn, defaultsAddBtn } from './defaults'
-import { visualize, visualizeTab } from './visualize'
+import { visualize } from './visualize'
 import { validationView, validationTab } from './validation'
 import { convertTDYamlToJson, detectProtocolSchemes } from '../../../core/dist/web-bundle.min.js'
 import { generateOAP, generateAAP, addDefaultsUtil, validate, generateAAS, resetValidationStatus } from './util'
@@ -40,38 +40,56 @@ const errorTxt = document.querySelector(".console-error__txt")
 export const minMaxBtn = document.querySelector(".min-max")
 export const visualizationOptions = document.querySelectorAll(".visualizations__option")
 export const visualizationContainers = document.querySelectorAll(".console-view")
-const consoleElement = document.querySelector(".console")
+export const consoleElement = document.querySelector(".console")
 const mainContentElement = document.querySelector(".main-content")
 
-minMaxBtn.addEventListener("click", () => {
+/**
+ * Hides the text from the left control panel, updates the state of the console element
+ * and adjusts the console size as well as the expand/collapse icon
+ */
+function expandConsole() {
+    textIcon.forEach(text => {
+        text.classList.add("hiddenV")
+    })
 
-    if (minMaxBtn.children[0].classList.contains("fa-down-left-and-up-right-to-center")) {
-        mainContentElement.style.flex = "1 0"
-        consoleElement.style.flex = `0 39px`
-        minMaxBtn.children[0].classList.remove("fa-down-left-and-up-right-to-center")
-        minMaxBtn.children[0].classList.add("fa-up-right-and-down-left-from-center")
+    consoleElement.classList.remove("collapsed")
+    consoleElement.classList.add("expanded")
 
-        textIcon.forEach(text => {
-            text.classList.remove("hiddenV")
-        })
-    } else {
-        textIcon.forEach(text => {
-            text.classList.add("hiddenV")
-        })
+    setTimeout(() => {
+        mainContentElement.style.flex = "0 210px"
+        consoleElement.style.flex = `1 0`
+        minMaxBtn.children[0].classList.add("fa-down-left-and-up-right-to-center")
+        minMaxBtn.children[0].classList.remove("fa-up-right-and-down-left-from-center")
+    }, 100);
+}
+
+/**
+ * Shows the text from the left control panel, updates the state of the console element
+ * and adjusts the console size as well as the expand/collapse icon
+ */
+function collapseConsole() {
+    consoleElement.classList.remove("expanded")
+    consoleElement.classList.add("collapsed")
 
-        setTimeout(() => {
-            mainContentElement.style.flex = "0 210px"
-            consoleElement.style.flex = `1 0`
-            minMaxBtn.children[0].classList.add("fa-down-left-and-up-right-to-center")
-            minMaxBtn.children[0].classList.remove("fa-up-right-and-down-left-from-center")
+    mainContentElement.style.flex = "1 0"
+    consoleElement.style.flex = `0 39px`
+    minMaxBtn.children[0].classList.remove("fa-down-left-and-up-right-to-center")
+    minMaxBtn.children[0].classList.add("fa-up-right-and-down-left-from-center")
 
-            if (visualizeTab.checked === true) {
-                visualizeTab.click()
-            }
-        }, 100);
+    textIcon.forEach(text => {
+        text.classList.remove("hiddenV")
+    })
+}
+
+minMaxBtn.addEventListener("click", () => {
+    if (consoleElement.classList.contains("expanded")) {
+        collapseConsole()
+    } else {
+        expandConsole()
     }
 })
 
+
 /**
  * Unchecks all visualization btns and hides all visualization containers
  */
@@ -104,6 +122,9 @@ function clearVisualizationEditors() {
 //Set the behavior for each visualization tab when clicked on it
 visualizationOptions.forEach(option => {
     option.addEventListener("click", () => {
+        if(consoleElement.classList.contains("collapsed")){
+            expandConsole()
+        }
         clearVisualizationEditors()
         visualizationContainers.forEach(container => {
             container.classList.add("hidden")
@@ -123,6 +144,7 @@ visualizationOptions.forEach(option => {
                     } else {
                         switch (option.id) {
                             case "open-api-tab":
+
                                 if (fileType === "yaml") {
                                     openApiJsonBtn.disabled = false
                                     openApiYamlBtn.disabled = true

diff --git a/packages/web-new/src/scripts/main.js b/packages/web-new/src/scripts/main.js
@@ -20,13 +20,13 @@
  * to integrate the monaco editor
  */
 
-import { visualizeTab } from './visualize'
+import './visualize'
 import './editor'
 import './json-yaml'
 import './settings-menu'
 import './save-menu'
 import './examples-menu'
-import {minMaxBtn} from './console'
+import { minMaxBtn, consoleElement } from './console'
 import './open-api'
 import './async-api'
 import './aas'
@@ -168,9 +168,15 @@ function onmousemoveY(e) {
       if(h > 38){
         minMaxBtn.children[0].classList.add("fa-down-left-and-up-right-to-center")
         minMaxBtn.children[0].classList.remove("fa-up-right-and-down-left-from-center")
+
+        consoleElement.classList.remove("collapsed")
+        consoleElement.classList.add("expanded")
       }else{
         minMaxBtn.children[0].classList.remove("fa-down-left-and-up-right-to-center")
         minMaxBtn.children[0].classList.add("fa-up-right-and-down-left-from-center")
+
+        consoleElement.classList.remove("expanded")
+        consoleElement.classList.add("collapsed")
       }
 
       if (h < 445) {
@@ -188,9 +194,15 @@ function onmousemoveY(e) {
       if(h < 714){
         minMaxBtn.children[0].classList.add("fa-down-left-and-up-right-to-center")
         minMaxBtn.children[0].classList.remove("fa-up-right-and-down-left-from-center")
+
+        consoleElement.classList.remove("collapsed")
+        consoleElement.classList.add("expanded")
       }else{
         minMaxBtn.children[0].classList.remove("fa-down-left-and-up-right-to-center")
         minMaxBtn.children[0].classList.add("fa-up-right-and-down-left-from-center")
+
+        consoleElement.classList.remove("expanded")
+        consoleElement.classList.add("collapsed")
       }
 
       if (h < 310) {
@@ -212,8 +224,4 @@ function onmouseupY(e) {
   document.removeEventListener("mousemove", onmousemoveY)
   document.removeEventListener("mouseup", onmouseupY)
   delete e.clientY
-
-  if(visualizeTab.checked === true){
-    visualizeTab.click()
-  }
 }
diff --git a/packages/web-new/src/scripts/visualize.js b/packages/web-new/src/scripts/visualize.js
@@ -54,7 +54,8 @@ export function visualize(editorValue) {
         treeInputs.classList.add("hidden")
         //Run the jsonld visualization
         jsonldVis(editorValue, "#visualized", {
-            h: document.getElementById("visualize-container").offsetHeight - 30,
+            // h: document.getElementById("visualize-container").offsetHeight - 30,
+            h: 450,
             w: document.getElementById("visualize-container").offsetWidth - 20,
             maxLabelWidth: 200,
             scalingFactor: 5,

diff --git a/packages/web-new/src/template.html b/packages/web-new/src/template.html
@@ -226,7 +226,7 @@ <h1>Thing Description Playground <span>- BETA Version</span></h1>
                 </div>
             </div>
             <div class="horizontal-divider"></div>
-            <div class="console">
+            <div class="console expanded">
                 <div class="console__tabs">
                     <div class="visualizations">
                         <input type="radio" name="visualizations-option" id="validation-tab"