librewolf
/
bunkerized-nginx
mirror of https://github.com/bunkerity/bunkerized-nginx
4
0
Fork 1
Code Issues Projects Releases Wiki Activity

show method involved in disabled setting on hover

This commit is contained in:
BlasenhauerJ 2023-04-26 14:59:01 +02:00
parent c0e649d680
commit 53e145b919
5 changed files with 3711 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3580
src/ui/static/css/dashboard.css
View File

File diff suppressed because one or more lines are too long

3
src/ui/static/js/global_config.js
View File

@ -1,4 +1,4 @@
import { Checkbox, Select, Password } from "./utils/form.js";
import { Checkbox, Select, Password, DisabledPop } from "./utils/form.js";
import {
Popover,
Tabs,
@ -29,6 +29,7 @@ class Multiple {
const setCheckbox = new Checkbox();
const setSelect = new Select();
const setPassword = new Password();
const setDisabledPop = new DisabledPop();
const setPopover = new Popover("main", "global-config");
const setTabs = new Tabs("[global-config-tabs]", "global-config");

82
src/ui/static/js/services.js
View File

@ -1,4 +1,4 @@
import { Checkbox, Select, Password } from "./utils/form.js";
import { Checkbox, Select, Password, DisabledPop } from "./utils/form.js";
import {
Popover,
Tabs,
@ -12,12 +12,16 @@ class ServiceModal {
this.modal = document.querySelector("[data-services-modal]");
this.modalTitle = this.modal.querySelector("[data-services-modal-title]");
this.modalTabs = this.modal.querySelector(["[data-services-tabs]"]);
this.modalTabsHeader = this.modal.querySelector(["[data-services-tabs-header]"]);
this.modalTabsHeader = this.modal.querySelector([
"[data-services-tabs-header]",
]);
this.modalCard = this.modal.querySelector("[data-services-modal-card]");
//modal forms
this.formNewEdit = this.modal.querySelector("[data-services-modal-form]");
this.formDelete = this.modal.querySelector("[data-services-modal-form-delete]");
this.formDelete = this.modal.querySelector(
"[data-services-modal-form-delete]"
);
//container
this.container = document.querySelector("main");
this.init();
@ -27,8 +31,12 @@ class ServiceModal {
//to update modal data on new button click
getActionAndServName(target) {
const action = target.closest("button").getAttribute("data-services-action");
const serviceName = target.closest("button").getAttribute("data-services-name");
const action = target
.closest("button")
.getAttribute("data-services-action");
const serviceName = target
.closest("button")
.getAttribute("data-services-name");
return [action, serviceName];
}
@ -37,7 +45,9 @@ class ServiceModal {
this.modal.addEventListener("click", (e) => {
//close
try {
if (e.target.closest("button").hasAttribute("data-services-modal-close")) {
if (
e.target.closest("button").hasAttribute("data-services-modal-close")
) {
this.closeModal();
}
} catch (err) {}
@ -47,7 +57,8 @@ class ServiceModal {
//edit action
try {
if (
e.target.closest("button").getAttribute("data-services-action") === "edit"
e.target.closest("button").getAttribute("data-services-action") ===
"edit"
) {
//set form info and right form
const [action, serviceName] = this.getActionAndServName(e.target);
@ -67,7 +78,8 @@ class ServiceModal {
//new action
try {
if (
e.target.closest("button").getAttribute("data-services-action") === "new"
e.target.closest("button").getAttribute("data-services-action") ===
"new"
) {
//set form info and right form
const [action, serviceName] = this.getActionAndServName(e.target);
@ -139,7 +151,9 @@ class ServiceModal {
document
.querySelector(
`[data-setting-select=${select.getAttribute("data-setting-select-default")}]`
`[data-setting-select=${select.getAttribute(
"data-setting-select-default"
)}]`
)
.removeAttribute("disabled");
@ -331,7 +345,8 @@ class Multiple {
//edit button
try {
if (
e.target.closest("button").getAttribute("data-services-action") === "edit"
e.target.closest("button").getAttribute("data-services-action") ===
"edit"
) {
//remove all multiples
this.removePrevMultiples();
@ -351,7 +366,8 @@ class Multiple {
//new button
try {
if (
e.target.closest("button").getAttribute("data-services-action") === "new"
e.target.closest("button").getAttribute("data-services-action") ===
"new"
) {
this.removePrevMultiples();
this.addOneMultGroup();
@ -363,7 +379,9 @@ class Multiple {
//ADD BTN
try {
if (
e.target.closest("button").hasAttribute(`data-${this.prefix}-multiple-add`)
e.target
.closest("button")
.hasAttribute(`data-${this.prefix}-multiple-add`)
) {
//get plugin from btn
const btn = e.target.closest("button");
@ -453,7 +471,9 @@ class Multiple {
const relateSetting = document.querySelector(
`[data-setting-container=${nameSuffixLess}_SCHEMA]`
);
const relateCtnr = relateSetting.closest("[data-services-settings-multiple]");
const relateCtnr = relateSetting.closest(
"[data-services-settings-multiple]"
);
const relateCtnrName = relateCtnr.getAttribute(
"data-services-settings-multiple"
);
@ -472,11 +492,15 @@ class Multiple {
addOneMultGroup() {
const settings = document.querySelector("[data-services-modal-form]");
const multAddBtns = settings.querySelectorAll("[data-services-multiple-add]");
const multAddBtns = settings.querySelectorAll(
"[data-services-multiple-add]"
);
multAddBtns.forEach((btn) => {
//check if already one (SCHEMA exclude so length >= 2)
const plugin = btn.closest("[data-plugin-item]");
if (plugin.querySelectorAll("[data-services-settings-multiple]").length >= 2)
if (
plugin.querySelectorAll("[data-services-settings-multiple]").length >= 2
)
return;
btn.click();
});
@ -488,7 +512,9 @@ class Multiple {
);
multContainers.forEach((container) => {
if (
!container.getAttribute("data-services-settings-multiple").includes("SCHEMA")
!container
.getAttribute("data-services-settings-multiple")
.includes("SCHEMA")
)
container.classList.remove("hidden");
});
@ -500,7 +526,9 @@ class Multiple {
);
multContainers.forEach((container) => {
if (
!container.getAttribute("data-services-settings-multiple").includes("SCHEMA")
!container
.getAttribute("data-services-settings-multiple")
.includes("SCHEMA")
)
container.classList.toggle("hidden");
});
@ -546,7 +574,7 @@ class Multiple {
//we have to clone schema container first
const schemaCtnrClone = schemaCtnr.cloneNode(true);
//remove id to avoid duplicate and for W3C
schemaCtnr.removeAttribute('id')
schemaCtnr.removeAttribute("id");
//now we replace _SCHEMA by current suffix everywhere we need
//unless it is 0 that means no suffix
const suffixFormat = +suffix === 0 ? `` : `_${suffix}`;
@ -594,9 +622,14 @@ class Multiple {
settingCtnrs.forEach((settingCtnr) => {
settingCtnr.setAttribute(
"data-setting-container",
settingCtnr.getAttribute("data-setting-container").replace("_SCHEMA", suffix)
settingCtnr
.getAttribute("data-setting-container")
.replace("_SCHEMA", suffix)
);
settingCtnr.setAttribute(
"id",
settingCtnr.getAttribute("id").replace("_SCHEMA", suffix)
);
settingCtnr.setAttribute('id', settingCtnr.getAttribute('id').replace("_SCHEMA", suffix))
});
//rename input
@ -702,7 +735,9 @@ class Multiple {
const selects = setting.querySelectorAll("select");
selects.forEach((select) => {
const method = select.getAttribute("data-method") || "default";
const name = select.getAttribute("data-services-setting-select-default");
const name = select.getAttribute(
"data-services-setting-select-default"
);
const selDOM = document.querySelector(
`button[data-services-setting-select='${name}']`
);
@ -745,7 +780,9 @@ class Multiple {
);
multiPlugins.forEach((multiGrp) => {
if (
!multiGrp.getAttribute("data-services-settings-multiple").includes("SCHEMA")
!multiGrp
.getAttribute("data-services-settings-multiple")
.includes("SCHEMA")
)
multiGrp.remove();
});
@ -774,6 +811,7 @@ class Multiple {
const setCheckbox = new Checkbox();
const setSelect = new Select();
const setPassword = new Password();
const setDisabledPop = new DisabledPop();
const setPopover = new Popover();
const setTabs = new Tabs();

72
src/ui/static/js/utils/form.js
View File

@ -47,9 +47,13 @@ class Select {
select.classList.add("hidden");
select.classList.remove("flex");
});
const btnEls = document.querySelectorAll("button[data-setting-select]");
const btnEls = document.querySelectorAll(
"button[data-setting-select]"
);
btnEls.forEach((btn) => {
const dropdownChevron = btn.querySelector(`svg[data-setting-select]`);
const dropdownChevron = btn.querySelector(
`svg[data-setting-select]`
);
dropdownChevron.classList.remove("rotate-180");
});
}
@ -67,9 +71,13 @@ class Select {
//SELECT DROPDOWN BTN LOGIC
try {
if (
e.target.closest("button").hasAttribute(`data-setting-select-dropdown-btn`)
e.target
.closest("button")
.hasAttribute(`data-setting-select-dropdown-btn`)
) {
const btn = e.target.closest(`button[data-setting-select-dropdown-btn]`);
const btn = e.target.closest(
`button[data-setting-select-dropdown-btn]`
);
const btnValue = btn.getAttribute("value");
//add new value to custom
@ -106,8 +114,9 @@ class Select {
btn.classList.add("dark:bg-primary", "bg-primary", "text-gray-300");
//close dropdown
const dropdownChevron =
selectCustom.querySelector(`svg[data-setting-select]`);
const dropdownChevron = selectCustom.querySelector(
`svg[data-setting-select]`
);
dropdownChevron.classList.remove("rotate-180");
//update real select element
@ -158,7 +167,9 @@ class Password {
if (e.target.closest("button").hasAttribute("data-setting-password")) {
const btn = e.target.closest("button");
const action = btn.getAttribute("data-setting-password");
const inp = btn.closest("[data-setting-container]").querySelector("input");
const inp = btn
.closest("[data-setting-container]")
.querySelector("input");
this.setValDisplay(action, inp);
this.hiddenBtns(btn);
this.showOppositeBtn(btn, action);
@ -202,4 +213,49 @@ class Password {
}
}
export { Checkbox, Select, Password };
class DisabledPop {
constructor() {
this.init();
}
init() {
window.addEventListener("pointerover", (e) => {
//for checkbox and regular inputs
if (e.target.tagName === "INPUT") {
const el = e.target;
this.showPopup(el, "input");
}
//for select custom
if (
e.target.tagName === "BUTTON" &&
e.target.hasAttribute("data-setting-select")
) {
const el = e.target;
this.showPopup(el, "select");
}
});
window.addEventListener("pointerout", (e) => {
try {
const popupEl = e.target
.closest("div")
.querySelector("div[data-disabled-info]");
popupEl.remove();
} catch (err) {}
});
}
showPopup(el, type = "input") {
if (!el.hasAttribute("disabled")) return;
const method = el.getAttribute("data-default-method");
const popupHTML = `
<div data-disabled-info class="${
type === "select" ? "translate-y-2" : ""
} bg-blue-500 absolute right-2 rounded-lg px-2 py-1 z-20">
<p class="m-0 text-xs text-white">disabled by ${method}</p>
</div>`;
el.insertAdjacentHTML("beforebegin", popupHTML);
}
}
export { Checkbox, Select, Password, DisabledPop };

11
src/ui/templates/settings_plugins.html
View File

@ -33,7 +33,7 @@ data-plugin-item="{{plugin['id']}}"
class="mx-0 sm:mx-4 my-2 col-span-12 md:mx-6 md:my-3 md:col-span-6 2xl:mx-6 2xl:my-3 2xl:col-span-4"
id="form-edit-{{current_endpoint}}-{{ value["id"] }}">
<!-- title and info -->
<div class="flex items-center my-1 relative">
<div class="flex items-center my-1 relative z-10">
<h5
class="transition duration-300 ease-in-out dark:opacity-90 text-sm sm:text-md font-bold m-0 dark:text-gray-300"
>
@ -102,6 +102,7 @@ data-plugin-item="{{plugin['id']}}"
<button
{% if global_config[setting]['method'] != 'ui' and global_config[setting]['method'] != 'default' %} disabled {% endif %} data-setting-select="{{value['id']}}"
data-default-value="{{global_config[setting]['value']}}"
data-default-method="{{global_config[setting]['method']}}"
type="button"
class="disabled:opacity-75 dark:disabled:text-gray-300 disabled:text-gray-700 disabled:bg-gray-400 disabled:border-gray-400 dark:disabled:bg-gray-800 dark:disabled:border-gray-800 duration-300 ease-in-out dark:opacity-90 dark:border-slate-600 dark:bg-slate-700 dark:text-gray-300 focus:border-primary flex justify-between align-middle items-center text-left text-sm leading-5.6 ease w-full rounded-lg border border-solid border-gray-300 bg-white bg-clip-padding px-1.5 py-1 md:px-3 md:py-2 font-normal text-gray-700 transition-all placeholder:text-gray-500"
>
@ -168,7 +169,7 @@ data-plugin-item="{{plugin['id']}}"
<!-- checkbox -->
{% if value["type"] == "check" %}
<div data-checkbox-handler="{{value['id']}}" class="relative mb-7 md:mb-0">
<div data-checkbox-handler="{{value['id']}}" class="relative mb-7 md:mb-0 z-10">
<input id="{{setting}}" name="{{setting}}"
data-default-method="{{global_config[setting]['method']}}"
data-default-value="{{global_config[setting]['value']}}" {% if
@ -176,7 +177,7 @@ data-plugin-item="{{plugin['id']}}"
!= 'default' %} disabled {% endif %} {% if global_config[setting]['value'] and
global_config[setting]['value'] == 'yes' or not
global_config[setting]['value'] and value['default'] == 'yes' %} checked {%
endif %} id="checkbox-{{value['id']}}" class="cursor-pointer disabled:cursor-default disabled:pointer-events-none
endif %} id="checkbox-{{value['id']}}" class="cursor-pointer disabled:cursor-default
relative dark:border-slate-600 dark:bg-slate-700 z-10 checked:z-0 w-5 h-5 ease
text-base rounded-1.4 checked:bg-primary checked:border-primary
dark:checked:bg-primary dark:checked:border-primary duration-250 float-left
@ -258,7 +259,7 @@ data-plugin-item="{{plugin['id']}}"
mx-0 sm:mx-4 my-2 col-span-12 md:mx-6 md:my-3 md:col-span-6 2xl:mx-6 2xl:my-3 2xl:col-span-4"
id="form-edit-{{current_endpoint}}-{{ value["id"] }}_SCHEMA">
<!-- title and info -->
<div class="flex items-center my-1 relative">
<div class="flex items-center my-1 relative z-10">
<h5
class="transition duration-300 ease-in-out dark:opacity-90 text-sm sm:text-md font-bold m-0 dark:text-gray-300"
>
@ -385,7 +386,7 @@ data-plugin-item="{{plugin['id']}}"
<input id="{{setting}}_SCHEMA" name="{{setting}}_SCHEMA"
data-default-method="default"
data-default-value="{{value['default']}}" {% if value['default'] == 'yes' %} checked {%
endif %} id="checkbox-{{value['id']}}" class="relative cursor-pointer disabled:cursor-default disabled:pointer-events-none
endif %} id="checkbox-{{value['id']}}" class="relative cursor-pointer disabled:cursor-default
dark:border-slate-600 dark:bg-slate-700 z-10 checked:z-0 w-5 h-5 ease
text-base rounded-1.4 checked:bg-primary checked:border-primary
dark:checked:bg-primary dark:checked:border-primary duration-250 float-left