diff --git a/public/js/extra.js b/public/js/extra.js index dfc206b0..337dd97d 100644 --- a/public/js/extra.js +++ b/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(`
${escapeHTML(err)}
`) + 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) { diff --git a/public/js/index.js b/public/js/index.js index 5b2d8861..b5f2501e 100644 --- a/public/js/index.js +++ b/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', diff --git a/public/js/lib/renderer/fretboard/css/i.css b/public/js/lib/renderer/fretboard/css/i.css new file mode 100644 index 00000000..86e15080 --- /dev/null +++ b/public/js/lib/renderer/fretboard/css/i.css @@ -0,0 +1,183 @@ +/* -- GENERAL TYPOGRAPHY -- */ +.fretTitle { + color: #555; + font-family: "Helvetica Neue", sans-serif; + background: #eee; + line-height: 1.4; + font-size: 1.6em; + margin: 10px 0 10px 0; + font-weight: 900; + padding: 5px; +} + +section { + padding: 20px; +} + +.content { + max-width: 960px; + margin: auto; +} + +/* Fretboard Container/Wrapper */ +.fretContainer { + width: 320px; + margin: 0 auto; +} + +.fretContainer_h { + max-width: 400px; + margin: 0 auto; +} + +@media all and (max-width: 400px) { + .fretContainer_h { + max-width: 288px; + } +} +@media all and (max-width: 420px) { + .fretContainer { + max-width: 220px; + } +} +.svg_wrapper { + background-color: #fff; + position: relative; + height: 0; +} + +.svg_wrapper svg.fretboard_bg { + position: absolute; + top: 0; + left: 0; + z-index: 0; +} + +.svg_wrapper .cells { + width: 100%; + height: 100%; + position: absolute; + top: 0; + left: 0; + z-index: 10; +} + +.svg_wrapper.v4 { + padding-top: 91.6666666667%; +} + +.svg_wrapper.v5 { + padding-top: 106.9444444444%; +} + +.svg_wrapper.v7 { + padding-top: 137.5%; +} + +.svg_wrapper.v9 { + padding-top: 168.0555555556%; +} + +.svg_wrapper.v12 { + padding-top: 213.8888888889%; +} + +.svg_wrapper.v15 { + padding-top: 259.7222222222%; +} + +.svg_wrapper.v .cell svg { + width: 12.5%; + float: left; + display: block; +} + +.svg_wrapper.v4 .cell svg { + height: 16.6666666667%; +} + +.svg_wrapper.v5 .cell svg { + height: 14.2857142857%; +} + +.svg_wrapper.v7 .cell svg { + height: 11.1111111111%; +} + +.svg_wrapper.v9 .cell svg { + height: 9.0909090909%; +} + +.svg_wrapper.v12 .cell svg { + height: 7.1428571429%; +} + +.svg_wrapper.v15 .cell svg { + height: 5.8823529412%; +} + +.svg_wrapper.h5 { + padding-top: 85.7142857143%; +} + +.svg_wrapper.h6 { + padding-top: 75%; +} + +.svg_wrapper.h7 { + padding-top: 72.7272727273%; +} + +.svg_wrapper.h .cell svg { + height: 12.5%; + float: left; + display: block; + z-index: 2; +} + +.svg_wrapper.h5 .cell svg { + width: 14.2857142857%; +} + +.svg_wrapper.h6 .cell svg { + width: 12.5%; +} + +.svg_wrapper.h7 .cell svg { + width: 12.1212121212%; +} + +/* Fretboard Element Styles */ +.cell.dot .fretb_dot { + fill: #27a9e1; +} + +.cell.dot.root .fretb_dot { + fill: #F05A28; +} + +.cell.dot.faded .fretb_dot { + opacity: 0.25; +} + +.fretboard_bg .fret_bg rect { + fill: #fff; +} + +.fretboard_bg .frets rect { + fill: #ddd; +} + +.fretboard_bg .nut rect { + fill: #6e6e6e; +} + +.fretboard_bg .strings rect { + fill: #6e6e6e; +} + +.svg_wrapper.noNut .fretboard_bg .nut rect { + fill: none; +} + +/*# sourceMappingURL=i.css.map */ diff --git a/public/js/lib/renderer/fretboard/fretboard.js b/public/js/lib/renderer/fretboard/fretboard.js new file mode 100644 index 00000000..fdd97fd6 --- /dev/null +++ b/public/js/lib/renderer/fretboard/fretboard.js @@ -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: `
${dot}
`, + '*': `
${dot}
`, + '(': `
${dotWideLeft}
`, + ')': `
${dotWideRight}
`, + '=': `
${dotWideMiddle}
`, + '^': `
${stringO}
`, + x: `
${stringX}
`, + '|': `
${dotEmpty}
`, + ' ': `
${dotEmpty}
`, + '\n': `
${dotEmpty}
` +} +const switchListH = { + o: `
${dotH}
`, + '*': `
${dotH}
`, + O: `
${dotH}
`, + '-': `
${dotEmptyH}
`, + ' ': `
${dotEmptyH}
`, + '\n': `
${dotEmptyH}
${dotEmptyH}
` +} + +export const renderFretBoard = (content, { title: fretTitle, type }) => { + const fretType = type.split(' ') + const containerClass = fretType && fretType[0].startsWith('h') ? 'fretContainer_h' : 'fretContainer' + const fretboardHTML = $(`
`) + + $(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 svgHTML = $(`
`) + const fretbBg = require(`./svg/fretb_${fretbOrientation}_${fretbLen}.svg`) + $(svgHTML).append($(fretbBg)) + + // create cells HTML + const cellsHTML = $('
') + 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($(`
${numSvg}
`)) + } else if (switchList[char] !== undefined) { + cellsHTML.append($(switchList[char])) + } + }) + + $(svgHTML).append($(cellsHTML)) + $(fretboardHTML).append($(svgHTML)) + + return fretboardHTML[0].outerHTML +} diff --git a/public/js/lib/renderer/fretboard/svg/dot.svg b/public/js/lib/renderer/fretboard/svg/dot.svg new file mode 100644 index 00000000..96376493 --- /dev/null +++ b/public/js/lib/renderer/fretboard/svg/dot.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/public/js/lib/renderer/fretboard/svg/dotEmpty.svg b/public/js/lib/renderer/fretboard/svg/dotEmpty.svg new file mode 100644 index 00000000..f49702c9 --- /dev/null +++ b/public/js/lib/renderer/fretboard/svg/dotEmpty.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/public/js/lib/renderer/fretboard/svg/dotEmpty_h.svg b/public/js/lib/renderer/fretboard/svg/dotEmpty_h.svg new file mode 100644 index 00000000..6fc1f306 --- /dev/null +++ b/public/js/lib/renderer/fretboard/svg/dotEmpty_h.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/public/js/lib/renderer/fretboard/svg/dotWideLeft.svg b/public/js/lib/renderer/fretboard/svg/dotWideLeft.svg new file mode 100644 index 00000000..8109a513 --- /dev/null +++ b/public/js/lib/renderer/fretboard/svg/dotWideLeft.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/public/js/lib/renderer/fretboard/svg/dotWideMiddle.svg b/public/js/lib/renderer/fretboard/svg/dotWideMiddle.svg new file mode 100644 index 00000000..75804023 --- /dev/null +++ b/public/js/lib/renderer/fretboard/svg/dotWideMiddle.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/public/js/lib/renderer/fretboard/svg/dotWideRight.svg b/public/js/lib/renderer/fretboard/svg/dotWideRight.svg new file mode 100644 index 00000000..185e1567 --- /dev/null +++ b/public/js/lib/renderer/fretboard/svg/dotWideRight.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/public/js/lib/renderer/fretboard/svg/dot_h.svg b/public/js/lib/renderer/fretboard/svg/dot_h.svg new file mode 100644 index 00000000..266a1be8 --- /dev/null +++ b/public/js/lib/renderer/fretboard/svg/dot_h.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/public/js/lib/renderer/fretboard/svg/fretb_horiz_5.svg b/public/js/lib/renderer/fretboard/svg/fretb_horiz_5.svg new file mode 100644 index 00000000..222c4664 --- /dev/null +++ b/public/js/lib/renderer/fretboard/svg/fretb_horiz_5.svg @@ -0,0 +1,24 @@ + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/public/js/lib/renderer/fretboard/svg/fretb_horiz_6.svg b/public/js/lib/renderer/fretboard/svg/fretb_horiz_6.svg new file mode 100644 index 00000000..a5f1c86e --- /dev/null +++ b/public/js/lib/renderer/fretboard/svg/fretb_horiz_6.svg @@ -0,0 +1,25 @@ + + + + + \ + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/public/js/lib/renderer/fretboard/svg/fretb_horiz_7.svg b/public/js/lib/renderer/fretboard/svg/fretb_horiz_7.svg new file mode 100644 index 00000000..afac66f1 --- /dev/null +++ b/public/js/lib/renderer/fretboard/svg/fretb_horiz_7.svg @@ -0,0 +1,26 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/public/js/lib/renderer/fretboard/svg/fretb_vert_12.svg b/public/js/lib/renderer/fretboard/svg/fretb_vert_12.svg new file mode 100644 index 00000000..a394bbef --- /dev/null +++ b/public/js/lib/renderer/fretboard/svg/fretb_vert_12.svg @@ -0,0 +1,31 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/public/js/lib/renderer/fretboard/svg/fretb_vert_15.svg b/public/js/lib/renderer/fretboard/svg/fretb_vert_15.svg new file mode 100644 index 00000000..48c6711e --- /dev/null +++ b/public/js/lib/renderer/fretboard/svg/fretb_vert_15.svg @@ -0,0 +1,34 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/public/js/lib/renderer/fretboard/svg/fretb_vert_4.svg b/public/js/lib/renderer/fretboard/svg/fretb_vert_4.svg new file mode 100644 index 00000000..b228382f --- /dev/null +++ b/public/js/lib/renderer/fretboard/svg/fretb_vert_4.svg @@ -0,0 +1,23 @@ + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/public/js/lib/renderer/fretboard/svg/fretb_vert_5.svg b/public/js/lib/renderer/fretboard/svg/fretb_vert_5.svg new file mode 100644 index 00000000..6acb3a95 --- /dev/null +++ b/public/js/lib/renderer/fretboard/svg/fretb_vert_5.svg @@ -0,0 +1,24 @@ + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/public/js/lib/renderer/fretboard/svg/fretb_vert_7.svg b/public/js/lib/renderer/fretboard/svg/fretb_vert_7.svg new file mode 100644 index 00000000..0aa94f27 --- /dev/null +++ b/public/js/lib/renderer/fretboard/svg/fretb_vert_7.svg @@ -0,0 +1,26 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/public/js/lib/renderer/fretboard/svg/fretb_vert_9.svg b/public/js/lib/renderer/fretboard/svg/fretb_vert_9.svg new file mode 100644 index 00000000..ccb52414 --- /dev/null +++ b/public/js/lib/renderer/fretboard/svg/fretb_vert_9.svg @@ -0,0 +1,28 @@ +\ + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/public/js/lib/renderer/fretboard/svg/number1.svg b/public/js/lib/renderer/fretboard/svg/number1.svg new file mode 100644 index 00000000..fb0cdbbe --- /dev/null +++ b/public/js/lib/renderer/fretboard/svg/number1.svg @@ -0,0 +1,10 @@ + + + + Rectangle + Created with Sketch. + + + + + \ No newline at end of file diff --git a/public/js/lib/renderer/fretboard/svg/number1_h.svg b/public/js/lib/renderer/fretboard/svg/number1_h.svg new file mode 100644 index 00000000..4474e81b --- /dev/null +++ b/public/js/lib/renderer/fretboard/svg/number1_h.svg @@ -0,0 +1,10 @@ + + + + Rectangle + Created with Sketch. + + + + + \ No newline at end of file diff --git a/public/js/lib/renderer/fretboard/svg/number2.svg b/public/js/lib/renderer/fretboard/svg/number2.svg new file mode 100644 index 00000000..54567ffe --- /dev/null +++ b/public/js/lib/renderer/fretboard/svg/number2.svg @@ -0,0 +1,10 @@ + + + + Rectangle + Created with Sketch. + + + + + \ No newline at end of file diff --git a/public/js/lib/renderer/fretboard/svg/number2_h.svg b/public/js/lib/renderer/fretboard/svg/number2_h.svg new file mode 100644 index 00000000..5e42c860 --- /dev/null +++ b/public/js/lib/renderer/fretboard/svg/number2_h.svg @@ -0,0 +1,10 @@ + + + + Rectangle + Created with Sketch. + + + + + \ No newline at end of file diff --git a/public/js/lib/renderer/fretboard/svg/number3.svg b/public/js/lib/renderer/fretboard/svg/number3.svg new file mode 100644 index 00000000..24cf30ae --- /dev/null +++ b/public/js/lib/renderer/fretboard/svg/number3.svg @@ -0,0 +1,10 @@ + + + + Rectangle + Created with Sketch. + + + + + \ No newline at end of file diff --git a/public/js/lib/renderer/fretboard/svg/number3_h.svg b/public/js/lib/renderer/fretboard/svg/number3_h.svg new file mode 100644 index 00000000..46cb3e89 --- /dev/null +++ b/public/js/lib/renderer/fretboard/svg/number3_h.svg @@ -0,0 +1,10 @@ + + + + Rectangle + Created with Sketch. + + + + + \ No newline at end of file diff --git a/public/js/lib/renderer/fretboard/svg/number4.svg b/public/js/lib/renderer/fretboard/svg/number4.svg new file mode 100644 index 00000000..c744dc1b --- /dev/null +++ b/public/js/lib/renderer/fretboard/svg/number4.svg @@ -0,0 +1,10 @@ + + + + Rectangle + Created with Sketch. + + + + + \ No newline at end of file diff --git a/public/js/lib/renderer/fretboard/svg/number4_h.svg b/public/js/lib/renderer/fretboard/svg/number4_h.svg new file mode 100644 index 00000000..488c0ac9 --- /dev/null +++ b/public/js/lib/renderer/fretboard/svg/number4_h.svg @@ -0,0 +1,10 @@ + + + + Rectangle + Created with Sketch. + + + + + \ No newline at end of file diff --git a/public/js/lib/renderer/fretboard/svg/number5.svg b/public/js/lib/renderer/fretboard/svg/number5.svg new file mode 100644 index 00000000..c8e95144 --- /dev/null +++ b/public/js/lib/renderer/fretboard/svg/number5.svg @@ -0,0 +1,10 @@ + + + + Rectangle + Created with Sketch. + + + + + \ No newline at end of file diff --git a/public/js/lib/renderer/fretboard/svg/number5_h.svg b/public/js/lib/renderer/fretboard/svg/number5_h.svg new file mode 100644 index 00000000..489d4b34 --- /dev/null +++ b/public/js/lib/renderer/fretboard/svg/number5_h.svg @@ -0,0 +1,10 @@ + + + + Rectangle + Created with Sketch. + + + + + \ No newline at end of file diff --git a/public/js/lib/renderer/fretboard/svg/number6.svg b/public/js/lib/renderer/fretboard/svg/number6.svg new file mode 100644 index 00000000..1c88dd0f --- /dev/null +++ b/public/js/lib/renderer/fretboard/svg/number6.svg @@ -0,0 +1,10 @@ + + + + Rectangle + Created with Sketch. + + + + + \ No newline at end of file diff --git a/public/js/lib/renderer/fretboard/svg/number6_h.svg b/public/js/lib/renderer/fretboard/svg/number6_h.svg new file mode 100644 index 00000000..8af61ec4 --- /dev/null +++ b/public/js/lib/renderer/fretboard/svg/number6_h.svg @@ -0,0 +1,10 @@ + + + + Rectangle + Created with Sketch. + + + + + \ No newline at end of file diff --git a/public/js/lib/renderer/fretboard/svg/number7.svg b/public/js/lib/renderer/fretboard/svg/number7.svg new file mode 100644 index 00000000..f20c30b0 --- /dev/null +++ b/public/js/lib/renderer/fretboard/svg/number7.svg @@ -0,0 +1,10 @@ + + + + Rectangle + Created with Sketch. + + + + + \ No newline at end of file diff --git a/public/js/lib/renderer/fretboard/svg/number7_h.svg b/public/js/lib/renderer/fretboard/svg/number7_h.svg new file mode 100644 index 00000000..419f9f9e --- /dev/null +++ b/public/js/lib/renderer/fretboard/svg/number7_h.svg @@ -0,0 +1,10 @@ + + + + Rectangle + Created with Sketch. + + + + + \ No newline at end of file diff --git a/public/js/lib/renderer/fretboard/svg/number8.svg b/public/js/lib/renderer/fretboard/svg/number8.svg new file mode 100644 index 00000000..5597c26d --- /dev/null +++ b/public/js/lib/renderer/fretboard/svg/number8.svg @@ -0,0 +1,10 @@ + + + + Rectangle + Created with Sketch. + + + + + \ No newline at end of file diff --git a/public/js/lib/renderer/fretboard/svg/number8_h.svg b/public/js/lib/renderer/fretboard/svg/number8_h.svg new file mode 100644 index 00000000..b879c00e --- /dev/null +++ b/public/js/lib/renderer/fretboard/svg/number8_h.svg @@ -0,0 +1,10 @@ + + + + Rectangle + Created with Sketch. + + + + + \ No newline at end of file diff --git a/public/js/lib/renderer/fretboard/svg/number9.svg b/public/js/lib/renderer/fretboard/svg/number9.svg new file mode 100644 index 00000000..a768620c --- /dev/null +++ b/public/js/lib/renderer/fretboard/svg/number9.svg @@ -0,0 +1,10 @@ + + + + Rectangle + Created with Sketch. + + + + + \ No newline at end of file diff --git a/public/js/lib/renderer/fretboard/svg/number9_h.svg b/public/js/lib/renderer/fretboard/svg/number9_h.svg new file mode 100644 index 00000000..c181d570 --- /dev/null +++ b/public/js/lib/renderer/fretboard/svg/number9_h.svg @@ -0,0 +1,10 @@ + + + + Rectangle + Created with Sketch. + + + + + \ No newline at end of file diff --git a/public/js/lib/renderer/fretboard/svg/string_o.svg b/public/js/lib/renderer/fretboard/svg/string_o.svg new file mode 100644 index 00000000..4f4aa685 --- /dev/null +++ b/public/js/lib/renderer/fretboard/svg/string_o.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/public/js/lib/renderer/fretboard/svg/string_x.svg b/public/js/lib/renderer/fretboard/svg/string_x.svg new file mode 100644 index 00000000..cca096d1 --- /dev/null +++ b/public/js/lib/renderer/fretboard/svg/string_x.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/webpack.common.js b/webpack.common.js index 6347fdb8..d66abcba 100644 --- a/webpack.common.js +++ b/webpack.common.js @@ -484,10 +484,14 @@ module.exports = { }] }, { test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, + exclude: path.resolve(__dirname, 'public/js/lib/renderer/fretboard'), use: [{ loader: 'url-loader', options: { limit: '10000', mimetype: 'svg+xml' } }] + }, { + test: /.*\/fretboard\/svg\/.*\.svg$/, + loader: 'string-loader' }, { test: /\.png(\?v=\d+\.\d+\.\d+)?$/, use: [{