From c5719bb1ce51109b0436e502fb1e9a4217ad2d92 Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Wed, 10 Aug 2022 13:02:19 +0200
Subject: [PATCH 1/8] feat: created trim component

---
 src/lib/components/index.ts            |  1 +
 src/lib/components/trim.svelte         | 14 ++++++++++++++
 src/lib/elements/table/cellText.svelte |  3 ++-
 3 files changed, 17 insertions(+), 1 deletion(-)
 create mode 100644 src/lib/components/trim.svelte

diff --git a/src/lib/components/index.ts b/src/lib/components/index.ts
index b7de66eed..560971d69 100644
--- a/src/lib/components/index.ts
+++ b/src/lib/components/index.ts
@@ -26,3 +26,4 @@ export { default as Box } from './box.svelte';
 export { default as Search } from './search.svelte';
 export { default as Bucket } from './bucket.svelte';
 export { default as EmptyBucket } from './emptyBucket.svelte';
+export { default as Trim } from './trim.svelte';
diff --git a/src/lib/components/trim.svelte b/src/lib/components/trim.svelte
new file mode 100644
index 000000000..610901554
--- /dev/null
+++ b/src/lib/components/trim.svelte
@@ -0,0 +1,14 @@
+<script lang="ts">
+    import { tooltip } from '$lib/actions/tooltip';
+
+    let data: HTMLSpanElement;
+    $: content = data?.innerText;
+
+    // TODO: enable tooltip only when there are elipsis
+    // $: if (data?.offsetWidth < data?.scrollWidth) {
+    // }
+</script>
+
+<span bind:this={data} class="text u-trim" use:tooltip={{ content, hideOnClick: false }}>
+    <slot />
+</span>
diff --git a/src/lib/elements/table/cellText.svelte b/src/lib/elements/table/cellText.svelte
index a8a00db42..59b8fe2e3 100644
--- a/src/lib/elements/table/cellText.svelte
+++ b/src/lib/elements/table/cellText.svelte
@@ -1,8 +1,9 @@
 <script lang="ts">
+    import { Trim } from '$lib/components';
     export let title: string;
     export let showOverflow = false;
 </script>
 
 <div class="table-col " class:u-overflow-visible={showOverflow} data-title={title} role="cell">
-    <span class="text u-trim"><slot /></span>
+    <Trim><slot /></Trim>
 </div>

From 223b50db9ee064bc63e777cb4e452781a8422a35 Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Wed, 10 Aug 2022 17:29:08 +0200
Subject: [PATCH 2/8] feat: tooltip only shown when there are elipsis

---
 src/lib/actions/tooltip.ts     |  6 +++++
 src/lib/components/trim.svelte | 40 +++++++++++++++++++++++++++++-----
 2 files changed, 41 insertions(+), 5 deletions(-)

diff --git a/src/lib/actions/tooltip.ts b/src/lib/actions/tooltip.ts
index 1636a14ec..d20196ddf 100644
--- a/src/lib/actions/tooltip.ts
+++ b/src/lib/actions/tooltip.ts
@@ -13,6 +13,12 @@ export const tooltip: Action<HTMLElement, Partial<Props>> = (node, config) => {
                 });
             }
         },
+        enable() {
+            instance.enable();
+        },
+        disable() {
+            instance.disable();
+        },
         destroy() {
             instance.destroy();
         }
diff --git a/src/lib/components/trim.svelte b/src/lib/components/trim.svelte
index 610901554..0cd0b3be6 100644
--- a/src/lib/components/trim.svelte
+++ b/src/lib/components/trim.svelte
@@ -1,14 +1,44 @@
 <script lang="ts">
     import { tooltip } from '$lib/actions/tooltip';
+    import { onMount } from 'svelte';
 
     let data: HTMLSpanElement;
-    $: content = data?.innerText;
 
-    // TODO: enable tooltip only when there are elipsis
-    // $: if (data?.offsetWidth < data?.scrollWidth) {
-    // }
+    onMount(() => {
+        setTooltip();
+    });
+
+    const setTooltip = () => {
+        if (data.innerText) {
+            const content = data.innerText;
+            const tool = tooltip(data, { content });
+            tool.disable();
+            if (data.offsetWidth < data.scrollWidth) {
+                tool.enable();
+            } else {
+                tool.disable();
+            }
+        }
+    };
+
+    const throttle = (fn: () => void, delay: number) => {
+        let timeout = false;
+        return () => {
+            if (!timeout) {
+                timeout = true;
+                fn.apply(this);
+                setTimeout(() => {
+                    timeout = false;
+                }, delay);
+            }
+        };
+    };
+
+    //TODO: disable tooltip when text is with elipsis
 </script>
 
-<span bind:this={data} class="text u-trim" use:tooltip={{ content, hideOnClick: false }}>
+<svelte:window on:resize={throttle(setTooltip, 50)} />
+
+<span bind:this={data} class="text u-trim">
     <slot />
 </span>

From b0ad7f03994dd1af4ec45c6b5d84ffc6ba51f7ee Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Tue, 6 Sep 2022 12:14:02 +0200
Subject: [PATCH 3/8] fix: trim component

