WIP for expandFretboard event emit

Author: Salma Alam-Naylor

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

@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, EventEmitter, OnInit, Output } from '@angular/core';
 import { PatternFretMaps, PatternModeSelectors } from '../../../util/constants';
 import { Mode } from '../../../util/types';
 
@@ -8,9 +8,15 @@ 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;
+  modesRequiringExpansion = [
+    Mode.mixolydian,
+    Mode.aolian,
+    Mode.locrian
+  ];
 
   constructor() {
   }
@@ -21,6 +27,16 @@ export class PatternsIndexComponent implements OnInit {
   setPattern(mode: Mode) {
     this.selectedMode = mode;
     this.selectedFretMap = PatternFretMaps[mode];
+
+    if (this.modesRequiringExpansion.indexOf(mode) > -1) {
+      this.expandFretboardHere();
+    }
   }
 
+  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();
+  }
 }