Merge a2847b5 into c3b55d3

no-chris · Sep 25, 2019 · aaa9cba · aaa9cba
2 parents c3b55d3 + a2847b5
commit aaa9cba
Show file tree

Hide file tree

Showing 3 changed files with 50 additions and 16 deletions.
diff --git a/docs-src/assets/index.html b/docs-src/assets/index.html
@@ -35,6 +35,7 @@
 
         <div class="output">
             <div data-output="normalized">-</div>
+            <div data-output="pianokeys"></div>
         </div>
 
         <div class="output-details hidden">

diff --git a/docs-src/src/index.js b/docs-src/src/index.js
@@ -1,11 +1,13 @@
 import { parseChord, chordRendererFactory } from '../../src/index';
+import {Pianokeys} from 'custom-piano-keys'
 
 const renderChordNormalized = chordRendererFactory();
 const renderChordShort = chordRendererFactory({ useShortNamings: true });
 
 const chordInput = document.getElementById('chordInput');
 
 const normalized = document.querySelector('[data-output="normalized"]');
+const pianokeysDiv = document.querySelector('[data-output="pianokeys"]');
 const normalizedShort = document.querySelector('[data-output="normalizedShort"]');
 const intervals = document.querySelector('[data-output="intervals"]');
 const json = document.querySelector('[data-output="json"]');
@@ -15,22 +17,52 @@ let input;
 let chord;
 let symbolNormalized;
 let symbolShort;
+let mappedNotes;
+let markedKeys;
+let pianokeys;
+let rootNotes = ['C','C#','D','D#','E','F','F#','G','G#','A','A#','B'];
+let rootNoteIndex;
+let octaveCount;
+
+function myReducer(total, item) {
+    return total + " " + item;
+}
 
 chordInput.addEventListener('keyup', () => {
-	input = chordInput.value;
-	chord = parseChord(input);
-
-	symbolNormalized = (!chord) ? '' : renderChordNormalized(chord);
-	symbolShort = (!chord) ? '' : renderChordShort(chord);
-
-	if (!chord) {
-		outputDetails.classList.add('hidden');
-	} else {
-		outputDetails.classList.remove('hidden');
-	}
-
-	normalized.textContent 		= (!chord) ? '-' : symbolNormalized;
-	normalizedShort.textContent = (symbolNormalized === symbolShort) ? '' : 'alternate: ' + symbolShort;
-	intervals.textContent 		= (!chord) ? '-' : chord.normalized.intervals.join('-');
-	json.textContent 			= (!chord) ? '-' : JSON.stringify(chord, null, 4);
+
+  if(pianokeysDiv.firstChild) {
+    pianokeysDiv.firstChild.remove()
+  }
+
+  input = chordInput.value;
+  chord = parseChord(input);
+  if(chord) {
+    rootNoteIndex = rootNotes.indexOf(chord.normalized.rootNote)
+    if(rootNoteIndex !== -1) {
+      mappedNotes = chord.normalized.semitones.map(x => x + 1 + rootNoteIndex)
+      octaveCount = 1
+      if(mappedNotes.some(x => x > 12)) {
+        octaveCount = 2
+      }
+      markedKeys = mappedNotes.reduce(myReducer,"").trim()
+      pianokeys = document.createElement("custom-piano-keys")
+      pianokeys.setAttribute("marked-keys", markedKeys)
+      pianokeys.setAttribute("oct-count", octaveCount)
+      pianokeysDiv.appendChild(pianokeys)
+    }
+  }
+
+  symbolNormalized = (!chord) ? '' : renderChordNormalized(chord);
+  symbolShort = (!chord) ? '' : renderChordShort(chord);
+
+  if (!chord) {
+    outputDetails.classList.add('hidden');
+  } else {
+    outputDetails.classList.remove('hidden');
+  }
+
+  normalized.textContent 		= (!chord) ? '-' : symbolNormalized;
+  normalizedShort.textContent = (symbolNormalized === symbolShort) ? '' : 'alternate: ' + symbolShort;
+  intervals.textContent 		= (!chord) ? '-' : chord.normalized.intervals.join('-');
+  json.textContent 			= (!chord) ? '-' : JSON.stringify(chord, null, 4);
 });
diff --git a/package.json b/package.json
@@ -41,6 +41,7 @@
   },
   "dependencies": {
     "core-js": "^3.2.1",
+    "custom-piano-keys": "0.0.10",
     "lodash": "^4.17.15"
   },
   "scripts": {