Merge pull request #1471 from birdca/feature/fretboard_finishView

Feature/fretboard finish view

Author: Yukaii

public/js/extra.js

@@ -15,7 +15,12 @@ import { stripTags } from '../../utils/string'
 
 import getUIElements from './lib/editor/ui-elements'
 import { emojifyImageDir } from './lib/editor/constants'
-import { parseFenceCodeParams, serializeParamToAttribute } from './lib/markdown/utils'
+import {
+  parseFenceCodeParams,
+  serializeParamToAttribute,
+  deserializeParamAttributeFromElement
+} from './lib/markdown/utils'
+import { renderFretBoard } from './lib/renderer/fretboard/fretboard'
 
 import markdownit from 'markdown-it'
 import markdownitContainer from 'markdown-it-container'
@@ -483,6 +488,21 @@ export function finishView (view) {
       console.warn(err)
     }
   })
+  // fretboard
+  const fretboard = view.find('div.fretboard_instance.raw').removeClass('raw')
+  fretboard.each((key, value) => {
+    const params = deserializeParamAttributeFromElement(value)
+    const $value = $(value)
+
+    try {
+      const $ele = $(value).parent().parent()
+      $ele.html(renderFretBoard($value.text(), params))
+    } catch (err) {
+      $value.unwrap()
+      $value.parent().append(`<div class="alert alert-warning">${escapeHTML(err)}</div>`)
+      console.warn(err)
+    }
+  })
 
   // image href new window(emoji not included)
   const images = view.find('img.raw[src]').removeClass('raw')
@@ -1036,7 +1056,8 @@ const fenceCodeAlias = {
   mermaid: 'mermaid',
   abc: 'abc',
   vega: 'vega',
-  geo: 'geo'
+  geo: 'geo',
+  fretboard: 'fretboard_instance'
 }
 
 function highlightRender (code, lang) {

public/js/index.js

@@ -102,7 +102,7 @@ var cursorActivityDebounce = 50
 var cursorAnimatePeriod = 100
 var supportContainers = ['success', 'info', 'warning', 'danger', 'spoiler']
 var supportCodeModes = ['javascript', 'typescript', 'jsx', 'htmlmixed', 'htmlembedded', 'css', 'xml', 'clike', 'clojure', 'ruby', 'python', 'shell', 'php', 'sql', 'haskell', 'coffeescript', 'yaml', 'pug', 'lua', 'cmake', 'nginx', 'perl', 'sass', 'r', 'dockerfile', 'tiddlywiki', 'mediawiki', 'go', 'gherkin'].concat(hljs.listLanguages())
-var supportCharts = ['sequence', 'flow', 'graphviz', 'mermaid', 'abc', 'plantuml', 'vega', 'geo']
+var supportCharts = ['sequence', 'flow', 'graphviz', 'mermaid', 'abc', 'plantuml', 'vega', 'geo', 'fretboard']
 var supportHeaders = [
   {
     text: '# h1',

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

@@ -0,0 +1,81 @@
+/* global $ */
+
+import './css/i.css'
+import dotEmpty from './svg/dotEmpty.svg'
+import dotEmptyH from './svg/dotEmpty_h.svg'
+import dot from './svg/dot.svg'
+import dotH from './svg/dot_h.svg'
+import dotWideLeft from './svg/dotWideLeft.svg'
+import dotWideRight from './svg/dotWideRight.svg'
+import dotWideMiddle from './svg/dotWideMiddle.svg'
+import stringO from './svg/string_o.svg'
+import stringX from './svg/string_x.svg'
+
+const switchListV = {
+  o: `<div class='cell dot'>${dot}</div>`,
+  '*': `<div class='cell dot faded'>${dot}</div>`,
+  '(': `<div class='cell'>${dotWideLeft}</div>`,
+  ')': `<div class='cell'>${dotWideRight}</div>`,
+  '=': `<div class='cell'>${dotWideMiddle}</div>`,
+  '^': `<div class='cell'>${stringO}</div>`,
+  x: `<div class='cell'>${stringX}</div>`,
+  '|': `<div class='cell empty'>${dotEmpty}</div>`,
+  ' ': `<div class='cell empty'>${dotEmpty}</div>`,
+  '\n': `<div class='cell empty'>${dotEmpty}</div>`
+}
+const switchListH = {
+  o: `<div class='cell dot'>${dotH}</div>`,
+  '*': `<div class='cell dot faded'>${dotH}</div>`,
+  O: `<div class='cell dot root'>${dotH}</div>`,
+  '-': `<div class='cell empty'>${dotEmptyH}</div>`,
+  ' ': `<div class='cell empty'>${dotEmptyH}</div>`,
+  '\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'
+  const fretboardHTML = $(`<div class="${containerClass}"></div>`)
+
+  $(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 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') {
+    switchList = switchListV
+  } else {
+    // calculate position
+    const emptyFill = new Array(Number(fretbLen) + 3).fill(' ').join('')
+    content = `${emptyFill}${content}`
+
+    switchList = switchListH
+  }
+
+  const contentCell = content && content.split('')
+  // Go through each ASCII character...
+  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 numSvg = require(`./svg/number${char}${numType}.svg`)
+      cellsHTML.append($(`<div class='cell empty'>${numSvg}</div>`))
+    } else if (switchList[char] !== undefined) {
+      cellsHTML.append($(switchList[char]))
+    }
+  })
+
+  $(svgHTML).append($(cellsHTML))
+  $(fretboardHTML).append($(svgHTML))
+
+  return fretboardHTML[0].outerHTML
+}