disable animation controlled

This commit is contained in:
Burak Civan 2022-10-19 10:23:01 +03:00
parent d793724599
commit f84c0801b9
2 changed files with 8 additions and 2 deletions

View File

@ -360,6 +360,12 @@ if (navigator.userAgent.search("Firefox") >= 0) {
//margue animation for truncated text //margue animation for truncated text
function marqueeAnimation(truncate) { function marqueeAnimation(truncate) {
if (truncate.closest('[data-disable-truncate]') !== null) {
truncate.parentElement.classList.add('truncate');
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.offsetWidth > truncate.parentElement.clientWidth || truncate.offsetWidth > truncate.parentElement.parentElement.clientWidth) { if (truncate.offsetWidth > truncate.parentElement.clientWidth || truncate.offsetWidth > truncate.parentElement.parentElement.clientWidth) {
truncate.addEventListener('mouseover', function () { truncate.addEventListener('mouseover', function () {
truncate.parentElement.style.animationPlayState = 'running'; truncate.parentElement.style.animationPlayState = 'running';
@ -385,7 +391,7 @@ document.querySelectorAll('[data-truncate]').forEach((truncate) => {
marqueeAnimation(truncate); marqueeAnimation(truncate);
}); });
//disable/enable icons ejected from data-truncate //disable/enable icons ejected from data-truncate, HTML of icons ejected from parent element (data-truncate)
document.querySelectorAll('[data-index-icon]').forEach((defaultText) => { document.querySelectorAll('[data-index-icon]').forEach((defaultText) => {
defaultText.parentElement.parentElement.parentElement.appendChild(defaultText); defaultText.parentElement.parentElement.parentElement.appendChild(defaultText);
}); });

View File

@ -1,6 +1,6 @@
<div class="overflow-x-visible"> <div class="overflow-x-visible">
<div class="py-2 align-middle"> <div class="py-2 align-middle">
<table class="flex flex-col divide-y divide-gray-200"> <table class="flex flex-col divide-y divide-gray-200" {{ $attributes }}>
{{ $slot }} {{ $slot }}
</table> </table>
</div> </div>