anton/visual-spending
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Change multi-select to Cmd+click, Shift+click for interval

Browse Source 
- Cmd/Ctrl+click: toggle individual months in/out of selection
- Shift+click: select contiguous interval from current to clicked month

This matches standard selection behavior in file managers and lists.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Anton Volnuhin 2026-02-03 15:40:54 +03:00
parent 423844af3e
commit c2166be06e
1 changed files with 29 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
app.js
View File

@ -1438,8 +1438,12 @@ async function loadAvailableMonths() {
btn.appendChild(preview); btn.appendChild(preview);
btn.appendChild(label); btn.appendChild(label);
btn.addEventListener('click', (event) => { btn.addEventListener('click', (event) => {
if (event.shiftKey) { if (event.metaKey || event.ctrlKey) {
// Cmd/Ctrl+click: toggle individual month
toggleMonthSelection(index); toggleMonthSelection(index);
} else if (event.shiftKey) {
// Shift+click: select interval from current to clicked
selectMonthInterval(index);
} else { } else {
selectSingleMonth(index); selectSingleMonth(index);
} }
@ -1456,9 +1460,12 @@ async function loadAvailableMonths() {
// Set up arrow button handlers // Set up arrow button handlers
document.getElementById('prev-month').addEventListener('click', (event) => { document.getElementById('prev-month').addEventListener('click', (event) => {
if (currentMonthIndex > 0) { if (currentMonthIndex > 0) {
if (event.shiftKey) { if (event.metaKey || event.ctrlKey) {
// Add previous month to selection // Cmd/Ctrl+arrow: toggle previous month
toggleMonthSelection(currentMonthIndex - 1); toggleMonthSelection(currentMonthIndex - 1);
} else if (event.shiftKey) {
// Shift+arrow: extend selection to previous month
selectMonthInterval(currentMonthIndex - 1);
} else { } else {
selectSingleMonth(currentMonthIndex - 1); selectSingleMonth(currentMonthIndex - 1);
} }
@ -1467,9 +1474,12 @@ async function loadAvailableMonths() {
document.getElementById('next-month').addEventListener('click', (event) => { document.getElementById('next-month').addEventListener('click', (event) => {
if (currentMonthIndex < availableMonths.length - 1) { if (currentMonthIndex < availableMonths.length - 1) {
if (event.shiftKey) { if (event.metaKey || event.ctrlKey) {
// Add next month to selection // Cmd/Ctrl+arrow: toggle next month
toggleMonthSelection(currentMonthIndex + 1); toggleMonthSelection(currentMonthIndex + 1);
} else if (event.shiftKey) {
// Shift+arrow: extend selection to next month
selectMonthInterval(currentMonthIndex + 1);
} else { } else {
selectSingleMonth(currentMonthIndex + 1); selectSingleMonth(currentMonthIndex + 1);
} }
@ -1682,7 +1692,7 @@ function navigateToPath(sunburstData, path) {
}; };
} }
// Toggle a month in/out of multi-selection (Shift+click behavior) // Toggle a month in/out of multi-selection (Cmd/Ctrl+click behavior)
async function toggleMonthSelection(index) { async function toggleMonthSelection(index) {
if (selectedMonthIndices.has(index)) { if (selectedMonthIndices.has(index)) {
// Don't allow deselecting the last month // Don't allow deselecting the last month
@ -1708,6 +1718,19 @@ async function selectSingleMonth(index) {
await selectMonth(index); await selectMonth(index);
} }
// Select interval from current month to target (Shift+click behavior)
async function selectMonthInterval(targetIndex) {
const start = Math.min(currentMonthIndex, targetIndex);
const end = Math.max(currentMonthIndex, targetIndex);
selectedMonthIndices.clear();
for (let i = start; i <= end; i++) {
selectedMonthIndices.add(i);
}
currentMonthIndex = targetIndex;
await renderSelectedMonths();
}
// Merge transaction data from multiple months // Merge transaction data from multiple months
function mergeMonthsData(monthIndices) { function mergeMonthsData(monthIndices) {
const allTransactions = []; const allTransactions = [];