shake when trying to toggle locked checked task
Hunter
Monday, August 5th, 2024 at 8:33 PM
51 --accent: var(--olive);
52 }
53
54 + @keyframes shake {
55 + 0% { transform: translateX(0); }
56 + 20% { transform: translateX(3px); }
57 + 40% { transform: translateX(-3px); }
58 + 60% { transform: translateX(3px); }
59 + 80% { transform: translateX(-3px); }
60 + 100% { transform: translateX(0); }
61 + }
62 +
63 + .shake {
64 + animation: shake 0.3s ease-in-out;
65 + }
66 +
67 body {
68 font-family: Arial, sans-serif;
69 max-width: 800px;
425 }
426
427 function toggleTaskState(task) {
- if (task.state === 1) {
- // if all direct children are checked, disallow unchecking
- if (task.subtasks.length === 0 || !task.subtasks.every(t => t.state === 1)) {
- task.state = 0;
- updateSubtasksState(task, 0);
428 + if (task.state === 1) {
429 + // if all direct children are checked, disallow unchecking
430 + if (task.subtasks.length === 0 || !task.subtasks.every(t => t.state === 1)) {
431 + task.state = 0;
432 + updateSubtasksState(task, 0);
433 +
434 + const parent = findParentTask(task);
435 + if (parent) {
436 + updateTaskAndAncestors(parent);
437 + }
438 +
439 + renderCurrentView();
440 + selectAndFocusTask(task);
441 + scheduleSave();
442 + } else {
443 + // Animate the checkbox
444 + const checkbox = document.querySelector(`.task-container[data-id="${task.id}"] .checkbox-label`);
445 + if (checkbox) {
446 + checkbox.classList.add('shake');
447 + setTimeout(() => {
448 + checkbox.classList.remove('shake');
449 + }, 300); // Remove class after animation completes
450 + }
451 + }
452 + } else {
453 + task.state = 1;
454 + updateSubtasksState(task, 1);
455
456 const parent = findParentTask(task);
457 if (parent) {
462 selectAndFocusTask(task);
463 scheduleSave();
464 }
- // If all direct children are checked, do nothing
- } else {
- task.state = 1;
- updateSubtasksState(task, 1);
-
- const parent = findParentTask(task);
- if (parent) {
- updateTaskAndAncestors(parent);
- }
-
- renderCurrentView();
- selectAndFocusTask(task);
- scheduleSave();
465 }
- }
466
467 //recalculates the state of a task based on its subtasks
468 function recalculateTaskState(task) {