Toggle fretboard on modes that need expansion

Author: Salma Alam-Naylor

apps/fretonator-web/src/app/common/fretonator/fretboard/fretboard.component.ts

@@ -1,4 +1,4 @@
-import { Component, Input, OnInit } from '@angular/core';
+import { Component, EventEmitter, Input, OnChanges, OnInit, Output } from '@angular/core';
 import { FretMap, Mode } from '../../../util/types';
 import { NotePlaybackService } from '../../playback/note-playback.service';
 
@@ -17,7 +17,8 @@ const FretReturner = {
   templateUrl: './fretboard.component.html',
   styleUrls: ['./fretboard.component.scss']
 })
-export class FretboardComponent implements OnInit {
+export class FretboardComponent implements OnChanges {
+  @Output() loadExpandedChange = new EventEmitter<Boolean>()
   @Input() fretMap: FretMap;
   @Input() mode: Mode;
   @Input() stringNamesAreCaseSensitive = false;
@@ -28,7 +29,7 @@ export class FretboardComponent implements OnInit {
   constructor(public playbackService: NotePlaybackService) {
   }
 
-  ngOnInit(): void {
+  ngOnChanges(): void {
     if (this.loadExpanded) {
       this.setFretMode(FretMode.twentyFour);
     }
@@ -41,6 +42,8 @@ export class FretboardComponent implements OnInit {
   setFretMode(fretMode: FretMode) {
     this.fretMode = fretMode;
     this.frets = FretReturner[fretMode];
+
+    this.loadExpandedChange.emit(fretMode === FretMode.twentyFour);
   }
 
 }

apps/fretonator-web/src/app/pages/learn/patterns-index/patterns-index.component.html

@@ -20,4 +20,4 @@ <h1 class="patterns__subtitle">The 3 note per string method</h1>
 <app-fretboard
   [fretMap]="selectedFretMap"
   [stringNamesAreCaseSensitive]="true"
-  [loadExpanded]="true"></app-fretboard>
+  [(loadExpanded)]="shouldExpand"></app-fretboard>

apps/fretonator-web/src/app/pages/learn/patterns-index/patterns-index.component.ts

@@ -8,10 +8,10 @@ import { Mode } from '../../../util/types';
   styleUrls: ['./patterns-index.component.scss']
 })
 export class PatternsIndexComponent implements OnInit {
-  @Output() expandFretboard = new EventEmitter<MouseEvent>();
   modeSelectors = PatternModeSelectors;
   selectedMode = Mode.ionian;
   selectedFretMap = PatternFretMaps.ionian;
+  shouldExpand = true;
   modesRequiringExpansion = [
     Mode.mixolydian,
     Mode.aolian,
@@ -29,14 +29,7 @@ export class PatternsIndexComponent implements OnInit {
     this.selectedFretMap = PatternFretMaps[mode];
 
     if (this.modesRequiringExpansion.indexOf(mode) > -1) {
-      this.expandFretboardHere();
+      this.shouldExpand = true;
     }
   }
-
-  expandFretboardHere() {
-    //JIM I JUST CANNOT WORK OUT WHERE TO PUT THIS DIRECTIVE
-    // IS IT ON THE INSTANCE OF FRETBOARD ON PATTERNS-INDEX?
-    // IS IN IN THE FRETBOARD HTML?
-    this.expandFretboard.emit();
-  }
 }