---
 src/lib/actions/tooltip.ts     |  6 ------
 src/lib/components/trim.svelte | 23 +++++++++++++++--------
 2 files changed, 15 insertions(+), 14 deletions(-)

diff --git a/src/lib/actions/tooltip.ts b/src/lib/actions/tooltip.ts
index d20196ddf..1636a14ec 100644
--- a/src/lib/actions/tooltip.ts
+++ b/src/lib/actions/tooltip.ts
@@ -13,12 +13,6 @@ export const tooltip: Action<HTMLElement, Partial<Props>> = (node, config) => {
                 });
             }
         },
-        enable() {
-            instance.enable();
-        },
-        disable() {
-            instance.disable();
-        },
         destroy() {
             instance.destroy();
         }
diff --git a/src/lib/components/trim.svelte b/src/lib/components/trim.svelte
index 0cd0b3be6..817ce3eea 100644
--- a/src/lib/components/trim.svelte
+++ b/src/lib/components/trim.svelte
@@ -1,8 +1,8 @@
 <script lang="ts">
-    import { tooltip } from '$lib/actions/tooltip';
     import { onMount } from 'svelte';
+    import tippy, { type PopperElement } from 'tippy.js';
 
-    let data: HTMLSpanElement;
+    let data: HTMLSpanElement & Partial<PopperElement>;
 
     onMount(() => {
         setTooltip();
@@ -11,12 +11,19 @@
     const setTooltip = () => {
         if (data.innerText) {
             const content = data.innerText;
-            const tool = tooltip(data, { content });
-            tool.disable();
+            let tool = data?._tippy;
+
             if (data.offsetWidth < data.scrollWidth) {
-                tool.enable();
+                if (tool) {
+                    tool.setContent(content);
+                    tool.enable();
+                } else {
+                    tippy(data, { content });
+                }
             } else {
-                tool.disable();
+                if (tool) {
+                    tool.disable();
+                }
             }
         }
     };
@@ -34,10 +41,10 @@
         };
     };
 
-    //TODO: disable tooltip when text is with elipsis
+    //TODO: disable tooltip when text is without elipsis
 </script>
 
-<svelte:window on:resize={throttle(setTooltip, 50)} />
+<svelte:window on:resize={throttle(setTooltip, 250)} />
 
 <span bind:this={data} class="text u-trim">
     <slot />

From 033a180ee841582662b5671d2206853a4911f58c Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Tue, 6 Sep 2022 12:19:10 +0200
Subject: [PATCH 4/8] removed todo

---
 src/lib/components/trim.svelte | 2 --
 1 file changed, 2 deletions(-)

diff --git a/src/lib/components/trim.svelte b/src/lib/components/trim.svelte
index 817ce3eea..042a4cf3c 100644
--- a/src/lib/components/trim.svelte
+++ b/src/lib/components/trim.svelte
@@ -40,8 +40,6 @@
             }
         };
     };
-
-    //TODO: disable tooltip when text is without elipsis
 </script>
 
 <svelte:window on:resize={throttle(setTooltip, 250)} />

From 9c38e75f84b300c04e5d137b79bfd30b4c0f88e4 Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Tue, 6 Sep 2022 12:29:57 +0200
Subject: [PATCH 5/8] feat: only set data when needed

---
 src/lib/components/trim.svelte | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/lib/components/trim.svelte b/src/lib/components/trim.svelte
