Skip to content

Commit

Permalink
feat: add ability to navigate to prev/next parent. fix for comment na…
Browse files Browse the repository at this point in the history 
…vigator edge cases
  • Loading branch information
@hjiangsu
hjiangsu committed Oct 21, 2024
1 parent 1597e61 commit b281caf
Show file tree
Hide file tree
Showing 2 changed files with 133 additions and 62 deletions.
101 changes: 54 additions & 47 deletions lib/post/pages/post_page.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,8 +5,8 @@ import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:flutter_gen/gen_l10n/app_localizations.dart';
import 'package:lemmy_api_client/v3.dart';
import 'package:super_sliver_list/super_sliver_list.dart';
import 'package:thunder/account/models/account.dart';

import 'package:thunder/account/models/account.dart';
import 'package:thunder/comment/enums/comment_action.dart';
import 'package:thunder/comment/models/comment_node.dart';
import 'package:thunder/comment/widgets/comment_card.dart';
Expand Down Expand Up @@ -117,53 +117,54 @@ class _PostPageState extends State<PostPage> {
originalUser ??= context.read<AuthBloc>().state.account;

return PopScope(
onPopInvoked: (_) {
onPopInvokedWithResult: (didPop, result) {
if (context.mounted) {
restoreUser(context, originalUser);
}
},
child: Scaffold(
floatingActionButtonLocation: FloatingActionButtonLocation.centerFloat,
floatingActionButton: Stack(
alignment: Alignment.center,
children: [
Positioned.fill(
child: Padding(
padding: const EdgeInsets.only(bottom: 5),
child: Align(
alignment: Alignment.bottomCenter,
child: CommentNavigatorFab(
initialIndex: 0,
maxIndex: listController.isAttached ? listController.numberOfItems - 1 : 0,
scrollController: scrollController,
listController: listController,
child: BlocConsumer<PostBloc, PostState>(
listener: (context, state) {
if (state.status == PostStatus.success && state.postView != widget.initialPostViewMedia) {
if (!userChanged) {
widget.onPostUpdated?.call(state.postView!);
}
setState(() {});
}
},
builder: (context, state) {
if (state.status == PostStatus.initial) {
// This is required because listener does not get called on initial build
context.read<PostBloc>().add(GetPostEvent(postView: widget.initialPostViewMedia));
}

List<CommentNode> flattenedComments = CommentNode.flattenCommentTree(state.commentNodes);

return Scaffold(
floatingActionButtonLocation: FloatingActionButtonLocation.centerFloat,
floatingActionButton: Stack(
alignment: Alignment.center,
children: [
Positioned.fill(
child: Padding(
padding: const EdgeInsets.only(bottom: 5),
child: Align(
alignment: Alignment.bottomCenter,
child: CommentNavigatorFab(
initialIndex: 0,
maxIndex: listController.isAttached ? listController.numberOfItems - 1 : 0,
scrollController: scrollController,
listController: listController,
comments: flattenedComments,
),
),
),
),
),
],
),
],
),
body: SafeArea(
top: thunderState.hideTopBarOnScroll, // Don't apply to top of screen to allow for the status bar colour to extend
bottom: false,
child: BlocConsumer<PostBloc, PostState>(
listener: (context, state) {
if (state.status == PostStatus.success && state.postView != widget.initialPostViewMedia) {
if (!userChanged) {
widget.onPostUpdated?.call(state.postView!);
}
setState(() {});
}
},
builder: (context, state) {
if (state.status == PostStatus.initial) {
// This is required because listener does not get called on initial build
context.read<PostBloc>().add(GetPostEvent(postView: widget.initialPostViewMedia));
}

List<CommentNode> flattenedComments = CommentNode.flattenCommentTree(state.commentNodes);

return CustomScrollView(
body: SafeArea(
top: thunderState.hideTopBarOnScroll, // Don't apply to top of screen to allow for the status bar colour to extend
bottom: false,
child: CustomScrollView(
controller: scrollController,
slivers: [
PostPageAppBar(
Expand Down Expand Up @@ -204,10 +205,16 @@ class _PostPageState extends State<PostPage> {
)
else
SuperSliverList.builder(
itemCount: flattenedComments.length,
itemCount: flattenedComments.length + 1,
listController: listController,
itemBuilder: (BuildContext context, int index) {
CommentNode commentNode = flattenedComments[index];
if (index == 0) {
// This is a placeholder widget to allow the comment scroller to work properly for the first comment
// Note: CommentNavigatorFab indexes will be shifted by 1 to account for the placeholder widget
return const SizedBox(height: 1);
}

CommentNode commentNode = flattenedComments[index - 1];
CommentView commentView = commentNode.commentView!;

bool isCollapsed = collapsedComments.contains(commentView.comment.id);
Expand Down Expand Up @@ -261,10 +268,10 @@ class _PostPageState extends State<PostPage> {
),
SliverToBoxAdapter(child: SizedBox(height: bottomSpacerHeight)),
],
);
},
),
),
),
),
);
},
),
);
}
Expand Down
94 changes: 79 additions & 15 deletions lib/shared/comment_navigator_fab.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,13 +3,18 @@ import 'package:flutter/material.dart';
import 'package:super_sliver_list/super_sliver_list.dart';
import 'package:flutter_gen/gen_l10n/app_localizations.dart';

import 'package:thunder/comment/models/comment_node.dart';

class CommentNavigatorFab extends StatefulWidget {
/// The [ScrollController] for the scrollable list
final ScrollController scrollController;

/// The [ListController] for the scrollable list. This is used to navigate up and down
final ListController listController;

/// The list of comments. This is used to determine the current and next parent
final List<CommentNode>? comments;

/// The initial index
final int initialIndex;

Expand All @@ -22,6 +27,7 @@ class CommentNavigatorFab extends StatefulWidget {
this.maxIndex = 0,
required this.scrollController,
required this.listController,
this.comments,
});

@override
Expand Down Expand Up @@ -81,6 +87,7 @@ class _CommentNavigatorFabState extends State<CommentNavigatorFab> {
child: InkWell(
borderRadius: BorderRadius.circular(50),
onTap: navigateUp,
onLongPress: navigateToParent,
child: Icon(
Icons.keyboard_arrow_up_rounded,
semanticLabel: AppLocalizations.of(context)!.navigateUp,
Expand All @@ -98,6 +105,7 @@ class _CommentNavigatorFabState extends State<CommentNavigatorFab> {
child: InkWell(
borderRadius: BorderRadius.circular(50),
onTap: navigateDown,
onLongPress: navigateToNextParent,
child: Icon(
Icons.keyboard_arrow_down_rounded,
semanticLabel: AppLocalizations.of(context)!.navigateDown,
Expand All @@ -116,31 +124,60 @@ class _CommentNavigatorFabState extends State<CommentNavigatorFab> {
void navigateUp() {
var unobstructedVisibleRange = widget.listController.unobstructedVisibleRange;

int nextIndex = currentIndex - 1;
if (unobstructedVisibleRange?.$1 != null && unobstructedVisibleRange!.$1 != currentIndex) {
nextIndex = unobstructedVisibleRange.$1;
} else if (currentIndex != 0) {
nextIndex = unobstructedVisibleRange!.$1 - 1;
}
int previousIndex = (unobstructedVisibleRange?.$1 ?? 0) - 1;
if (currentIndex == previousIndex) previousIndex--;
if (previousIndex < 0) previousIndex = 0;

setState(() => currentIndex = previousIndex);

widget.listController.animateToItem(
index: nextIndex,
index: previousIndex,
scrollController: widget.scrollController,
alignment: 0,
duration: (estimatedDistance) => const Duration(milliseconds: 450),
curve: (estimatedDistance) => Curves.easeInOutCubicEmphasized,
);
}

void navigateToParent() {
var unobstructedVisibleRange = widget.listController.unobstructedVisibleRange;

int previousIndex = (unobstructedVisibleRange?.$1 ?? 0) - 1;
if (currentIndex == previousIndex) previousIndex--;
if (previousIndex < 0) previousIndex = 0;

int parentCommentIndex = 0;

setState(() {
currentIndex = nextIndex;
});
for (int i = previousIndex; i >= 0; i--) {
CommentNode currentComment = widget.comments![i - 1];

List<String> pathSegments = currentComment.commentView!.comment.path.split('.');
int depth = pathSegments.length > 2 ? pathSegments.length - 2 : 0;

if (depth == 0) {
parentCommentIndex = i;
break;
}
}

setState(() => currentIndex = parentCommentIndex);

widget.listController.animateToItem(
index: parentCommentIndex,
scrollController: widget.scrollController,
alignment: 0,
duration: (estimatedDistance) => const Duration(milliseconds: 450),
curve: (estimatedDistance) => Curves.easeInOutCubicEmphasized,
);
}

void navigateDown() {
var unobstructedVisibleRange = widget.listController.unobstructedVisibleRange;

int nextIndex = currentIndex + 1;
if (unobstructedVisibleRange?.$1 != null) nextIndex = unobstructedVisibleRange!.$1 + 1;
int nextIndex = (unobstructedVisibleRange?.$1 ?? 0) + 1;
if (currentIndex == nextIndex) nextIndex++;

setState(() => currentIndex = nextIndex);

widget.listController.animateToItem(
index: nextIndex,
Expand All @@ -149,9 +186,36 @@ class _CommentNavigatorFabState extends State<CommentNavigatorFab> {
duration: (estimatedDistance) => const Duration(milliseconds: 450),
curve: (estimatedDistance) => Curves.easeInOutCubicEmphasized,
);
}

void navigateToNextParent() {
var unobstructedVisibleRange = widget.listController.unobstructedVisibleRange;

int nextIndex = (unobstructedVisibleRange?.$1 ?? 0) + 1;
if (currentIndex == nextIndex) nextIndex++;

int parentCommentIndex = 0;

for (int i = nextIndex; i < widget.comments!.length; i++) {
CommentNode currentComment = widget.comments![i - 1];

List<String> pathSegments = currentComment.commentView!.comment.path.split('.');
int depth = pathSegments.length > 2 ? pathSegments.length - 2 : 0;

setState(() {
currentIndex = nextIndex;
});
if (depth == 0) {
parentCommentIndex = i;
break;
}
}

setState(() => currentIndex = parentCommentIndex);

widget.listController.animateToItem(
index: parentCommentIndex,
scrollController: widget.scrollController,
alignment: 0,
duration: (estimatedDistance) => const Duration(milliseconds: 450),
curve: (estimatedDistance) => Curves.easeInOutCubicEmphasized,
);
}
}

0 comments on commit b281caf

Please sign in to comment.