waqas
/
Akaunting
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

174
public/akaunting-js/generalAction.js vendored
View File

@ -1,11 +1,11 @@
// remove dropdown menu when mouseleave in index more actions // remove dropdown menu when mouseleave in index more actions
document.querySelectorAll("[data-table-list]").forEach((row) => { document.querySelectorAll("[data-table-list]").forEach((row) => {
row.addEventListener("mouseleave", function() { row.addEventListener("mouseleave", function() {
if (row.querySelector("[data-dropdown-actions]")) { if (row.querySelector("[data-dropdown-actions]")) {
row.querySelector("[data-dropdown-actions]").classList.remove("block"); row.querySelector("[data-dropdown-actions]").classList.remove("block");
row.querySelector("[data-dropdown-actions]").classList.add("hidden"); row.querySelector("[data-dropdown-actions]").classList.add("hidden");
} }
}); });
}); });
// remove dropdown menu when mouseleave in index more actions // remove dropdown menu when mouseleave in index more actions
@ -17,7 +17,7 @@ document.querySelectorAll("[data-table-body]").forEach((table) => {
rows.forEach((row) => { rows.forEach((row) => {
let row_href = row.getAttribute("href"); let row_href = row.getAttribute("href");
if (!row_href) { if (! row_href) {
return; return;
} }
@ -32,10 +32,12 @@ document.querySelectorAll("[data-table-body]").forEach((table) => {
if (document.body.clientWidth < 768 && event.target.closest('[overflow-x-hidden]')) { if (document.body.clientWidth < 768 && event.target.closest('[overflow-x-hidden]')) {
return; return;
} }
// click disabled when preview dialog is open // click disabled when preview dialog is open
if (event.target.closest('[data-tooltip-target]')) { if (event.target.closest('[data-tooltip-target]')) {
return; return;
} }
// click disabled when preview dialog is open // click disabled when preview dialog is open
window.location.href = row_href; window.location.href = row_href;
}); });
@ -45,8 +47,8 @@ document.querySelectorAll("[data-table-body]").forEach((table) => {
if (event.button == 1 || event.buttons == 4) { if (event.button == 1 || event.buttons == 4) {
window.open(row_href, "_blank"); window.open(row_href, "_blank");
} }
}); });
// added target blank for click mouse middle button // added target blank for click mouse middle button
} }
} }
}); });
@ -55,11 +57,12 @@ document.querySelectorAll("[data-table-body]").forEach((table) => {
if (document.body.clientWidth <= 768) { if (document.body.clientWidth <= 768) {
table.querySelectorAll('[data-table-list]').forEach((actions) => { table.querySelectorAll('[data-table-list]').forEach((actions) => {
let actions_html = actions.querySelector('[data-mobile-actions]'); let actions_html = actions.querySelector('[data-mobile-actions]');
if (actions_html) { if (actions_html) {
actions_html.addEventListener('click', function() { actions_html.addEventListener('click', function() {
this.closest('td').querySelector('[data-mobile-actions-modal]').classList.add('show'); this.closest('td').querySelector('[data-mobile-actions-modal]').classList.add('show');
this.closest('td').querySelector('[data-mobile-actions-modal]').classList.remove('opacity-0', 'invisible'); this.closest('td').querySelector('[data-mobile-actions-modal]').classList.remove('opacity-0', 'invisible');
this.closest('td').querySelector('[data-mobile-actions-modal]').addEventListener('click', function() { this.closest('td').querySelector('[data-mobile-actions-modal]').addEventListener('click', function() {
this.classList.add('opacity-0', 'invisible'); this.classList.add('opacity-0', 'invisible');
this.classList.remove('show'); this.classList.remove('show');
@ -73,59 +76,58 @@ document.querySelectorAll("[data-table-body]").forEach((table) => {
//collapse accordion //collapse accordion
function toggleSub(key, event) { function toggleSub(key, event) {
let isExpanded = let isExpanded =
document.querySelectorAll( document.querySelectorAll(
`[data-collapse="${key}"]` + ".active-collapse" `[data-collapse="${key}"]` + ".active-collapse"
).length > 0; ).length > 0;
if (isExpanded) { if (isExpanded) {
this.collapseSub(key, event); this.collapseSub(key, event);
} else { } else {
this.expandSub(key, event); this.expandSub(key, event);
} }
} }
function collapseSub(key, event) { function collapseSub(key, event) {
event.stopPropagation(); event.stopPropagation();
event.target.classList.add("rotate-90"); event.target.classList.add("rotate-90");
document document
.querySelectorAll(`[data-collapse="${key}"]` + ".active-collapse") .querySelectorAll(`[data-collapse="${key}"]` + ".active-collapse")
.forEach(function(element) { .forEach(function(element) {
element.classList.toggle("active-collapse"); element.classList.toggle("active-collapse");
element.classList.toggle("collapse-sub"); element.classList.toggle("collapse-sub");
}); });
// if collapsed key has childs(table row constantly), they will be collapsed as well // if collapsed key has childs(table row constantly), they will be collapsed as well
document document
.querySelectorAll(`[data-collapse="${key}"]` + " button[node|='child']") .querySelectorAll(`[data-collapse="${key}"]` + " button[node|='child']")
.forEach(function(element) { .forEach(function(element) {
element.childNodes[0].classList.add("rotate-90") element.childNodes[0].classList.add("rotate-90");
this.collapseSub(element.getAttribute("node"), event); this.collapseSub(element.getAttribute("node"), event);
}.bind(this) }.bind(this));
);
} }
function expandSub(key, event) { function expandSub(key, event) {
event.stopPropagation(); event.stopPropagation();
event.target.classList.remove("rotate-90"); event.target.classList.remove("rotate-90");
document document
.querySelectorAll(`[data-collapse="${key}"]`) .querySelectorAll(`[data-collapse="${key}"]`)
.forEach(function(element) { .forEach(function(element) {
if (element.getAttribute("data-animation")) { if (element.getAttribute("data-animation")) {
element.classList.toggle("active-collapse-animation"); element.classList.toggle("active-collapse-animation");
} }
element.classList.toggle("active-collapse"); element.classList.toggle("active-collapse");
element.classList.toggle("collapse-sub"); element.classList.toggle("collapse-sub");
}); });
} }
//collapse accordion //collapse accordion
// run dropdown and tooltip functions for Virtual DOM // run dropdown and tooltip functions for Virtual DOM
document.addEventListener("DOMContentLoaded", () => { document.addEventListener("DOMContentLoaded", () => {
const triggers = [ const triggers = [
{ event: "mouseover", checker: isHoverable }, { event: "mouseover", checker: isHoverable },
{ event: "mouseout", checker: isHoverable }, { event: "mouseout", checker: isHoverable },
@ -139,16 +141,18 @@ document.addEventListener("DOMContentLoaded", () => {
const dropdownToggleEl = e.target.closest( const dropdownToggleEl = e.target.closest(
"[data-dropdown-toggle]" "[data-dropdown-toggle]"
); );
const tooltipToggleEl = e.target.closest( const tooltipToggleEl = e.target.closest(
"[data-tooltip-target]" "[data-tooltip-target]"
); );
if (dropdownToggleEl !== null && event == "click") { if (dropdownToggleEl !== null && event == "click") {
runDropdown(dropdownToggleEl); runDropdown(dropdownToggleEl);
} }
if (tooltipToggleEl !== null && event == "mouseover") { if (tooltipToggleEl !== null && event == "mouseover") {
runTooltip(tooltipToggleEl); runTooltip(tooltipToggleEl);
} }
}, },
false false
); );
@ -169,8 +173,8 @@ function runDropdown(dropdownToggleEl) {
const dropdownMenuId = dropdownToggleEl.getAttribute( const dropdownMenuId = dropdownToggleEl.getAttribute(
"data-dropdown-toggle" "data-dropdown-toggle"
); );
const dropdownMenuEl = document.getElementById(dropdownMenuId); // options
const dropdownMenuEl = document.getElementById(dropdownMenuId); // options
const placement = dropdownToggleEl.getAttribute("data-dropdown-placement"); const placement = dropdownToggleEl.getAttribute("data-dropdown-placement");
var element = dropdownToggleEl; 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) { if (dropdownMenuEl !== null) {
dropdownMenuEl.classList.toggle("hidden"); dropdownMenuEl.classList.toggle("hidden");
@ -197,7 +202,7 @@ function runDropdown(dropdownToggleEl) {
function handleDropdownOutsideClick(event) { function handleDropdownOutsideClick(event) {
var targetElement = event.target; // clicked element var targetElement = event.target; // clicked element
if ( if (
targetElement !== dropdownMenuEl && targetElement !== dropdownMenuEl &&
targetElement !== dropdownToggleEl && targetElement !== dropdownToggleEl &&
@ -205,23 +210,29 @@ function runDropdown(dropdownToggleEl) {
) { ) {
dropdownMenuEl.classList.add("hidden"); dropdownMenuEl.classList.add("hidden");
dropdownMenuEl.classList.remove("block"); dropdownMenuEl.classList.remove("block");
document.body.removeEventListener( document.body.removeEventListener(
"click", "click",
handleDropdownOutsideClick, handleDropdownOutsideClick,
true true
); );
} }
} // hide popper when clicking outside the element }
// hide popper when clicking outside the element
document.body.addEventListener("click", handleDropdownOutsideClick, true); document.body.addEventListener("click", handleDropdownOutsideClick, true);
if (dropdownMenuEl.getAttribute("data-click-outside-none") != null) { 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.add("hidden");
dropdownMenuEl.classList.remove("block"); dropdownMenuEl.classList.remove("block");
return; return;
} }
dropdownMenuEl.classList.add("block"); dropdownMenuEl.classList.add("block");
dropdownMenuEl.classList.remove("hidden"); dropdownMenuEl.classList.remove("hidden");
} }
@ -234,8 +245,10 @@ function runTooltip(tooltipToggleEl) {
const tooltipEl = document.getElementById( const tooltipEl = document.getElementById(
tooltipToggleEl.getAttribute("data-tooltip-target") tooltipToggleEl.getAttribute("data-tooltip-target")
); );
const placement = tooltipToggleEl.getAttribute("data-tooltip-placement"); const placement = tooltipToggleEl.getAttribute("data-tooltip-placement");
const trigger = tooltipToggleEl.getAttribute("data-tooltip-trigger"); const trigger = tooltipToggleEl.getAttribute("data-tooltip-trigger");
const popperInstance = Popper.createPopper(tooltipToggleEl, tooltipEl, { const popperInstance = Popper.createPopper(tooltipToggleEl, tooltipEl, {
placement: placement ? placement : "top", placement: placement ? placement : "top",
modifiers: [ modifiers: [
@ -257,8 +270,7 @@ function runTooltip(tooltipToggleEl) {
tooltipEl.classList.add("opacity-100", "visible"); tooltipEl.classList.add("opacity-100", "visible");
} }
// Enable the event listeners // Enable the event listeners
popperInstance.setOptions((options) => ({ popperInstance.setOptions((options) => ({
...options, ...options,
modifiers: [ modifiers: [
@ -282,8 +294,8 @@ function runTooltip(tooltipToggleEl) {
} else { } else {
tooltipEl.classList.add("opacity-0", "invisible"); tooltipEl.classList.add("opacity-0", "invisible");
} }
// Disable the event listeners
// Disable the event listeners
popperInstance.setOptions((options) => ({ popperInstance.setOptions((options) => ({
...options, ...options,
modifiers: [ modifiers: [
@ -319,6 +331,7 @@ function runTooltip(tooltipToggleEl) {
showEvents.forEach((event) => { showEvents.forEach((event) => {
tooltipToggleEl.addEventListener(event, show); tooltipToggleEl.addEventListener(event, show);
}); });
hideEvents.forEach((event) => { hideEvents.forEach((event) => {
tooltipToggleEl.addEventListener(event, hide); tooltipToggleEl.addEventListener(event, hide);
}); });
@ -327,20 +340,22 @@ function runTooltip(tooltipToggleEl) {
//Auto Height for Textarea //Auto Height for Textarea
const tx = document.querySelectorAll('[textarea-auto-height]'); const tx = document.querySelectorAll('[textarea-auto-height]');
for (let i = 0; i < tx.length; i++) { for (let i = 0; i < tx.length; i++) {
tx[i].setAttribute('style', 'height:' + (tx[i].scrollHeight) + 'px;overflow-y:hidden;'); tx[i].setAttribute('style', 'height:' + (tx[i].scrollHeight) + 'px;overflow-y:hidden;');
tx[i].addEventListener('input', OnInput, false); tx[i].addEventListener('input', OnInput, false);
} }
function OnInput() { function OnInput() {
this.style.height = 'auto'; this.style.height = 'auto';
this.style.height = (this.scrollHeight) + 'px'; this.style.height = (this.scrollHeight) + 'px';
} }
//Auto Height for Textarea //Auto Height for Textarea
//Loading scenario for href links //Loading scenario for href links
document.querySelectorAll('[data-link-loading]').forEach((href) => { document.querySelectorAll('[data-link-loading]').forEach((href) => {
let target_link_html = href.parentElement; let target_link_html = href.parentElement;
target_link_html.classList.add('relative'); target_link_html.classList.add('relative');
target_link_html.addEventListener('click', function () { target_link_html.addEventListener('click', function () {
@ -358,12 +373,17 @@ function marqueeAnimation(truncate) {
if (truncate.closest('[disable-marquee]') !== null) { if (truncate.closest('[disable-marquee]') !== null) {
truncate.parentElement.classList.add('truncate'); truncate.parentElement.classList.add('truncate');
truncate.closest('[disable-marquee]').setAttribute('disable-marquee', 'data-disable-marquee'); truncate.closest('[disable-marquee]').setAttribute('disable-marquee', 'data-disable-marquee');
return; return;
} }
// offsetwidth = width of the text, clientWidth = width of parent text (div) // offsetwidth = width of the text, clientWidth = width of parent text (div)
// because some index page has icons, we use two time parent element // 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.addEventListener('mouseover', function () {
truncate.parentElement.style.animationPlayState = 'running'; truncate.parentElement.style.animationPlayState = 'running';
@ -374,12 +394,12 @@ function marqueeAnimation(truncate) {
truncate.parentElement.classList.remove('animate-marquee_long'); truncate.parentElement.classList.remove('animate-marquee_long');
truncate.parentElement.classList.add('animate-marquee'); truncate.parentElement.classList.add('animate-marquee');
} }
if (truncate.parentElement.classList.contains('truncate')) { if (truncate.parentElement.classList.contains('truncate')) {
truncate.parentElement.classList.remove('truncate'); truncate.parentElement.classList.remove('truncate');
} }
}); });
truncate.addEventListener('mouseout', function () { truncate.addEventListener('mouseout', function () {
truncate.parentElement.style.animationPlayState = 'paused'; truncate.parentElement.style.animationPlayState = 'paused';
truncate.parentElement.classList.remove('animate-marquee'); truncate.parentElement.classList.remove('animate-marquee');
@ -390,11 +410,14 @@ function marqueeAnimation(truncate) {
truncate.classList.add('truncate'); truncate.classList.add('truncate');
// if truncate has truncate class, text marquee animate doesn't pretty work // 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 old_element = truncate.querySelector('.truncate');
let parent = old_element.parentNode; let parent = old_element.parentNode;
let new_element = document.createElement('span'); let new_element = document.createElement('span');
new_element.innerHTML = old_element.innerHTML; new_element.innerHTML = old_element.innerHTML;
new_element.classList = old_element.classList; 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.--> // 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'); let animate_element = document.createElement('div');
animate_element.classList.add('truncate'); animate_element.classList.add('truncate');
truncate.parentElement.append(animate_element); truncate.parentElement.append(animate_element);
animate_element.append(truncate); animate_element.append(truncate);
@ -423,7 +447,7 @@ document.querySelectorAll('[data-truncate-marquee]').forEach((truncate) => {
document.querySelectorAll('[data-index-icon]').forEach((defaultText) => { document.querySelectorAll('[data-index-icon]').forEach((defaultText) => {
if (defaultText.closest('[data-table-list]')) { if (defaultText.closest('[data-table-list]')) {
let icon_parents_element = defaultText.parentElement.parentElement.parentElement; let icon_parents_element = defaultText.parentElement.parentElement.parentElement;
if (icon_parents_element.classList.contains('flex')) { if (icon_parents_element.classList.contains('flex')) {
icon_parents_element.appendChild(defaultText); icon_parents_element.appendChild(defaultText);
icon_parents_element.classList.remove('truncate'); icon_parents_element.classList.remove('truncate');
@ -449,7 +473,7 @@ document.querySelectorAll('[data-page-title-first]').forEach((first) => {
//added for equalize h1 width and parent element width. Because parent element has -ml-0.5 so didn't equalize //added for equalize h1 width and parent element width. Because parent element has -ml-0.5 so didn't equalize
first.querySelector('h1').classList.add('mr-0.5'); first.querySelector('h1').classList.add('mr-0.5');
//added for equalize h1 width and parent element width. Because parent element has -ml-0.5 so didn't equalize //added for equalize h1 width and parent element width. Because parent element has -ml-0.5 so didn't equalize
if (first.clientWidth < title_truncate.clientWidth && second.clientHeight > 0) { if (first.clientWidth < title_truncate.clientWidth && second.clientHeight > 0) {
// added specific width styling for truncate text // added specific width styling for truncate text
title_truncate.style.width = first.clientWidth + 'px'; title_truncate.style.width = first.clientWidth + 'px';
@ -457,20 +481,20 @@ document.querySelectorAll('[data-page-title-first]').forEach((first) => {
title_truncate.style.width = subtract + 'px'; title_truncate.style.width = subtract + 'px';
title_truncate.classList.add('truncate'); title_truncate.classList.add('truncate');
// added specific width styling for truncate text // added specific width styling for truncate text
// added specific width styling into the parent title element for truncate text // added specific width styling into the parent title element for truncate text
first.classList.add('w-full', 'sm:w-6/12'); first.classList.add('w-full', 'sm:w-6/12');
// added specific width styling into the parent title element for truncate text // added specific width styling into the parent title element for truncate text
title_truncate.parentNode.classList.add('overflow-x-hidden', 'hide-scroll-bar'); title_truncate.parentNode.classList.add('overflow-x-hidden', 'hide-scroll-bar');
// added truncate animation for truncated text // added truncate animation for truncated text
title_truncate.addEventListener('mouseover', function () { title_truncate.addEventListener('mouseover', function () {
this.classList.add('animate-marquee'); this.classList.add('animate-marquee');
this.classList.remove('truncate'); this.classList.remove('truncate');
this.style.animationPlayState = 'running'; this.style.animationPlayState = 'running';
}); });
title_truncate.addEventListener('mouseout', function () { title_truncate.addEventListener('mouseout', function () {
this.style.animationPlayState = 'paused'; this.style.animationPlayState = 'paused';
this.classList.remove('animate-marquee'); this.classList.remove('animate-marquee');