[READ-ONLY] Mirror of https://github.com/probablykasper/ferrum. Music library app for Mac, Linux and Windows
ferrum.kasper.space
electron
linux
macos
music
music-library
music-player
napi
windows
Add column rearranging
+59
-59
+1
-1
src/components/Player.svelte
+1
-1
src/components/Player.svelte
+58
-58
src/components/TrackList.svelte
+58
-58
src/components/TrackList.svelte
···
424
424
return null
425
425
},
426
426
columnProperties() {
427
-
return { class: col.prop }
427
+
return { class: col.prop, draggable: true }
428
428
},
429
429
cellProperties() {
430
430
return { class: col.prop, draggable: true }
···
561
561
return () => grid.removeEventListener('afterrender', apply_classes)
562
562
})
563
563
564
-
// let col_container: HTMLElement
565
-
// let col_drag_line: HTMLElement
566
-
// let col_drag_index: number | null = null
567
-
// function on_col_drag_start(e: DragEvent, index: number) {
568
-
// if (e.dataTransfer) {
569
-
// col_drag_index = index
570
-
// }
571
-
// }
572
-
// let col_drag_to_index: null | number = null
573
-
// function on_col_drag_over(e: DragEvent, index: number) {
574
-
// if (col_drag_index !== null && e.currentTarget instanceof HTMLElement) {
575
-
// e.preventDefault()
576
-
// const rect = e.currentTarget.getBoundingClientRect()
577
-
// const container_rect = col_container.getBoundingClientRect()
578
-
// if (e.pageX < rect.right - rect.width / 2) {
579
-
// const offset = index === 0 ? 0 : -1
580
-
// col_drag_line.style.left = rect.left - container_rect.left + offset + 'px'
581
-
// col_drag_to_index = index
582
-
// } else {
583
-
// const offset = index === columns.length - 1 ? -2 : -1
584
-
// col_drag_line.style.left = rect.right - container_rect.left + offset + 'px'
585
-
// col_drag_to_index = index + 1
586
-
// }
587
-
// }
588
-
// }
589
-
// function col_drop_handler() {
590
-
// if (col_drag_index !== null && col_drag_to_index !== null) {
591
-
// const move_to_left = col_drag_index < col_drag_to_index
592
-
// const removed_column = columns.splice(col_drag_index, 1)[0]
593
-
// columns.splice(col_drag_to_index - Number(move_to_left), 0, removed_column)
594
-
// columns = columns
595
-
// save_columns()
564
+
let col_drag_line: HTMLElement
565
+
let col_drag_index: number | null = null
566
+
function on_col_drag_start(e: DragEvent, index: number) {
567
+
if (e.dataTransfer) {
568
+
col_drag_index = index
569
+
}
570
+
}
571
+
let col_drag_to_index: null | number = null
572
+
function on_col_drag_over(e: DragEvent, index: number) {
573
+
if (col_drag_index !== null && e.currentTarget instanceof HTMLElement) {
574
+
e.preventDefault()
575
+
const rect = e.currentTarget.getBoundingClientRect()
576
+
const scroll_container = grid.querySelector('.vertical-inner.scroll-rgRow')
577
+
if (!scroll_container) {
578
+
throw new Error('Scroll container not found')
579
+
}
580
+
const container_rect = scroll_container.getBoundingClientRect()
581
+
if (e.pageX < rect.right - rect.width / 2) {
582
+
const offset = index === 0 ? 0 : -1
583
+
col_drag_line.style.left = rect.left - container_rect.left + offset + 'px'
584
+
col_drag_to_index = index
585
+
} else {
586
+
const offset = index === columns.length - 1 ? -2 : -1
587
+
col_drag_line.style.left = rect.right - container_rect.left + offset + 'px'
588
+
col_drag_to_index = index + 1
589
+
}
590
+
}
591
+
}
592
+
function col_drop_handler() {
593
+
if (col_drag_index !== null && col_drag_to_index !== null) {
594
+
const move_to_left = col_drag_index < col_drag_to_index
595
+
const removed_column = columns.splice(col_drag_index, 1)[0]
596
+
columns.splice(col_drag_to_index - Number(move_to_left), 0, removed_column)
597
+
save_columns()
598
+
columns = load_columns()
596
599
597
-
// col_drag_to_index = null
598
-
// }
599
-
// }
600
-
// function col_drag_end_handler() {
601
-
// col_drag_to_index = null
602
-
// }
600
+
col_drag_to_index = null
601
+
}
602
+
}
603
603
604
604
function get_row(e: Event) {
605
605
if (!(e.target instanceof Element)) {
···
633
633
}}
634
634
/>
635
635
636
-
<div class="grid-container flex grow flex-col">
636
+
<div class="grid-container relative flex grow flex-col">
637
637
<div
638
638
class="row grid-header border-b border-b-slate-500/30"
639
639
class:desc={$sort_desc}
640
640
role="row"
641
641
oncontextmenu={on_column_context_menu}
642
+
ondragleave={() => (col_drag_to_index = null)}
642
643
>
644
+
<div
645
+
class="col-drag-line"
646
+
class:hidden={col_drag_to_index === null}
647
+
bind:this={col_drag_line}
648
+
></div>
643
649
{#each columns as column, i}
644
650
<div
645
651
class="rgCell {column.prop}"
646
652
style:width="{column.size}px"
647
653
style:translate="{column.left_offset}px 0"
648
654
role="button"
655
+
draggable="true"
656
+
ondragstart={(e) => on_col_drag_start(e, i)}
657
+
ondragend={() => (col_drag_to_index = null)}
658
+
ondragover={(e) => on_col_drag_over(e, i)}
659
+
ondrop={col_drop_handler}
649
660
>
650
661
{column.prop === 'image' ? '' : column.name}
651
662
</div>
···
730
741
class="row table-header border-b border-b-slate-500/30"
731
742
class:desc={$sort_desc}
732
743
role="row"
733
-
on:dragleave={() => (col_drag_to_index = null)}
734
744
bind:this={col_container}
735
745
>
736
746
{#each columns as column, i}
···
752
762
sort_desc.set(get_default_sort_desc(column.key))
753
763
}
754
764
}}
755
-
draggable="true"
756
-
on:dragstart={(e) => on_col_drag_start(e, i)}
757
-
on:dragend={col_drag_end_handler}
758
-
on:dragover={(e) => on_col_drag_over(e, i)}
759
-
on:drop={col_drop_handler}
760
765
>
761
766
<span>{column.key === 'image' ? '' : column.name}</span>
762
767
</div>
763
768
{/each}
764
-
<div
765
-
class="col-drag-line"
766
-
class:hidden={col_drag_to_index === null}
767
-
bind:this={col_drag_line}
768
-
></div>
769
769
</div>
770
770
<div
771
771
bind:this={scroll_container}
···
905
905
background-color: var(--drag-line-color)
906
906
pointer-events: none
907
907
z-index: 5
908
-
// .col-drag-line
909
-
// position: absolute
910
-
// width: 2px
911
-
// height: 100vh
912
-
// background-color: var(--drag-line-color)
913
-
// pointer-events: none
914
-
// z-index: 5
908
+
.col-drag-line
909
+
position: absolute
910
+
width: 2px
911
+
height: 100vh
912
+
background-color: var(--drag-line-color)
913
+
pointer-events: none
914
+
z-index: 5
915
915
</style>