vmario/dubdiff
0
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

restructure and complete move to semantic-ui-react

Browse Source
This commit is contained in:
Adam Brown 2016-11-30 14:57:35 -05:00
parent dc96ac104c
commit 822a012129
12 changed files with 15292 additions and 402 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
bower.json
View File

@ -1,12 +0,0 @@
{
"name": "dubdiff",
"version": "2.0.1",
"dependencies": {
"jquery": "~1.11.0",
"bootstrap": "~3.1.1",
"bootstrap-sass-official": "~3.1.1",
"font-awesome": ">=4.1.0"
},
"devDependencies": {
}
}

15458
dist/browser-bundle.js vendored
View File

File diff suppressed because one or more lines are too long

16
dist/index.html vendored
View File

@ -3,20 +3,8 @@
<title>Dubdiff 2</title> <title>Dubdiff 2</title>
</head> </head>
<body> <body>
<div class="table-container">
<div class="table-block footer-push">
<div id="root">If you see this then something is wrong.</div> <div id="root">If you see this then something is wrong.</div>
</div>
<div class="table-block">
<div class="container">
<footer id="footer" class="twelve columns">
<p><a href="http://adamarthurryan.com">Adam Brown</a> | This website is <a href="https://github.com/adamarthurryan/dubdiff-2">open source</a>.</p>
</footer>
</div>
</div>
</div>
<script src="browser-bundle.js"></script> <script src="browser-bundle.js"></script>
<link href="old-dubdiff.css" rel="stylesheet"> <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.2/semantic.min.css"></link>
</body> <link href="main.css" rel="stylesheet"> </body>
</html> </html>

3
package.json
View File

