mirror/mcbbs-markdown2bbcode-converter
2
0
Fork 0
mirror of https://github.com/ustc-zzzz/mcbbs-markdown2bbcode-converter.git synced 2024-11-21 01:10:50 +08:00
Code Issues Packages Projects Releases Wiki Activity

Add responsive layout support

Browse Source
This commit is contained in:
Yanbing Zhao 2018-02-05 00:10:10 +08:00
parent 7fcef11f42
commit c2bd3e41c6
6 changed files with 73 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
src/component/Main.js
View File

@ -26,6 +26,16 @@ class Main extends React.Component {
localStorage.markdownInput = text
}
handleChangeToOutput = () => {
document.getElementsByClassName('main-left')[0].classList.add('show-output')
document.getElementsByClassName('main-right')[0].classList.add('show-output')
}
handleChangeToInput = () => {
document.getElementsByClassName('main-left')[0].classList.remove('show-output')
document.getElementsByClassName('main-right')[0].classList.remove('show-output')
}
render () {
return (
<MuiThemeProvider>
@ -33,6 +43,7 @@ class Main extends React.Component {
<Paper
className='main-left'
zDepth={this.state.leftDepth}
onClick={this.handleChangeToInput}
onMouseOut={() => this.setState({leftDepth: 1})}
onMouseOver={() => this.setState({leftDepth: 2})}>
<InputArea defaultValue={this.state.input} onChange={this.handleChange} />
@ -40,6 +51,7 @@ class Main extends React.Component {
<Paper
className='main-right'
zDepth={this.state.rightDepth}
onClick={this.handleChangeToOutput}
onMouseOut={() => this.setState({rightDepth: 1})}
onMouseOver={() => this.setState({rightDepth: 2})}>
<OutputArea value={this.handleTransform(this.state.input)} />

40
src/index.css
View File

@ -1,14 +1,14 @@
html, body {
overflow-x: hidden;
height: 100%;
width: 100%;
margin: 0;
}
.main-left {
position: absolute;
top: 96px;
left: 32px;
bottom: 96px;
width: calc(50% - 50px);
padding: 4px 16px;
overflow-y: auto;
word-spacing: 0px;
@ -17,10 +17,42 @@ html, body {
.main-right {
position: absolute;
top: 96px;
right: 32px;
bottom: 96px;
width: calc(50% - 50px);
padding: 0 16px;
overflow-y: auto;
word-spacing: 0px;
}
@media (min-width: 768px) {
.main-left {
left: 32px;
width: calc(50% - 50px);
}
.main-right {
right: 32px;
width: calc(50% - 50px);
}
}
@media (max-width: 768px) {
.main-left {
left: 32px;
width: calc(100% - 98px);
}
.main-right {
right: calc(-100% + 128px);
width: calc(100% - 98px);
}
.main-left.show-output {
left: calc(-100% + 128px);
width: calc(100% - 98px);
}
.main-right.show-output {
right: 32px;
width: calc(100% - 98px);
}
}

11
src/index.html Normal file
View File

@ -0,0 +1,11 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Convert Github Flavored Markdown to MCBBS Flavored BBCode">
<title>MCBBS Markdown To BBCode Converter</title>
</head>
<body><header></header><main></main></body>
</html>

28
src/index.js
View File

@ -11,15 +11,15 @@ import Marked from 'marked'
const renderer = new Marked.Renderer()
const rendererConfig = {
markdown: {prefix: '(markdown) => ', suffix: '${markdown.split(\'[br]\').join(\' \')}'},
markdown: {prefix: '(markdown) => ', suffix: "${markdown.split('[br]').join(' ')}"},
code: {prefix: '(code, language) => ', suffix: '[code]${code}[/code]'},
blockquote: {prefix: '(quote) => ', suffix: '[quote]${quote.split(\'[br]\').join(\'\\n\')}[/quote]'},
blockquote: {prefix: '(quote) => ', suffix: "[quote]${quote.split('[br]').join('\\n')}[/quote]"},
html: {prefix: '(html) => ', suffix: '${html}'},
heading: {prefix: '(text, level) => ', suffix: '[size=${7-level}][b]${text}[/b][/size]\\n\\n'},
hr: {prefix: '() => ', suffix: '[hr]\\n'},
list: {prefix: '(body, ordered) => ', suffix: '[list${ordered?\'=1\':\'\'}]\\n${body}[/list]\\n'},
list: {prefix: '(body, ordered) => ', suffix: "[list${ordered?'=1':''}]\\n${body}[/list]\\n"},
listitem: {prefix: '(text) => ', suffix: '[*]${text}\\n'},
paragraph: {prefix: '(text) => ', suffix: '[size=3]${text.split(\'\\n\').join(\'[br]\').split(\'[br][br]\').join(\'\\n\')}[/size]\\n\\n'},
paragraph: {prefix: '(text) => ', suffix: "[size=3]${text.split('\\n').join('[br]').split('[br][br]').join('\\n')}[/size]\\n\\n"},
table: {prefix: '(header, body) => ', suffix: '[align=center][table=98%]${header}\\n${body}[/table][/align]'},
tablerow: {prefix: '(content) => ', suffix: '[tr]${content}[/tr]'},
tablecell: {prefix: '(content, header, align) => ', suffix: '[td]${content}[/td]'},
@ -33,12 +33,6 @@ const rendererConfig = {
text: {prefix: '(text) => ', suffix: '${text}'}
}
function create (tag) {
let element = document.createElement(tag)
document.body.appendChild(element)
return element
}
function setRenderer () {
for (let key in rendererConfig) {
let {prefix, suffix} = rendererConfig[key]
@ -53,10 +47,12 @@ function setRenderer () {
setRenderer()
const transformer = markdownText => renderer.markdown(Marked(markdownText, {
renderer: renderer, gfm: true, tables: true, xhtml: false, breaks: false,
pedantic: false, sanitize: false, smartLists: true, smartypants: false
}))
function onTransform (markdownText) {
return renderer.markdown(Marked(markdownText, {
renderer: renderer, breaks: false, gfm: true, tables: true, xhtml: false,
pedantic: false, sanitize: false, smartLists: true, smartypants: false
}))
}
ReactDOM.render(<Header/>, create('header'))
ReactDOM.render(<Main transformer={transformer} />, create('main'))
ReactDOM.render(<Header/>, document.getElementsByTagName('header')[0])
ReactDOM.render(<Main transformer={onTransform} />, document.getElementsByTagName('main')[0])

2
webpack.config.js
View File

@ -23,7 +23,7 @@ module.exports = {
}]
},
plugins: [new HtmlWebpackPlugin({
title: 'MCBBS Markdown To BBCode Converter',
template: './src/index.html',
minify: {collapseWhitespace: true}
}), new DefinePlugin({
'process.env.NODE_ENV': JSON.stringify('production')

3
webpack.development.js
View File

@ -21,7 +21,6 @@ module.exports = {
}]
},
plugins: [new HtmlWebpackPlugin({
title: 'MCBBS Markdown To BBCode Converter',
minify: {collapseWhitespace: true}
template: './src/index.html'
})]
}