index 042a4cf3c..76d1aa6c4 100644
--- a/src/lib/components/trim.svelte
+++ b/src/lib/components/trim.svelte
@@ -15,8 +15,8 @@
 
             if (data.offsetWidth < data.scrollWidth) {
                 if (tool) {
-                    tool.setContent(content);
-                    tool.enable();
+                    if (!tool?.props?.content) tool.setContent(content);
+                    if (!tool.state.isEnabled) tool.enable();
                 } else {
                     tippy(data, { content });
                 }

From d154a9612c001e62bc04991b2c886195abc6fa05 Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Tue, 11 Oct 2022 10:41:51 +0200
Subject: [PATCH 6/8] feat: add title to span

---
 src/lib/components/trim.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/lib/components/trim.svelte b/src/lib/components/trim.svelte
index 76d1aa6c4..0203fc694 100644
--- a/src/lib/components/trim.svelte
+++ b/src/lib/components/trim.svelte
@@ -44,6 +44,6 @@
 
 <svelte:window on:resize={throttle(setTooltip, 250)} />
 
-<span bind:this={data} class="text u-trim">
+<span bind:this={data} class="text u-trim" title={data?.innerText}>
     <slot />
 </span>

From 3eed2ce803f79946eb431f75c95e973929180aa7 Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Tue, 11 Oct 2022 10:43:50 +0200
Subject: [PATCH 7/8] feat: add Trim component to cells

---
 src/lib/elements/table/cellText.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/lib/elements/table/cellText.svelte b/src/lib/elements/table/cellText.svelte
index eba69539a..59b8fe2e3 100644
--- a/src/lib/elements/table/cellText.svelte
+++ b/src/lib/elements/table/cellText.svelte
@@ -5,5 +5,5 @@
 </script>
 
 <div class="table-col " class:u-overflow-visible={showOverflow} data-title={title} role="cell">
-    <span class="text u-trim"><slot /></span>
+    <Trim><slot /></Trim>
 </div>

From 3dbf403fc82561185dadb564ef03604848ecb479 Mon Sep 17 00:00:00 2001
From: Torsten Dittmann <torsten.dittmann@googlemail.com>
Date: Tue, 11 Oct 2022 14:10:12 +0200
Subject: [PATCH 8/8] fix: refactor trim component

---
 src/lib/components/tabs.svelte | 24 ++++----------
 src/lib/components/trim.svelte | 60 ++++++++++++----------------------
 src/lib/helpers/functions.ts   | 12 +++++++
 3 files changed, 38 insertions(+), 58 deletions(-)
 create mode 100644 src/lib/helpers/functions.ts

diff --git a/src/lib/components/tabs.svelte b/src/lib/components/tabs.svelte
index fd99cef1e..e615649d3 100644
--- a/src/lib/components/tabs.svelte
+++ b/src/lib/components/tabs.svelte
@@ -1,9 +1,11 @@
 <script lang="ts">
+    import { throttle } from '$lib/helpers/functions';
+
     let showLeft = false;
     let showRight = false;
     let tabsList: HTMLUListElement;
 
-    const slide = (direction: 'left' | 'right') => {
+    function slide(direction: 'left' | 'right') {
         let scrollCompleted = 0;
         let slideVar = setInterval(() => {
             if (direction == 'left') {
@@ -16,30 +18,16 @@
                 clearInterval(slideVar);
             }
         }, 10);
-    };
+    }
 
-    //TODO: implement this directly into onScroll
-    const throttle = (fn: () => void, delay: number) => {
-        let timeout = false;
-        return () => {
-            if (!timeout) {
-                timeout = true;
-                fn.apply(this);
-                setTimeout(() => {
-                    timeout = false;
-                }, delay);
-            }
-        };
-    };
-
-    const onScroll = () => {
+    function onScroll() {
         if (!tabsList) {
             return;
         }
         const { offsetWidth, scrollLeft, scrollWidth } = tabsList;
         showLeft = scrollLeft > 10;
         showRight = scrollLeft < scrollWidth - offsetWidth - 10;
-    };
+    }
 </script>
 
 <svelte:window on:resize={throttle(onScroll, 25)} />
diff --git a/src/lib/components/trim.svelte b/src/lib/components/trim.svelte
index 0203fc694..847d696eb 100644
--- a/src/lib/components/trim.svelte
+++ b/src/lib/components/trim.svelte
@@ -1,49 +1,29 @@
 <script lang="ts">
+    import { tooltip } from '$lib/actions/tooltip';
+    import { throttle } from '$lib/helpers/functions';
     import { onMount } from 'svelte';
-    import tippy, { type PopperElement } from 'tippy.js';
 
-    let data: HTMLSpanElement & Partial<PopperElement>;
+    let showTooltip = false;
+    let container: HTMLSpanElement | null;
 
-    onMount(() => {
-        setTooltip();
-    });
+    onMount(onResize);
 
-    const setTooltip = () => {
-        if (data.innerText) {
-            const content = data.innerText;
-            let tool = data?._tippy;
-
-            if (data.offsetWidth < data.scrollWidth) {
-                if (tool) {
-                    if (!tool?.props?.content) tool.setContent(content);
-                    if (!tool.state.isEnabled) tool.enable();
-                } else {
-                    tippy(data, { content });
-                }
-            } else {
-                if (tool) {
-                    tool.disable();
-                }
-            }
-        }
-    };
-
-    const throttle = (fn: () => void, delay: number) => {
-        let timeout = false;
-        return () => {
-            if (!timeout) {
-                timeout = true;
-                fn.apply(this);
-                setTimeout(() => {
-                    timeout = false;
-                }, delay);
-            }
-        };
-    };
+    function onResize() {
+        showTooltip = container.offsetWidth < container.scrollWidth;
+    }
 </script>
 
-<svelte:window on:resize={throttle(setTooltip, 250)} />
+<svelte:window on:resize={throttle(onResize, 250)} />
 
-<span bind:this={data} class="text u-trim" title={data?.innerText}>
-    <slot />
+<span class="text u-trim" bind:this={container}>
+    {#if showTooltip}
+        <span
+            use:tooltip={{
+                content: container.innerText
+            }}>
+            <slot />
+        </span>
+    {:else}
+        <span><slot /></span>
+    {/if}
 </span>
diff --git a/src/lib/helpers/functions.ts b/src/lib/helpers/functions.ts
new file mode 100644
index 000000000..b410d3575
--- /dev/null
+++ b/src/lib/helpers/functions.ts
@@ -0,0 +1,12 @@
+export const throttle = (fn: () => void, delay: number) => {
+    let timeout = false;
+    return () => {
+        if (!timeout) {
+            timeout = true;
+            fn.apply(this);
+            setTimeout(() => {
+                timeout = false;
+            }, delay);
+        }
+    };
+};