// remove dropdown menu when mouseleave in index more actions document.querySelectorAll("[data-table-list]").forEach((row) => { row.addEventListener("mouseleave", function() { if (row.querySelector("[data-dropdown-actions]")) { row.querySelector("[data-dropdown-actions]").classList.remove("block"); row.querySelector("[data-dropdown-actions]").classList.add("hidden"); } }); }); // remove dropdown menu when mouseleave in index more actions //redirect edit or show page for table row click document.querySelectorAll("[data-table-body]").forEach((table) => { if (document.body.clientWidth < 768 || document.body.clientWidth > 1200) { let rows = table.querySelectorAll("tr"); rows.forEach((row) => { let row_href = row.getAttribute("href"); if (!row_href) { return; } let td = row.getElementsByTagName("td"); let first_selector = row.querySelector("[data-bulkaction]") && row.querySelector("[data-bulkaction]") !== null ? 1 : 0; if (row_href) { for (let i = first_selector; i < td.length - 1; i++) { let td_item = td[i]; td_item.addEventListener("click", (event) => { 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; }); // added target blank for click mouse middle button td_item.addEventListener('mousedown', (event) => { if (event.button == 1 || event.buttons == 4) { window.open(row_href, "_blank"); } }); // added target blank for click mouse middle button } } }); } if (document.body.clientWidth <= 768) { table.querySelectorAll('[data-table-list]').forEach((actions) => { if (actions.querySelector('[data-mobile-actions]') !== null) { actions.querySelector('[data-mobile-actions]').addEventListener('click', function() { 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]').addEventListener('click', function() { this.classList.add('opacity-0', 'invisible'); this.classList.remove('show'); }); }); } }); } }); //redirect edit or show page for table row click //collapse accordion function toggleSub(key, event) { let isExpanded = document.querySelectorAll( `[data-collapse="${key}"]` + ".active-collapse" ).length > 0; if (isExpanded) { this.collapseSub(key, event); } else { this.expandSub(key, event); } } function collapseSub(key, event) { event.stopPropagation(); event.target.classList.add("rotate-90"); document .querySelectorAll(`[data-collapse="${key}"]` + ".active-collapse") .forEach(function(element) { element.classList.toggle("active-collapse"); element.classList.toggle("collapse-sub"); }); // if collapsed key has childs(table row constantly), they will be collapsed as well document .querySelectorAll(`[data-collapse="${key}"]` + " button[node|='child']") .forEach(function(element) { element.childNodes[0].classList.add("rotate-90") this.collapseSub(element.getAttribute("node"), event); }.bind(this) ); } function expandSub(key, event) { event.stopPropagation(); event.target.classList.remove("rotate-90"); document .querySelectorAll(`[data-collapse="${key}"]`) .forEach(function(element) { if (element.getAttribute("data-animation")) { element.classList.toggle("active-collapse-animation"); } element.classList.toggle("active-collapse"); element.classList.toggle("collapse-sub"); }); } //collapse accordion // run dropdown and tooltip functions for Virtual DOM document.addEventListener("DOMContentLoaded", () => { const triggers = [ { event: "mouseover", checker: isHoverable }, { event: "mouseout", checker: isHoverable }, { event: "click", checker: isClickable }, ]; triggers.forEach(({ event, checker, fn }) => { document.addEventListener( event, (e) => { const dropdownToggleEl = e.target.closest( "[data-dropdown-toggle]" ); const tooltipToggleEl = e.target.closest( "[data-tooltip-target]" ); if (dropdownToggleEl !== null && event == "click") { runDropdown(dropdownToggleEl); } if (tooltipToggleEl !== null && event == "mouseover") { runTooltip(tooltipToggleEl); } }, false ); }); }); function isClickable(dropdownToggleEl) { return dropdownToggleEl.getAttribute("data-dropdown-toggle") === "click"; } function isHoverable(tooltipToggleEl) { return tooltipToggleEl.getAttribute("data-tooltip-target") === "hover"; } //run dropdown and tooltip functions for Virtual DOM // Toggle dropdown elements using [data-dropdown-toggle] function runDropdown(dropdownToggleEl) { const dropdownMenuId = dropdownToggleEl.getAttribute( "data-dropdown-toggle" ); const dropdownMenuEl = document.getElementById(dropdownMenuId); // options const placement = dropdownToggleEl.getAttribute("data-dropdown-placement"); var element = dropdownToggleEl; while (element.nodeName !== "BUTTON") { element = element.parentNode; } Popper.createPopper(element, dropdownMenuEl, { placement: placement ? placement : "bottom-start", modifiers: [ { name: "offset", options: { offset: [0, 10], }, }, ], }); // toggle when click on the button dropdownMenuEl.classList.toggle("hidden"); dropdownMenuEl.classList.toggle("block"); function handleDropdownOutsideClick(event) { var targetElement = event.target; // clicked element if ( targetElement !== dropdownMenuEl && targetElement !== dropdownToggleEl && !dropdownToggleEl.contains(targetElement) ) { dropdownMenuEl.classList.add("hidden"); dropdownMenuEl.classList.remove("block"); document.body.removeEventListener( "click", handleDropdownOutsideClick, true ); } } // 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) { dropdownMenuEl.classList.add("hidden"); dropdownMenuEl.classList.remove("block"); return; } dropdownMenuEl.classList.add("block"); dropdownMenuEl.classList.remove("hidden"); } } // Toggle dropdown elements using [data-dropdown-toggle] // Tooltip elements using [data-tooltip-target], [data-tooltip-placement] 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: [ { name: "offset", options: { offset: [0, 8], }, }, ], }); function show() { // Make the tooltip visible if (tooltipEl !== null) { if (tooltipEl.classList.contains("opacity-0", "invisible")) { tooltipEl.classList.remove("opacity-0", "invisible"); } else { tooltipEl.classList.add("opacity-100", "visible"); } // Enable the event listeners popperInstance.setOptions((options) => ({ ...options, modifiers: [ ...options.modifiers, { name: "eventListeners", enabled: true, }, ], })); // Update its position popperInstance.update(); } } function hide() { if (tooltipEl !== null) { // Hide the tooltip if (tooltipEl.classList.contains("opacity-100", "visible")) { tooltipEl.classList.remove("opacity-100", "visible"); } else { tooltipEl.classList.add("opacity-0", "invisible"); } // Disable the event listeners popperInstance.setOptions((options) => ({ ...options, modifiers: [ ...options.modifiers, { name: "eventListeners", enabled: false, }, ], })); } } var showEvents = []; var hideEvents = []; switch (trigger) { case "hover": showEvents = ["mouseenter", "focus"]; hideEvents = ["mouseleave", "blur"]; break; case "click": showEvents = ["click", "focus"]; hideEvents = ["focusout", "blur"]; break; default: showEvents = ["mouseenter", "focus"]; hideEvents = ["mouseleave", "blur"]; } showEvents.forEach((event) => { tooltipToggleEl.addEventListener(event, show); }); hideEvents.forEach((event) => { tooltipToggleEl.addEventListener(event, hide); }); } // Tooltip elements using [data-tooltip-target], [data-tooltip-placement] //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); } function OnInput() { this.style.height = 'auto'; this.style.height = (this.scrollHeight) + 'px'; } //Auto Height for Textarea //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 () { this.classList.add('disabled-link'); this.querySelector('[data-link-spin]').classList.remove('hidden'); this.querySelector('[data-link-text]').classList.add('opacity-0'); this.querySelector('[data-link-text]').classList.remove('opacity-1'); }); }); //Loading scenario for href links //Firefox show modal for icon set if (navigator.userAgent.search("Firefox") >= 0) { let firefoxCookie = document.createElement('DIV'), body = document.body; firefoxCookie.innerHTML = '' + body.appendChild(firefoxCookie); function delete_cookie() { document.cookie = 'firefoxCookieModal=true; expires=Thu, 1 Jan 2023 00:00:01 GMT;'; document.querySelector('[data-cookie-modal]').remove(); } if (document.cookie.indexOf('firefoxCookieModal=true') !== -1) { document.querySelector('[data-cookie-modal]').remove(); } } //Firefox show modal for icon set //margue animation for truncated text 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) { truncate.addEventListener('mouseover', function () { truncate.parentElement.style.animationPlayState = 'running'; if (truncate.offsetWidth > 400 && truncate.parentElement.clientWidth < 150) { truncate.parentElement.classList.remove('animate-marquee'); truncate.parentElement.classList.add('animate-marquee_long'); } else { truncate.parentElement.classList.remove('animate-marquee_long'); truncate.parentElement.classList.add('animate-marquee'); } if (truncate.parentElement.classList.contains('truncate')) { truncate.parentElement.classList.remove('truncate'); } }); truncate.addEventListener('mouseout', function () { truncate.parentElement.style.animationPlayState = 'paused'; truncate.parentElement.classList.remove('animate-marquee'); truncate.parentElement.classList.remove('animate-marquee_long'); truncate.parentElement.classList.add('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')) { 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; parent.replaceChild(new_element, old_element); } // if truncate has truncate class, text marquee animate doesn't pretty work // 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); // 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 is overflow class for the animation does not overflow the width truncate.parentElement.parentElement.classList.add('overflow-x-hidden'); truncate.parentElement.parentElement.setAttribute('overflow-x-hidden', true); } } document.querySelectorAll('[data-truncate-marquee]').forEach((truncate) => { marqueeAnimation(truncate); }); //disable/enable icons ejected from data-truncate-marquee, HTML of icons ejected from parent element (data-truncate-marquee) document.querySelectorAll('[data-index-icon]').forEach((defaultText) => { if (defaultText.closest('[data-table-list]')) { let icon_parents_element = defaultText.parentElement.parentElement.parentElement; if (icon_parents_element.classList.contains('flex')) { icon_parents_element.appendChild(defaultText); icon_parents_element.classList.remove('truncate'); } else { if (icon_parents_element.classList.contains('overflow-x-hidden')) { icon_parents_element.parentElement.appendChild(defaultText); } else { defaultText.parentElement.appendChild(defaultText); } } } }); //disable/enable icons ejected from data-truncate-marquee //margue animation for truncated text // set with for page header document.querySelectorAll('[data-page-title-first]').forEach((first) => { document.querySelectorAll('[data-page-title-second]').forEach((second) => { let title_truncate = first.querySelector('[data-title-truncate]'); if (title_truncate !== null) { //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'); //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) { // added specific width styling for truncate text title_truncate.style.width = first.clientWidth + 'px'; let subtract = title_truncate.clientWidth - 40; title_truncate.style.width = subtract + 'px'; title_truncate.classList.add('truncate'); // added specific width styling for truncate text // added specific width styling into the parent title element for truncate text first.classList.add('w-full', 'sm:w-6/12'); // added specific width styling into the parent title element for truncate text title_truncate.parentNode.classList.add('overflow-x-hidden', 'hide-scroll-bar'); // added truncate animation for truncated text title_truncate.addEventListener('mouseover', function () { this.classList.add('animate-marquee'); this.classList.remove('truncate'); this.style.animationPlayState = 'running'; }); title_truncate.addEventListener('mouseout', function () { this.style.animationPlayState = 'paused'; this.classList.remove('animate-marquee'); this.classList.add('truncate'); }); // added truncate animation for truncated text first.querySelector('h1').classList.remove('mr-0.5'); } } // remove width class name for extend the right side first.classList.remove('w-full', 'sm:w-6/12'); // remove width class name for extend the right side }); }); // set with for page header