From 15887a9e29b14653ed40148fdebbc961764de5b7 Mon Sep 17 00:00:00 2001
From: Sergio Eduardo Castro Ceballos
<72516762+SergioCasCeb@users.noreply.github.com>
Date: Wed, 3 Jan 2024 03:03:12 +0100
Subject: [PATCH] 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.
---
packages/web-new/src/scripts/console.js | 70 +++++++++++++++--------
packages/web-new/src/scripts/main.js | 20 +++++--
packages/web-new/src/scripts/visualize.js | 3 +-
packages/web-new/src/template.html | 2 +-
4 files changed, 63 insertions(+), 32 deletions(-)
diff --git a/packages/web-new/src/scripts/console.js b/packages/web-new/src/scripts/console.js
index 450314b3..90a83ad5 100644
--- 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
index 601bddd0..030d062a 100644
--- 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
index 1de3be7a..f04d2515 100644
--- 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
index 4a7e0bec..bb317ac9 100644
--- a/packages/web-new/src/template.html
+++ b/packages/web-new/src/template.html
@@ -226,7 +226,7 @@ Thing Description Playground - BETA Version
-