Skip to content

Commit

Permalink
standard dropdown class + precommit
Browse files Browse the repository at this point in the history 
Now pages are sharing a standard dropdown class instead of a class per page
  • Loading branch information
@syrk4web
syrk4web committed May 14, 2024
1 parent 08e9016 commit 81612d6
Show file tree
Hide file tree
Showing 10 changed files with 672 additions and 1,674 deletions.
243 changes: 39 additions & 204 deletions src/ui/static/js/bans.js
View file
Original file line number Diff line number Diff line change
@@ -1,183 +1,4 @@
import {
Filter
} from "./utils/dashboard.js";


class Dropdown {
constructor(prefix = "bans") {
this.prefix = prefix;
this.container = document.querySelector("main");
this.lastDrop = "";
this.initDropdown();
}

initDropdown() {
this.container.addEventListener("click", (e) => {
//SELECT BTN LOGIC
try {
if (
e.target
.closest("button")
.hasAttribute(`data-${this.prefix}-setting-select`) &&
!e.target.closest("button").hasAttribute(`disabled`)
) {
const btnName = e.target
.closest("button")
.getAttribute(`data-${this.prefix}-setting-select`);
if (this.lastDrop !== btnName) {
this.lastDrop = btnName;
this.closeAllDrop();
}

this.toggleSelectBtn(e);
}
} catch (err) {}
//SELECT DROPDOWN BTN LOGIC
try {
if (
e.target
.closest("button")
.hasAttribute(`data-${this.prefix}-setting-select-dropdown-btn`)
) {
const btn = e.target.closest("button");
const btnValue = btn.getAttribute("value");
const btnSetting = btn.getAttribute(
`data-${this.prefix}-setting-select-dropdown-btn`,
);
//stop if same value to avoid new fetching
const isSameVal = this.isSameValue(btnSetting, btnValue);
if (isSameVal) return this.hideDropdown(btnSetting);
//else, add new value to custom
this.setSelectNewValue(btnSetting, btnValue);
//close dropdown and change style
this.hideDropdown(btnSetting);

if (
!e.target.closest("button").hasAttribute(`data-${this.prefix}-file`)
) {
this.changeDropBtnStyle(btnSetting, btn);
}
//show / hide filter
if (btnSetting === "instances") {
this.hideFilterOnLocal(btn.getAttribute("data-_type"));
}
}
} catch (err) {}
});
}

closeAllDrop() {
const drops = document.querySelectorAll(
`[data-${this.prefix}-setting-select-dropdown]`,
);
drops.forEach((drop) => {
drop.classList.add("hidden");
drop.classList.remove("flex");
document
.querySelector(
`svg[data-${this.prefix}-setting-select="${drop.getAttribute(
`data-${this.prefix}-setting-select-dropdown`,
)}"]`,
)
.classList.remove("rotate-180");
});
}

isSameValue(btnSetting, value) {
const selectCustom = document.querySelector(
`[data-${this.prefix}-setting-select-text="${btnSetting}"]`,
);
const currVal = selectCustom.textContent;
return currVal === value ? true : false;
}

setSelectNewValue(btnSetting, value) {
const selectCustom = document.querySelector(
`[data-${this.prefix}-setting-select="${btnSetting}"]`,
);
selectCustom.querySelector(
`[data-${this.prefix}-setting-select-text]`,
).textContent = value;
}

hideDropdown(btnSetting) {
//hide dropdown
const dropdownEl = document.querySelector(
`[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}"]`,
);
dropdownChevron.classList.remove("rotate-180");
}

changeDropBtnStyle(btnSetting, selectedBtn) {
const dropdownEl = document.querySelector(
`[data-${this.prefix}-setting-select-dropdown="${btnSetting}"]`,
);
//reset dropdown btns
const btnEls = dropdownEl.querySelectorAll("button");

btnEls.forEach((btn) => {
btn.classList.remove(
"bg-primary",
"dark:bg-primary",
"text-gray-300",
"text-gray-300",
);
btn.classList.add("bg-white", "dark:bg-slate-700", "text-gray-700");
});
//highlight clicked btn
selectedBtn.classList.remove(
"bg-white",
"dark:bg-slate-700",
"text-gray-700",
);
selectedBtn.classList.add("dark:bg-primary", "bg-primary", "text-gray-300");
}

toggleSelectBtn(e) {
const attribute = e.target
.closest("button")
.getAttribute(`data-${this.prefix}-setting-select`);
//toggle dropdown
const dropdownEl = document.querySelector(
`[data-${this.prefix}-setting-select-dropdown="${attribute}"]`,
);
const dropdownChevron = document.querySelector(
`svg[data-${this.prefix}-setting-select="${attribute}"]`,
);
dropdownEl.classList.toggle("hidden");
dropdownEl.classList.toggle("flex");
dropdownChevron.classList.toggle("rotate-180");
}

//hide date filter on local
hideFilterOnLocal(type) {
if (type === "local") {
this.hideInp(`input#from-date`);
this.hideInp(`input#to-date`);
}

if (type !== "local") {
this.showInp(`input#from-date`);
this.showInp(`input#to-date`);
}
}

showInp(selector) {
document.querySelector(selector).closest("div").classList.add("flex");
document.querySelector(selector).closest("div").classList.remove("hidden");
}

hideInp(selector) {
document.querySelector(selector).closest("div").classList.add("hidden");
document.querySelector(selector).closest("div").classList.remove("flex");
}
}
import { Filter, Dropdown } from "./utils/dashboard.js";

