[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 toggling
+40
-21
+40
-21
src/components/TrackList.svelte
+40
-21
src/components/TrackList.svelte
···
424
424
})
425
425
}
426
426
function save_columns() {
427
-
view_options.columns = columns.map((col) => col.key)
427
+
view_options.columns = columns.map((col) => col.prop)
428
428
if (JSON.stringify(view_options.columns) === JSON.stringify(default_columns)) {
429
429
view_options.columns = []
430
430
}
431
431
save_view_options(view_options)
432
432
}
433
-
// function on_column_context_menu() {
434
-
// ipc_renderer.invoke(show_columns_menu', {
435
-
// menu: all_columns.map((col) => {
436
-
// return {
437
-
// id: col.key,
438
-
// label: col.name,
439
-
// type: 'checkbox',
440
-
// checked: !!columns.find((c) => c.key === col.key),
441
-
// }
442
-
// }),
443
-
// })
444
-
// }
433
+
function on_column_context_menu() {
434
+
ipc_renderer.invoke('show_columns_menu', {
435
+
menu: all_columns.map((col) => {
436
+
return {
437
+
id: col.prop,
438
+
label: col.name,
439
+
type: 'checkbox',
440
+
checked: !!columns.find((c) => c.prop === col.prop),
441
+
}
442
+
}),
443
+
})
444
+
}
445
445
onDestroy(
446
446
ipc_listen('context.toggle_column', (_, item) => {
447
447
if (item.checked) {
448
-
const column = all_columns.find((column) => column.key === item.id)
449
-
if (column) {
450
-
columns.push({ ...column })
451
-
columns = columns
452
-
save_columns()
448
+
const column = all_columns.find((column) => column.prop === item.id)
449
+
if (!column) {
450
+
throw new Error('Tried to toggle non-existant column ' + item.id)
453
451
}
452
+
view_options.columns.push(column.prop)
453
+
columns = load_columns()
454
+
save_columns()
454
455
} else {
455
-
columns = columns.filter((column) => column.key !== item.id)
456
+
view_options.columns = view_options.columns.filter((column) => column !== item.id)
457
+
columns = load_columns()
456
458
save_columns()
457
459
}
458
460
}),
···
604
606
element: row,
605
607
}
606
608
}
609
+
function get_header_col(e: Event) {
610
+
if (!(e.target instanceof Element)) {
611
+
return null
612
+
}
613
+
const row = e.target?.closest('.rgHeaderCell[data-rgcol]')
614
+
const row_index_str = parseInt(row?.getAttribute('data-rgcol') ?? '')
615
+
if (!row || !Number.isInteger(row_index_str)) {
616
+
return null
617
+
}
618
+
return {
619
+
index: row_index_str,
620
+
element: row,
621
+
}
622
+
}
607
623
608
624
onMount(() => {
609
625
grid.addEventListener('aftergridinit', tracklist_actions.focus)
···
653
669
// Prevent cell focus
654
670
grid.focus()
655
671
})
656
-
return
657
672
}
658
673
}}
659
674
onclick={(e: MouseEvent) => {
···
672
687
const row = get_row(e)
673
688
if (row) {
674
689
selection.handle_contextmenu(e, row.index)
690
+
return
691
+
}
692
+
const header_col = get_header_col(e)
693
+
if (header_col) {
694
+
on_column_context_menu()
675
695
}
676
696
}}
677
697
ondragstart={on_drag_start}
···
703
723
class="row table-header border-b border-b-slate-500/30"
704
724
class:desc={$sort_desc}
705
725
role="row"
706
-
on:contextmenu={on_column_context_menu}
707
726
on:dragleave={() => (col_drag_to_index = null)}
708
727
bind:this={col_container}
709
728
>