diff --git a/src/ui/static/js/global_config.js b/src/ui/static/js/global_config.js index 0ba22ae9f..012389ee2 100644 --- a/src/ui/static/js/global_config.js +++ b/src/ui/static/js/global_config.js @@ -46,7 +46,7 @@ class Dropdown { const btn = e.target.closest("button"); const btnValue = btn.getAttribute("value"); const btnSetting = btn.getAttribute( - `data-${this.prefix}-setting-select-dropdown-btn`, + `data-${this.prefix}-setting-select-dropdown-btn` ); //stop if same value to avoid new fetching const isSameVal = this.isSameValue(btnSetting, btnValue); @@ -68,7 +68,7 @@ class Dropdown { closeAllDrop() { const drops = document.querySelectorAll( - `[data-${this.prefix}-setting-select-dropdown]`, + `[data-${this.prefix}-setting-select-dropdown]` ); drops.forEach((drop) => { drop.classList.add("hidden"); @@ -76,8 +76,8 @@ class Dropdown { document .querySelector( `svg[data-${this.prefix}-setting-select="${drop.getAttribute( - `data-${this.prefix}-setting-select-dropdown`, - )}"]`, + `data-${this.prefix}-setting-select-dropdown` + )}"]` ) .classList.remove("rotate-180"); }); @@ -85,7 +85,7 @@ class Dropdown { isSameValue(btnSetting, value) { const selectCustom = document.querySelector( - `[data-${this.prefix}-setting-select-text="${btnSetting}"]`, + `[data-${this.prefix}-setting-select-text="${btnSetting}"]` ); const currVal = selectCustom.textContent; return currVal === value ? true : false; @@ -93,30 +93,30 @@ class Dropdown { setSelectNewValue(btnSetting, value) { const selectCustom = document.querySelector( - `[data-${this.prefix}-setting-select="${btnSetting}"]`, + `[data-${this.prefix}-setting-select="${btnSetting}"]` ); selectCustom.querySelector( - `[data-${this.prefix}-setting-select-text]`, + `[data-${this.prefix}-setting-select-text]` ).textContent = value; } hideDropdown(btnSetting) { //hide dropdown const dropdownEl = document.querySelector( - `[data-${this.prefix}-setting-select-dropdown="${btnSetting}"]`, + `[data-${this.prefix}-setting-select-dropdown="${btnSetting}"]` ); dropdownEl.classList.add("hidden"); dropdownEl.classList.remove("flex"); //svg effect const dropdownChevron = document.querySelector( - `svg[data-${this.prefix}-setting-select="${btnSetting}"]`, + `svg[data-${this.prefix}-setting-select="${btnSetting}"]` ); dropdownChevron.classList.remove("rotate-180"); } changeDropBtnStyle(btnSetting, selectedBtn) { const dropdownEl = document.querySelector( - `[data-${this.prefix}-setting-select-dropdown="${btnSetting}"]`, + `[data-${this.prefix}-setting-select-dropdown="${btnSetting}"]` ); //reset dropdown btns const btnEls = dropdownEl.querySelectorAll("button"); @@ -126,7 +126,7 @@ class Dropdown { "bg-primary", "dark:bg-primary", "text-gray-300", - "text-gray-300", + "text-gray-300" ); btn.classList.add("bg-white", "dark:bg-slate-700", "text-gray-700"); }); @@ -134,7 +134,7 @@ class Dropdown { selectedBtn.classList.remove( "bg-white", "dark:bg-slate-700", - "text-gray-700", + "text-gray-700" ); selectedBtn.classList.add("dark:bg-primary", "bg-primary", "text-gray-300"); } @@ -145,10 +145,10 @@ class Dropdown { .getAttribute(`data-${this.prefix}-setting-select`); //toggle dropdown const dropdownEl = document.querySelector( - `[data-${this.prefix}-setting-select-dropdown="${attribute}"]`, + `[data-${this.prefix}-setting-select-dropdown="${attribute}"]` ); const dropdownChevron = document.querySelector( - `svg[data-${this.prefix}-setting-select="${attribute}"]`, + `svg[data-${this.prefix}-setting-select="${attribute}"]` ); dropdownEl.classList.toggle("hidden"); dropdownEl.classList.toggle("flex"); @@ -215,14 +215,16 @@ class Multiple { .closest("button") .hasAttribute(`data-${this.prefix}-multiple-add`) ) { + if (this.isAvoidAction(e.target)) return; + //get plugin from btn const btn = e.target.closest("button"); const attName = btn.getAttribute( - `data-${this.prefix}-multiple-add`, + `data-${this.prefix}-multiple-add` ); //get all multiple groups const multipleEls = document.querySelectorAll( - `[data-${this.prefix}-settings-multiple*="${attName}"]`, + `[data-${this.prefix}-settings-multiple*="${attName}"]` ); //case no schema if (multipleEls.length <= 0) return; @@ -234,7 +236,7 @@ class Multiple { //and keep the highest num multipleEls.forEach((container) => { const ctnrName = container.getAttribute( - `data-${this.prefix}-settings-multiple`, + `data-${this.prefix}-settings-multiple` ); const num = this.getSuffixNumOrFalse(ctnrName); if (!isNaN(num) && num > topNum) topNum = num; @@ -245,7 +247,7 @@ class Multiple { const setNum = +currNum === 0 ? `` : `_${currNum}`; //the default (schema) group is the last group const schema = document.querySelector( - `[data-${this.prefix}-settings-multiple="${attName}_SCHEMA"]`, + `[data-${this.prefix}-settings-multiple="${attName}_SCHEMA"]` ); //clone schema to create a group with new num const schemaClone = schema.cloneNode(true); @@ -267,6 +269,7 @@ class Multiple { .closest("button") .hasAttribute(`data-${this.prefix}-multiple-toggle`) ) { + if (this.isAvoidAction(e.target)) return; const att = e.target .closest("button") .getAttribute(`data-${this.prefix}-multiple-toggle`); @@ -282,15 +285,17 @@ class Multiple { .closest("button") .hasAttribute(`data-${this.prefix}-multiple-delete`) ) { + if (this.isAvoidAction(e.target)) return; + // We are not removing it really, just hiding it and update values to default // By setting default value, group will be send to server and delete (because a setting with default value is useless to keep) const multContainer = e.target.closest( - `[data-${this.prefix}-settings-multiple]`, + `[data-${this.prefix}-settings-multiple]` ); multContainer.classList.add("hidden-multiple"); // get setting container const settings = multContainer.querySelectorAll( - `[data-setting-container]`, + `[data-setting-container]` ); settings.forEach((setting) => { // for regular input @@ -317,7 +322,7 @@ class Multiple { // for select try { const selects = setting.querySelectorAll( - "button[data-setting-select]", + "button[data-setting-select]" ); selects.forEach((select) => { const defaultVal = select.getAttribute("data-default") || ""; @@ -328,8 +333,8 @@ class Multiple { defaultVal; const dropdown = document.querySelector( `[data-setting-select-dropdown="${select.getAttribute( - "data-setting-select", - )}"]`, + "data-setting-select" + )}"]` ); dropdown.querySelector(`button[value=${defaultVal}]`).click(); }); @@ -341,6 +346,17 @@ class Multiple { }); } + isAvoidAction(target) { + // check that not disabled pro plugin + const proDisabled = target + .closest("[data-plugin-item]") + .hasAttribute("data-pro-disabled") + ? true + : false; + + return proDisabled; + } + sortMultipleByContainerAndSuffixe(obj) { const sortMultiples = {}; for (const [name, value] of Object.entries(obj)) { @@ -354,13 +370,13 @@ class Multiple { ? name.replace(`_${splitName[splitName.length - 1]}`, "").trim() : name.trim(); const relateSetting = document.querySelector( - `[data-setting-container=${nameSuffixLess}_SCHEMA]`, + `[data-setting-container=${nameSuffixLess}_SCHEMA]` ); const relateCtnr = relateSetting.closest( - `[data-${this.prefix}-settings-multiple]`, + `[data-${this.prefix}-settings-multiple]` ); const relateCtnrName = relateCtnr.getAttribute( - `data-${this.prefix}-settings-multiple`, + `data-${this.prefix}-settings-multiple` ); //then we sort the setting on the right container name by suffixe number if (!(relateCtnrName in sortMultiples)) { @@ -378,7 +394,7 @@ class Multiple { addOneMultGroup() { const settings = document.querySelector(`[data-${this.prefix}-modal-form]`); const multAddBtns = settings.querySelectorAll( - `[data-${this.prefix}-multiple-add]`, + `[data-${this.prefix}-multiple-add]` ); multAddBtns.forEach((btn) => { //check if already one (SCHEMA exclude so length >= 2) @@ -394,7 +410,7 @@ class Multiple { showMultByAtt(att) { const multContainers = document.querySelectorAll( - `[data-${this.prefix}-settings-multiple^=${att}]`, + `[data-${this.prefix}-settings-multiple^=${att}]` ); multContainers.forEach((container) => { if ( @@ -408,7 +424,7 @@ class Multiple { toggleMultByAtt(att) { const multContainers = document.querySelectorAll( - `[data-${this.prefix}-settings-multiple^=${att}]`, + `[data-${this.prefix}-settings-multiple^=${att}]` ); multContainers.forEach((container) => { if ( @@ -424,7 +440,7 @@ class Multiple { //get schema settings const multiples = {}; const schemaSettings = document.querySelectorAll( - `[data-setting-container$="SCHEMA"]`, + `[data-setting-container$="SCHEMA"]` ); // loop on every schema settings schemaSettings.forEach((schema) => { @@ -450,11 +466,11 @@ class Multiple { setMultipleToDOM(sortMultObj) { //we loop on each multiple that contains values to render to DOM for (const [schemaCtnrName, multGroupBySuffix] of Object.entries( - sortMultObj, + sortMultObj )) { //we need to access the DOM schema container const schemaCtnr = document.querySelector( - `[data-${this.prefix}-settings-multiple="${schemaCtnrName}"]`, + `[data-${this.prefix}-settings-multiple="${schemaCtnrName}"]` ); //now we have to loop on each multiple settings group for (const [suffix, settings] of Object.entries(multGroupBySuffix)) { @@ -470,14 +486,14 @@ class Multiple { for (const [name, data] of Object.entries(settings)) { //get setting container of clone container const settingContainer = schemaCtnrClone.querySelector( - `[data-setting-container="${name}"]`, + `[data-setting-container="${name}"]` ); //replace input info and disabled state this.setSetting( data["value"], data["method"], data["global"], - settingContainer, + settingContainer ); } //send schema clone to DOM and show it @@ -492,7 +508,7 @@ class Multiple { `data-${this.prefix}-settings-multiple`, schemaCtnrClone .getAttribute(`data-${this.prefix}-settings-multiple`) - .replace("_SCHEMA", suffix), + .replace("_SCHEMA", suffix) ); //rename title @@ -506,18 +522,18 @@ class Multiple { //rename setting container const settingCtnrs = schemaCtnrClone.querySelectorAll( - "[data-setting-container]", + "[data-setting-container]" ); settingCtnrs.forEach((settingCtnr) => { settingCtnr.setAttribute( "data-setting-container", settingCtnr .getAttribute("data-setting-container") - .replace("_SCHEMA", suffix), + .replace("_SCHEMA", suffix) ); settingCtnr.setAttribute( "id", - settingCtnr.getAttribute("id").replace("_SCHEMA", suffix), + settingCtnr.getAttribute("id").replace("_SCHEMA", suffix) ); }); @@ -526,7 +542,7 @@ class Multiple { labelEls.forEach((label) => { label.setAttribute( "for", - label.getAttribute("for").replace("_SCHEMA", suffix), + label.getAttribute("for").replace("_SCHEMA", suffix) ); }); @@ -535,19 +551,19 @@ class Multiple { popoverBtns.forEach((popoverBtn) => { popoverBtn.setAttribute( "data-popover-btn", - popoverBtn.getAttribute("data-popover-btn").replace("_SCHEMA", suffix), + popoverBtn.getAttribute("data-popover-btn").replace("_SCHEMA", suffix) ); }); const popoverContents = schemaCtnrClone.querySelectorAll( - "[data-popover-content]", + "[data-popover-content]" ); popoverContents.forEach((popoverContent) => { popoverContent.setAttribute( "data-popover-content", popoverContent .getAttribute("data-popover-content") - .replace("_SCHEMA", suffix), + .replace("_SCHEMA", suffix) ); }); @@ -556,7 +572,7 @@ class Multiple { invalidEls.forEach((invalidEl) => { invalidEl.setAttribute( "data-invalid", - invalidEl.getAttribute("data-invalid").replace("_SCHEMA", suffix), + invalidEl.getAttribute("data-invalid").replace("_SCHEMA", suffix) ); }); @@ -634,15 +650,15 @@ class Multiple { //click the custom select dropdown btn value to update select value select.parentElement .querySelector( - `button[data-setting-select-dropdown-btn][value='${defaultVal}']`, + `button[data-setting-select-dropdown-btn][value='${defaultVal}']` ) .click(); //set state to custom visible el const btnCustom = document.querySelector( `[data-setting-select=${select.getAttribute( - "data-setting-select-default", - )}]`, + "data-setting-select-default" + )}]` ); this.setDisabledMultServ(btnCustom, method, global); @@ -678,10 +694,10 @@ class Multiple { selects.forEach((select) => { const method = select.getAttribute("data-default-method"); const name = select.getAttribute( - `data-${this.prefix}-setting-select-default`, + `data-${this.prefix}-setting-select-default` ); const selDOM = document.querySelector( - `button[data-${this.prefix}-setting-select='${name}']`, + `button[data-${this.prefix}-setting-select='${name}']` ); if (method === "ui" || method === "default") { selDOM.removeAttribute("disabled", ""); @@ -696,6 +712,13 @@ class Multiple { //for already existing global config multiples //global is check setDisabledMultServ(inp, method, global) { + // Check if pro + const proDisabled = inp + .closest("[data-plugin-item]") + .hasAttribute("data-pro-disabled") + ? true + : false; + if (proDisabled) return inp.setAttribute("disabled", ""); if (global) return inp.removeAttribute("disabled"); if (method === "ui" || method === "default") { @@ -716,7 +739,7 @@ class Multiple { hiddenIfNoMultiples() { //hide multiple btn if no multiple exist on a plugin const multiples = document.querySelectorAll( - `[data-${this.prefix}-settings-multiple]`, + `[data-${this.prefix}-settings-multiple]` ); multiples.forEach((container) => { if (container.querySelectorAll(`[data-setting-container]`).length <= 0) @@ -728,7 +751,7 @@ class Multiple { removePrevMultiples() { const multiPlugins = document.querySelectorAll( - `[data-${this.prefix}-settings-multiple]`, + `[data-${this.prefix}-settings-multiple]` ); multiPlugins.forEach((multiGrp) => { if ( @@ -764,7 +787,7 @@ const setPopover = new Popover("main", "global-config"); const setDrop = new Dropdown(); const setTabsSelect = new TabsSelect( document.querySelector("[data-global-config-tabs-select-container]"), - document.querySelector("[data-global-config-plugins-container]"), + document.querySelector("[data-global-config-plugins-container]") ); const setInvalid = new showInvalid(); const format = new FormatValue(); @@ -772,7 +795,7 @@ const format = new FormatValue(); const setFilterGlobal = new FilterSettings( "keyword", document.querySelector("[data-global-config-tabs-select-container]"), - document.querySelector("[data-global-config-plugins-container]"), + document.querySelector("[data-global-config-plugins-container]") ); const setMultiple = new Multiple("global-config"); @@ -784,19 +807,19 @@ const checkServiceModalKeyword = new CheckNoMatchFilter( .querySelector("[data-global-config-plugins-container]") .querySelectorAll("[data-plugin-item]"), document.querySelector("[data-global-config-form]"), - document.querySelector("[data-global-config-nomatch]"), + document.querySelector("[data-global-config-nomatch]") ); try { const checkServiceCardSelect = new CheckNoMatchFilter( document.querySelectorAll( - "button[data-global-config-setting-select-dropdown-btn]", + "button[data-global-config-setting-select-dropdown-btn]" ), "select", document .querySelector("[data-global-config-plugins-container]") .querySelectorAll("[data-plugin-item]"), document.querySelector("[data-global-config-form]"), - document.querySelector("[data-global-config-nomatch]"), + document.querySelector("[data-global-config-nomatch]") ); } catch (e) {} diff --git a/src/ui/static/js/utils/settings.js b/src/ui/static/js/utils/settings.js index 2d84cd2dc..6e95e5190 100644 --- a/src/ui/static/js/utils/settings.js +++ b/src/ui/static/js/utils/settings.js @@ -13,7 +13,7 @@ class Popover { this.hidePopover(this.relateBtn); } catch (e) {} }, - true, + true ); window.addEventListener("pointerover", (e) => { @@ -48,7 +48,7 @@ class Popover { const popoverName = btn.getAttribute("data-popover-btn"); //toggle curr popover const popover = btn.parentElement.querySelector( - `[data-popover-content=${popoverName}]`, + `[data-popover-content=${popoverName}]` ); popover.classList.add("transition-all", "delay-200", "opacity-0"); @@ -70,7 +70,7 @@ class Popover { const popoverName = btn.getAttribute("data-popover-btn"); //toggle curr popover const popover = btn.parentElement.querySelector( - `[data-popover-content=${popoverName}]`, + `[data-popover-content=${popoverName}]` ); popover.classList.add("hidden"); popover.classList.remove("transition-all", "delay-200"); @@ -127,7 +127,7 @@ class TabsSelect { window.history.replaceState( null, "", - `${window.location.pathname}#${tabAtt}`, + `${window.location.pathname}#${tabAtt}` ); } } @@ -153,7 +153,7 @@ class TabsSelect { const fragment = window.location.hash.substring(1); if (fragment) { const tab = this.tabContainer.querySelector( - `button[data-tab-select-handler='${fragment}']`, + `button[data-tab-select-handler='${fragment}']` ); tab.click(); // Scroll to the top of the page (with a delay to ensure the tab is clicked first) @@ -167,7 +167,7 @@ class TabsSelect { resetTabsStyle() { const tabsEl = this.tabContainer.querySelectorAll( - "button[data-tab-select-handler]", + "button[data-tab-select-handler]" ); tabsEl.forEach((tab) => { tab.classList.remove("active"); @@ -176,7 +176,7 @@ class TabsSelect { highlightClicked(tabAtt) { const tabMobile = this.tabContainer.querySelector( - `button[data-tab-select-handler='${tabAtt}']`, + `button[data-tab-select-handler='${tabAtt}']` ); tabMobile.classList.add("active"); } @@ -191,14 +191,14 @@ class TabsSelect { showSettingClicked(tabAtt) { const plugin = this.contentContainer.querySelector( - `[data-plugin-item='${tabAtt}']`, + `[data-plugin-item='${tabAtt}']` ); plugin.classList.remove("hidden"); } setDropBtnText(tabAtt, text) { const dropBtn = this.tabContainer.querySelector( - "[data-tab-select-dropdown-btn]", + "[data-tab-select-dropdown-btn]" ); dropBtn.setAttribute("data-tab-id", tabAtt); dropBtn.querySelector("span").textContent = text; @@ -206,7 +206,7 @@ class TabsSelect { closeDropdown() { const dropdown = this.tabContainer.querySelector( - "[data-tab-select-dropdown]", + "[data-tab-select-dropdown]" ); dropdown.classList.add("hidden"); dropdown.classList.remove("flex"); @@ -216,7 +216,7 @@ class TabsSelect { toggleDropdown() { const dropdown = this.tabContainer.querySelector( - "[data-tab-select-dropdown]", + "[data-tab-select-dropdown]" ); const combobox = dropdown.querySelector("[data-combobox]"); if (combobox) { @@ -241,7 +241,7 @@ class TabsSelect { updateTabArrow() { const dropdown = this.tabContainer.querySelector( - "[data-tab-select-dropdown]", + "[data-tab-select-dropdown]" ); if (dropdown.classList.contains("hidden")) { @@ -275,24 +275,24 @@ class FilterSettings { inputID, tabContainer, contentContainer, - prefix = "global-config", + prefix = "global-config" ) { this.input = document.querySelector(`input#${inputID}`); this.prefix = prefix; this.contextTxtEl = document.querySelector( - `span[data-${this.prefix}-setting-select-text="context"]`, + `span[data-${this.prefix}-setting-select-text="context"]` ); this.typeTxtEl = document.querySelector( - `span[data-${this.prefix}-setting-select-text="type"]`, + `span[data-${this.prefix}-setting-select-text="type"]` ); this.comboboxEl = document.querySelector( - `[data-${this.prefix}-tabs-select] [data-combobox]`, + `[data-${this.prefix}-tabs-select] [data-combobox]` ); this.isComboCheck = false; this.tabContainer = tabContainer; this.contentContainer = contentContainer; this.tabsEls = this.tabContainer.querySelectorAll( - `[data-tab-select-handler]`, + `[data-tab-select-handler]` ); this.comboboxEl = this.tabContainer .querySelector("[data-tab-select-dropdown]") @@ -325,16 +325,16 @@ class FilterSettings { try { if ( (e.target.hasAttribute( - `data-${this.prefix}-setting-select-dropdown-btn`, + `data-${this.prefix}-setting-select-dropdown-btn` ) && e.target.getAttribute( - `data-${this.prefix}-setting-select-dropdown-btn`, + `data-${this.prefix}-setting-select-dropdown-btn` ) === `context`) || (e.target.hasAttribute( - `data-${this.prefix}-setting-select-dropdown-btn`, + `data-${this.prefix}-setting-select-dropdown-btn` ) && e.target.getAttribute( - `data-${this.prefix}-setting-select-dropdown-btn`, + `data-${this.prefix}-setting-select-dropdown-btn` ) === `type`) ) { return this.runFilter(); @@ -464,7 +464,7 @@ class FilterSettings { .toLowerCase(); const settingEl = multSetting.querySelector("input")?.getAttribute("id") || - setting.querySelector("select")?.getAttribute("id") || + multSetting.querySelector("select")?.getAttribute("id") || ""; const settingId = settingEl.trim().toLowerCase().replaceAll("_", " "); if ( @@ -531,7 +531,7 @@ class FilterSettings { const multGroups = this.contentContainer .querySelector(`[data-plugin-item=${tabName}]`) .querySelectorAll( - `[data-${this.prefix}-settings-multiple^="${multHandlerName}"]`, + `[data-${this.prefix}-settings-multiple^="${multHandlerName}"]` ); // check for each if all settings are hidden @@ -539,7 +539,7 @@ class FilterSettings { const multGroup = multGroups[j]; let isAllMultSettingHidden = true; const settings = multGroup.querySelectorAll( - `[data-setting-container]`, + `[data-setting-container]` ); for (let k = 0; k < settings.length; k++) { if (!settings[k].classList.contains("hidden")) { @@ -632,7 +632,7 @@ class FilterSettings { .querySelector("[data-tab-select-dropdown-btn]") .setAttribute("data-tab-id", "no-match"); this.tabContainer.querySelector( - "[data-tab-select-dropdown-btn] span", + "[data-tab-select-dropdown-btn] span" ).textContent = "No match"; // we want to close dropdown in case open previously this.toggleDropdown(true, true, false); @@ -641,7 +641,7 @@ class FilterSettings { // case at least one match const currTabBtn = this.tabContainer.querySelector( - `[data-tab-select-handler='${tabNameBeforeFilter}']`, + `[data-tab-select-handler='${tabNameBeforeFilter}']` ); // case the previous plugin is still visible, set is as active by clicking it again @@ -661,7 +661,7 @@ class FilterSettings { return; const hiddenTabsEl = this.tabContainer.querySelectorAll( - `[data-tab-select-handler][class*="!hidden"]`, + `[data-tab-select-handler][class*="!hidden"]` ); if (hiddenTabsEl.length < this.tabsEls.length - 1) @@ -672,15 +672,15 @@ class FilterSettings { toggleDropdown( avoidComboFocus = false, disableOpen = false, - disableClose = false, + disableClose = false ) { // avoid this on mobile if (window.innerWidth < 768) return; const dropdownEl = this.tabContainer.querySelector( - "[data-tab-select-dropdown]", + "[data-tab-select-dropdown]" ); const dropdownBtn = this.tabContainer.querySelector( - "[data-tab-select-dropdown-btn]", + "[data-tab-select-dropdown-btn]" ); if (this.comboboxEl && avoidComboFocus) this.comboboxEl.setAttribute("data-focus", "false"); @@ -736,7 +736,7 @@ class FilterSettings { const multGroups = this.contentContainer .querySelector(`[data-plugin-item=${tabName}]`) .querySelectorAll( - `[data-${this.prefix}-settings-multiple^="${multHandlerName}"]`, + `[data-${this.prefix}-settings-multiple^="${multHandlerName}"]` ); // check for each if all settings are hidden for (let j = 0; j < multGroups.length; j++) { @@ -751,7 +751,7 @@ class FilterSettings { multGroup.classList.remove("hidden"); const settings = multGroup.querySelectorAll( - `[data-setting-container]`, + `[data-setting-container]` ); for (let k = 0; k < settings.length; k++) { settings[k].classList.remove("hidden"); @@ -768,7 +768,7 @@ class FilterSettings { .querySelector(`[data-plugin-item="${tabName}"]`) .querySelector(`[data-plugin-settings]`); const settings = settingContainer.querySelectorAll( - "[data-setting-container]", + "[data-setting-container]" ); return settings; } @@ -790,7 +790,7 @@ class FilterSettings { ) continue; const settingsContainer = settingMultipleGroup.querySelectorAll( - `[data-setting-container]`, + `[data-setting-container]` ); settingsContainer.forEach((setting) => { @@ -859,7 +859,7 @@ class CheckNoMatchFilter { elsToCheck, elContainer, noMatchEl, - classToCheck = "hidden", + classToCheck = "hidden" ) { this.input = input; this.type = type; @@ -989,11 +989,11 @@ class Settings { this.mode = mode; this.serverNameInps = this.container.querySelectorAll( - 'input[name="SERVER_NAME"][data-setting-input]', + 'input[name="SERVER_NAME"][data-setting-input]' ); this.submitBtn = this.container.querySelector( - `button[data-${this.prefix}-modal-submit]`, + `button[data-${this.prefix}-modal-submit]` ); this.currAction = ""; this.currMethod = ""; @@ -1091,7 +1091,7 @@ class Settings { parentEl = this.container, attMethodName = "data-default-method", attValueName = "data-default-value", - avoidMultiple = true, + avoidMultiple = true ) { // Start with input-like (input, checkbox) const inps = avoidMultiple @@ -1122,7 +1122,7 @@ class Settings { "select", select, select.getAttribute("name"), - parentEl, + parentEl ) ) return; @@ -1132,15 +1132,15 @@ class Settings { //click the custom select dropdown to update select value select.parentElement .querySelector( - `button[data-setting-select-dropdown-btn][value='${defaultVal}']`, + `button[data-setting-select-dropdown-btn][value='${defaultVal}']` ) .click(); //set state to custom visible el const btnCustom = document.querySelector( `[data-setting-select=${select.getAttribute( - "data-setting-select-default", - )}]`, + "data-setting-select-default" + )}]` ); this.setDisabledByMethod(btnCustom, defaultMethod); @@ -1169,7 +1169,7 @@ class Settings { settings, setMethodUI, forceEnabled, - emptyServerName, + emptyServerName ) { // Get global needed data this.currAction = action; @@ -1186,7 +1186,7 @@ class Settings { updateOldNameValue() { const oldNameInps = this.container.querySelectorAll( - 'input[name="OLD_SERVER_NAME"]', + 'input[name="OLD_SERVER_NAME"]' ); oldNameInps.forEach((inp) => { @@ -1198,7 +1198,7 @@ class Settings { updateOperation() { // update operation and other hidden inputs for all mode in modal const operationInps = this.container.querySelectorAll( - 'input[name="operation"]', + 'input[name="operation"]' ); operationInps.forEach((inp) => { inp.setAttribute("value", this.operation); @@ -1270,7 +1270,7 @@ class Settings { if (inp.tagName === "SELECT") { inp.parentElement .querySelector( - `button[data-setting-select-dropdown-btn][value='${value}']`, + `button[data-setting-select-dropdown-btn][value='${value}']` ) .click(); inp.setAttribute("data-method", method); @@ -1337,7 +1337,7 @@ class SettingsMultiple extends Settings { const attName = btn.getAttribute(`data-${this.prefix}-multiple-add`); //get all multiple groups const multipleEls = this.container.querySelectorAll( - `[data-${this.prefix}-settings-multiple*="${attName}"]`, + `[data-${this.prefix}-settings-multiple*="${attName}"]` ); //case no schema if (multipleEls.length <= 0) return; @@ -1349,7 +1349,7 @@ class SettingsMultiple extends Settings { //and keep the highest num multipleEls.forEach((container) => { const ctnrName = container.getAttribute( - `data-${this.prefix}-settings-multiple`, + `data-${this.prefix}-settings-multiple` ); const [containerSuffix, containerIsNum, containerName] = this.getSuffixData(ctnrName); @@ -1362,7 +1362,7 @@ class SettingsMultiple extends Settings { const setNum = +currNum === 0 ? `` : `_${currNum}`; //the default (schema) group is the last group const schema = this.container.querySelector( - `[data-${this.prefix}-settings-multiple="${attName}_SCHEMA"]`, + `[data-${this.prefix}-settings-multiple="${attName}_SCHEMA"]` ); //clone schema to create a group with new num const schemaClone = schema.cloneNode(true); @@ -1403,12 +1403,12 @@ class SettingsMultiple extends Settings { // We are not removing it really, just hiding it and update values to default // By setting default value, group will be send to server and delete (because a setting with default value is useless to keep) const multContainer = e.target.closest( - `[data-${this.prefix}-settings-multiple]`, + `[data-${this.prefix}-settings-multiple]` ); multContainer.classList.add("hidden-multiple"); // get setting container const settings = multContainer.querySelectorAll( - `[data-setting-container]`, + `[data-setting-container]` ); settings.forEach((setting) => { // for regular input @@ -1435,7 +1435,7 @@ class SettingsMultiple extends Settings { // for select try { const selects = setting.querySelectorAll( - "button[data-setting-select]", + "button[data-setting-select]" ); selects.forEach((select) => { const defaultVal = select.getAttribute("data-default") || ""; @@ -1446,8 +1446,8 @@ class SettingsMultiple extends Settings { defaultVal; const dropdown = this.container.querySelector( `[data-setting-select-dropdown="${select.getAttribute( - "data-setting-select", - )}"]`, + "data-setting-select" + )}"]` ); dropdown.querySelector(`button[value=${defaultVal}]`).click(); }); @@ -1472,7 +1472,7 @@ class SettingsMultiple extends Settings { removePrevMultiples() { const multiPlugins = this.container.querySelectorAll( - `[data-${this.prefix}-settings-multiple]`, + `[data-${this.prefix}-settings-multiple]` ); multiPlugins.forEach((multiGrp) => { if ( @@ -1503,11 +1503,11 @@ class SettingsMultiple extends Settings { setMultipleToDOM(sortMultObj) { // We want to loop on each schema container for (const [schemaCtnrName, multGroupBySuffix] of Object.entries( - sortMultObj, + sortMultObj )) { //we need to access the DOM schema container const schemaCtnr = this.container.querySelector( - `[data-${this.prefix}-settings-multiple="${schemaCtnrName}"]`, + `[data-${this.prefix}-settings-multiple="${schemaCtnrName}"]` ); //now we have to loop on each multiple settings group for (const [suffix, settings] of Object.entries(multGroupBySuffix)) { @@ -1523,7 +1523,7 @@ class SettingsMultiple extends Settings { for (const [name, data] of Object.entries(settings)) { //get setting container of clone container const settingContainer = schemaCtnrClone.querySelector( - `[data-setting-container="${name}"]`, + `[data-setting-container="${name}"]` ); } //send schema clone to DOM and show it @@ -1546,7 +1546,7 @@ class SettingsMultiple extends Settings { const multiples = {}; const schemaSettings = this.container.querySelectorAll( - `[data-setting-container$="SCHEMA"]`, + `[data-setting-container$="SCHEMA"]` ); // loop on every schema settings @@ -1573,13 +1573,13 @@ class SettingsMultiple extends Settings { addOneMultGroup() { const multAddBtns = this.container.querySelectorAll( - `[data-${this.prefix}-multiple-add]`, + `[data-${this.prefix}-multiple-add]` ); multAddBtns.forEach((btn) => { const att = btn.getAttribute(`data-${this.prefix}-multiple-add`); //check if already one (SCHEMA exclude so length >= 2) const multGroups = this.container.querySelectorAll( - `[data-${this.prefix}-settings-multiple^="${att}"]`, + `[data-${this.prefix}-settings-multiple^="${att}"]` ); if (multGroups.length >= 2) return; @@ -1596,7 +1596,7 @@ class SettingsMultiple extends Settings { hiddenIfNoMultiples() { //hide multiple btn if no multiple exist on a plugin const multiples = this.container.querySelectorAll( - `[data-${this.prefix}-settings-multiple]`, + `[data-${this.prefix}-settings-multiple]` ); multiples.forEach((container) => { if (container.querySelectorAll(`[data-setting-container]`).length <= 0) @@ -1608,7 +1608,7 @@ class SettingsMultiple extends Settings { showMultByAtt(att) { const multContainers = this.container.querySelectorAll( - `[data-${this.prefix}-settings-multiple^=${att}]`, + `[data-${this.prefix}-settings-multiple^=${att}]` ); multContainers.forEach((container) => { if ( @@ -1622,7 +1622,7 @@ class SettingsMultiple extends Settings { toggleMultByAtt(att) { const multContainers = this.container.querySelectorAll( - `[data-${this.prefix}-settings-multiple^=${att}]`, + `[data-${this.prefix}-settings-multiple^=${att}]` ); multContainers.forEach((container) => { if ( @@ -1657,10 +1657,10 @@ class SettingsMultiple extends Settings { selects.forEach((select) => { const method = select.getAttribute("data-default-method"); const name = select.getAttribute( - `data-${this.prefix}-setting-select-default`, + `data-${this.prefix}-setting-select-default` ); const selDOM = this.container.querySelector( - `button[data-${this.prefix}-setting-select='${name}']`, + `button[data-${this.prefix}-setting-select='${name}']` ); if (method === "ui" || method === "default") { selDOM.removeAttribute("disabled", ""); @@ -1685,14 +1685,14 @@ class SettingsMultiple extends Settings { ? name.replace(`_${splitName[splitName.length - 1]}`, "").trim() : name.trim(); const relateSetting = this.container.querySelector( - `[data-setting-container=${nameSuffixLess}_SCHEMA]`, + `[data-setting-container=${nameSuffixLess}_SCHEMA]` ); if (!relateSetting) continue; const relateCtnr = relateSetting.closest( - `[data-${this.prefix}-settings-multiple]`, + `[data-${this.prefix}-settings-multiple]` ); const relateCtnrName = relateCtnr.getAttribute( - `data-${this.prefix}-settings-multiple`, + `data-${this.prefix}-settings-multiple` ); //then we sort the setting on the right container name by suffixe number if (!(relateCtnrName in sortMultiples)) { @@ -1713,7 +1713,7 @@ class SettingsMultiple extends Settings { `data-${this.prefix}-settings-multiple`, schemaCtnrClone .getAttribute(`data-${this.prefix}-settings-multiple`) - .replace("_SCHEMA", suffix), + .replace("_SCHEMA", suffix) ); // Get all elemennts by attribute to update _SCHEMA by suffix @@ -1732,7 +1732,7 @@ class SettingsMultiple extends Settings { attEls.forEach((attEl) => { attEl.setAttribute( att, - attEl.getAttribute(att).replace("_SCHEMA", suffix), + attEl.getAttribute(att).replace("_SCHEMA", suffix) ); }); }); @@ -1819,7 +1819,7 @@ class SettingsEditor extends SettingsMultiple { addDefaultEditorIfNone() { // get containers with _SCHEMA const editorContainers = this.container.querySelectorAll( - "[data-editor-container$='_SCHEMA']", + "[data-editor-container$='_SCHEMA']" ); editorContainers.forEach((editorContainer) => { // Check if others editor exists with same base name @@ -1827,7 +1827,7 @@ class SettingsEditor extends SettingsMultiple { .getAttribute("data-editor-container") .replace("_SCHEMA", ""); const otherEditors = this.container.querySelectorAll( - `[data-editor-container*='${editorName}']`, + `[data-editor-container*='${editorName}']` ); if (otherEditors.length > 1) return; // Add default editor @@ -1845,7 +1845,7 @@ class SettingsEditor extends SettingsMultiple { // reset previous editors this.editorEls.forEach((editor) => { const editorContainer = editor.container.closest( - "[data-editor-container]", + "[data-editor-container]" ); editorContainer.remove(); editor.destroy(); @@ -1854,7 +1854,7 @@ class SettingsEditor extends SettingsMultiple { this.editorEls = []; // get only container ending with _SCHEMA const editorContainers = this.container.querySelectorAll( - "[data-editor-container$='_SCHEMA']", + "[data-editor-container$='_SCHEMA']" ); const configsSettings = this.getEditorSettings(); // Create instances on the right containers @@ -1875,7 +1875,7 @@ class SettingsEditor extends SettingsMultiple { editorType, editorName, num, - editorValue, + editorValue ); } }); @@ -1894,11 +1894,11 @@ class SettingsEditor extends SettingsMultiple { editor.setAttribute("name", `${contName}_${num}`); } const filenameInp = containerClone.querySelector( - `input[data-editor-filename]`, + `input[data-editor-filename]` ); if (filenameInp) filenameInp.value = name; const hiddenInp = containerClone.querySelector( - `textarea[data-editor-input]`, + `textarea[data-editor-input]` ); if (hiddenInp) { hiddenInp.setAttribute("data-config-type", type); @@ -1957,7 +1957,7 @@ class SettingsAdvanced extends SettingsEditor { settings, setMethodUI = false, forceEnabled = false, - emptyServerName = false, + emptyServerName = false ) { this.updateData( action, @@ -1966,7 +1966,7 @@ class SettingsAdvanced extends SettingsEditor { settings, setMethodUI, forceEnabled, - emptyServerName, + emptyServerName ); this.setSettingsAdvanced(); this.resetServerName(); @@ -1982,7 +1982,7 @@ class SettingsAdvanced extends SettingsEditor { checkVisibleInpsValidity() { try { const inps = this.container.querySelectorAll( - "[data-plugin-item]:not(.hidden) input[data-setting-input], [data-plugin-item][class*='hidden'] input[data-setting-input]", + "[data-plugin-item]:not(.hidden) input[data-setting-input], [data-plugin-item][class*='hidden'] input[data-setting-input]" ); // merge input with visible and not visible @@ -2008,7 +2008,7 @@ class SettingsAdvanced extends SettingsEditor { ) { // Case conflict with another server name const serverNames = document.querySelectorAll( - "[data-services-service]", + "[data-services-service]" ); const serverNameValue = inps[i].getAttribute("value"); serverNames.forEach((serverName) => { @@ -2023,7 +2023,7 @@ class SettingsAdvanced extends SettingsEditor { } const errMsg = this.container.querySelector( - "[data-services-modal-error-msg]", + "[data-services-modal-error-msg]" ); if (!isAllValid) { invalidInp.classList.add("invalid");