@ -22,7 +22,8 @@
"react-router": "^1.0.0", "react-router": "^1.0.0",
"redux": "^3.5.1", "redux": "^3.5.1",
"redux-router": "^1.0.0-beta5", "redux-router": "^1.0.0-beta5",
"reselect": "^2.5.1" "reselect": "^2.5.1",
"semantic-ui-react": "^0.61.6"
}, },
"devDependencies": { "devDependencies": {
"babel-core": "^6.3.26", "babel-core": "^6.3.26",

26
src/components/Compare.js
View File

@ -1,10 +1,13 @@
import React from 'react' import React from 'react'
import {connect} from 'react-redux' import {connect} from 'react-redux'
import {Segment, Grid, Form} from 'semantic-ui-react'
import * as Actions from '../actions' import * as Actions from '../actions'
import * as Selectors from '../selectors' import * as Selectors from '../selectors'
import Header from './Header' import Header from './Header'
import Footer from './Footer'
import CompareControls from './CompareControls' import CompareControls from './CompareControls'
import Show from './Show' import Show from './Show'
@ -26,29 +29,32 @@ const mapDispatchToProps = dispatch => ({
class Compare extends React.Component { class Compare extends React.Component {
render() { render() {
console.log(this.props.safeInput)
return ( return (
<div> <div>
<Header/> <Header/>
<div className="container">
<form className="row"> <Segment basic padded>
<div className="col-md-2 col-sm-12"> <Grid stackable columns={2}>
<Grid.Column width="3">
<CompareControls/> <CompareControls/>
</div> </Grid.Column>
<div className="col-md-10 col-sm-12 content-well"> <Grid.Column width="13">
<Segment>
{ this.props.isShowDifference ? { this.props.isShowDifference ?
<div>{this.props.diff}</div>: <Show diff={this.props.diff} isMarkdownFormat={this.props.isMarkdownFormat}>{this.props.diff}</Show>:
<Show <Show
text={this.props.isShowOriginal? this.props.safeInput.original: this.props.safeInput.final} text={this.props.isShowOriginal? this.props.safeInput.original: this.props.safeInput.final}
isMarkdownFormat={this.props.isMarkdownFormat} isMarkdownFormat={this.props.isMarkdownFormat}
/> />
} }
</Segment>
</Grid.Column>
</Grid>
</Segment>
</div> <Footer/>
</form>
</div>
</div> </div>
) )
} }

29
src/components/CompareControls.js
View File

@ -2,6 +2,8 @@ import React from 'react'
import {connect} from 'react-redux' import {connect} from 'react-redux'
import {Link} from 'react-router' import {Link} from 'react-router'
import {Button, Icon, Segment} from 'semantic-ui-react'
import * as Actions from '../actions' import * as Actions from '../actions'
import * as Selectors from '../selectors' import * as Selectors from '../selectors'
@ -38,19 +40,20 @@ class CompareControls extends React.Component {
render() { render() {
return ( return (
<div className="form-group"> <Segment.Group>
<div className="controls well btn-group col-lg-12"> <Segment >
<a type="submit" onClick={this.props.onShowOriginal} className={(this.props.isShowOriginal?'active ':'')+'btn btn-block btn-primary'}>Original</a> <Button fluid onClick={this.props.onShowOriginal} active={this.props.isShowOriginal}>Original</Button>
<a type="submit" onClick={this.props.onShowFinal} className={(this.props.isShowFinal?'active ':'')+'btn btn-block btn-primary'}>Final</a> <Button fluid onClick={this.props.onShowFinal} active={this.props.isShowFinal}>Final</Button>
<a type="submit" onClick={this.props.onShowDifference} className={(this.props.isShowDifference?'active ':'')+'btn btn-block btn-primary'}>Difference</a> <Button fluid onClick={this.props.onShowDifference} active={this.props.isShowDifference}>Difference</Button>
</div> </Segment>
<div className="controls well btn-group col-lg-12">
<a className={(this.props.isMarkdownFormat ? "active " : "")+"btn btn-block btn-primary"} type="submit" onClick={this.onClickMarkdownFormat.bind(this)}> <Segment >
<span className={(this.props.isMarkdownFormat ? "glyphicon-ok " : "") + "glyphicon"}></span> <Button fluid active={this.props.isMarkdownFormat} type="submit" onClick={this.onClickMarkdownFormat.bind(this)}>
&nbsp; As Markdown {this.props.isMarkdownFormat ? <Icon name="checkmark"/> : <span/>}
</a> &nbsp;As Markdown
</div> </Button>
</div> </Segment>
</Segment.Group>
) )
} }
} }

17
src/components/Header.js
View File

@ -1,16 +1,13 @@
import React from 'react' import React from 'react'
import {Segment, Header} from 'semantic-ui-react'
import {Link} from 'react-router' import {Link} from 'react-router'
const Header = (props) => ( const SiteHeader = (props) => (
<nav> <Segment basic padded textAlign="center" as="header" id='masthead'>
<header id="banner" className="hero-unit"> <Header><Link to="/">dubdiff</Link></Header>
<div className="container"> </Segment>
<h1><Link to="/">dubdiff</Link></h1>
<h3></h3>
</div>
</header>
</nav>
) )
export default Header export default SiteHeader

46
src/components/Main.js
View File

@ -2,10 +2,13 @@
import React from 'react' import React from 'react'
import {connect} from 'react-redux' import {connect} from 'react-redux'
import {Segment, Grid, Form} from 'semantic-ui-react'
import * as Actions from '../actions' import * as Actions from '../actions'
import * as Selectors from '../selectors' import * as Selectors from '../selectors'
import Header from './Header' import Header from './Header'
import Footer from './Footer'
import MainControls from './MainControls' import MainControls from './MainControls'
const mapStateToProps = (state) => ({ const mapStateToProps = (state) => ({
@ -30,22 +33,37 @@ class Main extends React.Component {
return ( return (
<div> <div>
<Header/> <Header/>
<div className="container">
<form className="row"> <Segment basic padded>
<div className="col-md-2 col-sm-12"> <Grid stackable columns={3}>
<Grid.Column width="3">
<MainControls/> <MainControls/>
</Grid.Column>
<Grid.Column width="6">
<Form>
<Form.Field>
<label>Original</label>
<textarea value={this.props.input.original} onChange={event => this.props.onChangeOriginal(event.target.value)}></textarea>
</Form.Field>
</Form>
</Grid.Column>
<Grid.Column width="6">
<Form>
<Form.Field>
<label>Final</label>
<textarea value={this.props.input.final} onChange={event => this.props.onChangeFinal(event.target.value)}></textarea>
</Form.Field>
</Form>
</Grid.Column>
</Grid>
</Segment>
<Footer/>
</div> </div>
<div className="col-lg-5 col-sm-12 form-group">
<label htmlFor="docA">Original</label>
<textarea id="docA" value={this.props.input.original} onChange={event => this.props.onChangeOriginal(event.target.value)} className="form-control"></textarea>
</div>
<div className="col-lg-5 col-sm-12 form-group">
<label htmlFor="docB">Final</label>
<textarea id="docB" value={this.props.input.final} onChange={event => this.props.onChangeFinal(event.target.value)} className="form-control"></textarea>
</div>
</form>
</div>
</div>
) )
} }
} }

25
src/components/MainControls.js
View File

@ -2,6 +2,8 @@ import React from 'react'
import {connect} from 'react-redux' import {connect} from 'react-redux'
import {Link} from 'react-router' import {Link} from 'react-router'
import {Button, Icon, Segment} from 'semantic-ui-react'
import * as Actions from '../actions' import * as Actions from '../actions'
import * as Selectors from '../selectors' import * as Selectors from '../selectors'
@ -32,17 +34,18 @@ class MainControls extends React.Component {
render() { render() {
return ( return (
<div className="form-group"> <Segment.Group>
<div className="controls well col-lg-12"> <Segment >
<Link to="compare" className="btn btn-block btn-primary">Compare</Link> <Link to="compare"><Button fluid>Compare</Button></Link>
</div> </Segment>
<div className="controls well btn-group col-lg-12">
<a className={(this.props.isMarkdownFormat ? "active " : "")+"btn btn-block btn-primary"} type="submit" onClick={this.onClickMarkdownFormat.bind(this)}> <Segment >
<span className={(this.props.isMarkdownFormat ? "glyphicon-ok " : "") + "glyphicon"}></span> <Button fluid active={this.props.isMarkdownFormat} type="submit" onClick={this.onClickMarkdownFormat.bind(this)}>
&nbsp; As Markdown {this.props.isMarkdownFormat ? <Icon name="checkmark"/> : <span/>}
</a> &nbsp;As Markdown
</div> </Button>
</div> </Segment>
</Segment.Group>
) )
} }
} }

31
src/components/Show.js
View File

@ -1,11 +1,32 @@
import React from 'react' import React from 'react'
const Show = (props) => (
<div> const Show = (props) => {
<pre> return <div>
{props.text} <pre style={{whiteSpace:'pre-wrap'}}>
{props.text ?
props.text:
props.diff ?
diffToPre(props.diff) :
null
}
</pre> </pre>
</div> </div>
) }
export default Show export default Show
function diffToPre(diff) {
return diff.map(part => (
part.added ? <span><ins>{part.value}</ins>{ifNotNewlineSpace(part.value)}</span> :
part.removed ? <span><del>{part.value}</del>{ifNotNewlineSpace(part.value)}</span> :
<span>{part.value}{ifNotNewlineSpace(part.value)}</span>
))
}
const ifNotNewlineSpace = str => {
console.log(str)
return !str.endsWith('\n') ? ' ' : ''
}

14
src/selectors.js
View File

@ -4,10 +4,11 @@ import { createSelector } from 'reselect'
import React from 'react' import React from 'react'
import * as JsDiff from 'diff'
import {Format, Show} from './reducers' import {Format, Show} from './reducers'
import * as Dubdiff from './util/dubdiff'
const input = (state) => state.input const input = (state) => state.input
const format = (state) => state.format const format = (state) => state.format
@ -44,14 +45,7 @@ export const isShowDifference= isShow(Show.DIFFERENCE)
export const diff = createSelector( export const diff = createSelector(
[format, input], [format, input],
(format, input) => { (format, input) => {
return Dubdiff.plaintextDiff(input.original, input.final)
let diff = JsDiff.diffLines(input.original.replace(/ /g, '###\n'), input.final.replace(/ /g, '###\n'))
console.log(diff, diff.map(({added, removed, value})=>({added, removed, value:value.replace(/###\n/g, ' ')})))
return diff.map(({added, removed, value})=>({added, removed, value:value.replace(/###\n/g, ' ')})).map(part => (
part.added ? <ins>{part.value}</ins> :
part.removed ? <del>{part.value}</del> :
<span>{part.value}</span>
))
/* /*
let diff = JsDiff.diffWords (input.original.replace(/ /g, ' '), input.final.replace(/ /g, ' ')) let diff = JsDiff.diffWords (input.original.replace(/ /g, ' '), input.final.replace(/ /g, ' '))
return diff.map(({added, removed, value})=>({added, removed, value:value.replace(/ /g, ' ')})).map(part => ( return diff.map(({added, removed, value})=>({added, removed, value:value.replace(/ /g, ' ')})).map(part => (
@ -63,6 +57,8 @@ export const diff = createSelector(
} }
) )
/* /*
html diff html diff
--- ---

5
webpack.config.js
View File

@ -5,7 +5,8 @@ module.exports = {
filename: './dist/browser-bundle.js' filename: './dist/browser-bundle.js'
}, },
target: 'web', target: 'web',
devtool: 'eval-module-source-map', // devtool: 'eval-module-source-map',
module: { module: {
loaders: [ loaders: [
{ {
@ -13,7 +14,7 @@ module.exports = {
loader: 'babel-loader', loader: 'babel-loader',
query: { query: {
presets: ['es2015', 'react'], presets: ['es2015', 'react'],
compact: "false" compact: "true"
} }
}, },
] ]