class Unban {
constructor(prefix = "bans") {
Expand Down Expand Up @@ -484,39 +305,53 @@ class AddBanModal {
}
}

const setDropdown = new Dropdown();
const setDropdown = new Dropdown("bans");
const setUnban = new Unban();
const setModal = new AddBanModal();

const filterContainer = document.querySelector("[data-bans-list-container]");
if(filterContainer) {
if (filterContainer) {
const noMatchEl = document.querySelector("[data-bans-nomatch]");
const filterEls = document.querySelectorAll(`[data-bans-item]`);
const keywordFilter = {
"handler": document.querySelector("input#keyword"),
"handlerType" : "input",
"value" : document.querySelector("input#keyword").value,
"filterEls": filterEls,
"filterAtt" : "data-bans-keyword",
"filterType" : "keyword",
handler: document.querySelector("input#keyword"),
handlerType: "input",
value: document.querySelector("input#keyword").value,
filterEls: filterEls,
filterAtt: "data-bans-keyword",
filterType: "keyword",
};
const reasonFilter = {
"handler": document.querySelector("[data-bans-setting-select-dropdown='reason']"),
"handlerType" : "select",
"value" : document.querySelector("[data-bans-setting-select-text='reason']").textContent.trim().toLowerCase(),
"filterEls": filterEls,
"filterAtt" : "data-bans-reason",
"filterType" : "match",
const reasonFilter = {
handler: document.querySelector(
"[data-bans-setting-select-dropdown='reason']",
),
handlerType: "select",
value: document
.querySelector("[data-bans-setting-select-text='reason']")
.textContent.trim()
.toLowerCase(),
filterEls: filterEls,
filterAtt: "data-bans-reason",
filterType: "match",
};

const termFilter = {
"handler": document.querySelector("[data-bans-setting-select-dropdown='term']"),
"handlerType" : "select",
"value" : document.querySelector("[data-bans-setting-select-text='term']").textContent.trim().toLowerCase(),
"filterEls": filterEls,
"filterAtt" : "data-bans-term",
"filterType" : "match",
handler: document.querySelector(
"[data-bans-setting-select-dropdown='term']",
),
handlerType: "select",
value: document
.querySelector("[data-bans-setting-select-text='term']")
.textContent.trim()
.toLowerCase(),
filterEls: filterEls,
filterAtt: "data-bans-term",
filterType: "match",
};
new Filter("bans", [keywordFilter, reasonFilter, termFilter], filterContainer, noMatchEl);
}

new Filter(
"bans",
[keywordFilter, reasonFilter, termFilter],
filterContainer,
noMatchEl,
);
}
Loading

0 comments on commit 81612d6

Please sign in to comment.