feat: made icons/context menu optional
mellbacon committed
Jul 12, 2023 at 18:55 UTC
b19d547c1a77fabf66ca04eb9e71c4995b06ef15
4 files changed
+20
-13
src/lib/FileTree.svelte
+1
-1
@@ -48,7 +48,7 @@
48
<button class="toolbar-button" on:click={async () => {await openFolder()}}>Open Folder</button>
49
</div>
50
{:else}
51
- <FileTreeView tree={$filetree} on:nodeselect={handleSelect} on:dblnodeselect={handleDblSelect} on:rightclick={handleClick}></FileTreeView>
51
+ <FileTreeView tree={$filetree} on:nodeselect={handleSelect} on:dblnodeselect={handleDblSelect} on:rightclick={handleClick} contextMenuEnabled></FileTreeView>
52
{/if}
53
54
{#if treeDom && contextmenu}
src/lib/FileTree/FileTreeList.svelte
+10
-8
@@ -22,8 +22,10 @@
22
export let name = "";
23
export let path = "";
24
export let children = [];
25
+ export let contextMenuEnabled;
26
+ export let iconsEnabled;
27
26
- let expanded = _expansionState[name] || false;
28
+ export let expanded = _expansionState[name] || false;
29
let ref = null;
30
let refLabel = null;
31
let refChildren = null;
@@ -105,7 +107,7 @@
107
108
if (fromlist.path === tolist.path) return;
109
108
- await moveFile(fromlist.path, tolist.path, element.path, data.type);
110
+ await moveFile(fromlist.path, tolist.path, element.path);
111
112
e.target.classList.remove("hover");
113
}
@@ -160,21 +162,21 @@
162
{#if root}
163
{#each children as child}
164
{#if Array.isArray(child.children)}
163
- <svelte:self on:nodeselect on:dblnodeselect isroot={root} {...child}></svelte:self>
165
+ <svelte:self on:nodeselect on:dblnodeselect isroot={root} {...child} {contextMenuEnabled} {expanded} {iconsEnabled}></svelte:self>
166
{:else}
165
- <FileTreeNode on:nodeselect on:dblnodeselect {...child} />
167
+ <FileTreeNode on:nodeselect on:dblnodeselect {...child} {contextMenuEnabled} {iconsEnabled}/>
168
{/if}
169
{/each}
170
{:else}
171
<li id={`filetree-node-${id}`} bind:this={ref} class="treenode" class:root={isroot} on:dragenter|stopPropagation={dragenter} on:dragleave|stopPropagation={dragleave} on:dragend|stopPropagation={dragleave} title={path}>
172
<!-- svelte-ignore a11y-click-events-have-key-events -->
173
<div bind:this={refLabel} data-id={id} class:selected class="tree-label" data-nodetype="directory" on:click={toggleExpansion} on:dragover|preventDefault on:drop|stopPropagation={drop} draggable={isroot === false} on:dragstart={dragstart} on:mouseup={(e) => {
172
- if (e.button === 2) {
174
+ if (e.button === 2 && contextMenuEnabled) {
175
contextmenu = true;
176
}
177
}}>
178
<span class="arrow" class:arrowDown>▶</span>
177
- {#if icon}
179
+ {#if icon && iconsEnabled}
180
<svelte:component this={icon} />
181
{/if}
182
{name}
@@ -183,9 +185,9 @@
185
<ul role="group" bind:this={refChildren} data-id={id} class="tree-children" on:dragover|preventDefault on:drop|stopPropagation={drop}>
186
{#each children as child (child.id) }
187
{#if Array.isArray(child.children)}
186
- <svelte:self on:nodeselect on:dblnodeselect {...child}></svelte:self>
188
+ <svelte:self on:nodeselect on:dblnodeselect {...child} {contextMenuEnabled} {expanded} {iconsEnabled}></svelte:self>
189
{:else}
188
- <FileTreeNode on:nodeselect on:dblnodeselect {...child} />
190
+ <FileTreeNode on:nodeselect on:dblnodeselect {...child} {contextMenuEnabled} {iconsEnabled} />
191
{/if}
192
{/each}
193
</ul>
src/lib/FileTree/FileTreeNode.svelte
+4
-2
@@ -26,6 +26,8 @@
26
export let id;
27
export let name;
28
export let path;
29
+ export let contextMenuEnabled;
30
+ export let iconsEnabled;
31
32
let selected = false;
33
@@ -101,13 +103,13 @@
103
on:click={(e) => {handleSelect(treenode, e)}}
104
on:dblclick={(e) => {handleDoubleSelect(treenode, e)}}
105
draggable={true} on:dragstart={dragstart} on:mouseup={(e) => {
104
- if (e.button === 2) {
106
+ if (e.button === 2 && contextMenuEnabled) {
107
contextmenu = true;
108
handleSelect(treenode, e);
109
}
110
}}>
111
<span class="no-arrow"></span>
110
- {#if icon}
112
+ {#if icon && iconsEnabled}
113
<svelte:component this={icon} />
114
{/if}
115
{name}
src/lib/FileTree/FileTreeView.svelte
+5
-2
@@ -10,6 +10,9 @@
10
import FileTreeList from "./FileTreeList.svelte";
11
12
export let tree;
13
+ export let contextMenuEnabled = false;
14
+ export let expanded = false;
15
+ export let iconsEnabled = true;
16
17
let ref;
18
let dispatch = createEventDispatcher();
@@ -17,7 +20,7 @@
20
let contextmenu = false;
21
function handleMouseUp(e) {
22
let x = null;
20
- if (e.button === 2) {
23
+ if (e.button === 2 && contextMenuEnabled) {
24
if (e.target === ref) {
25
x = ref;
26
contextmenu = true;
@@ -32,7 +35,7 @@
35
</script>
36
37
<ul bind:this={ref} class="tree" role="tree" on:mouseup={handleMouseUp}>
35
- <FileTreeList on:nodeselect on:dblnodeselect children={tree} root />
38
+ <FileTreeList {expanded} on:nodeselect on:dblnodeselect children={tree} root {contextMenuEnabled} {iconsEnabled} />
39
</ul>
40
41
<style>