diff --git a/src/index.hbs b/src/index.hbs index b2a12a68..f1900595 100644 --- a/src/index.hbs +++ b/src/index.hbs @@ -107,6 +107,8 @@

Import chord sheet

+ +
diff --git a/src/index.js b/src/index.js index 18ac7ddb..01b27c46 100644 --- a/src/index.js +++ b/src/index.js @@ -2,8 +2,8 @@ import chordsheetjs from 'chordsheetjs'; import './sass/main.sass'; -import { convertChordSheetToChordPro } from './js/chord_sheet_transformations'; import { getQueryParams, setQueryParams } from './js/location_hash'; +import { convertImportedChordSheetToChordPro } from './js/import_format'; import ChordSheetEditor from './js/chord_sheet_editor'; import ChordSheetViewer from './js/chord_sheet_viewer'; import ImportDialog from './js/import_dialog'; @@ -53,8 +53,8 @@ class App { this.render(); }; - this.importDialog.onImportConfirmed = (chordSheet) => { - const chordProSheet = convertChordSheetToChordPro(chordSheet); + this.importDialog.onImportConfirmed = (chordSheet, format) => { + const chordProSheet = convertImportedChordSheetToChordPro(chordSheet, format); this.chordSheetEditor.setValue(chordProSheet); this.render(); }; diff --git a/src/js/chord_sheet_transformations.js b/src/js/chord_sheet_transformations.js index 45b4916a..bccb9095 100644 --- a/src/js/chord_sheet_transformations.js +++ b/src/js/chord_sheet_transformations.js @@ -1,7 +1,7 @@ import { ChordProFormatter, ChordProParser, - ChordSheetParser, + ChordsOverWordsParser, } from 'chordsheetjs'; const transformChordSheet = (chordSheet, processor) => { @@ -27,7 +27,7 @@ export const switchToFlat = (chordSheet) => ( ); export const convertChordSheetToChordPro = (chordSheet) => { - const parser = new ChordSheetParser({ preserveWhitespace: false }); + const parser = new ChordsOverWordsParser({ preserveWhitespace: false }); const formatter = new ChordProFormatter(); const song = parser.parse(chordSheet); return formatter.format(song); diff --git a/src/js/import_dialog.js b/src/js/import_dialog.js index 812e2d16..ef79ab06 100644 --- a/src/js/import_dialog.js +++ b/src/js/import_dialog.js @@ -1,20 +1,34 @@ import Component from './component'; +import { getImportFormatOptions } from './import_format'; class ImportDialog extends Component { onImportConfirmed = () => {}; setup() { + this.populateFormatOptions(); + this.onClick('confirmButton', () => { const editor = this.element('editor'); + const format = this.element('format').value; const chordSheet = editor.value; editor.value = ''; this.close(); - this.onImportConfirmed(chordSheet); + this.onImportConfirmed(chordSheet, format); }); this.onClick('closeButton', () => this.close()); } + populateFormatOptions() { + const select = this.element('format'); + + select.innerHTML = getImportFormatOptions() + .map(({ label, value }) => ``) + .join(''); + + select.value = 'ultimate-guitar'; + } + setOpen(open) { this.container.classList.toggle('ImportDialog--visible', open); } diff --git a/src/js/import_format.js b/src/js/import_format.js new file mode 100644 index 00000000..147a3e6c --- /dev/null +++ b/src/js/import_format.js @@ -0,0 +1,32 @@ +import { + ChordProFormatter, + ChordProParser, + ChordsOverWordsParser, + UltimateGuitarParser, +} from 'chordsheetjs'; + +const PARSER_BY_FORMAT = { + chordpro: ChordProParser, + 'chords-over-words': ChordsOverWordsParser, + 'ultimate-guitar': UltimateGuitarParser, +}; + +export const getImportFormatOptions = () => [ + { label: 'Ultimate Guitar', value: 'ultimate-guitar' }, + { label: 'Chords over Words', value: 'chords-over-words' }, +]; + +export const getParserForFormat = (format = 'ultimate-guitar') => ( + PARSER_BY_FORMAT[format] || PARSER_BY_FORMAT['ultimate-guitar'] +); + +export const convertImportedChordSheetToChordPro = (chordSheet, format = 'ultimate-guitar') => { + const Parser = getParserForFormat(format); + + const parser = Parser === ChordsOverWordsParser + ? new Parser({ preserveWhitespace: false }) + : new Parser(); + + const song = parser.parse(chordSheet); + return new ChordProFormatter().format(song); +}; diff --git a/src/js/import_format.test.js b/src/js/import_format.test.js new file mode 100644 index 00000000..aaaaffe3 --- /dev/null +++ b/src/js/import_format.test.js @@ -0,0 +1,18 @@ +import assert from 'node:assert/strict'; +import test from 'node:test'; +import chordsheetjs from 'chordsheetjs'; + +import { getImportFormatOptions, getParserForFormat } from './import_format.js'; + +test('import format options include Ultimate Guitar and Chords over Words', () => { + const names = getImportFormatOptions().map((option) => option.value); + + assert.ok(names.includes('ultimate-guitar')); + assert.ok(names.includes('chords-over-words')); +}); + +test('Ultimate Guitar format uses the expected parser class', () => { + const parser = getParserForFormat('ultimate-guitar'); + + assert.equal(parser, chordsheetjs.UltimateGuitarParser); +});