Scroll to top of mode selector when clicking on a similar mode chip

Salma Alam-Naylor · Salma Alam-Naylor · commit be067a3a976c · 2020-06-17T20:45:18.000+01:00
diff --git a/apps/fretonator-web/src/app/common/chips/chip/chip.component.html b/apps/fretonator-web/src/app/common/chips/chip/chip.component.html
@@ -1,6 +1,7 @@
 <a
   [routerLink]="['/', note, noteExtender, mode]"
   [attr.aria-label]="note | createChipLinkTitle: noteExtender: mode"
+  (click)="onClick($event)"
   class="chip"
   [class.chip--active]="selected"
   [class.chip--round]="rounded"
diff --git a/apps/fretonator-web/src/app/common/chips/chip/chip.component.ts b/apps/fretonator-web/src/app/common/chips/chip/chip.component.ts
@@ -1,4 +1,4 @@
-import { Component, DoCheck, Input } from '@angular/core';
+import { Component, DoCheck, EventEmitter, Input, Output } from '@angular/core';
 import { Mode } from '../../../util/types';
 import { ActivatedRoute } from '@angular/router';
 
@@ -19,6 +19,7 @@ export class ChipComponent implements DoCheck {
   @Input() selectedColor: SelectedColor = SelectedColor.default;
   @Input() rounded = false;
   @Input() isBaseNote = false;
+  @Output() chipClick = new EventEmitter<MouseEvent>();
   SelectedColor = SelectedColor;
   selected = false;
 
@@ -48,4 +49,8 @@ export class ChipComponent implements DoCheck {
 
     return true;
   }
+
+  onClick(event: MouseEvent) {
+    this.chipClick.emit(event);
+  }
 }
diff --git a/apps/fretonator-web/src/app/common/fretonator/fretonator.component.html b/apps/fretonator-web/src/app/common/fretonator/fretonator.component.html
@@ -89,7 +89,6 @@ <h4 class="fretonator__playCta">
   <app-similar-modes [modeDisplayString]="modeDisplayString"
                      [similarModes]="modeMap | getSimilarModes : mode"
                      [isTheoretical]="modeMap | isTheoreticalScale">
-
   </app-similar-modes>
 
 </div>
