Skip to content

Commit e104a48

Browse files
TemplarianTemplarian
committed
cleanup
1 parent 01b53bf commit e104a48

File tree

5 files changed

+185
-35
lines changed

5 files changed

+185
-35
lines changed

‎src/pg/tree/README.md‎

Lines changed: 57 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,4 +8,60 @@ The `pg-tree` is used to render a tree list of items.
88

99
## Usage
1010

11-
While setup for a normal file tree this can be used for any folder structure.
11+
While setup for a normal file tree this can be used for any folder structure.
12+
13+
## Events
14+
15+
- select
16+
- rename
17+
- menu
18+
- action
19+
- drop
20+
21+
```typescript
22+
this.$tree.addEventListener('select', (e: any) => {
23+
const { items } = e.detail;
24+
this.selectedItems = items;
25+
});
26+
```
27+
28+
```typescript
29+
this.$tree.addEventListener('rename', (e: any) => {
30+
const { indexes, label } = e.detail;
31+
const item = this.#getItem(indexes);
32+
item.label = label;
33+
});
34+
```
35+
36+
```typescript
37+
this.$tree.addEventListener('menu', (e: any) => {
38+
// menu item click
39+
});
40+
```
41+
42+
```typescript
43+
this.$tree.addEventListener('action', (e: any) => {
44+
const { item, actionIndex } = e.detail;
45+
// item is a wrapper with all utility functions
46+
switch(actionIndex) {
47+
case 0:
48+
// select in view
49+
break;
50+
case 1:
51+
item.remove();
52+
break;
53+
}
54+
});
55+
```
56+
57+
```typescript
58+
this.$tree.addEventListener('drop', (e: any) => {
59+
// cancelable
60+
const { items, dropIndexes } = e.detail;
61+
// If folder ignore items under folder
62+
63+
items.forEach(() => {
64+
item.move(dropIndexes);
65+
})
66+
});
67+
```

