coding style

This commit is contained in:
Cüneyt Şentürk 2024-10-08 22:34:45 +01:00
parent 0af2fd79d9
commit 05fe48c185
1 changed files with 99 additions and 75 deletions

View File

@ -32,10 +32,12 @@ document.querySelectorAll("[data-table-body]").forEach((table) => {
if (document.body.clientWidth < 768 && event.target.closest('[overflow-x-hidden]')) {
return;
}
// click disabled when preview dialog is open
if (event.target.closest('[data-tooltip-target]')) {
return;
}
// click disabled when preview dialog is open
window.location.href = row_href;
});
@ -55,6 +57,7 @@ document.querySelectorAll("[data-table-body]").forEach((table) => {
if (document.body.clientWidth <= 768) {
table.querySelectorAll('[data-table-list]').forEach((actions) => {
let actions_html = actions.querySelector('[data-mobile-actions]');
if (actions_html) {
actions_html.addEventListener('click', function() {
this.closest('td').querySelector('[data-mobile-actions-modal]').classList.add('show');
@ -100,11 +103,10 @@ function collapseSub(key, event) {
document
.querySelectorAll(`[data-collapse="${key}"]` + " button[node|='child']")
.forEach(function(element) {
element.childNodes[0].classList.add("rotate-90")
element.childNodes[0].classList.add("rotate-90");
this.collapseSub(element.getAttribute("node"), event);
}.bind(this)
);
}.bind(this));
}
function expandSub(key, event) {
@ -139,9 +141,11 @@ document.addEventListener("DOMContentLoaded", () => {
const dropdownToggleEl = e.target.closest(
"[data-dropdown-toggle]"
);
const tooltipToggleEl = e.target.closest(
"[data-tooltip-target]"
);
if (dropdownToggleEl !== null && event == "click") {
runDropdown(dropdownToggleEl);
}
@ -169,8 +173,8 @@ function runDropdown(dropdownToggleEl) {
const dropdownMenuId = dropdownToggleEl.getAttribute(
"data-dropdown-toggle"
);
const dropdownMenuEl = document.getElementById(dropdownMenuId); // options
const dropdownMenuEl = document.getElementById(dropdownMenuId); // options
const placement = dropdownToggleEl.getAttribute("data-dropdown-placement");
var element = dropdownToggleEl;
@ -189,7 +193,8 @@ function runDropdown(dropdownToggleEl) {
},
},
],
}); // toggle when click on the button
});
// toggle when click on the button
if (dropdownMenuEl !== null) {
dropdownMenuEl.classList.toggle("hidden");
@ -205,20 +210,26 @@ function runDropdown(dropdownToggleEl) {
) {
dropdownMenuEl.classList.add("hidden");
dropdownMenuEl.classList.remove("block");
document.body.removeEventListener(
"click",
handleDropdownOutsideClick,
true
);
}
} // hide popper when clicking outside the element
}
// hide popper when clicking outside the element
document.body.addEventListener("click", handleDropdownOutsideClick, true);
if (dropdownMenuEl.getAttribute("data-click-outside-none") != null) {
if (event.target.getAttribute("data-click-outside") != null || event.target.parentElement.getAttribute("data-click-outside") != null) {
if (
event.target.getAttribute("data-click-outside") != null
|| event.target.parentElement.getAttribute("data-click-outside") != null
) {
dropdownMenuEl.classList.add("hidden");
dropdownMenuEl.classList.remove("block");
return;
}
@ -234,8 +245,10 @@ function runTooltip(tooltipToggleEl) {
const tooltipEl = document.getElementById(
tooltipToggleEl.getAttribute("data-tooltip-target")
);
const placement = tooltipToggleEl.getAttribute("data-tooltip-placement");
const trigger = tooltipToggleEl.getAttribute("data-tooltip-trigger");
const popperInstance = Popper.createPopper(tooltipToggleEl, tooltipEl, {
placement: placement ? placement : "top",
modifiers: [
@ -258,7 +271,6 @@ function runTooltip(tooltipToggleEl) {
}
// Enable the event listeners
popperInstance.setOptions((options) => ({
...options,
modifiers: [
@ -282,8 +294,8 @@ function runTooltip(tooltipToggleEl) {
} else {
tooltipEl.classList.add("opacity-0", "invisible");
}
// Disable the event listeners
// Disable the event listeners
popperInstance.setOptions((options) => ({
...options,
modifiers: [
@ -319,6 +331,7 @@ function runTooltip(tooltipToggleEl) {
showEvents.forEach((event) => {
tooltipToggleEl.addEventListener(event, show);
});
hideEvents.forEach((event) => {
tooltipToggleEl.addEventListener(event, hide);
});
@ -327,6 +340,7 @@ function runTooltip(tooltipToggleEl) {
//Auto Height for Textarea
const tx = document.querySelectorAll('[textarea-auto-height]');
for (let i = 0; i < tx.length; i++) {
tx[i].setAttribute('style', 'height:' + (tx[i].scrollHeight) + 'px;overflow-y:hidden;');
tx[i].addEventListener('input', OnInput, false);
@ -341,6 +355,7 @@ function OnInput() {
//Loading scenario for href links
document.querySelectorAll('[data-link-loading]').forEach((href) => {
let target_link_html = href.parentElement;
target_link_html.classList.add('relative');
target_link_html.addEventListener('click', function () {
@ -358,12 +373,17 @@ function marqueeAnimation(truncate) {
if (truncate.closest('[disable-marquee]') !== null) {
truncate.parentElement.classList.add('truncate');
truncate.closest('[disable-marquee]').setAttribute('disable-marquee', 'data-disable-marquee');
return;
}
// offsetwidth = width of the text, clientWidth = width of parent text (div)
// because some index page has icons, we use two time parent element
if (truncate.children.length < 1 && truncate.offsetWidth > truncate.parentElement.clientWidth || truncate.offsetWidth > truncate.parentElement.parentElement.parentElement.clientWidth) {
if (
truncate.children.length < 1
&& truncate.offsetWidth > truncate.parentElement.clientWidth
|| truncate.offsetWidth > truncate.parentElement.parentElement.parentElement.clientWidth
) {
truncate.addEventListener('mouseover', function () {
truncate.parentElement.style.animationPlayState = 'running';
@ -390,11 +410,14 @@ function marqueeAnimation(truncate) {
truncate.classList.add('truncate');
// if truncate has truncate class, text marquee animate doesn't pretty work
if (truncate.querySelector('.truncate') !== null && truncate.querySelector('.truncate').classList.contains('truncate')) {
if (
truncate.querySelector('.truncate') !== null
&& truncate.querySelector('.truncate').classList.contains('truncate')
) {
let old_element = truncate.querySelector('.truncate');
let parent = old_element.parentNode;
let new_element = document.createElement('span');
new_element.innerHTML = old_element.innerHTML;
new_element.classList = old_element.classList;
@ -404,6 +427,7 @@ function marqueeAnimation(truncate) {
// There needs to be two div for disable/enable icons. If I don't create this div, animation will work with disable/enable icons.-->
let animate_element = document.createElement('div');
animate_element.classList.add('truncate');
truncate.parentElement.append(animate_element);
animate_element.append(truncate);