refactoring

This commit is contained in:
Burak Civan 2022-10-21 10:56:33 +03:00
parent 7a4d42ed56
commit 29f92dce18
3 changed files with 41 additions and 38 deletions

View File

@ -383,7 +383,15 @@ function marqueeAnimation(truncate) {
});
truncate.classList.add('truncate');
truncate.parentElement.classList.add('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);
// 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');
}
}
@ -394,7 +402,15 @@ document.querySelectorAll('[data-truncate-marquee]').forEach((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) => {
defaultText.parentElement.parentElement.parentElement.parentElement.appendChild(defaultText);
let icon_parents_element = defaultText.parentElement.parentElement.parentElement;
if (icon_parents_element.classList.contains('flex')) {
icon_parents_element.appendChild(defaultText);
} else {
icon_parents_element.parentElement.appendChild(defaultText);
}
// defaultText.parentElement.parentElement.parentElement.parentElement.appendChild(defaultText);
});
//disable/enable icons ejected from data-truncate-marquee

View File

@ -8,15 +8,12 @@
}
@endphp
<div {{ $first_attributes }}>
<!-- first div for restrict of width. With javascript will add (overflow-x-hidden) class name -->
<!--so that the animation does not overflow the width. With javascript will add (overflow-x-hidden) class name-->
<div>
<!-- There needs to be two div for disable/enable icons. If I don't create this div, animation will work with disable/enable icons. With javascript will add (truncate) class nam -->
<div>
<!-- this tag use for calculate width of text and parent element -->
<span data-truncate-marquee>
{!! $first !!}
</span>
</div>
<!-- this tag use for calculate width of text and parent element -->
<span data-truncate-marquee>
{!! $first !!}
</span>
</div>
</div>
@endif
@ -31,20 +28,17 @@
@endphp
<div {{ $second_attributes }}>
<div>
<div>
<span data-truncate-marquee>
{!! $second !!}
</span>
</div>
<span data-truncate-marquee>
{!! $second !!}
</span>
</div>
</div>
@endif
<div>
<div>
<span data-truncate-marquee>
{{ $slot }}
</span>
</div>
<span data-truncate-marquee>
{{ $slot }}
</span>
</div>
</td>

View File

@ -8,15 +8,12 @@
}
@endphp
<div {{ $first_attributes }}>
<!-- first div for restrict of width. With javascript will add (overflow-x-hidden) class name -->
<!--so that the animation does not overflow the width. With javascript will add (overflow-x-hidden) class name-->
<div>
<!-- There needs to be two div for disable/enable icons. If I don't create this div, animation will work with disable/enable icons -->
<div>
<!-- this tag use for calculate width of text and parent element -->
<span data-truncate-marquee>
{!! $first !!}
</span>
</div>
<!-- this tag use for calculate width of text and parent element -->
<span data-truncate-marquee>
{!! $first !!}
</span>
</div>
</div>
@endif
@ -31,20 +28,16 @@
@endphp
<div {{ $second_attributes }}>
<div>
<div>
<span data-truncate-marquee>
{!! $second !!}
</span>
</div>
<span data-truncate-marquee>
{!! $second !!}
</span>
</div>
</div>
@endif
<div>
<div>
<span data-truncate-marquee>
{{ $slot }}
</span>
</div>
<span data-truncate-marquee>
{{ $slot }}
</span>
</div>
</th>