backport #114 to merge in main

Emilia-Capital · Nov 12, 2024 · d77d7c1 · d77d7c1
1 parent 3aa2c9b
commit d77d7c1
Show file tree

Hide file tree

Showing 3 changed files with 52 additions and 3 deletions.
diff --git a/assets/css/admin.css b/assets/css/admin.css
@@ -982,7 +982,9 @@ button.prpl-info-icon {
 			}
 		}
 
-		.trash {
+		.trash,
+		.move-up,
+		.move-down {
 			opacity: 0;
 			padding: 0;
 			border: 0;
@@ -997,6 +999,14 @@ button.prpl-info-icon {
 			}
 		}
 
+		.move-up,
+		.move-down {
+
+			&:hover {
+				color: var(--prpl-color-accent-green);
+			}
+		}
+
 		:not(:focus-within):has(:checked) .content {
 			opacity: 0.5;
 			text-decoration: line-through;
@@ -1010,14 +1020,21 @@ button.prpl-info-icon {
 		&:hover,
 		&:focus-within {
 
-			.trash {
+			.trash,
+			.move-up,
+			.move-down {
 				opacity: 1;
 			}
 
 			.prpl-todo-drag-handle {
 				opacity: 1;
 			}
 		}
+
+		&:first-child .move-up,
+		&:last-child .move-down {
+			display: none;
+		}
 	}
 }
 

diff --git a/assets/js/todo.js b/assets/js/todo.js
@@ -92,6 +92,14 @@ const progressPlannerInjectTodoItem = ( content, done, addToStart, save ) => {
 		'%s',
 		content
 	);
+	const moveUpTaskAriaLabel = progressPlannerTodo.i18n.taskMoveUp.replace(
+		'%s',
+		content
+	);
+	const moveDownTaskAriaLabel = progressPlannerTodo.i18n.taskMoveDown.replace(
+		'%s',
+		content
+	);
 
 	const todoItemElement = jQuery( '<li></li>' ).html( `
 		<span class="prpl-todo-drag-handle" aria-label="${
@@ -103,6 +111,8 @@ const progressPlannerInjectTodoItem = ( content, done, addToStart, save ) => {
 		</span>
 		<input type="checkbox" aria-label="'${ content }'" ${ done ? 'checked' : '' }>
 		<span class="content" contenteditable="plaintext-only">${ content }</span>
+		<button class="move-up" aria-label="${ moveUpTaskAriaLabel }"><span class="dashicons dashicons-arrow-up-alt"></span></button>
+		<button class="move-down" aria-label="${ moveDownTaskAriaLabel }"><span class="dashicons dashicons-arrow-down-alt"></span></button>
 		<button class="trash" aria-label="${ deleteTaskAriaLabel }"><span class="dashicons dashicons-trash"></span></button>
 	` );
 
@@ -212,4 +222,20 @@ progressPlannerDomReady( () => {
 			jQuery( '#new-todo-content' ).focus();
 		}
 	} );
+
+	// When the move up button is clicked, move the todo item up the list
+	jQuery( '#todo-list' ).on( 'click', '.move-up', function () {
+		const todoItem = jQuery( this ).closest( 'li' );
+		todoItem.insertBefore( todoItem.prev( 'li' ) );
+		progressPlannerSaveTodoList();
+		wp.a11y.speak( progressPlannerTodo.i18n.taskMovedUp );
+	} );
+
+	// When the move down button is clicked, move the todo item down the list
+	jQuery( '#todo-list' ).on( 'click', '.move-down', function () {
+		const todoItem = jQuery( this ).closest( 'li' );
+		todoItem.insertAfter( todoItem.next( 'li' ) );
+		progressPlannerSaveTodoList();
+		wp.a11y.speak( progressPlannerTodo.i18n.taskMovedDown );
+	} );
 } );
diff --git a/classes/admin/class-page.php b/classes/admin/class-page.php
@@ -211,7 +211,7 @@ public static function register_scripts() {
 		\wp_register_script(
 			'progress-planner-todo',
 			PROGRESS_PLANNER_URL . '/assets/js/todo.js',
-			[ 'jquery-ui-sortable', 'progress-planner-ajax', 'wp-util' ],
+			[ 'jquery-ui-sortable', 'progress-planner-ajax', 'wp-util', 'wp-a11y' ],
 			filemtime( PROGRESS_PLANNER_DIR . '/assets/js/todo.js' ),
 			true
 		);
@@ -247,6 +247,12 @@ public static function register_scripts() {
 					/* translators: %s: The task content. */
 					'taskDelete'       => \esc_html__( "Delete task '%s'", 'progress-planner' ),
 					/* translators: %s: The task content. */
+					'taskMoveUp'       => \esc_html__( "Move task '%s' up", 'progress-planner' ),
+					/* translators: %s: The task content. */
+					'taskMoveDown'     => \esc_html__( "Move task '%s' down", 'progress-planner' ),
+					'taskMovedUp'      => \esc_html__( 'Task moved up', 'progress-planner' ),
+					'taskMovedDown'    => \esc_html__( 'Task moved down', 'progress-planner' ),
+					/* translators: %s: The task content. */
 					'taskCompleted'    => \esc_html__( "Task '%s' completed and moved to the bottom", 'progress-planner' ),
 					/* translators: %s: The task content. */
 					'taskNotCompleted' => \esc_html__( "Task '%s' marked as not completed and moved to the top", 'progress-planner' ),