sam/goalsbreakdown
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: directly set in-focus on scrolled task instead of recalculating geometry

Browse Source 
Previously handleScrollFocus() recalculated the centered task during
init, which could select a different task than the one scrollToTask()
targeted due to scroll container clamping or DOM layout timing.

Now the scrolled task directly receives the in-focus class, and
handleScrollFocus is only used during user-initiated scroll events.
Also removes the isInitializing flag as it's no longer needed.
This commit is contained in:
Yuyao Huang 2026-05-09 15:52:24 +08:00
parent 1a23558cad
commit 2229fdd0ef
1 changed files with 15 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
static/js/tasks.js
View File

@ -5,7 +5,6 @@ let selectedTaskId = null;
let sortableInstance = null;
let persistTimer = null;
let currentUser = null;
let isInitializing = false;
async function loadGoals() {
try {
@ -38,7 +37,6 @@ async function loadGoals() {
async function loadTasks() {
if (!selectedGoalId) return;
isInitializing = true;
try {
tasks = await get(`/api/tasks?goal_id=${selectedGoalId}`);
@ -49,7 +47,10 @@ async function loadTasks() {
const savedTaskId = currentGoal ? currentGoal.selected_task_id : null;
const savedTaskExists = savedTaskId && tasks.some(t => t.id === savedTaskId);
let focusTaskId = null;
if (savedTaskExists) {
focusTaskId = savedTaskId;
scrollToTask(savedTaskId);
selectedTaskId = savedTaskId;
if (isLandscapeMode()) {
@ -58,6 +59,7 @@ async function loadTasks() {
} else {
const doingTask = tasks.find(t => t.status === "doing");
if (doingTask) {
focusTaskId = doingTask.id;
scrollToTask(doingTask.id);
if (isLandscapeMode()) {
selectTask(doingTask.id);
@ -67,16 +69,23 @@ async function loadTasks() {
}
}
// Directly set in-focus on the scrolled task instead of recalculating
if (focusTaskId) {
document.querySelectorAll(".task-item.in-focus").forEach(el => el.classList.remove("in-focus"));
const focusEl = document.querySelector(`[data-task-id="${focusTaskId}"]`);
if (focusEl) {
focusEl.classList.add("in-focus");
}
}
initScrollFocus();
} catch (error) {
console.error("Failed to load tasks:", error);
} finally {
isInitializing = false;
}
}
async function persistSelectedTask(taskId) {
if (!selectedGoalId || isInitializing) return;
if (!selectedGoalId) return;
try {
await patch(`/api/goals/${selectedGoalId}/selected-task`, { task_id: taskId });
const goal = goals.find(g => g.id === selectedGoalId);
@ -161,11 +170,6 @@ function initScrollFocus() {
scrollView.removeEventListener("scroll", handleScrollFocus);
scrollView.removeEventListener("scroll", handleScrollSave);
// Initial call to set in-focus class (before binding scroll handler)
handleScrollFocus();
// Bind scroll handlers after initial setup
scrollView.addEventListener("scroll", handleScrollFocus);
scrollView.addEventListener("scroll", handleScrollSave);
}
@ -207,11 +211,9 @@ function handleScrollFocus() {
}
function handleScrollSave() {
// Save the task that has in-focus class (determined by handleScrollFocus)
const inFocusTask = document.querySelector(".task-item.in-focus");
console.log("handleScrollSave: inFocusTask=", inFocusTask?.dataset.taskId, "isInitializing=", isInitializing);
if (inFocusTask && !isInitializing) {
if (inFocusTask) {
const taskId = parseInt(inFocusTask.dataset.taskId);
clearTimeout(persistTimer);
persistTimer = setTimeout(() => persistSelectedTask(taskId), 400);