diff --git a/apps/fretonator-web/src/app/common/fretonator/fretonator.component.ts b/apps/fretonator-web/src/app/common/fretonator/fretonator.component.ts
@@ -33,7 +33,6 @@ export class FretonatorComponent {
   fretMode = FretMode.twelve;
   frets = FretReturner[this.fretMode];
 
-
   get fretModes() {
     return FretMode;
   }
diff --git a/apps/fretonator-web/src/app/common/fretonator/similar-modes/similar-modes.component.html b/apps/fretonator-web/src/app/common/fretonator/similar-modes/similar-modes.component.html
@@ -9,12 +9,13 @@ <h4 class="similarModes__title">Did you know?</h4>
                 [note]="mode.note"
                 [noteExtender]="mode.noteExtender"
                 [mode]="mode.mode"
-                selectedColor="default">{{mode.noteDisplayName}} {{mode.mode | titlecase}}</app-chip>
+                (chipClick)="onModeChange()">{{mode.noteDisplayName}} {{mode.mode | titlecase}}</app-chip>
     </app-chips>
   </div>
 
   <p class="similarModes__copy">There are only 7 patterns you need to learn. Once you've memorised those patterns,
-    you can play any of the 7 standard modes <em>(Ionian, Dorian, Phrygian, Lydian, Mixolydian, Aolian, Locrian</em>) from
+    you can play any of the 7 standard modes <em>(Ionian, Dorian, Phrygian, Lydian, Mixolydian, Aolian, Locrian</em>)
+    from
     any starting note, anywhere on the fretboard.</p>
   <p class="similarModes__copy">These patterns always appear in the same order, one after the other.</p>
 </div>
diff --git a/apps/fretonator-web/src/app/common/fretonator/similar-modes/similar-modes.component.ts b/apps/fretonator-web/src/app/common/fretonator/similar-modes/similar-modes.component.ts
@@ -1,5 +1,6 @@
-import { Component, Input } from '@angular/core';
+import { Component, ElementRef, Input } from '@angular/core';
 import { SimilarModes } from '../../../util/types';
+import { GlobalService } from '../../../global.service';
 
 @Component({
   selector: 'app-similar-modes',
@@ -10,4 +11,10 @@ export class SimilarModesComponent {
   @Input() similarModes: SimilarModes;
   @Input() modeDisplayString: string;
   @Input() isTheoretical: boolean;
+
+  constructor(private globalService: GlobalService){}
+
+  onModeChange() {
+    this.globalService.getScrollTarget().scrollIntoView();
+  }
 }
diff --git a/apps/fretonator-web/src/app/global.service.spec.ts b/apps/fretonator-web/src/app/global.service.spec.ts
@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { GlobalService } from './global.service';
+
+describe('GlobalService', () => {
+  let service: GlobalService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(GlobalService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});
diff --git a/apps/fretonator-web/src/app/global.service.ts b/apps/fretonator-web/src/app/global.service.ts
@@ -0,0 +1,17 @@
+import { Injectable } from '@angular/core';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class GlobalService {
+
+  private scrollTarget: HTMLElement;
+
+  getScrollTarget(): HTMLElement {
+    return this.scrollTarget;
+  }
+
+  setScrollTarget(el: HTMLElement) {
+    this.scrollTarget = el;
+  }
+}
diff --git a/apps/fretonator-web/src/app/pages/home/home-index/__snapshots__/home-index.component.spec.ts.snap b/apps/fretonator-web/src/app/pages/home/home-index/__snapshots__/home-index.component.spec.ts.snap
@@ -1417,9 +1417,7 @@ exports[`HomeIndexComponent should create 1`] = `
                       class="chips"
                     >
                       
-                      <app-chip
-                        selectedcolor="default"
-                      >
+                      <app-chip>
                         <a
                           aria-label="D Dorian"
                           class="chip"
@@ -1428,9 +1426,7 @@ exports[`HomeIndexComponent should create 1`] = `
                           D Dorian
                         </a>
                       </app-chip>
-                      <app-chip
-                        selectedcolor="default"
-                      >
+                      <app-chip>
                         <a
                           aria-label="E Phrygian"
                           class="chip"
@@ -1439,9 +1435,7 @@ exports[`HomeIndexComponent should create 1`] = `
                           E Phrygian
                         </a>
                       </app-chip>
-                      <app-chip
-                        selectedcolor="default"
-                      >
+                      <app-chip>
                         <a
                           aria-label="F Lydian"
                           class="chip"
@@ -1450,9 +1444,7 @@ exports[`HomeIndexComponent should create 1`] = `
                           F Lydian
                         </a>
                       </app-chip>
-                      <app-chip
-                        selectedcolor="default"
-                      >
+                      <app-chip>
                         <a
                           aria-label="G Mixolydian"
                           class="chip"
@@ -1461,9 +1453,7 @@ exports[`HomeIndexComponent should create 1`] = `
                           G Mixolydian
                         </a>
                       </app-chip>
-                      <app-chip
-                        selectedcolor="default"
-                      >
+                      <app-chip>
                         <a
                           aria-label="A Aolian (Minor)"
                           class="chip"
@@ -1472,9 +1462,7 @@ exports[`HomeIndexComponent should create 1`] = `
                           A Aolian
                         </a>
                       </app-chip>
-                      <app-chip
-                        selectedcolor="default"
-                      >
+                      <app-chip>
                         <a
                           aria-label="B Locrian"
                           class="chip"
diff --git a/apps/fretonator-web/src/app/pages/home/home-index/home-index.component.html b/apps/fretonator-web/src/app/pages/home/home-index/home-index.component.html
@@ -29,7 +29,7 @@ <h1 class="hero__title">
 
   <div class="modeSelector__container">
     <div class="modeSelector__chipsContainer">
-      <h2 class="modeSelector__label">Starting note</h2>
+      <h2 class="modeSelector__label" #scrollTarget>Starting note</h2>
 
       <app-chips>
         <app-chip *ngFor="let thisNote of octave"
diff --git a/apps/fretonator-web/src/app/pages/home/home-index/home-index.component.ts b/apps/fretonator-web/src/app/pages/home/home-index/home-index.component.ts
@@ -1,19 +1,21 @@
-import { Component, OnInit } from '@angular/core';
+import { AfterViewInit, Component, ElementRef, OnInit, ViewChild } from '@angular/core';
 import { Mode, NoteExtenderString, NoteExtenderSymbol, NoteSymbol } from '../../../util/types';
 import { ModeSelectorObjects, Octave } from '../../../util/constants';
 import { Meta, Title } from '@angular/platform-browser';
 import { AbstractDataService } from '../../../common/abstract-data/abstract-data.service';
 import { ActivatedRoute } from '@angular/router';
 import { FretMapService } from '../../../common/fret-map/fret-map.service';
 import { MetaService } from '../../../common/meta/meta.service';
+import { GlobalService } from '../../../global.service';
 
 @Component({
   selector: 'app-home-index',
   templateUrl: './home-index.component.html',
   styleUrls: ['./home-index.component.scss']
 })
 
-export class HomeIndexComponent implements OnInit {
+export class HomeIndexComponent implements OnInit, AfterViewInit {
+  @ViewChild('scrollTarget') scrollTarget: ElementRef<HTMLElement>;
   note: NoteSymbol = NoteSymbol.c;
   noteExtender: NoteExtenderSymbol;
   noteExtenderString: NoteExtenderString;
@@ -28,7 +30,8 @@ export class HomeIndexComponent implements OnInit {
     private localStorage: AbstractDataService,
     private activatedRoute: ActivatedRoute,
     private fretMapService: FretMapService,
-    private metaService: MetaService
+    private metaService: MetaService,
+    private globalService: GlobalService
   ) {
   }
 
@@ -50,6 +53,10 @@ export class HomeIndexComponent implements OnInit {
     }
   }
 
+  ngAfterViewInit(): void {
+    this.globalService.setScrollTarget(this.scrollTarget.nativeElement);
+  }
+
   onRouteChange() {
     const routeData = this.activatedRoute.snapshot.data.selected;
 
@@ -89,7 +96,7 @@ export class HomeIndexComponent implements OnInit {
       name: 'description',
       content: this.metaService.generateHomePageMetaDescription(this.note, this.noteExtenderString, this.mode)
     });
-    
+
     this.meta.updateTag({
       name: 'twitter:description',
       content: this.metaService.generateHomePageMetaDescription(this.note, this.noteExtenderString, this.mode)

Original file line number	Diff line number	Diff line change
`@@ -33,7 +33,6 @@ export class FretonatorComponent {`
`33`	`33`	`fretMode = FretMode.twelve;`
`34`	`34`	`frets = FretReturner[this.fretMode];`
`35`	`35`
`36`		`-`
`37`	`36`	`get fretModes() {`
`38`	`37`	`return FretMode;`
`39`	`38`	`}`