From 370423aefc09d304518539223642ac0704a4bb52 Mon Sep 17 00:00:00 2001 From: Ca Chen Date: Thu, 2 Apr 2020 20:43:56 +0800 Subject: [PATCH] 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: [{