Skip to content

Commit

Permalink
New tab deletion handle
Browse files Browse the repository at this point in the history 
Show a cancel or confirm prompt when a user tries to close a tab/editor
  • Loading branch information
@SergioCasCeb
SergioCasCeb committed Oct 13, 2023
1 parent 2783c6f commit ac2c0fc
Show file tree
Hide file tree
Showing 7 changed files with 191 additions and 47 deletions.
3 changes: 1 addition & 2 deletions packages/web-new/src/scripts/aas.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@

import { editor } from 'monaco-editor'
import { setFontSize, editorForm, fontSizeSlider } from './settings-menu'
import { generateTD, offerFileDownload } from './util'
import { offerFileDownload } from './util'
import { getEditorData } from './editor'

/******************************************************************/
Expand All @@ -31,7 +31,6 @@ import { getEditorData } from './editor'

//AAS Elements
export const AASTab = document.querySelector(".aas-tab-btn")
export const AASJsonBtn = document.querySelector("#aas-json")
export const AASView = document.querySelector("#aas-view")
const AASDownload = document.querySelector("#aas-download")

Expand Down
2 changes: 1 addition & 1 deletion packages/web-new/src/scripts/console.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@

import { openApiTab, openApiJsonBtn, openApiYamlBtn, openApiView } from './open-api'
import { asyncApiTab, asyncApiJsonBtn, asyncApiYamlBtn, asyncApiView } from './async-api'
import { AASJsonBtn, AASView } from './aas'
import { AASView } from './aas'
import { defaultsView, defaultsJsonBtn, defaultsYamlBtn, defaultsAddBtn } from './defaults'
import { visualize } from './visualize'
import { validationView } from './validation'
Expand Down
104 changes: 68 additions & 36 deletions packages/web-new/src/scripts/editor.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -97,21 +97,81 @@ function createTab(tabNumber, exampleName, thingType) {
closeIcon.classList.add("fa-solid", "fa-xmark")

closeBtn.appendChild(closeIcon)

//Create the close confirmation btns
const confirmBtns = document.createElement("div")
confirmBtns.classList.add("confirm-btns", "hidden")

const confirmTabClose = document.createElement("button")
confirmTabClose.classList.add("confirm-tab-close")
confirmTabClose.textContent = "Close"
const confirmTabIcon = document.createElement("i")
confirmTabIcon.classList.add("fa-solid", "fa-check")
confirmTabClose.appendChild(confirmTabIcon)

const cancelTabClose = document.createElement("button")
cancelTabClose.classList.add("cancel-tab-close")
cancelTabClose.textContent = "Cancel"
const cancelTabIcon = document.createElement("i")
cancelTabIcon.classList.add("fa-solid", "fa-xmark")
cancelTabClose.appendChild(cancelTabIcon)

cancelTabClose.addEventListener("click", () => {
cancelTabClose.parentElement.classList.add("hidden")
})

confirmBtns.appendChild(confirmTabClose)
confirmBtns.appendChild(cancelTabClose)

newTab.appendChild(tabIcon)
newTab.appendChild(tabContent)
newTab.appendChild(closeBtn)
newTab.appendChild(confirmBtns)

//Insert the newly created list at the end of the tab container but before the add new tab button
tabsLeftContainer.insertBefore(newTab, tabsLeftContainer.children[(tabsLeftContainer.children.length) - 1])
tabsLeft = document.querySelectorAll(".ide__tabs__left li:not(:last-child)")

//Once the new tab is created remove "active class from all other tab" as well as the
//contenteditable attribute and give the class "active to the new tab"
//Once the new tab is created remove "active class from all other tab"
//and give the class "active to the new tab"
tabsLeft.forEach(tab => {
tab.classList.remove("active")
tab.children[0].removeAttribute("contenteditable")
})
newTab.classList.add("active")

confirmTabClose.addEventListener("click", () => {
//If there is only one tab and its closed create a completely editor and tab and restart the counter
//If not the last one adjust the styling accordingly and update the amount of tabs
if (tabsLeft.length == 1) {
ideCount.ideNumber = 0
editorList.forEach(ide => {
if (confirmTabClose.parentElement.parentElement.dataset.tabId === ide["_domElement"].dataset.ideId) {
//remove the editor from the editor list array and from the DOM
const index = editorList.indexOf(ide)
editorList.splice(index, 1)
ide["_domElement"].remove()
}
})
//remove tab
confirmTabClose.parentElement.parentElement.remove()
//create new tab
createIde(++ideCount.ideNumber)
jsonBtn.checked = true
}
else {
editorList.forEach(ide => {
if (confirmTabClose.parentElement.parentElement.dataset.tabId === ide["_domElement"].dataset.ideId) {
const index = editorList.indexOf(ide)
editorList.splice(index, 1)
ide["_domElement"].remove()
}
})
confirmTabClose.parentElement.parentElement.remove()
tabsLeft = document.querySelectorAll(".ide__tabs__left li:not(:last-child)")
tabsLeft[0].classList.add("active")
editorList[0]["_domElement"].classList.add("active")
}
})
}

