status-im
/
codimd
mirror of https://github.com/status-im/codimd.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

Use brace wrapped param 

Signed-off-by: Ca Chen <kiancaca@gmail.com>
This commit is contained in:
Ca Chen 2020-04-26 00:53:22 +08:00
parent aad7dcad95
commit b957b8bda2
3 changed files with 14 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
public/js/extra.js
View File

@ -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(`<div class="alert alert-warning">${escapeHTML(err)}</div>`)
@ -1052,7 +1056,8 @@ const fenceCodeAlias = {
mermaid: 'mermaid',
abc: 'abc',
vega: 'vega',
geo: 'geo'
geo: 'geo',
fretboard: 'fretboard_instance'
}
function highlightRender (code, lang) {

2
public/js/lib/renderer/fretboard/css/i.css
View File

@ -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 */

29
public/js/lib/renderer/fretboard/fretboard.js
View File

@ -30,34 +30,11 @@ const switchListH = {
' ': `<div class='cell empty'>${dotEmptyH}</div>`
}
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 = $('<div class="fretboard_instance"></div>')
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($(`<div class="fretTitle">${getTitle}</div>`))
$(fretboardHTML).append($(`<div class="fretTitle">${fretTitle}</div>`))
// create fretboard background HTML
const fretbOrientation = fretType && fretType[0].startsWith('v') ? 'vert' : 'horiz'