From 2ea3e598428a153d65adbf8d4b7857fe34bf1b0d Mon Sep 17 00:00:00 2001 From: Ca Chen Date: Mon, 30 Mar 2020 16:38:58 +0800 Subject: [PATCH 1/8] init ascii fretboard Signed-off-by: Ca Chen --- public/js/extra.js | 16 ++ public/js/index.js | 2 +- public/vendor/fretboard/fretboard.js | 112 +++++++++ public/vendor/fretboard/fretboardSVG.js | 306 ++++++++++++++++++++++++ 4 files changed, 435 insertions(+), 1 deletion(-) create mode 100644 public/vendor/fretboard/fretboard.js create mode 100644 public/vendor/fretboard/fretboardSVG.js diff --git a/public/js/extra.js b/public/js/extra.js index dfc206b0..da309d8c 100644 --- a/public/js/extra.js +++ b/public/js/extra.js @@ -23,6 +23,8 @@ import markdownitContainer from 'markdown-it-container' /* Defined regex markdown it plugins */ import Plugin from 'markdown-it-regexp' +import { renderFretBoard } from '../vendor/fretboard/fretboard.js' + require('prismjs/themes/prism.css') require('prismjs/components/prism-wiki') require('prismjs/components/prism-haskell') @@ -483,6 +485,20 @@ export function finishView (view) { console.warn(err) } }) + // fretboard + const fretboard = view.find('div.fretboard_instance.raw').removeClass('raw') + fretboard.each((key, value) => { + const $value = $(value) + + try { + const $ele = $(value).parent().parent() + $ele.html(renderFretBoard($value.text())) + } 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') 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/vendor/fretboard/fretboard.js b/public/vendor/fretboard/fretboard.js new file mode 100644 index 00000000..d519a031 --- /dev/null +++ b/public/vendor/fretboard/fretboard.js @@ -0,0 +1,112 @@ +import { + dotEmpty, + dotEmpty_h, + dot, + dot_h, + dotWideLeft, + dotWideRight, + dotWideMiddle, + string_o, + string_x, + fretb_vert_4, + fretb_vert_5, + fretb_vert_7, + fretb_vert_9, + fretb_vert_12, + fretb_vert_15, + fretb_horiz_5, + fretb_horiz_6, + fretb_horiz_7, +} from './fretboardSVG.js' + +const switchList_v = { + 'o': `
${dot}
`, + '*': `
${dot}
`, + '(': `
${dotWideLeft}
`, + ')': `
${dotWideRight}
`, + '=': `
${dotWideMiddle}
`, + '^': `
${string_o}
`, + 'x': `
${string_x}
`, + '|': `
${dotEmpty}
`, + ' ': `
${dotEmpty}
` +} +const switchList_h = { + 'o': `
${dot_h}
`, + '*': `
${dot_h}
`, + 'O': `
${dot_h}
`, + '-': `
${dotEmpty_h}
`, + ' ': `
${dotEmpty_h}
` +} + +export const renderFretBoard = (content) => { + + let fretboardHTML = $('
') + if (content.includes('title:')) { + const getTitle = content.split('\n', 1)[0].split('title:')[1].trim() + $(fretboardHTML).append($(`
${getTitle}
`)) + content = content.split('\n').slice(1).join('\n') + } + + let fretType = '' + if (content.startsWith('type:')) { + fretType = content.split('\n', 1)[0].split('type:')[1].trim().split(' ') + content = content.split('\n').slice(1).join('\n') + } + + let fretb_orientation = fretType[0].startsWith('v') ? 'vert' : 'horiz' + let fretb_len = fretType[0].substring(1) + + // TODO: to get svg dynamically + let fretb_bg = '' + switch (fretb_len) { + case '4': + fretb_bg = fretb_vert_4 + break + case '5': + if (fretb_orientation === 'vert') + fretb_bg = fretb_vert_5 + else + fretb_bg = fretb_horiz_5 + break + case '6': + fretb_bg = fretb_horiz_6 + break + case '7': + if (fretb_orientation === 'vert') + fretb_bg = fretb_vert_7 + else + fretb_bg = fretb_horiz_7 + break + case '9': + fretb_bg = fretb_vert_9 + break + case '12': + fretb_bg = fretb_vert_12 + break + case '15': + fretb_bg = fretb_vert_15 + break + } + + // create fretboard background HTML + let fretb_class = fretType[0][0] + ' ' + fretType[0] + let nut = (fretType[1] && fretType[1] === 'noNut')?'noNut':'' + let svgHTML = $(`
`) + $(svgHTML).append($(fretb_bg)) + + // create cells HTML + let cellsHTML = $('
') + let switchList = fretb_orientation === 'vert' ? switchList_v : switchList_h + let contentCell = content.split('') + // Go through each ASCII character... + contentCell.forEach(char => { + if (switchList[char] !== undefined) { + cellsHTML.append($(switchList[char])); + } + }) + + $(svgHTML).append($(cellsHTML)) + $(fretboardHTML).append($(svgHTML)) + + return fretboardHTML[0].outerHTML +} \ No newline at end of file diff --git a/public/vendor/fretboard/fretboardSVG.js b/public/vendor/fretboard/fretboardSVG.js new file mode 100644 index 00000000..314b812e --- /dev/null +++ b/public/vendor/fretboard/fretboardSVG.js @@ -0,0 +1,306 @@ +const dotEmpty = '\ + \ + '; + +const dotEmpty_h = '\ + \ + '; + +const dot = '\ + \ + '; + +const dot_h = '\ + \ + '; + +const dotWideLeft = '\ + \ + '; + +const dotWideRight = '\ + \ + '; + +const dotWideMiddle = '\ + \ + '; + +const string_o = '\ + \ + '; + +const string_x = '\ + \ + '; + +const fretb_vert_4 = '\ + \ + \ + \ + \ + \ + \ + \ + \ + \ + \ + \ + \ + \ + \ + \ + \ + \ + \ + \ + \ + \ + '; + +const fretb_vert_5 = '\ + \ + \ + \ + \ + \ + \ + \ + \ + \ + \ + \ + \ + \ + \ + \ + \ + \ + \ + \ + \ + \ + \ + '; + +const fretb_vert_7 = '\ + \ + \ + \ + \ + \ + \ + \ + \ + \ + \ + \ + \ + \ + \ + \ + \ + \ + \ + \ + \ + \ + \ + \ + \ + '; + +const fretb_vert_9 = '\ + \ + \ + \ + \ + \ + \ + \ + \ + \ + \ + \ + \ + \ + \ + \ + \ + \ + \ + \ + \ + \ + \ + \ + \ + \ + \ + '; + +const fretb_vert_12 = '\ + \ + \ + \ + \ + \ + \ + \ + \ + \ + \ + \ + \ + \ + \ + \ + \ + \ + \ + \ + \ + \ + \ + \ + \ + \ + \ + \ + \ + \ + '; + +const fretb_vert_15 = '\ + \ + \ + \ + \ + \ + \ + \ + \ + \ + \ + \ + \ + \ + \ + \ + \ + \ + \ + \ + \ + \ + \ + \ + \ + \ + \ + \ + \ + \ + \ + \ + \ + '; + +const fretb_horiz_5 = '\ + \ + \ + \ + \ + \ + \ + \ + \ + \ + \ + \ + \ + \ + \ + \ + \ + \ + \ + \ + \ + \ + \ + '; + +const fretb_horiz_6 = '\ + \ + \ + \ + \ + \ + \ + \ + \ + \ + \ + \ + \ + \ + \ + \ + \ + \ + \ + \ + \ + \ + \ + \ + '; + +var fretb_horiz_7 = '\ + \ + \ + \ + \ + \ + \ + \ + \ + \ + \ + \ + \ + \ + \ + \ + \ + \ + \ + \ + \ + \ + \ + \ + \ + '; + +module.exports = { + dotEmpty, + dotEmpty_h, + dot, + dot_h, + dotWideLeft, + dotWideRight, + dotWideMiddle, + string_o, + string_x, + fretb_vert_4, + fretb_vert_5, + fretb_vert_7, + fretb_vert_9, + fretb_vert_12, + fretb_vert_15, + fretb_horiz_5, + fretb_horiz_6, + fretb_horiz_7, +} \ No newline at end of file From 370423aefc09d304518539223642ac0704a4bb52 Mon Sep 17 00:00:00 2001 From: Ca Chen Date: Thu, 2 Apr 2020 20:43:56 +0800 Subject: [PATCH 2/8] add css, make fretboardSVG.js to separate svg files Signed-off-by: Ca Chen --- package-lock.json | 27 +- public/vendor/fretboard/css/i.css | 1 + public/vendor/fretboard/fretboard.js | 111 +++---- public/vendor/fretboard/fretboardSVG.js | 306 ------------------ public/vendor/fretboard/svg/dot.svg | 3 + public/vendor/fretboard/svg/dotEmpty.svg | 3 + public/vendor/fretboard/svg/dotEmpty_h.svg | 3 + public/vendor/fretboard/svg/dotWideLeft.svg | 3 + public/vendor/fretboard/svg/dotWideMiddle.svg | 3 + public/vendor/fretboard/svg/dotWideRight.svg | 3 + public/vendor/fretboard/svg/dot_h.svg | 3 + public/vendor/fretboard/svg/fretb_horiz_5.svg | 24 ++ public/vendor/fretboard/svg/fretb_horiz_6.svg | 25 ++ public/vendor/fretboard/svg/fretb_horiz_7.svg | 26 ++ public/vendor/fretboard/svg/fretb_vert_12.svg | 31 ++ public/vendor/fretboard/svg/fretb_vert_15.svg | 34 ++ public/vendor/fretboard/svg/fretb_vert_4.svg | 23 ++ public/vendor/fretboard/svg/fretb_vert_5.svg | 24 ++ public/vendor/fretboard/svg/fretb_vert_7.svg | 26 ++ public/vendor/fretboard/svg/fretb_vert_9.svg | 28 ++ public/vendor/fretboard/svg/string_o.svg | 3 + public/vendor/fretboard/svg/string_x.svg | 3 + webpack.common.js | 4 + 23 files changed, 332 insertions(+), 385 deletions(-) create mode 100644 public/vendor/fretboard/css/i.css delete mode 100644 public/vendor/fretboard/fretboardSVG.js create mode 100644 public/vendor/fretboard/svg/dot.svg create mode 100644 public/vendor/fretboard/svg/dotEmpty.svg create mode 100644 public/vendor/fretboard/svg/dotEmpty_h.svg create mode 100644 public/vendor/fretboard/svg/dotWideLeft.svg create mode 100644 public/vendor/fretboard/svg/dotWideMiddle.svg create mode 100644 public/vendor/fretboard/svg/dotWideRight.svg create mode 100644 public/vendor/fretboard/svg/dot_h.svg create mode 100644 public/vendor/fretboard/svg/fretb_horiz_5.svg create mode 100644 public/vendor/fretboard/svg/fretb_horiz_6.svg create mode 100644 public/vendor/fretboard/svg/fretb_horiz_7.svg create mode 100644 public/vendor/fretboard/svg/fretb_vert_12.svg create mode 100644 public/vendor/fretboard/svg/fretb_vert_15.svg create mode 100644 public/vendor/fretboard/svg/fretb_vert_4.svg create mode 100644 public/vendor/fretboard/svg/fretb_vert_5.svg create mode 100644 public/vendor/fretboard/svg/fretb_vert_7.svg create mode 100644 public/vendor/fretboard/svg/fretb_vert_9.svg create mode 100644 public/vendor/fretboard/svg/string_o.svg create mode 100644 public/vendor/fretboard/svg/string_x.svg diff --git a/package-lock.json b/package-lock.json index 19377a7a..bc408c3f 100644 --- a/package-lock.json +++ b/package-lock.json @@ -14692,6 +14692,12 @@ "integrity": "sha1-tf3AjxKH6hF4Yo5BXiUTK3NkbG0=", "dev": true }, + "simple-html-tokenizer": { + "version": "0.1.1", + "resolved": "https://registry.npmjs.org/simple-html-tokenizer/-/simple-html-tokenizer-0.1.1.tgz", + "integrity": "sha1-BcLuxXn//+FFoDCsJs/qYbmA+r4=", + "dev": true + }, "simple-swizzle": { "version": "0.2.2", "resolved": "https://registry.npmjs.org/simple-swizzle/-/simple-swizzle-0.2.2.tgz", @@ -15397,16 +15403,6 @@ "boundary": "^1.0.1" } }, - "style-loader": { - "version": "0.23.1", - "resolved": "https://registry.npmjs.org/style-loader/-/style-loader-0.23.1.tgz", - "integrity": "sha512-XK+uv9kWwhZMZ1y7mysB+zoihsEj4wneFWAS5qoiLwzW0WzSqMrrsIy+a3zkQJq0ipFtBpX5W3MqyRIBF/WFGg==", - "dev": true, - "requires": { - "loader-utils": "^1.1.0", - "schema-utils": "^1.0.0" - } - }, "stylehacks": { "version": "4.0.3", "resolved": "https://registry.npmjs.org/stylehacks/-/stylehacks-4.0.3.tgz", @@ -15462,6 +15458,17 @@ "has-flag": "^3.0.0" } }, + "svg-inline-loader": { + "version": "0.8.2", + "resolved": "https://registry.npmjs.org/svg-inline-loader/-/svg-inline-loader-0.8.2.tgz", + "integrity": "sha512-kbrcEh5n5JkypaSC152eGfGcnT4lkR0eSfvefaUJkLqgGjRQJyKDvvEE/CCv5aTSdfXuc+N98w16iAojhShI3g==", + "dev": true, + "requires": { + "loader-utils": "^1.1.0", + "object-assign": "^4.0.1", + "simple-html-tokenizer": "^0.1.1" + } + }, "svgo": { "version": "1.3.2", "resolved": "https://registry.npmjs.org/svgo/-/svgo-1.3.2.tgz", diff --git a/public/vendor/fretboard/css/i.css b/public/vendor/fretboard/css/i.css new file mode 100644 index 00000000..b295d3a3 --- /dev/null +++ b/public/vendor/fretboard/css/i.css @@ -0,0 +1 @@ +*{position:relative;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}body{color:#555;font-family:"Helvetica Neue",sans-serif;font-size:16px;background:#eee;line-height:1.4}a{color:#f05a28}h1,h2,h3,h4,h5,h6{color:#444;margin:0 0 20px 0}h1{font-size:40px}h2{font-size:32px;margin:0 0 12px 0}h3{font-size:24px;margin:40px 0 10px 0}h4{font-size:21px}h5{font-size:18px}h6{font-size:18px}.title{color:#555;font-family:"Helvetica Neue",sans-serif;background:#eee;line-height:1.4;font-size:24px;margin:10px 0 10px 0;font-weight:900}p{margin:20px 0 20px 0}ul,ol{margin:0 0 20px 28px;padding:0}dl{margin:0 0 20px 0}dl dt{font-weight:bold;color:#444;margin-bottom:4px}dl dd{margin-bottom:0px;margin-left:24px}pre,code{font-size:15px;line-height:20px;font-family:"Andale Mono",monospace}pre{overflow:auto;margin:0 0 20px 0;padding:20px;border-radius:6px;background:#eee}code{display:inline-block;white-space:nowrap;padding:2px 6px;border-radius:3px;background:#f4f4f4}table{border-collapse:collapse;table-layout:fixed;width:100%;margin:0 0 20px 0}td,th{padding:8px 9px 7px;font-size:14px;line-height:17px;border:1px solid #aaa;text-align:left}th{background:#eee}td{font-size:13px;background:#fff}section{padding:20px}.content{max-width:960px;margin:auto}.container{width:288px;margin:0 auto}.container_h{max-width:576px;margin:0 auto}@media all and (max-width: 383px){.container_h{max-width:288px}}@media all and (max-width: 576px){.container_h{width:384px}}.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%}.cell.dot .fretb_dot{fill:#27a9e1}.cell.dot.root .fretb_dot{fill:#f05a28}.cell.dot.faded .fretb_dot{opacity:.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/vendor/fretboard/fretboard.js b/public/vendor/fretboard/fretboard.js index d519a031..fd84ab8a 100644 --- a/public/vendor/fretboard/fretboard.js +++ b/public/vendor/fretboard/fretboard.js @@ -1,23 +1,13 @@ -import { - dotEmpty, - dotEmpty_h, - dot, - dot_h, - dotWideLeft, - dotWideRight, - dotWideMiddle, - string_o, - string_x, - fretb_vert_4, - fretb_vert_5, - fretb_vert_7, - fretb_vert_9, - fretb_vert_12, - fretb_vert_15, - fretb_horiz_5, - fretb_horiz_6, - fretb_horiz_7, -} from './fretboardSVG.js' +import dotEmpty from './svg/dotEmpty.svg' +import dotEmpty_h from './svg/dotEmpty_h.svg' +import dot from './svg/dot.svg' +import dot_h from './svg/dot_h.svg' +import dotWideLeft from './svg/dotWideLeft.svg' +import dotWideRight from './svg/dotWideRight.svg' +import dotWideMiddle from './svg/dotWideMiddle.svg' +import string_o from './svg/string_o.svg' +import string_x from './svg/string_x.svg' +import './css/i.css' const switchList_v = { 'o': `
${dot}
`, @@ -38,68 +28,51 @@ const switchList_h = { ' ': `
${dotEmpty_h}
` } -export const renderFretBoard = (content) => { +let getArgument = (argName, content) => { + let lineOfContent = content.data.split('\n') + let argv = '' + let indexOfArg = '' + let idx = '' + for (idx in lineOfContent) { + if (lineOfContent[idx].startsWith(argName)) { + argv = lineOfContent[idx].split(argName)[1].trim() + break + } + } + + lineOfContent.splice(idx, 1) + content.data = lineOfContent.join('\n') + + return argv +} + +export const renderFretBoard = (data) => { let fretboardHTML = $('
') - if (content.includes('title:')) { - const getTitle = content.split('\n', 1)[0].split('title:')[1].trim() - $(fretboardHTML).append($(`
${getTitle}
`)) - content = content.split('\n').slice(1).join('\n') - } - let fretType = '' - if (content.startsWith('type:')) { - fretType = content.split('\n', 1)[0].split('type:')[1].trim().split(' ') - content = content.split('\n').slice(1).join('\n') - } + // parsing arguments + let content = { 'data': data } + let getTitle = getArgument('title:', content) + let fretType = getArgument('type:', content).split(' ') + content = content.data - let fretb_orientation = fretType[0].startsWith('v') ? 'vert' : 'horiz' - let fretb_len = fretType[0].substring(1) - - // TODO: to get svg dynamically - let fretb_bg = '' - switch (fretb_len) { - case '4': - fretb_bg = fretb_vert_4 - break - case '5': - if (fretb_orientation === 'vert') - fretb_bg = fretb_vert_5 - else - fretb_bg = fretb_horiz_5 - break - case '6': - fretb_bg = fretb_horiz_6 - break - case '7': - if (fretb_orientation === 'vert') - fretb_bg = fretb_vert_7 - else - fretb_bg = fretb_horiz_7 - break - case '9': - fretb_bg = fretb_vert_9 - break - case '12': - fretb_bg = fretb_vert_12 - break - case '15': - fretb_bg = fretb_vert_15 - break - } + $(fretboardHTML).append($(`
${getTitle}
`)) // create fretboard background HTML - let fretb_class = fretType[0][0] + ' ' + fretType[0] + let fretb_orientation = fretType && fretType[0].startsWith('v') ? 'vert' : 'horiz' + let fretb_len = fretType && fretType[0].substring(1) + let fretb_class = fretType && fretType[0][0] + ' ' + fretType[0] let nut = (fretType[1] && fretType[1] === 'noNut')?'noNut':'' let svgHTML = $(`
`) + let fretb_bg = require(`./svg/fretb_${fretb_orientation}_${fretb_len}.svg`) $(svgHTML).append($(fretb_bg)) // create cells HTML let cellsHTML = $('
') - let switchList = fretb_orientation === 'vert' ? switchList_v : switchList_h - let contentCell = content.split('') + let switchList = fretb_orientation && fretb_orientation === 'vert' ? switchList_v : switchList_h + let contentCell = content && content.split('') // Go through each ASCII character... - contentCell.forEach(char => { + contentCell && contentCell.forEach(char => { if (switchList[char] !== undefined) { cellsHTML.append($(switchList[char])); } diff --git a/public/vendor/fretboard/fretboardSVG.js b/public/vendor/fretboard/fretboardSVG.js deleted file mode 100644 index 314b812e..00000000 --- a/public/vendor/fretboard/fretboardSVG.js +++ /dev/null @@ -1,306 +0,0 @@ -const dotEmpty = '\ - \ - '; - -const dotEmpty_h = '\ - \ - '; - -const dot = '\ - \ - '; - -const dot_h = '\ - \ - '; - -const dotWideLeft = '\ - \ - '; - -const dotWideRight = '\ - \ - '; - -const dotWideMiddle = '\ - \ - '; - -const string_o = '\ - \ - '; - -const string_x = '\ - \ - '; - -const fretb_vert_4 = '\ - \ - \ - \ - \ - \ - \ - \ - \ - \ - \ - \ - \ - \ - \ - \ - \ - \ - \ - \ - \ - \ - '; - -const fretb_vert_5 = '\ - \ - \ - \ - \ - \ - \ - \ - \ - \ - \ - \ - \ - \ - \ - \ - \ - \ - \ - \ - \ - \ - \ - '; - -const fretb_vert_7 = '\ - \ - \ - \ - \ - \ - \ - \ - \ - \ - \ - \ - \ - \ - \ - \ - \ - \ - \ - \ - \ - \ - \ - \ - \ - '; - -const fretb_vert_9 = '\ - \ - \ - \ - \ - \ - \ - \ - \ - \ - \ - \ - \ - \ - \ - \ - \ - \ - \ - \ - \ - \ - \ - \ - \ - \ - \ - '; - -const fretb_vert_12 = '\ - \ - \ - \ - \ - \ - \ - \ - \ - \ - \ - \ - \ - \ - \ - \ - \ - \ - \ - \ - \ - \ - \ - \ - \ - \ - \ - \ - \ - \ - '; - -const fretb_vert_15 = '\ - \ - \ - \ - \ - \ - \ - \ - \ - \ - \ - \ - \ - \ - \ - \ - \ - \ - \ - \ - \ - \ - \ - \ - \ - \ - \ - \ - \ - \ - \ - \ - \ - '; - -const fretb_horiz_5 = '\ - \ - \ - \ - \ - \ - \ - \ - \ - \ - \ - \ - \ - \ - \ - \ - \ - \ - \ - \ - \ - \ - \ - '; - -const fretb_horiz_6 = '\ - \ - \ - \ - \ - \ - \ - \ - \ - \ - \ - \ - \ - \ - \ - \ - \ - \ - \ - \ - \ - \ - \ - \ - '; - -var fretb_horiz_7 = '\ - \ - \ - \ - \ - \ - \ - \ - \ - \ - \ - \ - \ - \ - \ - \ - \ - \ - \ - \ - \ - \ - \ - \ - \ - '; - -module.exports = { - dotEmpty, - dotEmpty_h, - dot, - dot_h, - dotWideLeft, - dotWideRight, - dotWideMiddle, - string_o, - string_x, - fretb_vert_4, - fretb_vert_5, - fretb_vert_7, - fretb_vert_9, - fretb_vert_12, - fretb_vert_15, - fretb_horiz_5, - fretb_horiz_6, - fretb_horiz_7, -} \ No newline at end of file diff --git a/public/vendor/fretboard/svg/dot.svg b/public/vendor/fretboard/svg/dot.svg new file mode 100644 index 00000000..96376493 --- /dev/null +++ b/public/vendor/fretboard/svg/dot.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/public/vendor/fretboard/svg/dotEmpty.svg b/public/vendor/fretboard/svg/dotEmpty.svg new file mode 100644 index 00000000..f49702c9 --- /dev/null +++ b/public/vendor/fretboard/svg/dotEmpty.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/public/vendor/fretboard/svg/dotEmpty_h.svg b/public/vendor/fretboard/svg/dotEmpty_h.svg new file mode 100644 index 00000000..6fc1f306 --- /dev/null +++ b/public/vendor/fretboard/svg/dotEmpty_h.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/public/vendor/fretboard/svg/dotWideLeft.svg b/public/vendor/fretboard/svg/dotWideLeft.svg new file mode 100644 index 00000000..8109a513 --- /dev/null +++ b/public/vendor/fretboard/svg/dotWideLeft.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/public/vendor/fretboard/svg/dotWideMiddle.svg b/public/vendor/fretboard/svg/dotWideMiddle.svg new file mode 100644 index 00000000..75804023 --- /dev/null +++ b/public/vendor/fretboard/svg/dotWideMiddle.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/public/vendor/fretboard/svg/dotWideRight.svg b/public/vendor/fretboard/svg/dotWideRight.svg new file mode 100644 index 00000000..185e1567 --- /dev/null +++ b/public/vendor/fretboard/svg/dotWideRight.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/public/vendor/fretboard/svg/dot_h.svg b/public/vendor/fretboard/svg/dot_h.svg new file mode 100644 index 00000000..266a1be8 --- /dev/null +++ b/public/vendor/fretboard/svg/dot_h.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/public/vendor/fretboard/svg/fretb_horiz_5.svg b/public/vendor/fretboard/svg/fretb_horiz_5.svg new file mode 100644 index 00000000..222c4664 --- /dev/null +++ b/public/vendor/fretboard/svg/fretb_horiz_5.svg @@ -0,0 +1,24 @@ + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/public/vendor/fretboard/svg/fretb_horiz_6.svg b/public/vendor/fretboard/svg/fretb_horiz_6.svg new file mode 100644 index 00000000..a5f1c86e --- /dev/null +++ b/public/vendor/fretboard/svg/fretb_horiz_6.svg @@ -0,0 +1,25 @@ + + + + + \ + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/public/vendor/fretboard/svg/fretb_horiz_7.svg b/public/vendor/fretboard/svg/fretb_horiz_7.svg new file mode 100644 index 00000000..afac66f1 --- /dev/null +++ b/public/vendor/fretboard/svg/fretb_horiz_7.svg @@ -0,0 +1,26 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/public/vendor/fretboard/svg/fretb_vert_12.svg b/public/vendor/fretboard/svg/fretb_vert_12.svg new file mode 100644 index 00000000..a394bbef --- /dev/null +++ b/public/vendor/fretboard/svg/fretb_vert_12.svg @@ -0,0 +1,31 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/public/vendor/fretboard/svg/fretb_vert_15.svg b/public/vendor/fretboard/svg/fretb_vert_15.svg new file mode 100644 index 00000000..48c6711e --- /dev/null +++ b/public/vendor/fretboard/svg/fretb_vert_15.svg @@ -0,0 +1,34 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/public/vendor/fretboard/svg/fretb_vert_4.svg b/public/vendor/fretboard/svg/fretb_vert_4.svg new file mode 100644 index 00000000..b228382f --- /dev/null +++ b/public/vendor/fretboard/svg/fretb_vert_4.svg @@ -0,0 +1,23 @@ + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/public/vendor/fretboard/svg/fretb_vert_5.svg b/public/vendor/fretboard/svg/fretb_vert_5.svg new file mode 100644 index 00000000..6acb3a95 --- /dev/null +++ b/public/vendor/fretboard/svg/fretb_vert_5.svg @@ -0,0 +1,24 @@ + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/public/vendor/fretboard/svg/fretb_vert_7.svg b/public/vendor/fretboard/svg/fretb_vert_7.svg new file mode 100644 index 00000000..0aa94f27 --- /dev/null +++ b/public/vendor/fretboard/svg/fretb_vert_7.svg @@ -0,0 +1,26 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/public/vendor/fretboard/svg/fretb_vert_9.svg b/public/vendor/fretboard/svg/fretb_vert_9.svg new file mode 100644 index 00000000..ccb52414 --- /dev/null +++ b/public/vendor/fretboard/svg/fretb_vert_9.svg @@ -0,0 +1,28 @@ +\ + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/public/vendor/fretboard/svg/string_o.svg b/public/vendor/fretboard/svg/string_o.svg new file mode 100644 index 00000000..4f4aa685 --- /dev/null +++ b/public/vendor/fretboard/svg/string_o.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/public/vendor/fretboard/svg/string_x.svg b/public/vendor/fretboard/svg/string_x.svg new file mode 100644 index 00000000..cca096d1 --- /dev/null +++ b/public/vendor/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..ed15258b 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/vendor/fretboard'), use: [{ loader: 'url-loader', options: { limit: '10000', mimetype: 'svg+xml' } }] + }, { + test: /.*\/fretb.*\.svg$/, + loader: 'svg-inline-loader' }, { test: /\.png(\?v=\d+\.\d+\.\d+)?$/, use: [{ From 6f580e9be89b6c2b28f898edc1a875068017559f Mon Sep 17 00:00:00 2001 From: Ca Chen Date: Wed, 8 Apr 2020 22:47:12 +0800 Subject: [PATCH 3/8] 1. mv fretboard path to `public/js/lib/renderer` 2. use `string-loader` instead of `svg-inline-loader` Signed-off-by: Ca Chen --- package-lock.json | 17 ----------------- public/js/extra.js | 2 +- .../lib/renderer}/fretboard/css/i.css | 0 .../lib/renderer}/fretboard/fretboard.js | 0 .../lib/renderer}/fretboard/svg/dot.svg | 0 .../lib/renderer}/fretboard/svg/dotEmpty.svg | 0 .../lib/renderer}/fretboard/svg/dotEmpty_h.svg | 0 .../lib/renderer}/fretboard/svg/dotWideLeft.svg | 0 .../renderer}/fretboard/svg/dotWideMiddle.svg | 0 .../renderer}/fretboard/svg/dotWideRight.svg | 0 .../lib/renderer}/fretboard/svg/dot_h.svg | 0 .../renderer}/fretboard/svg/fretb_horiz_5.svg | 0 .../renderer}/fretboard/svg/fretb_horiz_6.svg | 0 .../renderer}/fretboard/svg/fretb_horiz_7.svg | 0 .../renderer}/fretboard/svg/fretb_vert_12.svg | 0 .../renderer}/fretboard/svg/fretb_vert_15.svg | 0 .../renderer}/fretboard/svg/fretb_vert_4.svg | 0 .../renderer}/fretboard/svg/fretb_vert_5.svg | 0 .../renderer}/fretboard/svg/fretb_vert_7.svg | 0 .../renderer}/fretboard/svg/fretb_vert_9.svg | 0 .../lib/renderer}/fretboard/svg/string_o.svg | 0 .../lib/renderer}/fretboard/svg/string_x.svg | 0 webpack.common.js | 6 +++--- 23 files changed, 4 insertions(+), 21 deletions(-) rename public/{vendor => js/lib/renderer}/fretboard/css/i.css (100%) rename public/{vendor => js/lib/renderer}/fretboard/fretboard.js (100%) rename public/{vendor => js/lib/renderer}/fretboard/svg/dot.svg (100%) rename public/{vendor => js/lib/renderer}/fretboard/svg/dotEmpty.svg (100%) rename public/{vendor => js/lib/renderer}/fretboard/svg/dotEmpty_h.svg (100%) rename public/{vendor => js/lib/renderer}/fretboard/svg/dotWideLeft.svg (100%) rename public/{vendor => js/lib/renderer}/fretboard/svg/dotWideMiddle.svg (100%) rename public/{vendor => js/lib/renderer}/fretboard/svg/dotWideRight.svg (100%) rename public/{vendor => js/lib/renderer}/fretboard/svg/dot_h.svg (100%) rename public/{vendor => js/lib/renderer}/fretboard/svg/fretb_horiz_5.svg (100%) rename public/{vendor => js/lib/renderer}/fretboard/svg/fretb_horiz_6.svg (100%) rename public/{vendor => js/lib/renderer}/fretboard/svg/fretb_horiz_7.svg (100%) rename public/{vendor => js/lib/renderer}/fretboard/svg/fretb_vert_12.svg (100%) rename public/{vendor => js/lib/renderer}/fretboard/svg/fretb_vert_15.svg (100%) rename public/{vendor => js/lib/renderer}/fretboard/svg/fretb_vert_4.svg (100%) rename public/{vendor => js/lib/renderer}/fretboard/svg/fretb_vert_5.svg (100%) rename public/{vendor => js/lib/renderer}/fretboard/svg/fretb_vert_7.svg (100%) rename public/{vendor => js/lib/renderer}/fretboard/svg/fretb_vert_9.svg (100%) rename public/{vendor => js/lib/renderer}/fretboard/svg/string_o.svg (100%) rename public/{vendor => js/lib/renderer}/fretboard/svg/string_x.svg (100%) diff --git a/package-lock.json b/package-lock.json index bc408c3f..0a5ad61e 100644 --- a/package-lock.json +++ b/package-lock.json @@ -14692,12 +14692,6 @@ "integrity": "sha1-tf3AjxKH6hF4Yo5BXiUTK3NkbG0=", "dev": true }, - "simple-html-tokenizer": { - "version": "0.1.1", - "resolved": "https://registry.npmjs.org/simple-html-tokenizer/-/simple-html-tokenizer-0.1.1.tgz", - "integrity": "sha1-BcLuxXn//+FFoDCsJs/qYbmA+r4=", - "dev": true - }, "simple-swizzle": { "version": "0.2.2", "resolved": "https://registry.npmjs.org/simple-swizzle/-/simple-swizzle-0.2.2.tgz", @@ -15458,17 +15452,6 @@ "has-flag": "^3.0.0" } }, - "svg-inline-loader": { - "version": "0.8.2", - "resolved": "https://registry.npmjs.org/svg-inline-loader/-/svg-inline-loader-0.8.2.tgz", - "integrity": "sha512-kbrcEh5n5JkypaSC152eGfGcnT4lkR0eSfvefaUJkLqgGjRQJyKDvvEE/CCv5aTSdfXuc+N98w16iAojhShI3g==", - "dev": true, - "requires": { - "loader-utils": "^1.1.0", - "object-assign": "^4.0.1", - "simple-html-tokenizer": "^0.1.1" - } - }, "svgo": { "version": "1.3.2", "resolved": "https://registry.npmjs.org/svgo/-/svgo-1.3.2.tgz", diff --git a/public/js/extra.js b/public/js/extra.js index da309d8c..82af9ae9 100644 --- a/public/js/extra.js +++ b/public/js/extra.js @@ -23,7 +23,7 @@ import markdownitContainer from 'markdown-it-container' /* Defined regex markdown it plugins */ import Plugin from 'markdown-it-regexp' -import { renderFretBoard } from '../vendor/fretboard/fretboard.js' +import { renderFretBoard } from './lib/renderer/fretboard/fretboard.js' require('prismjs/themes/prism.css') require('prismjs/components/prism-wiki') diff --git a/public/vendor/fretboard/css/i.css b/public/js/lib/renderer/fretboard/css/i.css similarity index 100% rename from public/vendor/fretboard/css/i.css rename to public/js/lib/renderer/fretboard/css/i.css diff --git a/public/vendor/fretboard/fretboard.js b/public/js/lib/renderer/fretboard/fretboard.js similarity index 100% rename from public/vendor/fretboard/fretboard.js rename to public/js/lib/renderer/fretboard/fretboard.js diff --git a/public/vendor/fretboard/svg/dot.svg b/public/js/lib/renderer/fretboard/svg/dot.svg similarity index 100% rename from public/vendor/fretboard/svg/dot.svg rename to public/js/lib/renderer/fretboard/svg/dot.svg diff --git a/public/vendor/fretboard/svg/dotEmpty.svg b/public/js/lib/renderer/fretboard/svg/dotEmpty.svg similarity index 100% rename from public/vendor/fretboard/svg/dotEmpty.svg rename to public/js/lib/renderer/fretboard/svg/dotEmpty.svg diff --git a/public/vendor/fretboard/svg/dotEmpty_h.svg b/public/js/lib/renderer/fretboard/svg/dotEmpty_h.svg similarity index 100% rename from public/vendor/fretboard/svg/dotEmpty_h.svg rename to public/js/lib/renderer/fretboard/svg/dotEmpty_h.svg diff --git a/public/vendor/fretboard/svg/dotWideLeft.svg b/public/js/lib/renderer/fretboard/svg/dotWideLeft.svg similarity index 100% rename from public/vendor/fretboard/svg/dotWideLeft.svg rename to public/js/lib/renderer/fretboard/svg/dotWideLeft.svg diff --git a/public/vendor/fretboard/svg/dotWideMiddle.svg b/public/js/lib/renderer/fretboard/svg/dotWideMiddle.svg similarity index 100% rename from public/vendor/fretboard/svg/dotWideMiddle.svg rename to public/js/lib/renderer/fretboard/svg/dotWideMiddle.svg diff --git a/public/vendor/fretboard/svg/dotWideRight.svg b/public/js/lib/renderer/fretboard/svg/dotWideRight.svg similarity index 100% rename from public/vendor/fretboard/svg/dotWideRight.svg rename to public/js/lib/renderer/fretboard/svg/dotWideRight.svg diff --git a/public/vendor/fretboard/svg/dot_h.svg b/public/js/lib/renderer/fretboard/svg/dot_h.svg similarity index 100% rename from public/vendor/fretboard/svg/dot_h.svg rename to public/js/lib/renderer/fretboard/svg/dot_h.svg diff --git a/public/vendor/fretboard/svg/fretb_horiz_5.svg b/public/js/lib/renderer/fretboard/svg/fretb_horiz_5.svg similarity index 100% rename from public/vendor/fretboard/svg/fretb_horiz_5.svg rename to public/js/lib/renderer/fretboard/svg/fretb_horiz_5.svg diff --git a/public/vendor/fretboard/svg/fretb_horiz_6.svg b/public/js/lib/renderer/fretboard/svg/fretb_horiz_6.svg similarity index 100% rename from public/vendor/fretboard/svg/fretb_horiz_6.svg rename to public/js/lib/renderer/fretboard/svg/fretb_horiz_6.svg diff --git a/public/vendor/fretboard/svg/fretb_horiz_7.svg b/public/js/lib/renderer/fretboard/svg/fretb_horiz_7.svg similarity index 100% rename from public/vendor/fretboard/svg/fretb_horiz_7.svg rename to public/js/lib/renderer/fretboard/svg/fretb_horiz_7.svg diff --git a/public/vendor/fretboard/svg/fretb_vert_12.svg b/public/js/lib/renderer/fretboard/svg/fretb_vert_12.svg similarity index 100% rename from public/vendor/fretboard/svg/fretb_vert_12.svg rename to public/js/lib/renderer/fretboard/svg/fretb_vert_12.svg diff --git a/public/vendor/fretboard/svg/fretb_vert_15.svg b/public/js/lib/renderer/fretboard/svg/fretb_vert_15.svg similarity index 100% rename from public/vendor/fretboard/svg/fretb_vert_15.svg rename to public/js/lib/renderer/fretboard/svg/fretb_vert_15.svg diff --git a/public/vendor/fretboard/svg/fretb_vert_4.svg b/public/js/lib/renderer/fretboard/svg/fretb_vert_4.svg similarity index 100% rename from public/vendor/fretboard/svg/fretb_vert_4.svg rename to public/js/lib/renderer/fretboard/svg/fretb_vert_4.svg diff --git a/public/vendor/fretboard/svg/fretb_vert_5.svg b/public/js/lib/renderer/fretboard/svg/fretb_vert_5.svg similarity index 100% rename from public/vendor/fretboard/svg/fretb_vert_5.svg rename to public/js/lib/renderer/fretboard/svg/fretb_vert_5.svg diff --git a/public/vendor/fretboard/svg/fretb_vert_7.svg b/public/js/lib/renderer/fretboard/svg/fretb_vert_7.svg similarity index 100% rename from public/vendor/fretboard/svg/fretb_vert_7.svg rename to public/js/lib/renderer/fretboard/svg/fretb_vert_7.svg diff --git a/public/vendor/fretboard/svg/fretb_vert_9.svg b/public/js/lib/renderer/fretboard/svg/fretb_vert_9.svg similarity index 100% rename from public/vendor/fretboard/svg/fretb_vert_9.svg rename to public/js/lib/renderer/fretboard/svg/fretb_vert_9.svg diff --git a/public/vendor/fretboard/svg/string_o.svg b/public/js/lib/renderer/fretboard/svg/string_o.svg similarity index 100% rename from public/vendor/fretboard/svg/string_o.svg rename to public/js/lib/renderer/fretboard/svg/string_o.svg diff --git a/public/vendor/fretboard/svg/string_x.svg b/public/js/lib/renderer/fretboard/svg/string_x.svg similarity index 100% rename from public/vendor/fretboard/svg/string_x.svg rename to public/js/lib/renderer/fretboard/svg/string_x.svg diff --git a/webpack.common.js b/webpack.common.js index ed15258b..d66abcba 100644 --- a/webpack.common.js +++ b/webpack.common.js @@ -484,14 +484,14 @@ module.exports = { }] }, { test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, - exclude: path.resolve(__dirname, 'public/vendor/fretboard'), + exclude: path.resolve(__dirname, 'public/js/lib/renderer/fretboard'), use: [{ loader: 'url-loader', options: { limit: '10000', mimetype: 'svg+xml' } }] }, { - test: /.*\/fretb.*\.svg$/, - loader: 'svg-inline-loader' + test: /.*\/fretboard\/svg\/.*\.svg$/, + loader: 'string-loader' }, { test: /\.png(\?v=\d+\.\d+\.\d+)?$/, use: [{ From ac7a229b1c4aaff47673bbd5638b99e9df04d500 Mon Sep 17 00:00:00 2001 From: Ca Chen Date: Thu, 9 Apr 2020 00:25:28 +0800 Subject: [PATCH 4/8] fix: css overwritten Signed-off-by: Ca Chen --- public/js/lib/renderer/fretboard/css/i.css | 2 +- public/js/lib/renderer/fretboard/fretboard.js | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/public/js/lib/renderer/fretboard/css/i.css b/public/js/lib/renderer/fretboard/css/i.css index b295d3a3..18d94098 100644 --- a/public/js/lib/renderer/fretboard/css/i.css +++ b/public/js/lib/renderer/fretboard/css/i.css @@ -1 +1 @@ -*{position:relative;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}body{color:#555;font-family:"Helvetica Neue",sans-serif;font-size:16px;background:#eee;line-height:1.4}a{color:#f05a28}h1,h2,h3,h4,h5,h6{color:#444;margin:0 0 20px 0}h1{font-size:40px}h2{font-size:32px;margin:0 0 12px 0}h3{font-size:24px;margin:40px 0 10px 0}h4{font-size:21px}h5{font-size:18px}h6{font-size:18px}.title{color:#555;font-family:"Helvetica Neue",sans-serif;background:#eee;line-height:1.4;font-size:24px;margin:10px 0 10px 0;font-weight:900}p{margin:20px 0 20px 0}ul,ol{margin:0 0 20px 28px;padding:0}dl{margin:0 0 20px 0}dl dt{font-weight:bold;color:#444;margin-bottom:4px}dl dd{margin-bottom:0px;margin-left:24px}pre,code{font-size:15px;line-height:20px;font-family:"Andale Mono",monospace}pre{overflow:auto;margin:0 0 20px 0;padding:20px;border-radius:6px;background:#eee}code{display:inline-block;white-space:nowrap;padding:2px 6px;border-radius:3px;background:#f4f4f4}table{border-collapse:collapse;table-layout:fixed;width:100%;margin:0 0 20px 0}td,th{padding:8px 9px 7px;font-size:14px;line-height:17px;border:1px solid #aaa;text-align:left}th{background:#eee}td{font-size:13px;background:#fff}section{padding:20px}.content{max-width:960px;margin:auto}.container{width:288px;margin:0 auto}.container_h{max-width:576px;margin:0 auto}@media all and (max-width: 383px){.container_h{max-width:288px}}@media all and (max-width: 576px){.container_h{width:384px}}.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%}.cell.dot .fretb_dot{fill:#27a9e1}.cell.dot.root .fretb_dot{fill:#f05a28}.cell.dot.faded .fretb_dot{opacity:.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 */ +.fretTitle{color:#555;font-family:"Helvetica Neue",sans-serif;background:#eee;line-height:1.4;font-size:24px;margin:10px 0 10px 0;font-weight:900}section{padding:20px}.content{max-width:960px;margin:auto}.container{width:288px;margin:0 auto}.container_h{max-width:576px;margin:0 auto}@media all and (max-width: 383px){.container_h{max-width:288px}}@media all and (max-width: 576px){.container_h{width:384px}}.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%}.cell.dot .fretb_dot{fill:#27a9e1}.cell.dot.root .fretb_dot{fill:#f05a28}.cell.dot.faded .fretb_dot{opacity:.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 index fd84ab8a..5ea0a4fc 100644 --- a/public/js/lib/renderer/fretboard/fretboard.js +++ b/public/js/lib/renderer/fretboard/fretboard.js @@ -1,3 +1,4 @@ +import './css/i.css' import dotEmpty from './svg/dotEmpty.svg' import dotEmpty_h from './svg/dotEmpty_h.svg' import dot from './svg/dot.svg' @@ -7,7 +8,6 @@ import dotWideRight from './svg/dotWideRight.svg' import dotWideMiddle from './svg/dotWideMiddle.svg' import string_o from './svg/string_o.svg' import string_x from './svg/string_x.svg' -import './css/i.css' const switchList_v = { 'o': `
${dot}
`, @@ -56,7 +56,7 @@ export const renderFretBoard = (data) => { let fretType = getArgument('type:', content).split(' ') content = content.data - $(fretboardHTML).append($(`
${getTitle}
`)) + $(fretboardHTML).append($(`
${getTitle}
`)) // create fretboard background HTML let fretb_orientation = fretType && fretType[0].startsWith('v') ? 'vert' : 'horiz' From aad7dcad9581658301aa0f3eea4a3cb9d8c361e9 Mon Sep 17 00:00:00 2001 From: Ca Chen Date: Sun, 19 Apr 2020 22:56:21 +0800 Subject: [PATCH 5/8] fix lint errors Signed-off-by: Ca Chen --- package-lock.json | 10 +++ public/js/lib/renderer/fretboard/fretboard.js | 67 ++++++++++--------- 2 files changed, 44 insertions(+), 33 deletions(-) diff --git a/package-lock.json b/package-lock.json index 0a5ad61e..19377a7a 100644 --- a/package-lock.json +++ b/package-lock.json @@ -15397,6 +15397,16 @@ "boundary": "^1.0.1" } }, + "style-loader": { + "version": "0.23.1", + "resolved": "https://registry.npmjs.org/style-loader/-/style-loader-0.23.1.tgz", + "integrity": "sha512-XK+uv9kWwhZMZ1y7mysB+zoihsEj4wneFWAS5qoiLwzW0WzSqMrrsIy+a3zkQJq0ipFtBpX5W3MqyRIBF/WFGg==", + "dev": true, + "requires": { + "loader-utils": "^1.1.0", + "schema-utils": "^1.0.0" + } + }, "stylehacks": { "version": "4.0.3", "resolved": "https://registry.npmjs.org/stylehacks/-/stylehacks-4.0.3.tgz", diff --git a/public/js/lib/renderer/fretboard/fretboard.js b/public/js/lib/renderer/fretboard/fretboard.js index 5ea0a4fc..fff163b5 100644 --- a/public/js/lib/renderer/fretboard/fretboard.js +++ b/public/js/lib/renderer/fretboard/fretboard.js @@ -1,38 +1,39 @@ +/* global $ */ + import './css/i.css' import dotEmpty from './svg/dotEmpty.svg' -import dotEmpty_h from './svg/dotEmpty_h.svg' +import dotEmptyH from './svg/dotEmpty_h.svg' import dot from './svg/dot.svg' -import dot_h from './svg/dot_h.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 string_o from './svg/string_o.svg' -import string_x from './svg/string_x.svg' +import stringO from './svg/string_o.svg' +import stringX from './svg/string_x.svg' -const switchList_v = { - 'o': `
${dot}
`, +const switchListV = { + o: `
${dot}
`, '*': `
${dot}
`, '(': `
${dotWideLeft}
`, ')': `
${dotWideRight}
`, '=': `
${dotWideMiddle}
`, - '^': `
${string_o}
`, - 'x': `
${string_x}
`, + '^': `
${stringO}
`, + x: `
${stringX}
`, '|': `
${dotEmpty}
`, ' ': `
${dotEmpty}
` } -const switchList_h = { - 'o': `
${dot_h}
`, - '*': `
${dot_h}
`, - 'O': `
${dot_h}
`, - '-': `
${dotEmpty_h}
`, - ' ': `
${dotEmpty_h}
` +const switchListH = { + o: `
${dotH}
`, + '*': `
${dotH}
`, + O: `
${dotH}
`, + '-': `
${dotEmptyH}
`, + ' ': `
${dotEmptyH}
` } -let getArgument = (argName, content) => { - let lineOfContent = content.data.split('\n') +const getArgument = (argName, content) => { + const lineOfContent = content.data.split('\n') let argv = '' - let indexOfArg = '' let idx = '' for (idx in lineOfContent) { if (lineOfContent[idx].startsWith(argName)) { @@ -48,33 +49,33 @@ let getArgument = (argName, content) => { } export const renderFretBoard = (data) => { - let fretboardHTML = $('
') + const fretboardHTML = $('
') // parsing arguments - let content = { 'data': data } - let getTitle = getArgument('title:', content) - let fretType = getArgument('type:', content).split(' ') + let content = { data: data } + const getTitle = getArgument('title:', content) + const fretType = getArgument('type:', content).split(' ') content = content.data $(fretboardHTML).append($(`
${getTitle}
`)) // create fretboard background HTML - let fretb_orientation = fretType && fretType[0].startsWith('v') ? 'vert' : 'horiz' - let fretb_len = fretType && fretType[0].substring(1) - let fretb_class = fretType && fretType[0][0] + ' ' + fretType[0] - let nut = (fretType[1] && fretType[1] === 'noNut')?'noNut':'' - let svgHTML = $(`
`) - let fretb_bg = require(`./svg/fretb_${fretb_orientation}_${fretb_len}.svg`) - $(svgHTML).append($(fretb_bg)) + 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 - let cellsHTML = $('
') - let switchList = fretb_orientation && fretb_orientation === 'vert' ? switchList_v : switchList_h - let contentCell = content && content.split('') + const cellsHTML = $('
') + const switchList = fretbOrientation && fretbOrientation === 'vert' ? switchListV : switchListH + const contentCell = content && content.split('') // Go through each ASCII character... contentCell && contentCell.forEach(char => { if (switchList[char] !== undefined) { - cellsHTML.append($(switchList[char])); + cellsHTML.append($(switchList[char])) } }) @@ -82,4 +83,4 @@ export const renderFretBoard = (data) => { $(fretboardHTML).append($(svgHTML)) return fretboardHTML[0].outerHTML -} \ No newline at end of file +} From b957b8bda2919affccbeb17916aa59d069f3527a Mon Sep 17 00:00:00 2001 From: Ca Chen Date: Sun, 26 Apr 2020 00:53:22 +0800 Subject: [PATCH 6/8] Use brace wrapped param Signed-off-by: Ca Chen --- public/js/extra.js | 15 ++++++---- public/js/lib/renderer/fretboard/css/i.css | 2 +- public/js/lib/renderer/fretboard/fretboard.js | 29 ++----------------- 3 files changed, 14 insertions(+), 32 deletions(-) diff --git a/public/js/extra.js b/public/js/extra.js index 82af9ae9..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' @@ -23,8 +28,6 @@ import markdownitContainer from 'markdown-it-container' /* Defined regex markdown it plugins */ import Plugin from 'markdown-it-regexp' -import { renderFretBoard } from './lib/renderer/fretboard/fretboard.js' - require('prismjs/themes/prism.css') require('prismjs/components/prism-wiki') require('prismjs/components/prism-haskell') @@ -488,11 +491,12 @@ export function finishView (view) { // 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())) + $ele.html(renderFretBoard($value.text(), params)) } catch (err) { $value.unwrap() $value.parent().append(`
${escapeHTML(err)}
`) @@ -1052,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/lib/renderer/fretboard/css/i.css b/public/js/lib/renderer/fretboard/css/i.css index 18d94098..7b929681 100644 --- a/public/js/lib/renderer/fretboard/css/i.css +++ b/public/js/lib/renderer/fretboard/css/i.css @@ -1 +1 @@ -.fretTitle{color:#555;font-family:"Helvetica Neue",sans-serif;background:#eee;line-height:1.4;font-size:24px;margin:10px 0 10px 0;font-weight:900}section{padding:20px}.content{max-width:960px;margin:auto}.container{width:288px;margin:0 auto}.container_h{max-width:576px;margin:0 auto}@media all and (max-width: 383px){.container_h{max-width:288px}}@media all and (max-width: 576px){.container_h{width:384px}}.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%}.cell.dot .fretb_dot{fill:#27a9e1}.cell.dot.root .fretb_dot{fill:#f05a28}.cell.dot.faded .fretb_dot{opacity:.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 */ +.fretTitle{color:#555;font-family:"Helvetica Neue",sans-serif;background:#eee;line-height:1.4;font-size:26px;margin:10px 0 15px 0;padding:5px;font-weight:900}section{padding:20px}.content{max-width:960px;margin:auto}.container{width:288px;margin:0 auto}.container_h{max-width:576px;margin:0 auto}@media all and (max-width: 383px){.container_h{max-width:288px}}@media all and (max-width: 576px){.container_h{width:384px}}.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%}.cell.dot .fretb_dot{fill:#27a9e1}.cell.dot.root .fretb_dot{fill:#f05a28}.cell.dot.faded .fretb_dot{opacity:.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 index fff163b5..92924984 100644 --- a/public/js/lib/renderer/fretboard/fretboard.js +++ b/public/js/lib/renderer/fretboard/fretboard.js @@ -30,34 +30,11 @@ const switchListH = { ' ': `
${dotEmptyH}
` } -const getArgument = (argName, content) => { - const lineOfContent = content.data.split('\n') - - let argv = '' - let idx = '' - for (idx in lineOfContent) { - if (lineOfContent[idx].startsWith(argName)) { - argv = lineOfContent[idx].split(argName)[1].trim() - break - } - } - - lineOfContent.splice(idx, 1) - content.data = lineOfContent.join('\n') - - return argv -} - -export const renderFretBoard = (data) => { +export const renderFretBoard = (content, { title: fretTitle, type }) => { const fretboardHTML = $('
') + const fretType = type.split(' ') - // parsing arguments - let content = { data: data } - const getTitle = getArgument('title:', content) - const fretType = getArgument('type:', content).split(' ') - content = content.data - - $(fretboardHTML).append($(`
${getTitle}
`)) + $(fretboardHTML).append($(`
${fretTitle}
`)) // create fretboard background HTML const fretbOrientation = fretType && fretType[0].startsWith('v') ? 'vert' : 'horiz' From 95947e203f26b9ae0752ad2d7f0146f8a709599c Mon Sep 17 00:00:00 2001 From: Ca Chen Date: Tue, 26 May 2020 10:45:39 +0800 Subject: [PATCH 7/8] add number system and rwd fretboard Signed-off-by: Ca Chen --- public/js/lib/renderer/fretboard/css/i.css | 2 +- public/js/lib/renderer/fretboard/fretboard.js | 28 +++++++++++++++---- .../js/lib/renderer/fretboard/svg/number1.svg | 10 +++++++ .../lib/renderer/fretboard/svg/number1_h.svg | 10 +++++++ .../js/lib/renderer/fretboard/svg/number2.svg | 10 +++++++ .../lib/renderer/fretboard/svg/number2_h.svg | 10 +++++++ .../js/lib/renderer/fretboard/svg/number3.svg | 10 +++++++ .../lib/renderer/fretboard/svg/number3_h.svg | 10 +++++++ .../js/lib/renderer/fretboard/svg/number4.svg | 10 +++++++ .../lib/renderer/fretboard/svg/number4_h.svg | 10 +++++++ .../js/lib/renderer/fretboard/svg/number5.svg | 10 +++++++ .../lib/renderer/fretboard/svg/number5_h.svg | 10 +++++++ .../js/lib/renderer/fretboard/svg/number6.svg | 10 +++++++ .../lib/renderer/fretboard/svg/number6_h.svg | 10 +++++++ .../js/lib/renderer/fretboard/svg/number7.svg | 10 +++++++ .../lib/renderer/fretboard/svg/number7_h.svg | 10 +++++++ .../js/lib/renderer/fretboard/svg/number8.svg | 10 +++++++ .../lib/renderer/fretboard/svg/number8_h.svg | 10 +++++++ .../js/lib/renderer/fretboard/svg/number9.svg | 10 +++++++ .../lib/renderer/fretboard/svg/number9_h.svg | 10 +++++++ 20 files changed, 204 insertions(+), 6 deletions(-) create mode 100644 public/js/lib/renderer/fretboard/svg/number1.svg create mode 100644 public/js/lib/renderer/fretboard/svg/number1_h.svg create mode 100644 public/js/lib/renderer/fretboard/svg/number2.svg create mode 100644 public/js/lib/renderer/fretboard/svg/number2_h.svg create mode 100644 public/js/lib/renderer/fretboard/svg/number3.svg create mode 100644 public/js/lib/renderer/fretboard/svg/number3_h.svg create mode 100644 public/js/lib/renderer/fretboard/svg/number4.svg create mode 100644 public/js/lib/renderer/fretboard/svg/number4_h.svg create mode 100644 public/js/lib/renderer/fretboard/svg/number5.svg create mode 100644 public/js/lib/renderer/fretboard/svg/number5_h.svg create mode 100644 public/js/lib/renderer/fretboard/svg/number6.svg create mode 100644 public/js/lib/renderer/fretboard/svg/number6_h.svg create mode 100644 public/js/lib/renderer/fretboard/svg/number7.svg create mode 100644 public/js/lib/renderer/fretboard/svg/number7_h.svg create mode 100644 public/js/lib/renderer/fretboard/svg/number8.svg create mode 100644 public/js/lib/renderer/fretboard/svg/number8_h.svg create mode 100644 public/js/lib/renderer/fretboard/svg/number9.svg create mode 100644 public/js/lib/renderer/fretboard/svg/number9_h.svg diff --git a/public/js/lib/renderer/fretboard/css/i.css b/public/js/lib/renderer/fretboard/css/i.css index 7b929681..cd63aa63 100644 --- a/public/js/lib/renderer/fretboard/css/i.css +++ b/public/js/lib/renderer/fretboard/css/i.css @@ -1 +1 @@ -.fretTitle{color:#555;font-family:"Helvetica Neue",sans-serif;background:#eee;line-height:1.4;font-size:26px;margin:10px 0 15px 0;padding:5px;font-weight:900}section{padding:20px}.content{max-width:960px;margin:auto}.container{width:288px;margin:0 auto}.container_h{max-width:576px;margin:0 auto}@media all and (max-width: 383px){.container_h{max-width:288px}}@media all and (max-width: 576px){.container_h{width:384px}}.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%}.cell.dot .fretb_dot{fill:#27a9e1}.cell.dot.root .fretb_dot{fill:#f05a28}.cell.dot.faded .fretb_dot{opacity:.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 */ +.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}.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%}.cell.dot .fretb_dot{fill:#27a9e1}.cell.dot.root .fretb_dot{fill:#f05a28}.cell.dot.faded .fretb_dot{opacity:.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 index 92924984..fdd97fd6 100644 --- a/public/js/lib/renderer/fretboard/fretboard.js +++ b/public/js/lib/renderer/fretboard/fretboard.js @@ -20,19 +20,22 @@ const switchListV = { '^': `
${stringO}
`, x: `
${stringX}
`, '|': `
${dotEmpty}
`, - ' ': `
${dotEmpty}
` + ' ': `
${dotEmpty}
`, + '\n': `
${dotEmpty}
` } const switchListH = { o: `
${dotH}
`, '*': `
${dotH}
`, O: `
${dotH}
`, '-': `
${dotEmptyH}
`, - ' ': `
${dotEmptyH}
` + ' ': `
${dotEmptyH}
`, + '\n': `
${dotEmptyH}
${dotEmptyH}
` } export const renderFretBoard = (content, { title: fretTitle, type }) => { - const fretboardHTML = $('
') const fretType = type.split(' ') + const containerClass = fretType && fretType[0].startsWith('h') ? 'fretContainer_h' : 'fretContainer' + const fretboardHTML = $(`
`) $(fretboardHTML).append($(`
${fretTitle}
`)) @@ -47,11 +50,26 @@ export const renderFretBoard = (content, { title: fretTitle, type }) => { // create cells HTML const cellsHTML = $('
') - const switchList = fretbOrientation && fretbOrientation === 'vert' ? switchListV : switchListH + 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 (switchList[char] !== undefined) { + 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])) } }) 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 From b5b0b8be366963a82fc8b8013c82fac1eb5cdf3c Mon Sep 17 00:00:00 2001 From: Ca Chen Date: Thu, 2 Jul 2020 12:52:19 +0800 Subject: [PATCH 8/8] not to compress css Signed-off-by: Ca Chen --- public/js/lib/renderer/fretboard/css/i.css | 184 ++++++++++++++++++++- 1 file changed, 183 insertions(+), 1 deletion(-) diff --git a/public/js/lib/renderer/fretboard/css/i.css b/public/js/lib/renderer/fretboard/css/i.css index cd63aa63..86e15080 100644 --- a/public/js/lib/renderer/fretboard/css/i.css +++ b/public/js/lib/renderer/fretboard/css/i.css @@ -1 +1,183 @@ -.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}.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%}.cell.dot .fretb_dot{fill:#27a9e1}.cell.dot.root .fretb_dot{fill:#f05a28}.cell.dot.faded .fretb_dot{opacity:.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 */ +/* -- 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 */