diff --git a/public/js/lib/renderer/fretboard/fretboard.js b/public/js/lib/renderer/fretboard/fretboard.js
index fdd97fd6..48d1cb78 100644
--- a/public/js/lib/renderer/fretboard/fretboard.js
+++ b/public/js/lib/renderer/fretboard/fretboard.js
@@ -32,26 +32,33 @@ const switchListH = {
'\n': `
${dotEmptyH}
${dotEmptyH}
`
}
-export const renderFretBoard = (content, { title: fretTitle, type }) => {
- const fretType = type.split(' ')
- const containerClass = fretType && fretType[0].startsWith('h') ? 'fretContainer_h' : 'fretContainer'
+export const renderFretBoard = (content, { title: fretTitle = '', type = '' }) => {
+ const isVertical = !(typeof type[0] === 'string' && type[0].startsWith('h'))
+
+ const containerClass = isVertical ? 'fretContainer' : 'fretContainer_h'
+
+ const [fretType, nutOption] = type.split(' ')
const fretboardHTML = $(``)
- $(fretboardHTML).append($(`${fretTitle}
`))
+ if (fretTitle) {
+ $(fretboardHTML).append(`${fretTitle}
`)
+ }
// create fretboard background HTML
- const fretbOrientation = fretType && fretType[0].startsWith('v') ? 'vert' : 'horiz'
- const fretbLen = fretType && fretType[0].substring(1)
- const fretbClass = fretType && fretType[0][0] + ' ' + fretType[0]
- const nut = (fretType[1] && fretType[1] === 'noNut') ? 'noNut' : ''
+ const fretbOrientation = isVertical ? 'vert' : 'horiz'
+ const fretbLen = fretType && fretType.substring(1)
+ const fretbClass = fretType && fretType[0] + ' ' + fretType
+ const nut = nutOption === 'noNut' ? 'noNut' : ''
+
const svgHTML = $(``)
const fretbBg = require(`./svg/fretb_${fretbOrientation}_${fretbLen}.svg`)
+
$(svgHTML).append($(fretbBg))
// create cells HTML
const cellsHTML = $('')
- let switchList = ''
- if (fretbOrientation && fretbOrientation === 'vert') {
+ let switchList = {}
+ if (isVertical) {
switchList = switchListV
} else {
// calculate position
@@ -66,16 +73,16 @@ export const renderFretBoard = (content, { title: fretTitle, type }) => {
const numArray = [...Array(10).keys()].slice(1)
contentCell && contentCell.forEach(char => {
if (numArray.toString().indexOf(char) !== -1) {
- const numType = fretType && fretType[0].startsWith('h') ? '_h' : ''
+ const numType = isVertical ? '' : '_h'
const numSvg = require(`./svg/number${char}${numType}.svg`)
- cellsHTML.append($(`${numSvg}
`))
- } else if (switchList[char] !== undefined) {
- cellsHTML.append($(switchList[char]))
+ cellsHTML.append(`${numSvg}
`)
+ } else if (typeof switchList[char] !== 'undefined') {
+ cellsHTML.append(switchList[char])
}
})
- $(svgHTML).append($(cellsHTML))
- $(fretboardHTML).append($(svgHTML))
+ $(svgHTML).append(cellsHTML)
+ $(fretboardHTML).append(svgHTML)
return fretboardHTML[0].outerHTML
}