refactoring

This commit is contained in:
Burak Civan 2022-10-21 10:16:44 +03:00
parent aa614dedf9
commit bb72886380
4 changed files with 21 additions and 19 deletions

View File

@ -360,7 +360,7 @@ 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) { if (truncate.closest('[data-disable-marquee]') !== null) {
truncate.parentElement.classList.add('truncate'); truncate.parentElement.classList.add('truncate');
return; return;
} }
@ -388,14 +388,14 @@ function marqueeAnimation(truncate) {
} }
} }
document.querySelectorAll('[data-truncate]').forEach((truncate) => { document.querySelectorAll('[data-truncate-marquee]').forEach((truncate) => {
marqueeAnimation(truncate); marqueeAnimation(truncate);
}); });
//disable/enable icons ejected from data-truncate, HTML of icons ejected from parent element (data-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) => { document.querySelectorAll('[data-index-icon]').forEach((defaultText) => {
defaultText.parentElement.parentElement.parentElement.parentElement.appendChild(defaultText); defaultText.parentElement.parentElement.parentElement.parentElement.appendChild(defaultText);
}); });
//disable/enable icons ejected from data-truncate //disable/enable icons ejected from data-truncate-marquee
//margue animation for truncated text //margue animation for truncated text

View File

@ -1,9 +1,11 @@
<span @class([ <div class="flex items-center">
'w-3 h-3 rounded-full ltr:mr-1 rtl:ml-1', $backgroundColor, $textColor <span @class([
]) 'w-3 h-3 rounded-full ltr:mr-1 rtl:ml-1', $backgroundColor, $textColor
@if (! empty($backgroundStyle)) ])
style="background-color: {{ $backgroundStyle }}" @if (! empty($backgroundStyle))
@endif style="background-color: {{ $backgroundStyle }}"
> @endif
</span> >
<span class="w-24 truncate">{{ $name }}</span> </span>
<span class="w-24 truncate">{{ $name }}</span>
</div>

View File

@ -13,7 +13,7 @@
<!-- 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 --> <!-- 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> <div>
<!-- this tag use for calculate width of text and parent element --> <!-- this tag use for calculate width of text and parent element -->
<span data-truncate> <span data-truncate-marquee>
{!! $first !!} {!! $first !!}
</span> </span>
</div> </div>
@ -32,7 +32,7 @@
<div {{ $second_attributes }}> <div {{ $second_attributes }}>
<div> <div>
<div> <div>
<span data-truncate> <span data-truncate-marquee>
{!! $second !!} {!! $second !!}
</span> </span>
</div> </div>
@ -42,7 +42,7 @@
<div> <div>
<div> <div>
<span data-truncate> <span data-truncate-marquee>
{{ $slot }} {{ $slot }}
</span> </span>
</div> </div>

View File

@ -13,7 +13,7 @@
<!-- 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 -->
<div> <div>
<!-- this tag use for calculate width of text and parent element --> <!-- this tag use for calculate width of text and parent element -->
<span data-truncate> <span data-truncate-marquee>
{!! $first !!} {!! $first !!}
</span> </span>
</div> </div>
@ -32,7 +32,7 @@
<div {{ $second_attributes }}> <div {{ $second_attributes }}>
<div> <div>
<div> <div>
<span data-truncate> <span data-truncate-marquee>
{!! $second !!} {!! $second !!}
</span> </span>
</div> </div>
@ -42,7 +42,7 @@
<div> <div>
<div> <div>
<span data-truncate> <span data-truncate-marquee>
{{ $slot }} {{ $slot }}
</span> </span>
</div> </div>