From 29f92dce1847f25ddf50d80439dbbf18ba2c1b82 Mon Sep 17 00:00:00 2001
From: Burak Civan <burakcivan22@gmail.com>
Date: Fri, 21 Oct 2022 10:56:33 +0300
Subject: [PATCH] refactoring

---
 public/akaunting-js/generalAction.js          | 20 +++++++++++--
 resources/views/components/table/td.blade.php | 30 ++++++++-----------
 resources/views/components/table/th.blade.php | 29 +++++++-----------
 3 files changed, 41 insertions(+), 38 deletions(-)

diff --git a/public/akaunting-js/generalAction.js b/public/akaunting-js/generalAction.js
index 1abb05097..11bcdf050 100644
--- a/public/akaunting-js/generalAction.js
+++ b/public/akaunting-js/generalAction.js
@@ -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
 
diff --git a/resources/views/components/table/td.blade.php b/resources/views/components/table/td.blade.php
index 2505f7243..92ea7ca84 100644
--- a/resources/views/components/table/td.blade.php
+++ b/resources/views/components/table/td.blade.php
@@ -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>
diff --git a/resources/views/components/table/th.blade.php b/resources/views/components/table/th.blade.php
index 3e935c028..ee0ad3350 100644
--- a/resources/views/components/table/th.blade.php
+++ b/resources/views/components/table/th.blade.php
@@ -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>