Skip to content

Commit

Permalink
Handling the click outside the pop up elements
Browse files Browse the repository at this point in the history 
Now when the users clicks outside the save menu, the settings menu and the yaml warning pop up, the elements will close respectively
  • Loading branch information
@SergioCasCeb
SergioCasCeb committed Oct 13, 2023
1 parent 047535d commit f6a6c1c
Show file tree
Hide file tree
Showing 4 changed files with 60 additions and 39 deletions.
9 changes: 9 additions & 0 deletions packages/web-new/src/scripts/json-yaml.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,7 @@ export const jsonBtn = document.querySelector("#file-type-json")
const yamlWarning = document.querySelector('.json-yaml-warning')
const yamlConfirmBtn = document.querySelector("#yaml-confirm-btn")
const yamlCancelBtn = document.querySelector("#yaml-cancel-btn")
const yamlWarningContainer = document.querySelector(".json-yaml-warning__container")
jsonBtn.checked = true


Expand All @@ -57,6 +58,14 @@ yamlCancelBtn.addEventListener("click", () => {
jsonBtn.checked = true
})

//Handle click outside the warning pop up
document.addEventListener('click', (e) => {
if(!yamlBtn.contains(e.target) && !yamlWarningContainer.contains(e.target) && !yamlWarning.classList.contains("closed")){
yamlWarning.classList.add("closed")
jsonBtn.checked = true
}
})

