fix(posts): animate to deselected post on fab click

src/app/core/core.module.ts

@@ -5,10 +5,11 @@ import { NgxModelModule } from 'ngx-model';
 
 import { BackendService } from './backend/backend.service';
 import { TimeService } from './util/time.service';
+import { ScrollService } from './util/scroll.service';
 
 @NgModule({
  imports: [CommonModule, HttpClientModule, NgxModelModule],
  declarations: [],
- providers: [BackendService, TimeService]
+ providers: [BackendService, TimeService, ScrollService]
 })
 export class CoreModule {}

src/app/core/index.ts

@@ -2,3 +2,4 @@ export * from './core.module';
 export * from './backend/backend.service';
 export * from './animations/list.animations';
 export * from './util/time.service';
+export * from './util/scroll.service';

src/app/core/util/scroll.service.spec.ts

@@ -0,0 +1,18 @@
+import { TestBed, inject } from '@angular/core/testing';
+
+import { ScrollService } from './scroll.service';
+
+describe('ScrollService', () => {
+ beforeEach(() => {
+ TestBed.configureTestingModule({
+ providers: [ScrollService]
+ });
+ });
+
+ it(
+ 'should be created',
+ inject([ScrollService], (service: ScrollService) => {
+ expect(service).toBeTruthy();
+ })
+ );
+});

src/app/core/util/scroll.service.ts

@@ -0,0 +1,19 @@
+import { ElementRef, Injectable } from '@angular/core';
+
+const TOP_APP_TOOLBAR_OFFSET = 70;
+
+@Injectable()
+export class ScrollService {
+ constructor() {}
+
+ scrollToElementIfOffscreen(element: ElementRef) {
+ const { top } = element.nativeElement.getBoundingClientRect();
+ if (top < TOP_APP_TOOLBAR_OFFSET || top > window.innerHeight) {
+ element.nativeElement.scrollIntoView({
+ behavior: 'smooth',
+ block: 'center',
+ inline: 'center'
+ });
+ }
+ }
+}

src/app/posts/post-list/post-list.component.ts

@@ -1,11 +1,12 @@
-import { Component, OnDestroy, OnInit } from '@angular/core';
+import { Component, OnDestroy, OnInit, ViewChildren } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
 import { Subject } from 'rxjs/Subject';
 import { takeUntil } from 'rxjs/operators';
 
 import { listTransitions } from '@app/core';
 
-import { Post, Posts, PostsService } from '../posts.service';
+import { Posts, PostsService } from '../posts.service';
+import { PostComponent } from '@app/posts/post/post.component';
 
 @Component({
  selector: 'nmhne-post-list',
@@ -17,9 +18,11 @@ export class PostListComponent implements OnInit, OnDestroy {
  private unsubscribe$: Subject<void> = new Subject<void>();
  posts: Posts;
 
+ @ViewChildren(PostComponent) postComponents;
+
  constructor(
- public postsService: PostsService,
- private route: ActivatedRoute
+ private route: ActivatedRoute,
+ public postsService: PostsService
  ) {}
 
  ngOnInit() {
@@ -39,6 +42,11 @@ export class PostListComponent implements OnInit, OnDestroy {
  }
 
  onCloseSelectedCommentsClick() {
- this.postsService.unselectPost();
+ this.postComponents.some(postComponent => {
+ if (postComponent.selected) {
+ postComponent.unselect();
+ return true;
+ }
+ });
  }
 }

src/app/posts/post/post.component.html

@@ -15,11 +15,11 @@ <h2>
  <mat-icon>link</mat-icon>
  </a>
  <button mat-button color="primary" *ngIf="post.descendants > 0 && !selected"
- (click)="onCommentsClick()">
+ (click)="select()">
  <mat-icon>comment</mat-icon> <span>{{post.descendants}}</span>
  </button>
  <button mat-raised-button color="primary" *ngIf="post.descendants > 0 && selected"
- (click)="onActiveCommentsClick()">
+ (click)="unselect()">
  <mat-icon>comment</mat-icon> <span>{{post.descendants}}</span>
  </button>
 </mat-card>

src/app/posts/post/post.component.ts

@@ -7,7 +7,7 @@ import {
 } from '@angular/core';
 import { DOWN_ARROW, ESCAPE, UP_ARROW } from '@angular/cdk/keycodes';
 
-import { listTransitions } from '@app/core';
+import { listTransitions, ScrollService } from '@app/core';
 
 import { Post, PostsService } from '../posts.service';
 
@@ -27,10 +27,10 @@ export class PostComponent implements OnInit {
  @HostListener('window:keyup', ['$event'])
  keyEvent(event: KeyboardEvent) {
  if (this.selected && event.keyCode === ESCAPE) {
+ event.stopImmediatePropagation();
  this.executeAfterUnselectingPreviousPost();
  }
  if (this.selected && event.keyCode === DOWN_ARROW) {
- event.stopImmediatePropagation();
  event.stopImmediatePropagation();
  this.executeAfterUnselectingPreviousPost(
  this.postsService.selectNextPost.bind(this.postsService, this.post)
@@ -48,31 +48,28 @@ export class PostComponent implements OnInit {
  }
  }
 
- constructor(private postsService: PostsService, private el: ElementRef) {}
+ constructor(
+ private postsService: PostsService,
+ private scrollService: ScrollService,
+ private el: ElementRef
+ ) {}
 
  ngOnInit() {}
 
- onCommentsClick() {
+ select() {
  this.executeAfterUnselectingPreviousPost(
  this.postsService.selectPost.bind(this.postsService, this.post)
  );
  }
 
- onActiveCommentsClick() {
+ unselect() {
  this.executeAfterUnselectingPreviousPost();
  }
 
- executeAfterUnselectingPreviousPost(callback?: any) {
+ private executeAfterUnselectingPreviousPost(callback?: any) {
  this.postsService.unselectPost();
  setTimeout(() => {
- const { top } = this.el.nativeElement.getBoundingClientRect();
- if (top < 70 || top > window.innerHeight) {
- this.el.nativeElement.scrollIntoView({
- behavior: 'smooth',
- block: 'center',
- inline: 'center'
- });
- }
+ this.scrollService.scrollToElementIfOffscreen(this.el);
  if (callback) {
  callback();
  }