/**
Expand Down Expand Up @@ -333,14 +393,16 @@ tabsLeftContainer.addEventListener("click", (e) => {
//getting the initial target
const selectedElement = e.target
clearConsole()
tabsLeft.forEach(tab => {
tab.children[3].classList.add("hidden")
})

//Add the active styling when tab is clicked
if (selectedElement.id == "tab" || selectedElement.parentElement.id == "tab") {

//Removing the active style from all tabs and contenteditable attribute
//Removing the active style from all tabs
tabsLeft.forEach(tab => {
tab.classList.remove("active")
tab.children[0].removeAttribute("contenteditable")
})
//removing the active style from all editors
editorList.forEach(ide => {
Expand Down Expand Up @@ -375,37 +437,7 @@ tabsLeftContainer.addEventListener("click", (e) => {

//Closing tabs only when the click event happens on the close icon of the tab
if (selectedElement.className == "close-tab" && tabsLeft.length >= 1) {
//If there is only one tab and its closed create a completely editor and tab and restart the counter
//If not the last one adjust the styling accordingly and update the amount of tabs
if (tabsLeft.length == 1) {
ideCount.ideNumber = 0
editorList.forEach(ide => {
if (selectedElement.parentElement.dataset.tabId === ide["_domElement"].dataset.ideId) {
//remove the editor from the editor list array and from the DOM
const index = editorList.indexOf(ide)
editorList.splice(index, 1)
ide["_domElement"].remove()
}
})
//remove tab
selectedElement.parentElement.remove()
//create new tab
createIde(++ideCount.ideNumber)
jsonBtn.checked = true
}
else {
editorList.forEach(ide => {
if (selectedElement.parentElement.dataset.tabId === ide["_domElement"].dataset.ideId) {
const index = editorList.indexOf(ide)
editorList.splice(index, 1)
ide["_domElement"].remove()
}
})
selectedElement.parentElement.remove()
tabsLeft = document.querySelectorAll(".ide__tabs__left li:not(:last-child)")
tabsLeft[0].classList.add("active")
editorList[0]["_domElement"].classList.add("active")
}
selectedElement.nextElementSibling.classList.remove("hidden")
}

findFileType()
Expand Down
65 changes: 63 additions & 2 deletions packages/web-new/src/styles/_editor.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,8 @@
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
justify-content: flex-start;
gap: 1rem;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
background-color: var(--clr-shades-trans);
Expand Down Expand Up @@ -85,10 +86,11 @@
li:not(:last-child) {
position: relative;
padding-right: 3rem;
min-width: 17rem;

.tab-icon{
font-size: 1rem;
margin-right: 1rem;
width: fit-content;
color: var(--clr-td-300);
}

Expand Down Expand Up @@ -124,6 +126,65 @@
height: 1.3rem;
}
}

.confirm-btns{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: var(--clr-neutral-50);
display: flex;
align-items: center;
justify-content: center;
gap: 1rem;
opacity: 1;
pointer-events: all;
transition: opacity 250ms ease-in-out;

button{
display: flex;
align-items: center;
justify-content: center;
gap: .5rem;
appearance: none;
border: none;
cursor: pointer;
border-radius: 5px;
font-family: var(--ff-primary);
font-size: var(--fs-p);
font-weight: var(--fw-bold);
color: var(--clr-neutral-50);
padding: .25rem 1rem;
transition: background-color 250ms ease-in-out;

i{
order: -1;
}

&.confirm-tab-close{
background-color: var(--clr-success-500);

&:hover{
background-color: var(--clr-success-700);
}
}

&.cancel-tab-close{
background-color: var(--clr-error-700);

&:hover{
background-color: var(--clr-error-900);
}
}
}


&.hidden{
opacity: 0;
pointer-events: none;
}
}
}

li:last-child {
Expand Down
59 changes: 57 additions & 2 deletions packages/web-new/src/styles/styles.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -404,7 +404,8 @@ main .console {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
justify-content: flex-start;
gap: 1rem;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
background-color: var(--clr-shades-trans);
Expand Down Expand Up @@ -444,10 +445,12 @@ main .console {
.ide__tabs__left li:not(:last-child) {
position: relative;
padding-right: 3rem;
min-width: 17rem;
}
.ide__tabs__left li:not(:last-child) .tab-icon {
font-size: 1rem;
margin-right: 1rem;
width: -moz-fit-content;
width: fit-content;
color: var(--clr-td-300);
}
.ide__tabs__left li:not(:last-child).active .tab-icon {
Expand Down Expand Up @@ -477,6 +480,58 @@ main .console {
font-size: 1.4rem;
height: 1.3rem;
}
.ide__tabs__left li:not(:last-child) .confirm-btns {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: var(--clr-neutral-50);
display: flex;
align-items: center;
justify-content: center;
gap: 1rem;
opacity: 1;
pointer-events: all;
transition: opacity 250ms ease-in-out;
}
.ide__tabs__left li:not(:last-child) .confirm-btns button {
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
border: none;
cursor: pointer;
border-radius: 5px;
font-family: var(--ff-primary);
font-size: var(--fs-p);
font-weight: var(--fw-bold);
color: var(--clr-neutral-50);
padding: 0.25rem 1rem;
transition: background-color 250ms ease-in-out;
}
.ide__tabs__left li:not(:last-child) .confirm-btns button i {
order: -1;
}
.ide__tabs__left li:not(:last-child) .confirm-btns button.confirm-tab-close {
background-color: var(--clr-success-500);
}
.ide__tabs__left li:not(:last-child) .confirm-btns button.confirm-tab-close:hover {
background-color: var(--clr-success-700);
}
.ide__tabs__left li:not(:last-child) .confirm-btns button.cancel-tab-close {
background-color: var(--clr-error-700);
}
.ide__tabs__left li:not(:last-child) .confirm-btns button.cancel-tab-close:hover {
background-color: var(--clr-error-900);
}
.ide__tabs__left li:not(:last-child) .confirm-btns.hidden {
opacity: 0;
pointer-events: none;
}
.ide__tabs__left li:last-child {
min-width: 3.5rem;
transition: all 250ms ease-in-out;
Expand Down
2 changes: 1 addition & 1 deletion packages/web-new/src/styles/styles.css.map
View file

Large diffs are not rendered by default.

3 changes: 0 additions & 3 deletions packages/web-new/src/template.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -443,9 +443,6 @@ <h1>Thing Description Playground <span>- BETA Version</span></h1>
<div class="console-view aas-view hidden" id="aas-view">
<div class="aas-container" id="aas-container"></div>
<div class="aas-inputs">
<div class="input-field">
<button id="aas-json">JSON</button>
</div>
<div class="view-download">
<button id="aas-download"><i class="fa-solid fa-download"></i>Download</button>
</div>
Expand Down

0 comments on commit ac2c0fc

Please sign in to comment.