Merge pull request #1569 from hackmdio/feature/fretboard-improvement

Author: jackycute

public/docs/features.md

@@ -369,13 +369,26 @@ stop
 }
 ```
 
+### Fretboard
+
+```fretboard {title="horizontal, 6 frets, with nut", type="h6"}
+-oO-*-
+--o-o-
+-o-oo-
+-o-oO-
+-oo-o-
+-*O-o-
+  3
+```
+
 > More information about **sequence diagrams** syntax [here](http://bramp.github.io/js-sequence-diagrams/).
 > More information about **flow charts** syntax [here](http://adrai.github.io/flowchart.js/).
 > More information about **graphviz** syntax [here](http://www.tonyballantyne.com/graphs.html)
 > More information about **mermaid** syntax [here](http://mermaid-js.github.io/mermaid)
 > More information about **abc** syntax [here](http://abcnotation.com/learn)
 > More information about **plantuml** syntax [here](http://plantuml.com/index)
 > More information about **vega** syntax [here](https://vega.github.io/vega-lite/docs)
+> More information about **fretboard** syntax [here](https://hackmd.io/@docs/fretboard-syntax)
 
 Alert Area
 ---

public/js/extra.js

@@ -502,6 +502,7 @@ export function finishView (view) {
     try {
       const $ele = $(value).parent().parent()
       $ele.html(renderFretBoard($value.text(), params))
+      $ele.addClass('fretboard')
     } catch (err) {
       $value.unwrap()
       $value.parent().append(`<div class="alert alert-warning">${escapeHTML(err)}</div>`)

public/js/lib/renderer/fretboard/css/i.css

@@ -1,8 +1,8 @@
 /* -- GENERAL TYPOGRAPHY -- */
 .fretTitle {
   color: #555;
+  text-align: center;
   font-family: "Helvetica Neue", sans-serif;
-  background: #eee;
   line-height: 1.4;
   font-size: 1.6em;
   margin: 10px 0 10px 0;
@@ -20,14 +20,19 @@ section {
 }
 
 /* Fretboard Container/Wrapper */
+
+.fretContainer, .fretContainer_h {
+  outline: solid 1px #eeee;
+  margin: 0 auto;
+  padding: 15px 0;
+}
+
 .fretContainer {
   width: 320px;
-  margin: 0 auto;
 }
 
 .fretContainer_h {
   max-width: 400px;
-  margin: 0 auto;
 }
 
 @media all and (max-width: 400px) {
@@ -59,7 +64,6 @@ section {
   position: absolute;
   top: 0;
   left: 0;
-  z-index: 10;
 }
 
 .svg_wrapper.v4 {
@@ -181,3 +185,7 @@ section {
 }
 
 /*# sourceMappingURL=i.css.map */
+
+.markdown-body pre.fretboard {
+  background-color: transparent;
+}

public/js/lib/renderer/fretboard/fretboard.js

@@ -32,26 +32,33 @@ const switchListH = {
   '\n': `<div class='cell empty'>${dotEmptyH}</div><div class='cell empty'>${dotEmptyH}</div>`
 }
 
-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 = $(`<div class="${containerClass}"></div>`)
 
-  $(fretboardHTML).append($(`<div class="fretTitle">${fretTitle}</div>`))
+  if (fretTitle) {
+    $(fretboardHTML).append(`<div class="fretTitle">${fretTitle}</div>`)
+  }
 
   // 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 = $(`<div class="svg_wrapper ${fretbClass} ${nut}"></div>`)
   const fretbBg = require(`./svg/fretb_${fretbOrientation}_${fretbLen}.svg`)
+
   $(svgHTML).append($(fretbBg))
 
   // create cells HTML
   const cellsHTML = $('<div class="cells"></div>')
-  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($(`<div class='cell empty'>${numSvg}</div>`))
-    } else if (switchList[char] !== undefined) {
-      cellsHTML.append($(switchList[char]))
+      cellsHTML.append(`<div class='cell empty'>${numSvg}</div>`)
+    } 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
 }