‎src/pg/tree/__examples__/basic/basic.ts‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -90,16 +90,21 @@ export default class XPgTreeBasic extends HTMLElement {
9090
action.enabled = true;
9191
}
9292
});
93+
this.$tree.addEventListener('move', (e: any) => {
94+
console.log('move', e.detail.indexes, e.detail.position);
95+
this.#selectedItems.forEach((item) => {
96+
97+
});
98+
});
9399
this.$tree.addEventListener('rename', (e: any) => {
94100
const { indexes, label } = e.detail;
95101
const item = this.#getItem(indexes);
96102
item.label = label;
97103
});
98104
this.$tree.addEventListener('menu', (e: any) => {
99-
// action clicked
105+
// menu
100106
});
101107
this.$tree.addEventListener('select', (e: any) => {
102-
console.log(e.detail.items.length);
103108
this.#selectedItems = e.detail.items;
104109
});
105110
this.$tree.items = [

‎src/pg/tree/tree.ts‎

Lines changed: 18 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,11 @@ export type SelectedTreeItem = {
1212
getParentData: () => any;
1313
}
1414

15+
function move(arr, fromIndex, toIndex) {
16+
const [element] = arr.splice(fromIndex, 1);
17+
arr.splice(toIndex, 0, element);
18+
}
19+
1520
@Component({
1621
selector: 'pg-tree',
1722
style,
@@ -34,14 +39,23 @@ export default class PgTree extends HTMLElement {
3439
});
3540
this.$items.addEventListener('action', (e: any) => {
3641
e.stopPropagation();
37-
console.log(e.detail);
3842
this.dispatchEvent(new CustomEvent('action', {
3943
detail: {
4044
actionIndex: e.detail.actionIndex,
4145
item: this.#wrap(e.detail.indexes)
4246
}
4347
}));
4448
});
49+
this.$items.addEventListener('move', (e: any) => {
50+
const { indexes, position } = e.detail;
51+
e.stopPropagation();
52+
this.dispatchEvent(new CustomEvent('move', {
53+
detail: {
54+
indexes,
55+
position
56+
}
57+
}));
58+
});
4559
this.$items.addEventListener('toggle', (e: any) => {
4660
const { indexes } = e.detail;
4761
let item = this.#getItem(indexes);
@@ -162,6 +176,9 @@ export default class PgTree extends HTMLElement {
162176
return this;
163177
}
164178
return this.#getItem(parent);
179+
},
180+
move: (newIndexes) => {
181+
165182
}
166183
}
167184
}

‎src/pg/treeButtonIcon/README.md‎

Lines changed: 39 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,39 @@
1-
# Tree Button Icon
1+
# Tree Button Icon
2+
3+
Tree button icons are used in the `pg-tree` component for actions. See `pg-tree` for documentation.
4+
5+
## Usage
6+
7+
```typescript
8+
this.$tree.items = [{
9+
icon: {
10+
path: IconFile
11+
},
12+
label,
13+
actions: [{
14+
type: PgTreeButtonIcon,
15+
label: 'Select in View',
16+
icon: IconSelect,
17+
enabled: true
18+
},
19+
{
20+
type: PgTreeButtonIcon,
21+
label: 'Delete',
22+
icon: IconTrash,
23+
enabled: true
24+
}]
25+
}];
26+
27+
this.$tree.addEventListener('action', (e: any) => {
28+
const { item, actionIndex } = e.detail;
29+
// item is a wrapper with all utility functions
30+
switch(actionIndex) {
31+
case 0:
32+
// select in view
33+
break;
34+
case 1:
35+
item.remove();
36+
break;
37+
}
38+
});
39+
```

‎src/pg/treeItem/treeItem.ts‎

Lines changed: 64 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -53,6 +53,7 @@ export default class PgTreeItem extends HTMLElement {
5353
this.$input.addEventListener('keydown', this.#handleInputKeyDown.bind(this));
5454
// Append Indexes
5555
this.$items.addEventListener('action', this.#handleAction.bind(this));
56+
this.$items.addEventListener('move', this.#handleMove.bind(this));
5657
this.$items.addEventListener('toggle', this.#handleToggle.bind(this));
5758
this.$items.addEventListener('select', this.#handleSelect.bind(this));
5859
this.$items.addEventListener('rename', this.#handleRename.bind(this));
@@ -62,18 +63,18 @@ export default class PgTreeItem extends HTMLElement {
6263
this.$items.addEventListener('itemdragend', this.#handleItemDragEnd.bind(this));
6364
this.$items.addEventListener('itemdropenter', this.#handleItemDropEnter.bind(this));
6465
// Drop
65-
this.$dropabove.addEventListener('dragenter', this.#handleDropAboveEnter.bind(this));
66-
this.$dropabove.addEventListener('dragleave', this.#handleDropAboveLeave.bind(this));
67-
this.$dropabove.addEventListener('dragover', this.#handleDropOver.bind(this));
68-
this.$dropabove.addEventListener('drop', this.#handleDrop.bind(this));
69-
this.$dropon.addEventListener('dragenter', this.#handleDropOnEnter.bind(this));
70-
this.$dropon.addEventListener('dragleave', this.#handleDropOnLeave.bind(this));
71-
this.$dropon.addEventListener('dragover', this.#handleDropOver.bind(this));
72-
this.$dropon.addEventListener('drop', this.#handleDrop.bind(this));
73-
this.$dropbelow.addEventListener('dragenter', this.#handleDropBelowEnter.bind(this));
74-
this.$dropbelow.addEventListener('dragleave', this.#handleDropBelowLeave.bind(this));
75-
this.$dropbelow.addEventListener('dragover', this.#handleDropOver.bind(this));
76-
this.$dropbelow.addEventListener('drop', this.#handleDrop.bind(this));
66+
this.$dropabove.addEventListener('dragenter', this.#handleDragAboveEnter.bind(this));
67+
this.$dropabove.addEventListener('dragleave', this.#handleDragAboveLeave.bind(this));
68+
this.$dropabove.addEventListener('dragover', this.#handleDragOver.bind(this));
69+
this.$dropabove.addEventListener('drop', this.#handleDragAbove.bind(this));
70+
this.$dropon.addEventListener('dragenter', this.#handleDragOnEnter.bind(this));
71+
this.$dropon.addEventListener('dragleave', this.#handleDragOnLeave.bind(this));
72+
this.$dropon.addEventListener('dragover', this.#handleDragOver.bind(this));
73+
this.$dropon.addEventListener('drop', this.#handleDropOn.bind(this));
74+
this.$dropbelow.addEventListener('dragenter', this.#handleDragBelowEnter.bind(this));
75+
this.$dropbelow.addEventListener('dragleave', this.#handleDragBelowLeave.bind(this));
76+
this.$dropbelow.addEventListener('dragover', this.#handleDragOver.bind(this));
77+
this.$dropbelow.addEventListener('drop', this.#handleDropBelow.bind(this));
7778

7879
forEach({
7980
container: this.$actions,
@@ -213,6 +214,10 @@ export default class PgTreeItem extends HTMLElement {
213214
e.detail.indexes.unshift(this.index);
214215
}
215216

217+
#handleMove(e) {
218+
e.detail.indexes.unshift(this.index);
219+
}
220+
216221
#handleToggle(e: any) {
217222
e.detail.indexes.unshift(this.index);
218223
}
@@ -422,16 +427,16 @@ export default class PgTreeItem extends HTMLElement {
422427
e.detail.indexes.unshift(this.index);
423428
}
424429

425-
#handleDropAboveEnter(e: any) {
426-
console.log('darg above');
430+
#handleDragAboveEnter(e: any) {
427431
this.dispatchEvent(new CustomEvent('itemdropenter', {
428432
bubbles: true,
429433
composed: true,
430434
detail: {
431435
indexes: [this.index],
432436
callback: (isValid) => {
433-
console.log('is valid', isValid);
434-
e.dataTransfer.dropEffect = 'move';
437+
if (isValid) {
438+
e.dataTransfer.dropEffect = 'move';
439+
}
435440
}
436441
}
437442
}));
@@ -440,22 +445,22 @@ export default class PgTreeItem extends HTMLElement {
440445
e.dataTransfer.effectAllowed = 'move';
441446
}
442447

443-
#handleDropAboveLeave(e: any) {
448+
#handleDragAboveLeave(e: any) {
444449
console.log('darg leave');
445450
e.target.classList.toggle('drop', false);
446451
}
447452

448453
#dragOnTimer;
449-
#handleDropOnEnter(e: any) {
450-
console.log('darg on');
454+
#handleDragOnEnter(e: any) {
451455
this.dispatchEvent(new CustomEvent('itemdropenter', {
452456
bubbles: true,
453457
composed: true,
454458
detail: {
455459
indexes: [this.index],
456460
callback: (isValid) => {
457-
console.log('is valid', isValid);
458-
e.dataTransfer.dropEffect = 'move';
461+
if (isValid) {
462+
e.dataTransfer.dropEffect = 'move';
463+
}
459464
}
460465
}
461466
}));
@@ -465,21 +470,19 @@ export default class PgTreeItem extends HTMLElement {
465470
}, 1500);
466471
}
467472

468-
#handleDropOnLeave(e: any) {
473+
#handleDragOnLeave(e: any) {
469474
clearTimeout(this.#dragOnTimer);
470475
console.log('darg leave');
471476
e.target.classList.toggle('drop', false);
472477
}
473478

474-
#handleDropBelowEnter(e: any) {
475-
console.log('darg below');
479+
#handleDragBelowEnter(e: any) {
476480
this.dispatchEvent(new CustomEvent('itemdropenter', {
477481
bubbles: true,
478482
composed: true,
479483
detail: {
480484
indexes: [this.index],
481-
callback: (isValid, setDropEffect) => {
482-
console.log('is valid', isValid);
485+
callback: (isValid) => {
483486
if (isValid) {
484487
e.dataTransfer.dropEffect = 'move';
485488
}
@@ -489,19 +492,50 @@ export default class PgTreeItem extends HTMLElement {
489492
e.target.classList.toggle('drop', true);
490493
}
491494

492-
#handleDropBelowLeave(e: any) {
495+
#handleDragBelowLeave(e: any) {
493496
console.log('darg leave');
494497
e.target.classList.toggle('drop', false);
495498
}
496499

497-
#handleDropOver(e: any) {
500+
#handleDragOver(e: any) {
498501
e.preventDefault();
499502
e.dataTransfer.dropEffect = 'move';
500503
}
501504

502-
#handleDrop(e: any) {
505+
#handleDragAbove(e: any) {
506+
e.target.classList.toggle('drop', false);
507+
this.dispatchEvent(new CustomEvent('move', {
508+
bubbles: true,
509+
composed: true,
510+
detail: {
511+
indexes: [this.index],
512+
position: 'before'
513+
}
514+
}));
515+
}
516+
517+
#handleDropOn(e: any) {
503518
e.target.classList.toggle('drop', false);
504-
console.log('dropped!!!');
519+
this.dispatchEvent(new CustomEvent('move', {
520+
bubbles: true,
521+
composed: true,
522+
detail: {
523+
indexes: [this.index],
524+
position: 'on'
525+
}
526+
}));
527+
}
528+
529+
#handleDropBelow(e: any) {
530+
e.target.classList.toggle('drop', false);
531+
this.dispatchEvent(new CustomEvent('move', {
532+
bubbles: true,
533+
composed: true,
534+
detail: {
535+
indexes: [this.index],
536+
position: 'after'
537+
}
538+
}));
505539
}
506540

507541
}

0 commit comments

Comments
 (0)