Skip to content

Commit

Permalink
Added missing attribution
Browse files Browse the repository at this point in the history 
- Added all missing attribuutions to svg (html and javascript)
- Fixed all merging issues
- Fixed style issues due to the merging and the new svgs
  • Loading branch information
@SergioCasCeb
SergioCasCeb committed Jan 18, 2024
1 parent d8b9d7c commit 047264b
Show file tree
Hide file tree
Showing 11 changed files with 651 additions and 265 deletions.
2 changes: 1 addition & 1 deletion packages/web-new/src/assets/img/angle-down-solid.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
41 changes: 8 additions & 33 deletions packages/web-new/src/scripts/console.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,9 @@ import { textIcon } from './main.js'
//Main console elements
const errorContainer = document.querySelector(".console__content #console-error")
const errorTxt = document.querySelector(".console-error__txt")
export const minMaxBtn = document.querySelector(".min-max")
const minMaxBtn = document.querySelector(".min-max")
export const collapseArrows = minMaxBtn.querySelector(".collapse-arrows")
export const expandArrows = minMaxBtn.querySelector(".expand-arrows")
export const visualizationOptions = document.querySelectorAll(".visualizations__option")
export const visualizationContainers = document.querySelectorAll(".console-view")
export const consoleElement = document.querySelector(".console")
Expand All @@ -58,9 +60,8 @@ function expandConsole() {
setTimeout(() => {
mainContentElement.style.flex = "0 210px"
consoleElement.style.flex = `1 0`
minMaxBtn.children[0].classList.add("collapse-arrows")
minMaxBtn.children[0].classList.remove("expand-arrows")
minMaxBtn.children[0].children[0].setAttribute("d", "M439 7c9.4-9.4 24.6-9.4 33.9 0l32 32c9.4 9.4 9.4 24.6 0 33.9l-87 87 39 39c6.9 6.9 8.9 17.2 5.2 26.2s-12.5 14.8-22.2 14.8H296c-13.3 0-24-10.7-24-24V72c0-9.7 5.8-18.5 14.8-22.2s19.3-1.7 26.2 5.2l39 39L439 7zM72 272H216c13.3 0 24 10.7 24 24V440c0 9.7-5.8 18.5-14.8 22.2s-19.3 1.7-26.2-5.2l-39-39L73 505c-9.4 9.4-24.6 9.4-33.9 0L7 473c-9.4-9.4-9.4-24.6 0-33.9l87-87L55 313c-6.9-6.9-8.9-17.2-5.2-26.2s12.5-14.8 22.2-14.8z")
collapseArrows.classList.remove("hidden")
expandArrows.classList.add("hidden")
}, 100);
}