//Confirm the json to yaml convertion
yamlConfirmBtn.addEventListener("click", () => {
yamlWarning.classList.add('closed')
Expand Down
49 changes: 30 additions & 19 deletions packages/web-new/src/scripts/save-menu.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,22 +29,23 @@ import { editorList, getEditorData } from "./editor"
const saveMenu = document.querySelector(".save-menu")
const saveMenuBtn = document.querySelector("#save-btn")
const closeSaveMenu = document.querySelector(".save-menu-close i")
const shareUrlContainer = document.querySelector("#share-url-input")
const openUrlTab = document.querySelector("#open-url-tab")
const shareUrlContainer = document.querySelector("#share-url-input")
const openUrlTab = document.querySelector("#open-url-tab")
const thingTypeText = document.querySelector('#thing-type-text')
const shareUrlBtn = document.querySelector("#share-url-btn")
const openEditdorBtn = document.querySelector('#open-editdor-btn')
const downloadBtn = document.querySelector("#download-btn")
const saveAsBtn = document.querySelector("#save-as-btn")
const saveAsWarning = document.querySelector(".save-warning")
const saveMenuContainer = document.querySelector(".save-menu__container")
let fileHandle;
openUrlTab.disabled = true
shareUrlContainer.value = ""

//Open the save menu and change the text depending on the Thing type (TD or TM)
saveMenuBtn.addEventListener("click", () => {
editorList.forEach(editorInstance => {
if(editorInstance["_domElement"].classList.contains("active")){
if (editorInstance["_domElement"].classList.contains("active")) {
const editorValues = getEditorData(editorInstance)
thingTypeText.innerText = editorValues[1].toUpperCase()
}
Expand All @@ -59,14 +60,23 @@ closeSaveMenu.addEventListener("click", () => {
openUrlTab.disabled = true
})

//Handle click outside the save menu
document.addEventListener('click', (e) => {
if (!saveMenuBtn.contains(e.target) && !saveMenuContainer.contains(e.target) && !saveMenu.classList.contains("closed")) {
saveMenu.classList.add("closed")
shareUrlContainer.value = ""
openUrlTab.disabled = true
}
})

/**
* Get the active editor, the format type, doc type and editor
* and call the saveAsURL function
*/
shareUrlBtn.addEventListener("click", () => {
try {
editorList.forEach(editorInstance => {
if(editorInstance["_domElement"].classList.contains("active")){
if (editorInstance["_domElement"].classList.contains("active")) {
const editorValues = getEditorData(editorInstance)

saveAsURL(editorValues[0], editorValues[1], editorValues[2])
Expand All @@ -90,9 +100,9 @@ shareUrlBtn.addEventListener("click", () => {
* @param { String } format - json or yaml
* @param { Object } editor - the editor reference object
*/
async function saveAsURL(formatType, thingType, editorContent){
async function saveAsURL(formatType, thingType, editorContent) {
const URL = await save(formatType, thingType, editorContent)
if(URL !== undefined){
if (URL !== undefined) {
shareUrlContainer.value = URL
openUrlTab.disabled = false
}
Expand All @@ -105,7 +115,7 @@ async function saveAsURL(formatType, thingType, editorContent){
openEditdorBtn.addEventListener("click", () => {
try {
editorList.forEach(editorInstance => {
if(editorInstance["_domElement"].classList.contains("active")){
if (editorInstance["_domElement"].classList.contains("active")) {
const editorValues = getEditorData(editorInstance)

openEditdor(editorValues[0], editorValues[1], editorInstance)
Expand All @@ -126,7 +136,7 @@ openEditdorBtn.addEventListener("click", () => {
* Open the generated sharable link in a new playground tab
*/
openUrlTab.addEventListener("click", () => {
if(shareUrlContainer.value !== "" || shareUrlContainer.value !== "Invalid JSON Object"){
if (shareUrlContainer.value !== "" || shareUrlContainer.value !== "Invalid JSON Object") {
window.open(shareUrlContainer.value, '_blank');
}
})
Expand All @@ -137,7 +147,7 @@ openUrlTab.addEventListener("click", () => {
*/
downloadBtn.addEventListener("click", () => {
editorList.forEach(editorInstance => {
if(editorInstance["_domElement"].classList.contains("active")){
if (editorInstance["_domElement"].classList.contains("active")) {
const editorValues = getEditorData(editorInstance)
let tabName = editorValues[2]["title"].replaceAll(' ', '-')
const contentType = `application/${editorValues[0]};charset=utf-8;`
Expand All @@ -146,6 +156,8 @@ downloadBtn.addEventListener("click", () => {
}
})
saveMenu.classList.add("closed")
shareUrlContainer.value = ""
openUrlTab.disabled = true
})

/* Save as btn functionality */
Expand All @@ -157,7 +169,7 @@ saveAsBtn.addEventListener("click", () => {
* Saves the td as a file in the file system
* @param {*} content
*/
async function saveFileInSystem(content){
async function saveFileInSystem(content) {
let stream = await fileHandle.createWritable()
await stream.write(content)
await stream.close()
Expand All @@ -168,14 +180,14 @@ async function saveFileInSystem(content){
* name and save it as json , jsonld or yaml
* This function only works for chrome, edge and oper as of now (26.05.2023)
*/
async function saveAsFile(){
try{
async function saveAsFile() {
try {
let fileName = ""
let editorContent = ""
let acceptOpts = {}
let acceptDesc = ""
editorList.forEach(editorInstance => {
if(editorInstance["_domElement"].classList.contains("active")){
if (editorInstance["_domElement"].classList.contains("active")) {
const editorValues = getEditorData(editorInstance)
fileName = `${editorValues[2]["title"]}.${editorValues[0]}`
editorContent = editorInstance.getValue()
Expand All @@ -186,7 +198,7 @@ async function saveAsFile(){


const opts = {
suggestedName : fileName,
suggestedName: fileName,
types: [
{
description: acceptDesc,
Expand All @@ -200,17 +212,16 @@ async function saveAsFile(){

saveFileInSystem(editorContent)

}catch(err){
} catch (err) {
const errTxt = `${err}`
if(errTxt === "AbortError: The user aborted a request.")
{
if (errTxt === "AbortError: The user aborted a request.") {
console.error(err)
}
else{
else {
saveAsWarning.classList.add("active")
setTimeout(() => {
saveAsWarning.classList.remove("active")
},1500)
}, 1500)
}
}
}
Expand Down
37 changes: 21 additions & 16 deletions packages/web-new/src/scripts/settings-menu.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@
* for the settings menu, such as event handlers, toggle buttons,
* application preferences and themes. The preferences and themes are
* subsequently stored in the local storage
*/
*/

import { editor } from 'monaco-editor'
import themeData from './monochrome-theme'
Expand All @@ -34,7 +34,6 @@ const themePicker = document.querySelector("#theme-picker")
const fontSizeTxt = document.querySelector(".editor-font-size")
export const fontSizeSlider = document.querySelector("#font-size")
const autoValidateBtn = document.querySelector('#auto-validate')
const resetLoggingBtn = document.querySelector('#reset-logging')
const validateJSONLDBtn = document.querySelector('#validate-jsonld')
const tmConformanceBtn = document.querySelector('#tm-conformance')

Expand All @@ -61,6 +60,13 @@ settingsBtn.addEventListener("click", () => {
settingsMenu.classList.toggle("closed")
})

//Handle click outside the settings menu
document.addEventListener('click', (e) => {
if (!settingsBtn.contains(e.target) && !settingsMenu.contains(e.target) && !settingsMenu.classList.contains("closed")) {
settingsMenu.classList.add("closed")
}
})

/**
* Event listener for reseting all the settings and preferences values
* @param {event} e - reset event
Expand All @@ -76,10 +82,9 @@ editorForm.addEventListener("reset", (e) => {
storeTheme(themePicker.value)
storeFontSize(fontSizeSlider.value)
setMonacoTheme(themePicker.value)

//resetting all toggle btns
autoValidateBtn.checked = false
resetLoggingBtn.checked = true
validateJSONLDBtn.checked = true
tmConformanceBtn.checked = true
})
Expand All @@ -90,9 +95,9 @@ editorForm.addEventListener("reset", (e) => {
themePicker.addEventListener("change", () => {
storeTheme(themePicker.value)
document.documentElement.className = themePicker.value
setMonacoTheme(themePicker.value)
setMonacoTheme(themePicker.value)
})

/**
* Event listener to update the font size in the settings menu text
* and in the monaco editor when the font size input is changed
Expand All @@ -111,33 +116,33 @@ fontSizeSlider.addEventListener("input", () => {
* Store the selected themek in the localStorage
* @param {String} theme - the name of the theme
*/
function storeTheme (theme) {
function storeTheme(theme) {
localStorage.setItem("theme", theme)
}

/**
* Store the selected font size in the localStorage
* @param {Number} fontSize - The number of the font size
*/
function storeFontSize (fontSize) {
function storeFontSize(fontSize) {
localStorage.setItem("fontSize", fontSize)
}

/**
* Gets the theme value from the localStorage and sets the new theme
*/
function setTheme () {
function setTheme() {
const activeTheme = localStorage.getItem("theme") === null ? 'light-mode' : localStorage.getItem("theme")
themePicker.value = activeTheme
document.documentElement.className = activeTheme
setMonacoTheme(activeTheme)
}

/**
* Function which gets the value from the localStorage and sets the new font size
* @param {object} editor - the editor object which references the created monaco editor
*/
export function setFontSize (editorInstance) {
export function setFontSize(editorInstance) {
const activeFontSize = localStorage.getItem("fontSize") === null ? '14' : localStorage.getItem("fontSize")
fontSizeTxt.innerText = activeFontSize
fontSizeSlider.value = activeFontSize
Expand All @@ -150,12 +155,12 @@ export function setFontSize (editorInstance) {
* Get the current page theme and implement it for the monaco editor as well
* @param { String } theme - the name of the current or wanted theme
*/
function setMonacoTheme(theme){
function setMonacoTheme(theme) {
if (theme == "dark-mode") {
editor.setTheme('vs-dark')
}else if (theme == "light-mode") {
} else if (theme == "light-mode") {
editor.setTheme('vs')
}else{
} else {
editor.setTheme('monochrome')
}
}
4 changes: 0 additions & 4 deletions packages/web-new/src/template.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -530,10 +530,6 @@ <h3 class="settings__title">Settings</h3>
<label for="auto-validate">Auto Validate: </label>
<input type="checkbox" name="auto-validate" id="auto-validate" class="auto-validate">
</div>
<div class="form-field">
<label for="reset-logging">Reset Logging: </label>
<input type="checkbox" name="reset-logging" id="reset-logging" class="reset-logging" checked>
</div>
<div class="form-field">
<label for="validate-jsonld">Validate JSON-LD: </label>
<input type="checkbox" name="validate-jsonld" id="validate-jsonld" class="validate-jsonld"
Expand Down

0 comments on commit f6a6c1c

Please sign in to comment.