can close tabs
mellbacon committed
Apr 29, 2023 at 19:07 UTC
2ff30a36fa619b08aba131f5485f379edf556888
2 files changed
+31
-2
src/lib/Tab.svelte
+5
-2
@@ -1,10 +1,13 @@
1
<script lang="ts">
2
import { setActive } from "./scripts/Tab";
3
+ import { closeTab } from "./scripts/Tab";
4
+
5
export let id = 0;
6
export let label = "Untitled-1";
7
export let path = "";
8
export let active = false;
7
- let tab;
9
+
10
+ let tab = null;
11
</script>
12
<div bind:this={tab} title={path} id={`editorTab-${id}`} class="tab" class:active={active}>
13
<!-- svelte-ignore a11y-click-events-have-key-events -->
@@ -17,7 +20,7 @@
20
</div>
21
<!-- svelte-ignore a11y-click-events-have-key-events -->
22
<div class="close-tab">
20
- <span title="Close tab"></span>
23
+ <span title="Close tab" on:click={() => {closeTab(id)}}></span>
24
</div>
25
</div>
26
src/lib/scripts/Tab.ts
+26
@@ -55,6 +55,32 @@ export function setActive(id: number) {
55
tabs.set(tablist);
56
}
57
58
+export function closeTab(tabid: number) {
59
+ if (activeid === tabid) {
60
+ for (let i = 0; i <= tablist.length - 1; i++) {
61
+ // set right tab active
62
+ if (tablist[i].id === tabid && tablist[i + 1]) {
63
+ setActive(tablist[i + 1].id);
64
+ break;
65
+ }
66
+ // set left tab active
67
+ else if (tablist[i].id === tabid && tablist[i - 1]) {
68
+ setActive(tablist[i - 1].id);
69
+ break;
70
+ }
71
+ }
72
+ }
73
+
74
+ //tablist.find(t => t.id === tabid).content.$destroy();
75
+ tablist = tablist.filter(t => t.id !== tabid);
76
+ tabs.set(tablist);
77
+
78
+ if (tablist.length === 0) {
79
+ hidden.set(true);
80
+ id = 0;
81
+ }
82
+}
83
+
84
function refreshTabs() {
85
if (tablist.length > 0) {
86
hidden.set(false);