Expand All @@ -78,41 +79,15 @@ function collapseConsole() {

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")
minMaxBtn.addEventListener("click", () => {

if (minMaxBtn.children[0].classList.contains("collapse-arrows")) {
mainContentElement.style.flex = "1 0"
consoleElement.style.flex = `0 39px`
minMaxBtn.children[0].classList.remove("collapse-arrows")
minMaxBtn.children[0].classList.add("expand-arrows")
minMaxBtn.children[0].children[0].setAttribute("d", "M344 0H488c13.3 0 24 10.7 24 24V168c0 9.7-5.8 18.5-14.8 22.2s-19.3 1.7-26.2-5.2l-39-39-87 87c-9.4 9.4-24.6 9.4-33.9 0l-32-32c-9.4-9.4-9.4-24.6 0-33.9l87-87L327 41c-6.9-6.9-8.9-17.2-5.2-26.2S334.3 0 344 0zM168 512H24c-13.3 0-24-10.7-24-24V344c0-9.7 5.8-18.5 14.8-22.2s19.3-1.7 26.2 5.2l39 39 87-87c9.4-9.4 24.6-9.4 33.9 0l32 32c9.4 9.4 9.4 24.6 0 33.9l-87 87 39 39c6.9 6.9 8.9 17.2 5.2 26.2s-12.5 14.8-22.2 14.8z")

textIcon.forEach(text => {
text.classList.remove("hiddenV")
})
collapseArrows.classList.add("hidden")
expandArrows.classList.remove("hidden")
}

minMaxBtn.addEventListener("click", () => {
if (consoleElement.classList.contains("expanded")) {
collapseConsole()
} else {
textIcon.forEach(text => {
text.classList.add("hiddenV")
})

setTimeout(() => {
mainContentElement.style.flex = "0 210px"
consoleElement.style.flex = `1 0`
minMaxBtn.children[0].classList.add("collapse-arrows")
minMaxBtn.children[0].classList.remove("expand-arrows")
minMaxBtn.children[0].children[0].setAttribute("d", "M439 7c9.4-9.4 24.6-9.4 33.9 0l32 32c9.4 9.4 9.4 24.6 0 33.9l-87 87 39 39c6.9 6.9 8.9 17.2 5.2 26.2s-12.5 14.8-22.2 14.8H296c-13.3 0-24-10.7-24-24V72c0-9.7 5.8-18.5 14.8-22.2s19.3-1.7 26.2 5.2l39 39L439 7zM72 272H216c13.3 0 24 10.7 24 24V440c0 9.7-5.8 18.5-14.8 22.2s-19.3 1.7-26.2-5.2l-39-39L73 505c-9.4 9.4-24.6 9.4-33.9 0L7 473c-9.4-9.4-9.4-24.6 0-33.9l87-87L55 313c-6.9-6.9-8.9-17.2-5.2-26.2s12.5-14.8 22.2-14.8z")

if (visualizeTab.checked === true) {
visualizeTab.click()
}
}, 100);
expandConsole()
}
})

Expand Down
12 changes: 12 additions & 0 deletions packages/web-new/src/scripts/editor.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -104,6 +104,10 @@ function createTab(tabNumber, exampleName, thingType) {
const closeIconPath = document.createElementNS("http://www.w3.org/2000/svg", "path")
closeIconPath.setAttribute("d", "M342.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192 210.7 86.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L146.7 256 41.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192 301.3 297.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L237.3 256 342.6 150.6z")

//Create and append Font Awesome attribution comment
const commentCloseIcon = document.createComment(" !Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc. ")
closeIconSvg.appendChild(commentCloseIcon)

//append the path to the svg and the svg to the button
closeIconSvg.appendChild(closeIconPath)
closeBtn.appendChild(closeIconSvg)
Expand All @@ -128,6 +132,10 @@ function createTab(tabNumber, exampleName, thingType) {
const confirmIconPath = document.createElementNS("http://www.w3.org/2000/svg", "path")
confirmIconPath.setAttribute("d", "M438.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L160 338.7 393.4 105.4c12.5-12.5 32.8-12.5 45.3 0z")

//Create and append Font Awesome attribution comment
const commentConfirmIcon = document.createComment(" !Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc. ")
confirmIconSvg.appendChild(commentConfirmIcon)

confirmIconSvg.appendChild(confirmIconPath)
confirmTabClose.appendChild(confirmIconSvg)

Expand All @@ -148,6 +156,10 @@ function createTab(tabNumber, exampleName, thingType) {
const cancelIconPath = document.createElementNS("http://www.w3.org/2000/svg", "path")
cancelIconPath.setAttribute("d", "M342.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192 210.7 86.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L146.7 256 41.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192 301.3 297.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L237.3 256 342.6 150.6z")

//Create and append Font Awesome attribution comment
const commentCancelIcon = document.createComment(" !Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc. ")
cancelIconSvg.appendChild(commentCancelIcon)

cancelIconSvg.appendChild(cancelIconPath)
cancelTabClose.appendChild(cancelIconSvg)

Expand Down
30 changes: 15 additions & 15 deletions packages/web-new/src/scripts/examples-menu.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -280,9 +280,14 @@ async function getAllExamples(categoryId, thingType) {
tdFilePath.setAttribute("clip-rule", "evenodd")
tdFilePath.setAttribute("d", "M184 0V95.9981C184 107.044 192.954 115.998 204 115.998H300V190H106C89.4315 190 76 203.431 76 220V379H40C17.9086 379 0 361.091 0 339V40C0 17.9086 17.9086 0 40 0H184ZM204 95.9981V4.28427L295.714 95.9981H204ZM189.758 379V265.724H231.32V243.922H189.758H162.019H121.105V265.724H162.019V379H189.758ZM275.017 379H288.654C297.808 379 306.158 377.485 313.703 374.454C321.311 371.362 327.836 367.001 333.278 361.373C338.783 355.683 343.02 348.88 345.988 340.963C349.019 333.046 350.534 324.295 350.534 314.708V308.307C350.534 298.658 349.019 289.907 345.988 282.052C343.02 274.135 338.783 267.332 333.278 261.642C327.774 255.951 321.249 251.591 313.703 248.561C306.219 245.468 297.963 243.922 288.933 243.922H275.017H258.688H247.185V379H259.245H275.017ZM275.017 357.291H288.654C295.952 357.291 302.106 355.652 307.116 352.374C312.126 349.034 315.899 344.179 318.435 337.809C321.032 331.438 322.331 323.738 322.331 314.708V308.121C322.331 301.194 321.589 295.102 320.104 289.845C318.682 284.588 316.548 280.165 313.703 276.578C310.858 272.991 307.364 270.3 303.22 268.507C299.076 266.651 294.313 265.724 288.933 265.724H275.017V357.291Z")

//Create and append Font Awesome attribution comment
const commentTDFile = document.createComment(" !Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc. ")
tdFileSvg.appendChild(commentTDFile)

// Append the path element to the SVG element
tdFileSvg.appendChild(tdFilePath)


// Append the SVG element to the document body or any other desired location
exampleNameIcon.appendChild(tdFileSvg);

Expand All @@ -306,6 +311,10 @@ async function getAllExamples(categoryId, thingType) {
const exampleArrowPath = document.createElementNS("http://www.w3.org/2000/svg", "path")
exampleArrowPath.setAttribute("d", "M201.4 342.6c12.5 12.5 32.8 12.5 45.3 0l160-160c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L224 274.7 86.6 137.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l160 160z")

//Create and append Font Awesome attribution comment
const commentExampleArrow = document.createComment(" !Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc. ")
exampleArrowSvg.appendChild(commentExampleArrow)

exampleArrowSvg.appendChild(exampleArrowPath)
exampleName.appendChild(exampleArrowSvg)

Expand All @@ -315,21 +324,9 @@ async function getAllExamples(categoryId, thingType) {
//Create the example quick access button
const quickBtn = document.createElement('button')
quickBtn.classList.add("example__header--quick")
quickBtn.setAttribute("title", "Use")
// create the svg icon for the quick use button
const importFileSvg = document.createElementNS("http://www.w3.org/2000/svg", "svg")
importFileSvg.setAttribute("xmlns", "http://www.w3.org/2000/svg")
importFileSvg.setAttribute("width", "100%")
importFileSvg.setAttribute("height", "100%")
importFileSvg.setAttribute("viewBox", "0 0 512 512")
importFileSvg.classList.add("icon")
quickBtn.setAttribute("title", "Load this example into the editor")
quickBtn.innerText = "Load"

// Create a path element and set its attributes
const importFilePath = document.createElementNS("http://www.w3.org/2000/svg", "path")
importFilePath.setAttribute("d", "M128 64c0-35.3 28.7-64 64-64H352V128c0 17.7 14.3 32 32 32H512V448c0 35.3-28.7 64-64 64H192c-35.3 0-64-28.7-64-64V336H302.1l-39 39c-9.4 9.4-9.4 24.6 0 33.9s24.6 9.4 33.9 0l80-80c9.4-9.4 9.4-24.6 0-33.9l-80-80c-9.4-9.4-24.6-9.4-33.9 0s-9.4 24.6 0 33.9l39 39H128V64zm0 224v48H24c-13.3 0-24-10.7-24-24s10.7-24 24-24H128zM512 128H384V0L512 128z")

importFileSvg.appendChild(importFilePath)
quickBtn.appendChild(importFileSvg)
exampleHeader.appendChild(quickBtn)

//add event listener to show example information and interaction buttons
Expand Down Expand Up @@ -364,7 +361,6 @@ async function getAllExamples(categoryId, thingType) {
exampleBtnUse.classList.add("example__btn--use")
exampleBtns.appendChild(exampleBtnUse)

//todo: create the apply button
// create the svg icon for the apply button
const applyIconSvg = document.createElementNS("http://www.w3.org/2000/svg", "svg")
applyIconSvg.setAttribute("xmlns", "http://www.w3.org/2000/svg")
Expand All @@ -377,6 +373,10 @@ async function getAllExamples(categoryId, thingType) {
const applyIconPath = document.createElementNS("http://www.w3.org/2000/svg", "path")
applyIconPath.setAttribute("d", "M128 64c0-35.3 28.7-64 64-64H352V128c0 17.7 14.3 32 32 32H512V448c0 35.3-28.7 64-64 64H192c-35.3 0-64-28.7-64-64V336H302.1l-39 39c-9.4 9.4-9.4 24.6 0 33.9s24.6 9.4 33.9 0l80-80c9.4-9.4 9.4-24.6 0-33.9l-80-80c-9.4-9.4-24.6-9.4-33.9 0s-9.4 24.6 0 33.9l39 39H128V64zm0 224v48H24c-13.3 0-24-10.7-24-24s10.7-24 24-24H128zM512 128H384V0L512 128z")

//Create and append Font Awesome attribution comment
const commentApplyIcon = document.createComment(" !Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc. ")
applyIconSvg.appendChild(commentApplyIcon)

applyIconSvg.appendChild(applyIconPath)
exampleBtnUse.appendChild(applyIconSvg)

Expand Down
32 changes: 8 additions & 24 deletions packages/web-new/src/scripts/main.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ import './json-yaml'
import './settings-menu'
import './save-menu'
import './examples-menu'
import { minMaxBtn, consoleElement } from './console'
import { consoleElement, expandArrows, collapseArrows } from './console'
import './open-api'
import './async-api'
import './aas'
Expand Down Expand Up @@ -165,20 +165,12 @@ function onmousemoveY(e) {
b.style.flex = `0 ${h < 50 ? 39 : h}px`
t.style.flex = "1 0"

if(h > 38){
minMaxBtn.children[0].classList.add("collapse-arrows")
minMaxBtn.children[0].classList.remove("expand-arrows")
minMaxBtn.children[0].children[0].setAttribute("d", "M439 7c9.4-9.4 24.6-9.4 33.9 0l32 32c9.4 9.4 9.4 24.6 0 33.9l-87 87 39 39c6.9 6.9 8.9 17.2 5.2 26.2s-12.5 14.8-22.2 14.8H296c-13.3 0-24-10.7-24-24V72c0-9.7 5.8-18.5 14.8-22.2s19.3-1.7 26.2 5.2l39 39L439 7zM72 272H216c13.3 0 24 10.7 24 24V440c0 9.7-5.8 18.5-14.8 22.2s-19.3 1.7-26.2-5.2l-39-39L73 505c-9.4 9.4-24.6 9.4-33.9 0L7 473c-9.4-9.4-9.4-24.6 0-33.9l87-87L55 313c-6.9-6.9-8.9-17.2-5.2-26.2s12.5-14.8 22.2-14.8z")

consoleElement.classList.remove("collapsed")
consoleElement.classList.add("expanded")
}else{
minMaxBtn.children[0].classList.remove("collapse-arrows")
minMaxBtn.children[0].classList.add("expand-arrows")
minMaxBtn.children[0].children[0].setAttribute("d", "M344 0H488c13.3 0 24 10.7 24 24V168c0 9.7-5.8 18.5-14.8 22.2s-19.3 1.7-26.2-5.2l-39-39-87 87c-9.4 9.4-24.6 9.4-33.9 0l-32-32c-9.4-9.4-9.4-24.6 0-33.9l87-87L327 41c-6.9-6.9-8.9-17.2-5.2-26.2S334.3 0 344 0zM168 512H24c-13.3 0-24-10.7-24-24V344c0-9.7 5.8-18.5 14.8-22.2s19.3-1.7 26.2 5.2l39 39 87-87c9.4-9.4 24.6-9.4 33.9 0l32 32c9.4 9.4 9.4 24.6 0 33.9l-87 87 39 39c6.9 6.9 8.9 17.2 5.2 26.2s-12.5 14.8-22.2 14.8z")

if(h < 39){
consoleElement.classList.remove("expanded")
consoleElement.classList.add("collapsed")

collapseArrows.classList.add("hidden")
expandArrows.classList.remove("hidden")
}

if (h < 445) {
Expand All @@ -193,20 +185,12 @@ function onmousemoveY(e) {
t.style.flex = `0 ${h < 220 ? 210 : h}px`
b.style.flex = "1 0"

if(h < 714){
minMaxBtn.children[0].classList.add("collapse-arrows")
minMaxBtn.children[0].classList.remove("expand-arrows")
minMaxBtn.children[0].children[0].setAttribute("d", "M439 7c9.4-9.4 24.6-9.4 33.9 0l32 32c9.4 9.4 9.4 24.6 0 33.9l-87 87 39 39c6.9 6.9 8.9 17.2 5.2 26.2s-12.5 14.8-22.2 14.8H296c-13.3 0-24-10.7-24-24V72c0-9.7 5.8-18.5 14.8-22.2s19.3-1.7 26.2 5.2l39 39L439 7zM72 272H216c13.3 0 24 10.7 24 24V440c0 9.7-5.8 18.5-14.8 22.2s-19.3 1.7-26.2-5.2l-39-39L73 505c-9.4 9.4-24.6 9.4-33.9 0L7 473c-9.4-9.4-9.4-24.6 0-33.9l87-87L55 313c-6.9-6.9-8.9-17.2-5.2-26.2s12.5-14.8 22.2-14.8z")

if ( h > 714 ){
consoleElement.classList.remove("collapsed")
consoleElement.classList.add("expanded")
}else{
minMaxBtn.children[0].classList.remove("collapse-arrows")
minMaxBtn.children[0].classList.add("expand-arrows")
minMaxBtn.children[0].children[0].setAttribute("d", "M344 0H488c13.3 0 24 10.7 24 24V168c0 9.7-5.8 18.5-14.8 22.2s-19.3 1.7-26.2-5.2l-39-39-87 87c-9.4 9.4-24.6 9.4-33.9 0l-32-32c-9.4-9.4-9.4-24.6 0-33.9l87-87L327 41c-6.9-6.9-8.9-17.2-5.2-26.2S334.3 0 344 0zM168 512H24c-13.3 0-24-10.7-24-24V344c0-9.7 5.8-18.5 14.8-22.2s19.3-1.7 26.2 5.2l39 39 87-87c9.4-9.4 24.6-9.4 33.9 0l32 32c9.4 9.4 9.4 24.6 0 33.9l-87 87 39 39c6.9 6.9 8.9 17.2 5.2 26.2s-12.5 14.8-22.2 14.8z")

consoleElement.classList.remove("expanded")
consoleElement.classList.add("collapsed")
expandArrows.classList.add("hidden")
collapseArrows.classList.remove("hidden")
}

if (h < 310) {
Expand Down
Loading

0 comments on commit 047264b

Please sign in to comment.